/* ---------- About: prerendered page content below the app ---------- */
/* What search engines and AI assistants read; players find it by scrolling down. */
.about {
  padding: 40px 16px max(56px, env(safe-area-inset-bottom));
  background: var(--surface-sunk);
  box-shadow: inset 0 1px 0 var(--line);
  color: var(--ink);
  line-height: 1.6;
}
.about__inner { max-width: 680px; margin: 0 auto; }

.about h1, .about h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.about h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 800; margin: 0 0 12px; }
.about h2 { font-size: 1.25rem; font-weight: 700; margin: 36px 0 10px; }
.about h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 4px; }
.about p { margin: 0 0 12px; }
.about__lead { font-size: 1.08rem; }
.about ol, .about ul { margin: 0; padding-left: 1.3em; }
.about li { margin: 4px 0; }
.about a { color: inherit; font-weight: 600; text-underline-offset: 3px; }

/* Free sample cards: small paper cards in a grid */
.about__cards {
  list-style: none;
  padding: 0 !important;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.about__cards li {
  margin: 0;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .94rem;
  line-height: 1.45;
}

.about__more { margin-top: 32px; }
.about__noscript { padding: 24px 16px; text-align: center; }

.about__langs { margin-top: 12px; color: var(--ink-soft); }

/* ---------- Footer: same layout as Incognito Santa ---------- */
.footer { margin-top: 48px; font-size: .85rem; color: var(--ink-soft); }
.footer__name {
  display: block;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.footer p { margin: 4px 0 0; }
.footer__made { margin-top: 24px !important; text-align: right; font-size: .78rem; }
.footer a { color: inherit; font-weight: 500; text-decoration: none; }
.footer a:hover { text-decoration: underline; }