/*
  The look of the pages the app stores link to: privacy, terms, support,
  account deletion.

  Shared rather than repeated in each file. They are read by reviewers and by
  people who have just been annoyed by something, so they are plain, wide
  enough to read on a phone, and use the app's own green so the page and the
  app are recognisably the same thing.
*/
:root {
  --green: #2f6f4e;
  --green-dark: #245a3f;
  --green-soft: #e6f1ea;
  --ink: #16241c;
  --body: #24352c;
  --muted: #4f6159;
  --line: #e2e8e0;
  --bg: #f4f6f2;
  --amber-soft: #fdf3e2;
  --amber: #b5761f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

header { background: var(--green); color: #fff; padding: 30px 20px; }
header h1 { margin: 0; font-size: 25px; letter-spacing: -0.2px; }
header p { margin: 6px 0 0; opacity: .85; font-size: 14.5px; }
header a { color: #d8e9df; }

.wrap { max-width: 720px; margin: 0 auto; }
main { padding: 28px 20px 64px; }

h2 { font-size: 18px; margin: 32px 0 8px; color: var(--ink); }
h2:first-of-type { margin-top: 8px; }
h3 { font-size: 15.5px; margin: 20px 0 4px; color: var(--ink); }
.lead { font-size: 17px; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
a { color: var(--green); }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; margin: 18px 0;
}
.note {
  background: var(--amber-soft); border-left: 4px solid var(--amber);
  border-radius: 0 8px 8px 0; padding: 14px 16px; margin: 18px 0;
}
.muted { color: var(--muted); font-size: 14px; }

table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.btn {
  display: inline-block; background: var(--green); color: #fff;
  text-decoration: none; font-weight: 600;
  padding: 12px 20px; border-radius: 10px; margin: 6px 0;
}
.btn:hover { background: var(--green-dark); }

footer { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 16px; }
footer a { margin-right: 14px; }