/* Retrieval & Knowledge page: only what the shared design has no class for. */
.cap-item { margin: 0 0 1.25rem; }
.cap-item > p .status { margin-right: .5rem; }
.cap-item__details { margin: .5rem 0 0; padding-left: 1.1rem; }
.cap-item__details li { margin: .35rem 0; }
.sec--extra ul { margin: .75rem 0 0; padding-left: 1.1rem; }
.phones--three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.phones--three img { width: 100%; height: auto; display: block; }
@media (max-width: 600px) { .phones--three { grid-template-columns: 1fr; max-width: 320px; } }

/* F2: above 860 px the eight sheet buttons are one full-width row directly below the figure area,
   with the note line under it; the figure (and its stills) fill only the first grid row, so the
   legend never sits over the canvas. At 860 px and below the shared layout applies unchanged. */
@media (min-width: 861px) {
  .page-retrieval .hero--page > .fig,
  .page-retrieval .hero--page > .fig-still { position: relative; inset: auto; grid-area: 1 / 1; min-height: 0; }
  .page-retrieval .hero--page > .hero__copy { grid-area: 1 / 1; }
  .page-retrieval .hero--page > .legend { grid-area: 2 / 1; position: static; width: auto; margin: 0 var(--gutter); text-align: left; }
  .page-retrieval .hero--page > .legend ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .page-retrieval .hero--page > .legend .note { margin-top: 12px; }
}