/* Website pages (index, privacy) */
.prose { padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.prose h2 { margin-top: 18px; }
.prose ol, .prose ul.bul { padding-left: 24px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.site-foot { padding-top: 24px; padding-bottom: 40px; color: var(--ink2); font-size: 16px; display: flex; flex-direction: column; gap: 8px; }
.hero { padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.hero h1 { font-size: 38px; }
.shots { display: grid; grid-template-columns: 1fr; gap: 16px; }
.shot { width: 100%; max-width: 320px; height: auto; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.faq details { background: none; border: 0; border-top: 1.5px solid var(--rule); border-radius: 0; padding: 4px 0; }
.faq summary { min-height: 52px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.faq details p { padding: 0 0 14px; }
section.band { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
@media (min-width: 900px) {
  .wrap.wide { max-width: 1040px; }
  .hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding-top: 64px; }
  .hero h1 { font-size: 52px; }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .hero .btn { width: auto; align-self: flex-start; }
}

.site-foot p { margin: 0; }
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.prose a { display: inline-block; min-height: 44px; line-height: 44px; }
.prose p a { line-height: inherit; min-height: 0; display: inline; padding: 4px 0; }

/* Every-screen set */
.screens { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.screens figure { margin: 0; flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.screens .shot { width: 100%; max-width: none; }
.screens figcaption { font-size: 16px; font-weight: 600; line-height: 1.25; }
@media (min-width: 900px) {
  .screens { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; gap: 24px 16px; }
  .screens figure { flex: none; }
}