/* The page is visible for a second or two before Paddle's overlay covers
   it, and it is the fallback for a visitor who arrives without a
   transaction. It is deliberately plain: a waypoint, not a destination.

   No web font is loaded. A font would be a second origin on the one page in
   this workspace that must not collect any, and the system stack renders
   instantly. */

:root {
  color-scheme: light dark;
  --ink: #16181d;
  --ink-muted: #5b6270;
  --ground: #fbfbfc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eceef2;
    --ink-muted: #a3aab8;
    --ground: #14161a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  /* Two rows rather than one, so the waypoint stays centred while the legal
     links sit at the bottom edge instead of sharing the middle with it. */
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 2rem;
  background: var(--ground);
  color: var(--ink);
  font:
    16px/1.6 system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

main {
  max-width: 32rem;
  text-align: center;
}

.brand {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

p {
  margin: 0;
  color: var(--ink-muted);
}

/* Reachable without being prominent. The links are the visitor's route to the
   information about the disclosure to Paddle that loading paddle.js makes, and
   they are not part of what the page is for. */
footer {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  padding-top: 2rem;
  font-size: 0.875rem;
}

footer a {
  color: var(--ink-muted);
}