/* The site's smaller pages (legal pages, friend invites): the home page's fonts and colours, kept short. The home page
   (index.html) has its own styles inline. */
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url(/media/caveat-700.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/media/roboto-400.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(/media/roboto-500.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/media/roboto-700.woff2) format("woff2"); }

:root {
  --green-dark: #184222;
  --green: #2e6b3a;
  --green-deep: #0f2d17;
  --yellow: #ffd600;
  --cream: #f6f3ea;
  --ink: #1d2a20;
  --ink-soft: #4a5a4d;
  --on-green: #e9efe6;
  --on-green-soft: #b9cbb9;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 17px/1.6 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--green); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.script { font-family: Caveat, "Segoe Script", cursive; font-weight: 700; }

.top { background: var(--green-dark); }
.top .wrap { display: flex; align-items: center; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand span { font-size: 26px; color: #fff; }

.doc { padding: 40px 20px 64px; }
.doc h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.15; margin: 0 0 12px; }
.doc h2 { font-size: 22px; line-height: 1.25; margin: 36px 0 8px; }
.doc p, .doc li { overflow-wrap: anywhere; }
.doc ul, .doc ol { padding-left: 1.3em; }

footer { background: var(--green-deep); color: var(--on-green-soft); font-size: 15px; padding: 28px 0 36px; }
footer a { color: var(--on-green); }
footer p { margin: 10px 0 0; }

/* Friend invites (/f/<code>, written by the invitePage function). */
.invite { background: var(--green-dark); color: var(--on-green); min-height: 100vh; min-height: 100dvh; display: flex;
  flex-direction: column; }
.invite main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px 56px; }
.invite .icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.invite h1 { color: #fff; font-size: clamp(30px, 7vw, 42px); line-height: 1.15; margin: 24px 0 8px; }
.invite h1 b { color: var(--yellow); font-weight: 700; }
.invite .lede { max-width: 26em; margin: 0 0 28px; }
.invite .open { display: inline-block; background: var(--yellow); color: var(--green-deep); font-weight: 700;
  text-decoration: none; padding: 14px 30px; border-radius: 999px; font-size: 18px; margin-bottom: 26px; }
.invite .steps { max-width: 24em; font-size: 15px; color: var(--on-green-soft); margin: 22px 0 0; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store {
  display: inline-flex; flex-direction: column; justify-content: center; min-width: 170px; height: 58px; padding: 0 20px;
  border-radius: 14px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25);
  text-align: left;
}
.store small { font-size: 12px; line-height: 1.2; opacity: 0.8; }
.store b { font-weight: 500; font-size: 21px; line-height: 1.15; }
.invite footer { background: transparent; text-align: center; }

/* Each phone sees what fits it (a class set on <body> by the page's script): Android one button that opens the app or
   gets it, iPhone the App Store, a computer both stores. Without the script, both stores and no notes. */
.android-only, .ios-only, .other-only, .invite .android-only, .invite .ios-only, .invite .other-only { display: none; }
.is-android .open.android-only { display: inline-block; }
.is-android p.android-only, .is-ios p.ios-only, .is-other p.other-only { display: block; }
.is-android .stores { display: none; }
.is-ios .store:not(.ios-first) { display: none; }