/* Bring the section introduction closer to its curved top edge. */
#clarity { scroll-margin-top: 96px; }
#clarity > .section-inner { padding-top: 70px; }
#clarity .section-heading { margin-bottom: 36px; }
#clarity .clarity-choice { cursor: default; user-select: none; }
#clarity .clarity-reveal-range { user-select: none; -webkit-user-select: none; }

@media (max-width: 820px) {
  #clarity > .section-inner { padding-top: 56px; }
}
@media (max-width: 600px) {
  #clarity > .section-inner { padding-top: 44px; }
  #clarity .section-heading { margin-bottom: 30px; }
  #clarity .clarity-reveal-canvas { --reveal: 86% !important; }
  #clarity .clarity-reveal-canvas[data-ready] { --reveal: var(--mobile-reveal, 86%) !important; }
  /* Center the first story in the exposed space, leaving a usable plan preview. */
  #clarity .clarity-scattered-path { left: calc(var(--reveal) * .5); }
  #clarity .clarity-simple-path { left: max(50%, calc(var(--reveal) + 130px)); }
  #clarity .clarity-reveal-labels { gap: 10px; }
  #clarity .clarity-choice { white-space: nowrap; font-size: 12px; }
}
@media (max-width: 360px) {
  #clarity .clarity-choice { font-size: 11px; }
}