/* Shared by the illustrated sub-pages (how-it-works, cameras, download):
   the figure card, the round map marker, and the coloured dot a section
   heading carries to tie its prose back to its picture. */

.hiw-fig {
  margin: 24px 0 30px;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(22, 24, 28, .07);
  overflow: hidden;
}
.hiw-fig .stage { position: relative; }
.hiw-fig figcaption {
  text-align: center; font-size: 13.5px; color: var(--sub);
  padding: 12px 20px 16px; margin: 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.hiw-fig figcaption b { color: var(--ink); font-weight: 650; }

/* a map marker: round photo with a coloured ring, centred on its coordinate */
.cpin {
  position: absolute; z-index: 4;
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #fff; background-size: cover;
  box-shadow: 0 0 0 2.5px var(--ring, var(--certain)), 0 3px 9px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
}
.cpin.small { width: 22px; height: 22px; border-width: 2.5px; }
.cpin.likely { --ring: var(--likely); }
.cpin.manual { --ring: var(--manual); }
.cpin.uncertain { --ring: var(--uncertain); }
.cpin.big { width: 40px; height: 40px; }


/* section headings get a small mark in the concept's colour — a quiet
   thread from the illustration back to the prose */
.prose h2[data-mark] { position: relative; padding-left: 18px; }
.prose h2[data-mark]::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mark, var(--manual));
}
.prose h2[data-mark="certain"] { --mark: var(--certain); }
.prose h2[data-mark="likely"] { --mark: var(--likely); }
.prose h2[data-mark="uncertain"] { --mark: var(--uncertain); }
.prose h2[data-mark="manual"] { --mark: var(--manual); }
.prose h2[data-mark="pill"] { --mark: var(--pill); }