/* Thrivr brand tokens, measured from thrivr.co.uk. System fonts only: the page loads nothing
   from another origin (see the Content-Security-Policy in hosting.json). */
:root {
  --bg: #000;
  --surface: #111;
  --text: #fff;
  --muted: #b8bec9;
  --teal: #00d1bc;
  --purple: #752cd2;
  --magenta: #ff007e;
  --cyan: #00c4d6;
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(255, 0, 126, 0.35), transparent 70%),
    radial-gradient(60% 40% at 85% 10%, rgba(117, 44, 210, 0.45), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, rgba(0, 196, 214, 0.25), transparent 70%),
    var(--bg);
}

.card {
  width: 100%;
  max-width: 440px;
  padding: 32px 24px;
  background: var(--surface);
  border: 1px solid #222;
}

.pill {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 13px;
  background: var(--teal);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.lead { margin: 0 0 24px; color: var(--muted); }

.steps { margin: 0 0 24px; padding-left: 1.4em; }
.steps li { margin-bottom: 8px; }

.buttons { display: grid; gap: 12px; margin-top: 16px; }

.button {
  display: block;
  padding: 14px 16px;
  background: var(--teal);
  color: #000;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.button:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.note { margin: 24px 0 0; font-size: 15px; color: var(--muted); }

[hidden] { display: none !important; }