/* Single stylesheet for all four pages. Self-contained: no CDN, no webfont, no
   build step. A Stripe reviewer opening this on a phone or with a slow link
   should see the same page as everyone else. */

/* color-scheme is load-bearing, not decoration. Without it Chrome applies its own
   auto-dark-mode to any page that has not opted in, which inverted this one into a
   low-contrast grey and left the notice boxes nearly unreadable. Declaring both
   schemes hands the decision back to us and gives dark-mode readers a palette we
   chose rather than one a browser heuristic derived. */
:root {
  color-scheme: light dark;
  --ink: #1a1a1a;
  --muted: #5c5c5c;
  --line: #e2e2e2;
  --bg: #ffffff;
  --panel: #f7f9fb;
  --accent: #1f4e79;
  --max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9e9e9;
    --muted: #a6a6a6;
    --line: #333333;
    --bg: #151515;
    --panel: #1c242e;
    --accent: #7fb0dd;
  }
}

* { box-sizing: border-box; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

header.site {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  margin-bottom: 40px;
}
header.site .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; justify-content: space-between; }
.brand { font-size: 18px; font-weight: 600; letter-spacing: .01em; color: var(--ink); text-decoration: none; }
nav a { font-size: 14px; color: var(--muted); text-decoration: none; margin-left: 18px; }
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--accent); text-decoration: underline; }

h1 { font-size: 30px; line-height: 1.25; margin: 0 0 18px; }
h2 { font-size: 20px; line-height: 1.3; margin: 38px 0 12px; }
h3 { font-size: 16px; margin: 24px 0 8px; }
p, li { color: var(--ink); }
.lead { font-size: 18px; color: var(--muted); margin-bottom: 32px; }

a { color: var(--accent); }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  margin: 28px 0;
  background: var(--panel);
}
.notice p { margin: 0; }

.card {
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin: 16px 0;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

dl.contact { margin: 0; }
dl.contact dt { font-weight: 600; margin-top: 12px; }
dl.contact dd { margin: 0; }

.updated { color: var(--muted); font-size: 14px; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 28px 0 56px;
  color: var(--muted);
  font-size: 14px;
}
footer.site a { color: var(--muted); }
footer.site .addr { font-style: normal; margin: 0 0 14px; }
footer.site .links a { margin-right: 16px; display: inline-block; }

@media (max-width: 520px) {
  h1 { font-size: 25px; }
  nav a { margin-left: 0; margin-right: 16px; }
  header.site .wrap { display: block; }
  nav { margin-top: 8px; }
}