/* The privacy page's own look. It is live before the launch page, so it carries its own copy of
   the app's TextPA tokens (apps/mobile/src/design-system/tokens/textpa.ts), Manrope (self-hosted: the CSP allows nothing from anywhere else) and
   the mark, and the Coming soon page's styles.css stays black on white. The tokens and the
   header band, heading and footer styles match landing/styles.css: change them together.
   The navy band stays navy in both schemes; the document below it flips. */
@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/manrope-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/manrope-latin-800-normal.woff2") format("woff2");
}

:root {
  --navy: #1e1c5b;
  --surface: #f7f6fc;
  --lilac: #b3b5d8;

  --bg: var(--surface);
  --text: #213b81;
  --muted: #3f4469;
  --rule: #dcdbe8;
  --accent: var(--navy);
  --band: var(--navy);
  --focus: #6f54dc;

  --gutter: clamp(1rem, 4vw, 2rem);
  --column: 42rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--navy);
    --text: var(--surface);
    --muted: var(--lilac);
    --rule: #34336f;
    --accent: #dc5bb6;
    --band: #16144a;
    --focus: #dc5bb6;
  }
}

* {
  box-sizing: border-box;
}

:root {
  accent-color: var(--focus);
  caret-color: var(--focus);
  scrollbar-color: var(--rule) var(--bg);
}

::selection {
  background: #dc9ad6;
  color: var(--navy);
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background: #dc5bb6;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    500 1.0625rem/1.6 "Manrope",
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2 {
  margin: 0;
  font-weight: 800;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 74rem);
  margin-inline: auto;
}

/* Header: the landing page's band, with the mark and wordmark linking home. */

.band {
  background: var(--band);
  color: var(--surface);
}

.site-header {
  display: flex;
  align-items: center;
  padding-block: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}

.wordmark {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* The document: a readable column. The title and date sit in the navy band, full width. */

.doc main {
  display: grid;
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
}

.doc main > * {
  width: min(100% - 2 * var(--gutter), var(--column));
  margin: 1rem auto 0;
}

.doc main > h1,
.doc main > h1 + p {
  width: auto;
  margin: 0;
  padding-inline: max(var(--gutter), calc((100% - var(--column)) / 2));
  background: var(--band);
  color: var(--surface);
}

.doc main > h1 {
  padding-top: clamp(1.5rem, 5vw, 3rem);
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.doc main > h1 + p {
  padding-block: 1rem clamp(2.5rem, 6vw, 4rem);
  color: var(--lilac);
}

.doc main > h1 + p + p {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 1.15rem;
}

.doc h2 {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.doc ul {
  padding: 0;
  list-style: none;
}

.doc li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--rule);
}

.doc li:last-child {
  border-bottom: 1px solid var(--rule);
}

.doc li::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}

.doc table {
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc th,
.doc td {
  padding: 0.85rem 0.75rem 0.85rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.doc tr:last-child > * {
  border-bottom: 1px solid var(--rule);
}

.doc th {
  font-weight: 800;
}

.doc td {
  color: var(--muted);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}