/* Homepage additions (How it works + FAQ sections). Uses the tokens and
   components from styles.css so the look stays identical. */
.experience-card--half { grid-column: span 6; min-height: 210px; }

.faq__list { display: grid; gap: 12px; align-content: start; }
.faq__item {
  border: 1px solid rgba(216, 180, 96, 0.16);
  border-radius: var(--radius-md);
  background: rgba(7, 18, 39, 0.5);
  padding: 12px 18px 12px 12px;
}
.faq__item summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--gold); font-size: 1.5rem; line-height: 1; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item h3 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 1.4rem; line-height: 1.1; }
.faq__item p { margin: 10px 0 4px; padding-inline-start: 70px; color: var(--muted); }
.faq .download__contact { margin-top: 18px; }

@media (max-width: 760px) {
  .experience-card--half { grid-column: span 12; }
  .faq__item p { padding-inline-start: 0; }
  .faq__item .ritual__step-no { width: 42px; height: 42px; }
}

/* Book pop-up: App Store and Continue Online side by side */
.story-dialog__actions .story-dialog__cta { flex: 1 1 11rem; min-width: 11rem; }

/* App Store button with "Play online" right under it (hero + download) */
.store-stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.store-stack > .btn { justify-content: center; text-align: center; }