/* The terms, privacy and refund pages: one reading column in the website's colours and fonts. Tables turn into
   stacked rows on a phone, so nothing scrolls sideways. */
:root {
  --bg: #101112; --surface: #17191a; --surface-2: #1d2021; --border: #2a2d2e;
  --text: #e9eae5; --muted: #9a9f98; --lime: #d2ff50; --lime-ink: #151810; --warn: #ffb547;
  --font: 'DM Sans', 'Segoe UI', Arial, sans-serif; --display: 'Space Grotesk', 'DM Sans', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); }
a { color: var(--lime); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }

header { position: sticky; top: 0; z-index: 10; background: rgba(16, 17, 18, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 15px var(--display); letter-spacing: 1.5px; }
.brand img { width: 30px; height: 30px; }
header nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover, header nav a[aria-current="page"] { color: var(--text); }

main { width: min(760px, 100% - 32px); margin: 0 auto; padding: 48px 0 72px; }
h1 { font: 700 clamp(34px, 6vw, 48px)/1.1 var(--display); letter-spacing: -.5px; margin: 0 0 8px; }
.updated { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
h2 { font: 600 22px/1.3 var(--display); margin: 40px 0 10px; padding-top: 22px; border-top: 1px solid var(--border); }
h3 { font: 600 16px/1.4 var(--font); margin: 22px 0 6px; }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
strong { font-weight: 600; }

.short { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--lime); border-radius: 8px; padding: 16px 20px 6px; margin: 0 0 8px; }
.short h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--lime); }

/* While the pages are drafts: a banner, and the answers still needed from the owner. */
.draft { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); color: var(--text); border-radius: 8px; padding: 12px 16px; font-size: 14px; margin: 0 0 24px; }
mark.todo { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-radius: 3px; padding: 0 3px; }

.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--border); }
thead th { border-top: 0; background: var(--surface-2); color: var(--muted); font: 600 11px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; }
tbody th { font-weight: 600; }

footer { border-top: 1px solid var(--border); padding: 32px 0 48px; color: var(--muted); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
footer .links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
footer a { color: inherit; }

@media (max-width: 680px) {
  main { padding-top: 32px; }
  header nav { margin-left: 0; width: 100%; padding-bottom: 12px; }
  footer .links { margin-left: 0; }
  .table-wrap { overflow: visible; }
  table, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tr { padding: 12px 14px; border-top: 1px solid var(--border); }
  tbody tr:first-child { border-top: 0; }
  th, td { padding: 2px 0; border: 0; }
  td::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
}