:root {
  --ink: #7a3a45;
  --ink-soft: #a86b78;
  --accent: #d4537e;
  --cream: #fff7f3;
  --line: #f0c9d5;
}
* { box-sizing: border-box; }

/* ── Background ──────────────────────────────────────────────────────────
   background.jpg is one large soft artwork (not a tile), so it's set to
   cover the viewport and stay put while the page scrolls. */
body {
  margin: 0;
  padding: 24px 16px 72px;
  background-color: #eaf6e4;
  background-image: url('/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  color: var(--ink);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* The readable panel that floats over the pattern — same idea as the
   notepad sitting on the wallpaper inside the app. */
.wrap {
  max-width: 660px;
  margin: 0 auto;
  background: transparent;
  border-radius: 22px;
  padding: 8px 34px 40px;
}

header { padding: 34px 0 4px; text-align: center; }
header a { display: inline-block; }
.logo { display: block; margin: 0 auto; width: 230px; max-width: 100%; height: auto; }
.mark {
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--accent); margin: 0; text-decoration: none; display: inline-block;
}
h1 { font-size: 26px; font-weight: 800; margin: 26px 0 6px; }
h2 { font-size: 18px; font-weight: 800; margin: 34px 0 6px; }
h3 { font-size: 16px; font-weight: 800; margin: 26px 0 4px; }
p, li { color: var(--ink); }
.sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 26px; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
a { color: var(--accent); }
hr { border: none; border-top: 1px solid var(--line); margin: 38px 0 22px; }
footer { color: var(--ink-soft); font-size: 14px; }
.legal { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px; margin: 20px 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.feature { margin: 26px 0; }
.feature h3 { margin-bottom: 2px; }
.feature p { margin-top: 0; color: var(--ink-soft); font-size: 15.5px; }

/* Keeps pixel art crisp instead of blurry when it scales */
.pixel { image-rendering: pixelated; }

@media (max-width: 560px) {
  body { padding: 12px 10px 56px; font-size: 16px; }
  .wrap { padding: 4px 20px 32px; border-radius: 18px; }
  h1 { font-size: 23px; }
  .logo { max-width: 180px; }
}