/* Shared container styles for the tool pages' "Step by step" guides.
   files.css / pages.css / preview.css already carry these rules for their own
   families; this file exists so templates with their own stylesheets
   (wordtopdf, htmltopdf, ocr, rename, images, tool) render the guide exactly
   the same — same 880px column, same photo frames, same feature cards. */
.files-guide {
  width: min(880px, 100% - 32px); margin: 56px auto 84px;
  text-align: left;
}
.files-guide .howto-steps { margin-top: 26px; }
.files-guide .guide-photo {
  display: block; max-width: 100%; height: auto; margin: 16px auto 0;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(12, 77, 143, .10);
}
.files-feats {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.files-feat {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px; box-shadow: 0 14px 34px rgba(12, 77, 143, .06);
}
.files-feat > i {
  flex: 0 0 auto; font-size: 21px; line-height: 1.2; color: var(--accent-dark);
}
.files-feat b { display: block; font-size: .95rem; color: var(--ink); }
.files-feat p { margin: 3px 0 0; font-size: .84rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) {
  .files-guide { margin: 40px auto 64px; }
  .files-feats { grid-template-columns: 1fr; }
}