/* Film artwork and the availability note are scoped to the purchase page. */
.join-page .shop-cover {
  display: block;
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  margin: -36px -28px 26px;
  overflow: hidden;
  background: #080c11;
  color: var(--muted);
  text-decoration: none;
}
.join-page .shop-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Reserve the current 16:9 cover footprint before the image arrives, while
   allowing its intrinsic composition to take precedence once loaded. */
body.join-page .shop-cover img { aspect-ratio: auto 16 / 9; }
body.join-page .shop-cover:has(img[hidden]) { aspect-ratio: 16 / 9; }
.join-page .shop-cover img[hidden],
.join-page .shop-cover-fallback[hidden] { display: none; }
.join-page .shop-cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
}
.join-page .shop-cover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.join-page .plans-intro { max-width: 60ch; }
.join-page .plans-payment-note { margin-top: 12px; }
.join-page .plans-faq {
  max-width: 860px;
  margin: 64px auto 0;
  text-align: left;
}
.join-page .plans-faq [id] { scroll-margin-top: 112px; }
.join-page .plans-faq details:first-of-type { border-top: 1px solid var(--line); }
.join-page .plans-faq details { padding: 0; scroll-margin-top: 112px; }
.join-page .plans-faq summary {
  min-height: 60px;
  padding: 18px 0;
  line-height: 1.5;
  color: var(--text);
}
.join-page .plans-faq summary::after { flex: none; }
.join-page .plans-answer {
  max-width: 72ch;
  padding: 0 28px 22px 0;
  font-family: var(--ui-font);
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  overflow-wrap: break-word;
}
.join-page .plans-answer p { max-width: none; }
.join-page .plans-answer p:first-child { margin-top: 0; }
.join-page .plans-answer ul { margin: 12px 0; padding-left: 20px; }
.join-page .plans-answer li + li { margin-top: 8px; }
.join-page .plans-answer strong { color: var(--text); font-weight: 600; }
.join-page .plans-answer a,
.join-page .plans-help a {
  color: var(--text);
  text-underline-offset: 3px;
}
.join-page .plans-help {
  max-width: 860px;
  margin: 24px auto 0;
  line-height: 1.8;
}
.join-page .purchase-result { text-align: center; }
.join-page .purchase-result-actions { justify-content: center; }
@media (max-width: 600px) {
  .join-page .pricing { grid-template-columns: minmax(0, 1fr); }
  .join-page .purchase-result-layout > img { max-width: 100%; }
  .join-page .purchase-result-actions { flex-direction: column; }
  .join-page .plans-faq { margin-top: 44px; }
  .join-page .plans-faq summary { font-size: 16px; }
  .join-page .plans-answer { padding-right: 0; }
}