/* Help centre pages (scripts/site/pages/help/*). Builds on /styles.css: calm, neutral, one green accent. */
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: 1fr; gap: 28px; } }

.help-video { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.help-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #10140f; }
.help-video figcaption { padding: 18px 20px 20px; }
.help-video h3 { font-size: 19px; }
.help-video .dur { color: var(--muted); font-size: 14px; font-weight: 500; margin-left: 6px; }
.help-video p { margin-top: 6px; color: var(--muted); }
.help-video ol { margin-top: 12px; padding-left: 20px; font-size: 15px; color: #3b4741; }
.help-video li + li { margin-top: 4px; }

.howto-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .howto-list { grid-template-columns: 1fr; } }
.howto { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; }
.howto h3 { font-size: 18px; }
.howto .where { margin-top: 4px; color: var(--moss); font-size: 14px; font-weight: 600; }
.howto ol { margin-top: 12px; padding-left: 20px; color: #3b4741; }
.howto li + li { margin-top: 6px; }
.howto li::marker { color: var(--moss); font-weight: 600; }

.help-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .help-roles { grid-template-columns: 1fr; } }
.help-note { margin-top: 28px; color: var(--muted); }
.help-note a { font-weight: 600; }