.guide-cards { display: grid; gap: 12px; margin-top: 22px; }
.guide-card {
  display: block; background: #fff; border: 1px solid #e6e1da;
  border-radius: 12px; padding: 18px; text-decoration: none; color: inherit;
}
.guide-card strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.guide-card span { color: #5b6570; }
@media (hover: hover) {
  .guide-card:hover { border-color: #e85d04; }
}
.guide-card:active { border-color: #e85d04; opacity: 0.92; }
.step { margin: 28px 0; }
.step h2 { font-size: 1.2rem; margin-bottom: 8px; }
.shot {
  background: #fff; border: 1px solid #e6e1da; border-radius: 12px;
  padding: 10px; margin-top: 10px;
}
.shot img { width: 100%; height: auto; display: block; border-radius: 8px; }
.shot-annotated {
  position: relative;
  line-height: 0;
}
.shot-annotated img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.shot-annotated .callout {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.shot-annotated img,
.shot-annotated .callout {
  aspect-ratio: 1280 / 656;
}
.caption { color: #5b6570; font-size: 0.95rem; margin-top: 8px; line-height: 1.45; }