/* The same palette and the same faces as the app, so the policy page and the
   product visibly belong to each other. Light and dark both, because the person
   arriving here tapped a link inside an app that respects the system setting. */
:root {
  --light: #F5F5F2; --paper: #FFFFFF; --ink: #1B2029; --dim: #6A7280;
  --line: rgba(23, 28, 38, .14); --accent: #1A6580;
}
@media (prefers-color-scheme: dark) {
  :root {
    --light: #0B0E12; --paper: #1A1F28; --ink: #F1F2F4; --dim: #99A1AD;
    --line: rgba(255, 255, 255, .16); --accent: #58AFCC;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--light); color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding: 40px 22px 80px;
}
main { max-width: 660px; margin: 0 auto; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.25; }
h1 { font-size: 30px; margin-bottom: 6px; }
h2 { font-size: 20px; margin: 34px 0 10px; }
p, ul { margin-bottom: 14px; }
ul { padding-left: 20px; }
li { margin-bottom: 6px; }
a { color: var(--accent); }
.sub { color: var(--dim); margin-bottom: 30px; }
.mark {
  width: 13px; height: 13px; border-radius: 50%; background: #63C9E6;
  box-shadow: 0 0 0 7px rgba(99, 201, 230, .22); display: block; margin-bottom: 26px;
}
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin: 22px 0;
}
.card p:last-child { margin-bottom: 0; }
footer {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 14px;
}
footer a { margin-right: 16px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }