/* Landing pages (fair-dice, play-free, pass-and-play, daily-puzzle, self-host).
   They share privacy.html's layout — body.doc > main.prose, defined in style.css — and
   this file adds only what those pages need beyond it: one call to action, a FAQ, and a
   footer nav. Tokens only; every :hover sits inside (hover:hover). */

/* The one primary action on the page: a link that looks like button.primary. */
.prose .cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:var(--s-3) var(--s-5);margin:var(--s-2) 0 var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--accent-2);
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:var(--accent-ink);box-shadow:var(--shadow-1);
  font-weight:600;text-decoration:none;
}
@media (hover:hover){.prose .cta:hover{filter:brightness(1.06)}}
.prose .cta:active{transform:translateY(1px)}

/* The global h1 is the header wordmark and must not wrap; a page title must. Without
   this every headline on a phone ran off the right edge and was clipped, not scrolled. */
.prose h1{white-space:normal;overflow-wrap:break-word}

/* Small subheads inside a section (FAQ questions, steps). */
.prose h3{
  font-size:15.5px;text-transform:none;letter-spacing:0;color:var(--ink);
  font-weight:600;margin:var(--s-5) 0 var(--s-1);
}

.prose ol{margin:0 0 var(--s-3);padding-left:1.4em}
.prose ol li{margin:0 0 var(--s-2)}

/* FAQ: each question/answer pair separated by a hairline. */
.faq{border-top:1px solid var(--line-soft);margin-top:var(--s-3)}
.faq > div{border-bottom:1px solid var(--line-soft);padding:var(--s-3) 0}
.faq h3{margin:0 0 var(--s-1)}
.faq p:last-child{margin-bottom:0}

/* Footer nav: every landing page plus privacy and terms. Links are padded up to the tap
   floor so they are hittable on a phone without looking like buttons. */
.pagenav{
  margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:14px;
}
.pagenav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 var(--s-4);
}
.pagenav li{margin:0}
.pagenav a{
  display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--ink-dim);
}
.pagenav a[aria-current="page"]{color:var(--ink);text-decoration:none;font-weight:600}
@media (hover:hover){.pagenav a:hover{color:var(--accent)}}

/* Puzzle pages (/puzzle/<date>, served by src/server/share.js): the position as a picture,
   and a pager to walk the archive. */
.puzzlecard{
  display:block;width:100%;height:auto;margin:var(--s-3) 0 var(--s-4);
  border-radius:var(--r-md);border:1px solid var(--line-soft);
}
.pager{display:flex;justify-content:space-between;gap:var(--s-3);margin:var(--s-4) 0}
.pager a{display:inline-flex;align-items:center;min-height:var(--tap)}