/*
 * One stylesheet for the whole site, because the whole site is five pages of text and one button.
 *
 * No framework and no build step: this is deployed by `firebase deploy --only hosting` straight from
 * `public/`, and a page that Google Play's reviewer has to be able to open must not depend on
 * anything that can fail to compile. Every colour below is the app's own — Palette.green,
 * Palette.blue, and the ink and muted greys from `constants/palette.ts` — so the invite link does not
 * arrive looking like somebody else's product.
 */

:root {
  --green: #00ab4f;
  --green-deep: #00913f;
  --blue: #18a7e3;
  --blue-dark: #0c87bd;
  --ink: #1b2d54;
  --muted: #6d7ca0;
  --line: #dce5f1;
  --card: #ffffff;
  --wash: #f4f8f4;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--green) 0 240px, var(--wash) 240px 100%);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 20px 64px;
}

/* The wordmark, set rather than drawn — the logo is a bundled asset in the app, and shipping a
   second copy here would be one more thing to keep in step for no gain. */
.brand {
  display: block;
  margin: 0 0 26px;
  text-align: center;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.9px;
  text-decoration: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px 26px;
  box-shadow: 0 14px 40px rgba(27, 45, 84, 0.09);
}

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

h2 {
  margin: 28px 0 8px;
  font-size: 17px;
  letter-spacing: -0.3px;
}

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

.lede {
  color: var(--muted);
  font-size: 16.5px;
}

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

a {
  color: var(--green-deep);
  font-weight: 600;
}

ol,
ul {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--ink);
}

li {
  margin-bottom: 7px;
}

.btn {
  display: block;
  margin: 22px 0 0;
  padding: 15px 20px;
  border: 0;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--blue), var(--blue-dark));
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(24, 167, 227, 0.3);
}

.btn.secondary {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
}

/* The token, shown so it can be typed in by hand when the deep link cannot open. Monospace and
   breakable, because it is 43 characters of base64url and it must not run off a phone screen. */
.token {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--wash);
  color: var(--ink);
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #e8f7ed;
  color: var(--green-deep);
  font-size: 12.5px;
  font-weight: 700;
}

.foot {
  margin: 26px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.foot a {
  color: var(--muted);
  margin: 0 7px;
}

/* Only shown when the page decides it is needed, so it starts out of the flow entirely. */
[hidden] {
  display: none !important;
}