/* The page that describes Slice of Science, at /trivia/. The app itself is app.html and
   keeps its own layout; everything here sits on top of app.css, which supplies the
   color tokens, the typeface and the base element styles.

   body.landing overrides the app's bottom padding, which exists to clear the fixed
   tab bar that this page does not have. */

body.landing {
  padding-bottom: 0;
  /* Readable measure on a desktop; the app is phone-shaped and does not need one. */
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: 20px;
}

/* ---------- hero ---------- */

.lp-hero {
  padding: calc(2.5rem + env(safe-area-inset-top)) 0 1rem;
  text-align: center;
}

.lp-hero h1 {
  margin: 0 0 0.4em;
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.lp-lede {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1.12rem;
  color: var(--muted);
}

.lp-cta { margin: 1.6rem 0 0.5rem; text-align: center; }
.lp-cta-end { margin: 2.5rem 0 1rem; }

.lp-btn {
  display: inline-block;
  padding: 0.85em 2.2em;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
}

.lp-btn:hover { filter: brightness(1.08); }

.lp-sub {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- sections ---------- */

.lp-section {
  padding: 1.8rem 0;
  border-top: 1px solid var(--line);
}

.lp-section:first-of-type { border-top: 0; }

.lp-section h2 {
  margin: 0 0 0.7em;
  font-size: 1.45rem;
  font-weight: 800;
}

.lp-section h3 {
  margin: 1.4em 0 0.3em;
  font-size: 1.05rem;
  font-weight: 700;
}

.lp-section p { margin: 0 0 0.9em; }

.lp-note { color: var(--muted); font-size: 0.95rem; }

/* ---------- the four steps ---------- */

.lp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.lp-steps > li {
  position: relative;
  counter-increment: step;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
}

/* The number is decoration: the <ol> already conveys the order to a screen reader,
   and a generated-content counter is not announced. */
.lp-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 800;
  font-size: 1rem;
}

.lp-steps h3 { margin: 0.15em 0 0.3em; }
.lp-steps p { margin: 0; color: var(--muted); }

/* ---------- category list ---------- */

.lp-cats {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.45rem;
}

.lp-cats li {
  padding: 0.55em 0.9em;
  background: var(--surface-2);
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- footer ---------- */

.lp-foot {
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.lp-foot a { color: inherit; }

/* The trademark notice. It has to be legible and on the same page as the mark,
   but it is not something anyone came here to read. */
.lp-legal {
  margin: 0.8em auto 0;
  max-width: 38rem;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0.8;
}

/* ---------- terms page ---------- */

.lp-hero-small { padding-bottom: 0.5rem; }
.lp-hero-small h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }

.lp-terms h2 {
  margin: 1.8em 0 0.5em;
  font-size: 1.15rem;
}

.lp-terms h2:first-of-type { margin-top: 1.2em; }

.lp-terms ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.lp-terms li { margin-bottom: 0.4em; }