/* Ranked comparison articles (/top-email-deliverability-companies/). Built on
   topic-hub.css — same tokens, hero and closing band — with a narrower reading
   column, a jump list and one block per ranked entry. */

.listicle-page .hub-wrap--read { max-width: 820px; }
.listicle-page .hub-hero .hub-wrap { max-width: 820px; }
.listicle-page .hub-lede + .hub-lede { margin-top: 16px; }
.listicle-updated { margin: 22px 0 0; font-size: 14px; color: #c7cdd8; }

/* Article body */
.lst-body { padding: 56px 0 24px; background: #fff; }
.lst-body h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 56px 0 16px; }
.lst-body h2::after { content: ""; display: block; width: 52px; height: 4px; border-radius: 2px;
  background: var(--gold); margin-top: 14px; }
.lst-body h3 { font-size: 21px; font-weight: 700; margin: 36px 0 12px; }
.lst-body p, .lst-body li { color: #26303c; }
.lst-body a { color: #1d4ed8; text-underline-offset: 3px; }
.lst-body a:hover, .lst-body a:focus { color: var(--ink); }
.lst-body ul, .lst-body ol { padding-left: 22px; margin: 0 0 22px; }
.lst-body li { margin: 0 0 6px; }
.lst-body > .hub-wrap > :first-child { margin-top: 0; }

/* Jump list of every ranked entry */
.lst-toc { background: var(--tint); border: 1px solid var(--line); border-radius: 6px;
  padding: 22px 26px 16px; margin: 28px 0 30px; }
.lst-toc ol { columns: 2 240px; column-gap: 32px; margin: 0; padding-left: 22px; }
.lst-toc li { break-inside: avoid; }
.lst-toc a { color: var(--ink); font-weight: 600; text-decoration: none; }
.lst-toc a:hover, .lst-toc a:focus { text-decoration: underline; }

/* One ranked entry */
.lst-entry { border-top: 1px solid var(--line); padding-top: 4px; scroll-margin-top: 90px; }
.lst-entry h3 { display: flex; align-items: baseline; gap: 12px; }
.lst-rank { flex: none; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--gold);
  border-radius: 4px; padding: 2px 9px; }
.lst-lead { font-weight: 600; color: var(--ink); }
.lst-facts { list-style: none; padding: 16px 20px !important; margin: 18px 0 8px !important;
  background: var(--tint); border-left: 4px solid var(--gold); border-radius: 0 6px 6px 0; }
.lst-facts li { margin: 0 0 4px; font-size: 15.5px; }
.lst-facts li:last-child { margin: 0; }
.lst-facts strong { color: var(--ink); }
.lst-note { font-size: 14.5px; color: var(--muted); }

/* FAQ answers keep the lead sentence visible as the direct answer */
.lst-faq h3 { margin-top: 30px; }

@media (max-width: 650px) {
  .lst-body { padding: 40px 0 16px; }
  .lst-toc { padding: 18px 18px 12px; }
  .lst-body h3 { font-size: 19px; }
}

/* Page figures: one original per image, scaled by width/height, no srcset */
.lst-figure { margin: 26px 0 30px; }
.lst-figure img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.lst-figure figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); }