/* Free tools pages: layout polish on top of the Pivot (Webflow) styles.
   Reuses Pivot's own patterns (blog-post-link card, accordion FAQ, bg-offset section) and only fixes
   what the template's richtext defaults get wrong for long-form copy: heading rhythm and list margins. */

/* ---- hub grid: Pivot's blog-post-link card, no box ---- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 56px 32px; }
.tool-card { display: block; color: inherit; text-decoration: none; }
.tool-card .round-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; background: #f5f8fc; margin-bottom: 20px; transition: opacity .2s; }
.tool-card:hover .round-image { opacity: .9; }
.tool-card__category { margin: 0 0 4px; }
.tool-card__title { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; margin: 0 0 8px; }
.tool-card__text { font-size: 16px; line-height: 24px; margin: 0; }

/* ---- FAQ (Pivot accordion) under a tool: tighter intro ---- */
.tool-faq-section .section-title { margin-bottom: 32px; }