* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #fafafa;
  color: #000;
  font-family: "Poppins", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 72px 24px 64px;
}

[hidden] { display: none !important; }

h1 {
  font-family: "Lexend", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
  margin-bottom: 72px;
}

h1.with-lede { margin-bottom: 4px; }

/* The icon's own letterform and drop, no tile: the mark sits on the page the
   way it sits on the app's welcome screen. It keeps the icon's full 1024pt
   canvas, so the visible mark is smaller than the box. */
.mark {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 4px;
}

h2 {
  font-family: "Lexend", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.4;
  margin-top: 72px;
  margin-bottom: 20px;
}

.lede {
  text-align: center;
  color: #86878a;
  margin-bottom: 40px;
}

.row {
  display: flex;
  gap: 26px;
  margin-bottom: 40px;
  color: #86878a;
}

.row b { color: #000; font-weight: 400; }

.icon { flex-shrink: 0; margin-top: 1px; color: #000; }

.contact {
  display: flex;
  gap: 26px;
  align-items: center;
  background: #f1f1f2;
  border-radius: 8px;
  padding: 28px 26px;
  margin-top: 72px;
  color: #86878a;
}

.contact a {
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contact a:hover { text-decoration: underline; }
.contact a .icon { margin: 0; width: 20px; height: 20px; }

h2 + .contact { margin-top: 0; }

.get { margin-bottom: 72px; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #000;
  color: #fafafa;
  border-radius: 999px;
  padding: 20px 26px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.cta .icon { color: inherit; margin: 0; }
.cta:hover { opacity: 0.85; }
.cta[aria-busy="true"] { opacity: 0.5; pointer-events: none; }

.escape {
  display: flex;
  gap: 26px;
  background: #f1f1f2;
  border-radius: 8px;
  padding: 28px 26px;
  margin-bottom: 72px;
  color: #86878a;
}

.escape b { color: #000; font-weight: 400; }
.escape ol { margin: 16px 0 0 20px; }
.escape li { margin-bottom: 6px; }

.chip {
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  padding: 0 8px;
  color: #000;
  letter-spacing: 1px;
}

.copy {
  font: inherit;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  margin-top: 20px;
  cursor: pointer;
}

.copy:hover { opacity: 0.85; }

footer {
  font-family: "Lexend Exa", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  text-align: center;
  margin-top: 88px;
}

a { color: inherit; }