/* The privacy policy and terms (privacy.html, terms.html): a calm reading page in the app's type and colours. */
:root {
  --mist: #f1f2f5;
  --ink: #15161b;
  --ink2: #5c5f6b;
  --line: #dfe1e8;
  --lilac: #5b4be0;
  --card: #fff;
  --display: "Parkinsans", "Onest", system-ui, sans-serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
}

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 760px; margin: 0 auto; padding: 20px 20px 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 20px var(--display); }
.brand img { width: 36px; height: 36px; border-radius: 10px; background: #e7e3ff; }
.bar nav a { color: var(--ink2); text-decoration: none; font-weight: 600; margin-left: 18px; }
.bar nav a[aria-current="page"] { color: var(--ink); }

main {
  max-width: 760px; margin: 24px auto 48px; padding: 36px 40px 40px;
  background: var(--card); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(21, 22, 27, .04), 0 8px 28px rgba(21, 22, 27, .06);
}
h1 { font: 700 40px/1.1 var(--display); letter-spacing: -.01em; margin: 0 0 8px; }
.stamp { color: var(--ink2); font-size: 15px; margin: 0 0 28px; }
h2 { font: 700 20px/1.3 var(--sans); margin: 36px 0 8px; }
h3 { font: 700 17px/1.4 var(--sans); margin: 24px 0 4px; }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
a { color: var(--lilac); }
.short {
  background: #f4f2ff; border-radius: 18px; padding: 18px 22px; margin: 0 0 8px;
}
.short p:last-child { margin-bottom: 0; }
.note { color: var(--ink2); font-size: 15px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 36px; }

footer { max-width: 760px; margin: 0 auto 40px; padding: 0 20px; color: var(--ink2); font-size: 14px; }
footer a { color: var(--ink2); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .bar { padding: 16px 16px 0; }
  main { margin: 16px 0 32px; padding: 26px 20px 28px; border-radius: 22px; }
  h1 { font-size: 32px; }
}