/* The best-tools guide (/guides/best-ai-social-media-tools-small-business/ and its PL pair). Loaded after guide.css;
   only adds the publisher's bias note in the hero, the four-tool table and the "best for / not for" lists. */

.guide-bias { max-width: 640px; margin: 0 auto; padding: 16px 20px; background: #fff; border: 1px solid var(--feature-line); border-left: 4px solid #614bdb; border-radius: 0 14px 14px 0; text-align: left; }
.guide-bias p { margin: 0; font-size: 15px; line-height: 1.65; color: #393346; }
.guide-bias strong { color: #211a35; }
.guide-bias a { color: #614bdb; font-weight: 600; }

/* Four tools and POSTIVA's own column: the criterion takes a narrow first column, the tools share the rest. */
.compare-table--tools tbody th { width: 14%; }
.compare-table--tools td { width: 21.5%; font-size: 15px; }

/* Below 1024 px five columns get too narrow, so each criterion becomes a card with the four tools labelled
   (the same pattern compare.css uses for phones). */
@media (max-width: 1024px) {
  .compare-table--tools, .compare-table--tools tbody, .compare-table--tools tr, .compare-table--tools th, .compare-table--tools td { display: block; width: auto; }
  .compare-table--tools { border: 0; background: none; }
  .compare-table--tools caption { display: block; }
  .compare-table--tools thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare-table--tools tbody tr { background: #fff; border: 1px solid var(--feature-line); border-radius: 18px; overflow: hidden; margin-top: 14px; }
  .compare-table--tools tbody th { width: auto; border-top: 0; background: #ece8ff; padding: 14px 18px; }
  .compare-table--tools td { width: auto; padding: 14px 18px; }
  .compare-table--tools td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font: 600 14px/1.4 var(--font-display); color: #614bdb; margin-bottom: 4px; }
}

/* Best for / not for: two columns side by side, stacked on phones. */
.guide-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1100px; }
.guide-fit__col { background: #fff; border: 1px solid var(--feature-line); border-radius: 20px; padding: 24px 24px 26px; }
.guide-fit__col--best { border-top: 4px solid #0ba384; }
.guide-fit__col--not { border-top: 4px solid #c8c4d5; }
.guide-fit__title { font: 600 20px/1.35 var(--font-display); color: #211a35; margin: 0 0 14px; }
.guide-fit ul { margin: 0; padding-left: 20px; }
.guide-fit li { font-size: 16px; line-height: 1.65; color: #393346; }
.guide-fit li + li { margin-top: 12px; }
.guide-fit a { color: #614bdb; font-weight: 600; }
.guide-fit__link { margin: 20px 0 0; }
.guide-fit__link a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: #614bdb; }
.guide-copy .compare-source, .guide-fit .compare-source, .section__desc .compare-source { font-size: 14px; }
.section__desc .compare-source a { color: #614bdb; font-weight: 600; }

@media (max-width: 760px) {
  .guide-fit { grid-template-columns: 1fr; gap: 14px; }
  .guide-fit__col { padding: 20px 18px 22px; }
}