/* UserFace — one stylesheet for every page, so nothing drifts between them.
   Colours are lifted straight from the app's asset catalogue, so the web and
   the app are demonstrably the same product rather than approximately. */

:root {
  --court: #0e3b44;
  --court-deep: #0a2c33;
  --accent: #c2ea22;
  --accent-ink: #4c7a00;
  --on-court: #eaf3f2;
  --base: #f2f5f3;
  --raised: #ffffff;
  --ink: #0c1719;
  --ink-soft: #56676a;
  --hairline: rgba(12, 23, 25, 0.12);

  --gutter: 20px;
  --radius: 16px;
  --measure: 34rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The green band every page opens with. */
.hero {
  background: var(--court);
  color: var(--on-court);
  padding: 56px var(--gutter) 44px;
}

.hero--tall { padding: 88px var(--gutter) 72px; text-align: center; }

.hero__inner,
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.hero p {
  margin: 14px 0 0;
  font-size: 18px;
  color: rgba(234, 243, 242, 0.82);
}

main { padding: 40px var(--gutter) 72px; }

h2 {
  margin: 36px 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h2:first-child { margin-top: 0; }

p, li { color: var(--ink); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 8px; }

a { color: var(--accent-ink); text-underline-offset: 3px; }

strong { font-weight: 650; }

.lede { font-size: 18px; color: var(--ink-soft); }

.meta { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }

/* Call to action, used on the invite page and the product page. */
.cta {
  display: inline-block;
  margin: 24px 0 0;
  padding: 15px 30px;
  min-height: 44px;
  border-radius: 999px;
  background: var(--accent);
  color: #16210a;
  font-size: 17px;
  font-weight: 650;
  text-decoration: none;
}

.cta:active { transform: translateY(1px); }

.card {
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
  margin: 0 0 16px;
}

.card h2 { margin-top: 0; }

footer {
  border-top: 1px solid var(--hairline);
  padding: 28px var(--gutter) 48px;
  font-size: 14px;
  color: var(--ink-soft);
}

footer a { color: var(--ink-soft); }
footer p { margin: 0 0 6px; color: inherit; }

/* The app mark, drawn rather than loaded, so there is no image request and
   nothing to go stale. */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 22px;
  border-radius: 22px;
  background: var(--accent);
  color: var(--court);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
}