/* The help centre and the how-to guides: legal.css's page, plus numbered steps with a picture each. */

.crumbs { margin: 14px 0 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l-faint); }
.crumbs a { color: var(--l-faint); text-decoration: none; }
.crumbs a:hover { color: var(--l-acc-tx); }
.crumbs span[aria-hidden] { margin: 0 6px; }
.crumbs + h1 { margin-top: 12px; }

/* Numbered steps: the number is the list's own, so a screen reader still counts them. */
ol.steps { margin: 0 0 20px; padding-left: 28px; }
ol.steps > li { margin: 0 0 30px; padding-left: 6px; }
ol.steps > li::marker { font-family: var(--f-mono); font-weight: 600; color: var(--l-acc-tx); }
ol.steps > li > p { margin: 0 0 12px; }

figure.shot { margin: 0; }
figure.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--l-line);
  border-radius: 12px;
  background: #0b0b0b;
}

/* Hub: one list per section, each guide a link with its one-line result. */
ul.guides { list-style: none; margin: 0 0 8px; padding: 0; }
ul.guides > li { margin: 0; padding: 14px 0; border-top: 1px solid var(--l-line); }
ul.guides > li:last-child { border-bottom: 1px solid var(--l-line); }
ul.guides a { font-weight: 600; font-size: 17px; }
ul.guides .result { display: block; color: var(--l-mut); margin-top: 2px; }
ul.guides .meta { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l-faint); }
.section-sub { color: var(--l-mut); margin: -4px 0 14px; }

/* The English summary at the top of a Hinglish guide. */
.summary { background: var(--l-surf); border: 1px solid var(--l-line); border-radius: 12px; padding: 14px 18px; margin: 0 0 26px; }
.summary p { margin: 0; }

@media (max-width: 520px) {
  ol.steps { padding-left: 24px; }
  ol.steps > li { padding-left: 2px; }
}