/* Legal pages are plain static HTML, deliberately: they must render with no
   build step, no JavaScript and no app, because that is what "publicly
   reachable without installing the app" means. Colours are inlined here rather
   than imported from the token sheet for the same reason — one file, no
   dependencies, nothing to break. */
:root {
  color-scheme: light dark;
  --bg: #fbf9fd;
  --surface: #ffffff;
  --border: #e0d8ea;
  --ink: #17131d;
  --ink-muted: #5d5568;
  --brand-ink: #58318a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0d14;
    --surface: #17131d;
    --border: #2c2537;
    --ink: #f2eef7;
    --ink-muted: #a79fb5;
    --brand-ink: #c9b0ff;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans Bengali', sans-serif;
  line-height: 1.65;
  padding: 2rem 1.25rem 5rem;
}
main {
  max-width: 44rem;
  margin: 0 auto;
}
a {
  color: var(--brand-ink);
}
h1 {
  font-size: 2rem;
  letter-spacing: -0.025em;
  margin: 0 0 0.25rem;
  text-wrap: balance;
}
h2 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin: 2rem 0 0.5rem;
}
h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.35rem;
}
.updated {
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin: 0 0 2rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.crumb img {
  width: 28px;
  height: 28px;
  border-radius: 22%;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
th,
td {
  text-align: start;
  padding: 0.55rem 0.5rem 0.55rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}
label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.9375rem;
}
input {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.9rem;
  min-height: 2.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--ink);
}
button {
  font: inherit;
  font-weight: 650;
  margin-top: 1rem;
  padding: 0.75rem 1.25rem;
  min-height: 2.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--brand-ink);
  color: var(--bg);
  cursor: pointer;
}
.result {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.875rem;
}
footer a {
  margin-inline-end: 1rem;
}

/* THE PROCESSOR TABLE on privacy-policy.html — who touches your data, what we
   send them and why. It scrolls inside itself rather than pushing the page
   sideways, because most people read this on a phone. Colours live here
   because this sheet is the legal pages' own palette; the app's token sheet
   does not reach a static HTML page. */
.processors {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.processors th,
.processors td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(128, 110, 105, 0.3);
  vertical-align: top;
}
.processors th {
  font-weight: 600;
  white-space: nowrap;
}
.processors td:first-child {
  white-space: nowrap;
  font-weight: 600;
}