/* Policy pages. Deliberately plain and readable — a Stripe reviewer and a
   creator deciding whether to trust us are reading the same document. */
:root {
  --bg: #0F1115; --card: #161920; --border: #262b35; --border-strong: #333a47;
  --text: #E8EAED; --text-secondary: #A8AEB9; --text-tertiary: #767D8B;
  --gold: #D5AE68; --r-lg: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 80px; }
header.site { border-bottom: 1px solid var(--border); margin-bottom: 34px; padding-bottom: 18px; }
/* The horizontal lockup, not the icon beside the word: the lockup
   already sets the mark against the typography, and an icon this
   small loses the detail that makes it readable. The alt text
   carries the name for anything that does not load it.

   The background is keyed out of this one. The lockup as supplied
   sits on its own near-black card, and against a page that is a
   slightly different near-black that card reads as a sticker
   somebody pasted on. Everything this sits on is dark, so the
   handful of dark pixels inside the mark simply show the page. */
header.site a.brand { display: inline-block; text-decoration: none; line-height: 0; }
header.site a.brand img { width: auto; height: 40px; display: block; }
header.site .op { color: var(--text-tertiary); font-size: 13px; margin-top: 3px; }
h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { color: var(--text-secondary); }
li { margin-bottom: 7px; }
strong { color: var(--text); }
a { color: var(--gold); }
.updated { color: var(--text-tertiary); font-size: 14px; margin: 0 0 26px; }
.note {
  background: var(--card); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--gold); border-radius: var(--r-lg);
  padding: 15px 17px; margin: 22px 0;
}
.note p { margin: 0; color: var(--text); font-size: 15px; }
.note p + p { margin-top: 9px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
td { color: var(--text-secondary); }
.tablewrap { overflow-x: auto; }
footer.site {
  border-top: 1px solid var(--border); margin-top: 56px; padding-top: 20px;
  color: var(--text-tertiary); font-size: 14px;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
footer.site a { color: var(--text-secondary); text-decoration: none; }
footer.site a:hover { color: var(--gold); }
@media (max-width: 560px) { h1 { font-size: 25px; } .wrap { padding: 22px 17px 60px; } }

/* Injected by preview.js — see that file to switch it off in one edit. */
.preview-note {
  background: var(--card); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--gold); border-radius: var(--r-lg);
  padding: 14px 16px; margin: 0 0 26px; font-size: 15px; color: var(--text);
}
.preview-note strong { color: var(--gold); }