/* The pages for grown-ups (store.py), on top of the payment page's look (pay_pages/style.css: the bookcase room's
   wallpaper, paper cards with ink outlines). Pictures of the real app, framed like the app's own cards. English, left to
   right. */
.shop h3 { font-family: "Luckiest Guy", system-ui, sans-serif; font-weight: 400; font-size: clamp(19px, 3.6vw, 22px); color: var(--ink); margin: 18px 0 6px; }
.shop .top nav a[aria-current] { text-decoration: none; border-bottom: 3px solid var(--gold); }

/* the opening card: a big picture of a story page, then the words and the two buttons */
.intro { display: flex; flex-direction: column; gap: 18px; }
.intro .shot { order: -1; }
.intro h1 { font-size: clamp(30px, 5vw, 44px); }
.intro .lead { max-width: none; }
.shot { margin: 0; }
.shot img, .steps img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 12px; background: #2b2420; box-shadow: 0 5px 0 rgba(0,0,0,.18); }

/* how it works: three pictures in a row (a column on phones), each with its words */
.steps { list-style: none; padding: 0 !important; margin: 6px 0 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: none !important; counter-reset: step; }
.steps li { counter-increment: step; margin: 0; position: relative; }
.steps img { margin-bottom: 10px; aspect-ratio: 16 / 10; object-fit: cover; }
.steps li::before { content: counter(step); position: absolute; top: -10px; left: -10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--ink); font-family: "Luckiest Guy", system-ui, sans-serif; font-size: 22px; line-height: 1; }
.steps b { display: block; font-size: 20px; margin-bottom: 2px; }

/* questions and answers: closed until tapped */
.faq details { border-top: 2px solid var(--line); padding: 10px 0; }
.faq details:last-of-type { border-bottom: 2px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: "Luckiest Guy", system-ui, sans-serif; font-size: 24px; line-height: 1; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 8px 0 2px; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .intro .buttons .btn { width: auto; flex: 1 1 auto; }
}