/* Preview-only additions, copied from the private story preview (blog-story-preview-20261030, 30 Oct 2026) and reused for the
   marketplaces listicle draft (2 Nov 2026). Additions for the listicle: .summary-box and .best-for, at the end of this file. Everything else is the live blog CSS, unmodified
   (blog.css, redesign.css, fonts.css, blog-chrome.css copied from site-pages-20261030/blog/assets, identical to linkvendors.com).
   The cover uses the template's own slot (.post-hero in .post-opening). */

/* Bigger byline photo (homepage founder photo, 320x320 source). */
.post-header__byline .post-author { gap: 12px; }
.post-header__byline .post-author img { width: 60px; height: 60px; }

/* In-article figures: chart, product screenshots, illustration. The chart PNG has its own 2px ink frame. */
.post-figure { margin: 40px 0 44px; }
.post-figure img { width: 100%; height: auto; }
.post-figure figcaption { margin-top: 12px; color: #4a4a4a; font: 400 14px/1.5 Outfit, system-ui, sans-serif; }
/* Product screenshots: same frame as the live About page (.shot: 2px ink border, 12px radius). */
.post-figure--shot img { background: #fff; border: 2px solid #1a1a1a; border-radius: 12px; }

/* Draft markers: visibly not article copy. */
.draft-placeholder { padding: 1px 6px; border: 2px dashed #c2410c; border-radius: 6px; background: #ffe6dc; color: #7c2d12; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post-body .draft-marker { margin: 56px 0 14px; font: 600 13px/1.4 Outfit, system-ui, sans-serif; }

/* "The short version": summary box in site style (2px ink border, 12px radius, butter-yellow top rule, as .table-scroll). */
.post-body .summary-box { margin: 8px 0 40px; padding: 24px 28px 6px; border: 2px solid #1a1a1a; border-top: 4px solid #f7e857; border-radius: 12px; background: #fff; }
.post-body .summary-box__title { margin: 0 0 14px; font: 700 20px/1.3 Outfit, system-ui, sans-serif; }
.post-body .summary-box ul { margin: 0 0 18px; padding-left: 1.2rem; }
.post-body .summary-box li { margin-bottom: 12px; font-size: 17px; line-height: 1.55; }
/* "Best for:" line: small emphasized line closing each marketplace section. */
.post-body .best-for { margin: 28px 0 24px; padding: 12px 16px; border-left: 4px solid #1a1a1a; background: #fffbd6; font: 400 16px/1.5 Outfit, system-ui, sans-serif; }
.post-body .best-for strong { font-weight: 700; }

@media (max-width: 520px) {
  .post-header__byline .post-author img { width: 48px; height: 48px; }
  .post-body .summary-box { padding: 20px 20px 4px; }
  .post-body .summary-box li { font-size: 16px; }
  .post-figure { margin: 32px 0 36px; }
  .post-figure figcaption { font-size: 13px; }
  .post-body .draft-marker { margin-top: 44px; }
}