/* Standalone how-to guides (/guides and /guides/<tool>). The article body
   reuses the blog's post-body typography; these rules add the step cards,
   accent actions and related-tool strip. */

.guides-index .blog-hero { max-width: 760px; }
.guides-index .blog-card h2 { font-size: 1.12rem; }
.guide-page.tool-page { max-width: 860px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.guide-body { margin-top: 18px; }
.guide-body > h2 { margin-top: 34px; }

.guide-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  counter-reset: guide-step;
}
.guide-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.guide-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.guide-step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
}
.guide-step h3 { margin: 4px 0 6px; color: var(--brand-navy); font-size: 1.08rem; }
.guide-step p { margin: 0 0 10px; }
.guide-step p:last-child { margin-bottom: 0; }

.guide-section { margin-top: 8px; }
.guide-section h2 { margin-top: 30px; }
.guide-tips {
  margin: 32px 0;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-soft);
}
.guide-tips h2 { margin: 0 0 10px; font-size: 1.2rem; }
.guide-tips ul { margin: 0; padding-left: 20px; }
.guide-tips li { margin: 0 0 8px; }
.guide-tips li:last-child { margin-bottom: 0; }

.guide-faq { margin-top: 34px; }
.guide-faq h2 { margin-bottom: 10px; }
.guide-faq .faq-item { border-top: 1px solid var(--line); }
.guide-faq .faq-item summary { padding: 13px 0; }
.guide-faq .faq-item p { padding: 0 0 14px; }

.guide-related { margin-top: 44px; }
.guide-related > h2 { margin: 0 0 14px; color: var(--brand-navy); font-size: 1.3rem; }
.guide-related .blog-card h3 { font-size: .98rem; }

@media (max-width: 640px) {
  .guide-step { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .guide-step-num { width: 28px; height: 28px; font-size: .78rem; }
}