/* Extend the existing Help Center tutorial layout for four steps and FAQs. */
.steps-4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-meta { margin-bottom: 0; }
.shot-card + .shot-card { margin-top: 24px; }
.tutorial-faq { margin-bottom: 64px; }
.tutorial-faq h2 { margin-bottom: 22px; }
.tutorial-faq details { border-top: 1px solid var(--line); }
.tutorial-faq details:last-child { border-bottom: 1px solid var(--line); }
.tutorial-faq summary { padding: 18px 8px; cursor: pointer; font-weight: 700; }
.tutorial-faq summary:hover,
.tutorial-faq summary:active,
.tutorial-faq details[open] summary { background: var(--soft); }
.tutorial-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tutorial-faq details p { padding: 18px 8px 0; color: var(--muted); }
@media (max-width: 1000px) and (min-width: 681px) {
  .steps-4 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .steps-4 ol { grid-template-columns: 1fr; }
  .shot-card + .shot-card { margin-top: 16px; }
  .tutorial-faq { margin-bottom: 44px; }
}