/* Little 100's support site: the app's sticker look (docs/PLAN.md 4.5). */
@font-face {
  font-family: Fredoka;
  src: url("fonts/Fredoka-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Fredoka;
  src: url("fonts/Fredoka-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --sky: #e3f2fd;
  --ink: #1e1e1e;
  --card: #ffffff;
  --sun: #fdd835;
  --pink: #f06292;
  --soft: #4a4a4a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: Fredoka, "Trebuchet MS", system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.55;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; }

h1, h2 { font-weight: 700; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 7vw, 46px); text-align: center; }
h2 { font-size: 24px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: #1565c0; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* A title in the app's cartoon letters: each letter a paint color, a chunky outline and a drop. */
.cartoon {
  letter-spacing: 0.5px;
  -webkit-text-stroke: 7px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
}
.cartoon span { -webkit-text-stroke: inherit; }

.card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 20px 22px;
  margin: 22px 0;
}

.hero { text-align: center; margin-top: 8px; }
.hero .icon {
  width: 104px;
  height: 104px;
  border-radius: 24px;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
}
.tagline { font-size: 24px; font-weight: 700; margin: 4px 0 0; }

.intro { display: flex; gap: 18px; align-items: center; }
.intro .mascot { width: 140px; height: 140px; flex: none; }
@media (max-width: 560px) {
  .intro { flex-direction: column; text-align: center; }
  .intro ul { text-align: left; }
}
ul { margin: 8px 0 0; padding-left: 22px; }
li { margin: 4px 0; }

.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 26px 0; }
.button {
  display: inline-block;
  background: var(--sun);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 12px 22px;
  min-height: 56px;
  overflow-wrap: anywhere;
}
.button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.button.white { background: var(--card); }

details { border-top: 2px dashed #c9d6e3; padding: 12px 0; }
details:first-of-type { border-top: none; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 8px 0 0; color: var(--soft); }

.small { font-size: 15px; color: var(--soft); }
.updated { text-align: center; color: var(--soft); margin-top: -4px; }

nav.back { text-align: center; margin: 26px 0 0; }
footer { text-align: center; font-size: 15px; color: var(--soft); margin-top: 26px; }