/* Self-contained, no webfonts, no CDN — the same rule the app's reports follow.
   A privacy policy that pulls a font from a third party is asking the reader to
   make a request to someone they were not told about, on the page telling them
   nobody is watching. The whole site keeps that rule so the claim is true
   everywhere, not just on the page that makes it. */
:root {
  --bg: #ffffff;
  --ink: #1c1c1e;
  --muted: #6b6b70;
  --rule: #e4e4e8;
  --brand: #0FA3A9;
  --brand-ink: #0b7a7f;
  --panel: #f7f7f9;
  --navy: #12233f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a; --ink: #ececf0; --muted: #9a9aa2;
    --rule: #2c2c33; --panel: #1e1e24;
    --brand: #2fc7cd; --brand-ink: #7ee3e7; --navy: #0c1626;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0 20px 80px;
  background: var(--bg); color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 760px; margin: 0 auto; }
.wide { max-width: 940px; }

/* Header and navigation */
header {
  padding: 26px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 34px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.mark { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.mark svg { width: 30px; height: 30px; flex: none; }
.mark span { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
nav { display: flex; gap: 20px; flex-wrap: wrap; }
nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
nav a:hover, nav a.here { color: var(--ink); }
nav a.here { font-weight: 600; }

h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; margin: 30px 0 8px; }
h2 { font-size: 22px; letter-spacing: -0.015em; margin: 42px 0 10px; }
h3 { font-size: 17px; margin: 26px 0 6px; }
.updated, .sub { color: var(--muted); margin: 0; }
.sub { font-size: 19px; line-height: 1.5; }
p, li { color: var(--ink); }
a { color: var(--brand-ink); }
ul { padding-left: 22px; }
li { margin: 6px 0; }
code {
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel); padding: 2px 6px; border-radius: 5px;
}

.lede {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 10px; padding: 16px 18px; margin: 26px 0;
}
.lede p { margin: 0; }
.note { color: var(--muted); font-size: 15px; }

/* Call to action */
.cta {
  display: inline-block; background: var(--brand); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 16px;
  padding: 11px 20px; border-radius: 9px; margin: 6px 10px 6px 0;
}
.cta.secondary { background: transparent; color: var(--brand-ink); border: 1px solid var(--rule); }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 26px 0; }
.card { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; background: var(--panel); }
.card h3 { margin: 0 0 5px; font-size: 16px; }
.card p { margin: 0; font-size: 15px; color: var(--muted); }

/* FAQ */
details {
  border-bottom: 1px solid var(--rule); padding: 14px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; }
details[open] summary::after { content: "\2212"; }
details p:last-child, details ul:last-child { margin-bottom: 0; }
details p:first-of-type { margin-top: 10px; }

footer {
  margin-top: 60px; padding-top: 22px;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px;
}
footer a { color: var(--muted); }