@font-face { font-family: Unbounded; src: url(Unbounded-600.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url(Manrope-500.ttf); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url(Manrope-700.ttf); font-weight: 700; font-display: swap; }

:root {
  --bg: #F4EFE6;
  --surface: #FFFDF8;
  --accent: #2E5B4F;
  --accent-soft: #E2EAE4;
  --text: #1D1B17;
  --muted: #6B665C;
  --border: #E4DCCD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 500;
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(circle at 15% 10%, var(--accent-soft) 0, transparent 45%),
    radial-gradient(circle at 85% 90%, var(--accent-soft) 0, transparent 40%);
  background-attachment: fixed;
}

.card {
  width: 100%;
  max-width: 460px;
  padding: 44px 32px 36px;
  border: 1.5px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(46, 91, 79, 0.1);
  text-align: center;
}

.icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }

h1 { margin: 22px 0 6px; font-family: Unbounded, sans-serif; font-weight: 600; font-size: 34px; color: var(--accent); }

.tagline { margin: 0 0 14px; font-weight: 700; font-size: 17px; }

.about { margin: 0 0 30px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* Both badges share one size (201x60 artwork). */
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.stores a, .soon { width: 172px; }
.stores img { display: block; width: 100%; height: auto; }

/* App Store is not out yet: Apple's badge, dimmed and not a link, with a "soon" tag on its corner. */
.soon { position: relative; }
.soon img { opacity: 0.45; }
.soon span {
  position: absolute;
  top: -5px;
  right: -10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #E3A62F;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
}

footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 24px; font-size: 13px; }
footer a { color: var(--accent); white-space: nowrap; }

.policy { max-width: 720px; text-align: left; }
.policy h1 { font-size: 26px; margin-top: 0; }
.policy h2 { margin: 26px 0 8px; font-size: 17px; }
.policy p, .policy li { font-size: 15px; line-height: 1.6; color: var(--text); }
.policy .updated { color: var(--muted); font-size: 13px; }

.policy a { color: var(--accent); }