/* Help pages (/help/). Loaded only there, after guides.css, which supplies the article layout. */

/* Hub: the topics as four blocks */
.help-hub { padding: clamp(36px, 5vw, 64px) 0; }
.help-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.help-group { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); scroll-margin-top: 110px; }
.help-group h2 { font-size: 1.25rem; margin: 0 0 6px; }
.help-group > p { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.help-group ul { list-style: none; margin: 0; padding: 0; }
.help-group li { border-top: 1px solid var(--rule); }
.help-group li a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-weight: 500; }
.help-group li a:hover, .help-group li a:focus-visible { color: var(--link); }
.help-group li a::after { content: " →"; color: var(--muted); font-weight: 400; }
.help-more { text-align: center; margin: 28px auto 0; color: var(--muted); }
@media (max-width: 760px) { .help-groups { grid-template-columns: minmax(0, 1fr); } }

/* Articles: one column when there's no contents list */
.guide-layout.help-single { grid-template-columns: minmax(0, var(--g-col)); justify-content: center; }

/* "Still stuck?" and related articles, at the end of every article */
.help-stuck { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: var(--g-s4) 0 0; padding: 20px 22px;
  border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--rule); }
.help-stuck p { margin: 0; flex: 1 1 260px; color: var(--muted); }
.help-stuck .help-stuck-title { flex-basis: 100%; color: var(--head); font-weight: 600; font-size: 1.05rem; }
.help-related { margin: var(--g-s3) 0 var(--g-s4); }
.help-related-title { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.help-related ul { list-style: none; margin: 0; padding: 0; }
.help-related li { border-top: 1px solid var(--rule); }
.help-related li:last-child { border-bottom: 1px solid var(--rule); }
.help-related a { display: block; padding: 10px 0; text-decoration: none; }