/* ==========================================================================
   Content library (SEO plan section 6, tools/site). Only library pages load
   this file. Everything a library page shares with the hand pages (the vz-*
   comparison sections, the hero, FAQ and CTA bands) keeps its site.css and
   funnel.css styles; these rules cover the library's own pieces: the byline,
   source links, the "how we compared" list, related reading and article
   tables. Theme tokens only (--fnl-*), so light and dark both work.
   ========================================================================== */

.fnl-page--lib main { display: block; }

/* Byline and dates under the hero buttons. */
.fnl-page--lib .lib-byline {
	margin: 20px auto 0;
	max-width: 760px;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fnl-muted);
}
/* Beats style.css ".hero__plans .outer__hero>p { margin: 0 }" (0,2,1). */
.fnl-page--lib .outer__hero > .lib-byline { margin: 20px auto 0; }
.fnl-page--lib .lib-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fnl-page--lib .lib-byline__sep { margin: 0 8px; opacity: .6; }

/* A citation link after a sourced claim. */
.fnl-page--lib .lib-src {
	margin-left: 4px;
	font-size: 12px;
	color: var(--fnl-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.fnl-page--lib .lib-src:hover { color: var(--fnl-green); }

/* "How we compared": every source with what it supports. */
.fnl-page--lib .lib-sources__list {
	max-width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.fnl-page--lib .lib-sources__list li {
	display: grid;
	grid-template-columns: minmax(0, 280px) 1fr;
	gap: 16px;
	padding: 14px 18px;
	background: var(--fnl-card-bg);
	border: var(--fnl-border);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.fnl-page--lib .lib-sources__list a {
	color: var(--fnl-white);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}
.fnl-page--lib .lib-sources__list span { color: var(--fnl-sub); }
.fnl-page--lib .lib-sources__date {
	max-width: 860px;
	margin: 18px auto 0;
	text-align: center;
	font-size: 13px;
	color: var(--fnl-muted);
}

/* Related reading. */
.fnl-page--lib .lib-related__list {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fnl-gap);
}
.fnl-page--lib .lib-related__list a {
	display: block;
	height: 100%;
	padding: 24px;
	background: var(--fnl-card-bg);
	border: var(--fnl-border);
	border-radius: 12px;
	box-shadow: var(--fnl-inner-light);
	text-decoration: none;
	transition: border-color .2s var(--fnl-ease-out);
}
.fnl-page--lib .lib-related__list a:hover { border-color: var(--fnl-green); }
.fnl-page--lib .lib-related__title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fnl-white);
}
.fnl-page--lib .lib-related__blurb {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fnl-sub);
}

/* Article tables (markdown.mjs). */
.fnl-page--lib .lib-table-wrap { overflow-x: auto; margin: 24px 0; }
.fnl-page--lib .lib-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fnl-page--lib .lib-table th,
.fnl-page--lib .lib-table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: var(--fnl-divider);
	color: var(--fnl-sub);
}
.fnl-page--lib .lib-table thead th { color: var(--fnl-white); font-weight: 600; }
.fnl-page--lib .lib-table tbody th { color: var(--fnl-white); font-weight: 500; }

/* The answer-first lead under a section head (SEO plan section 10.1). */
.fnl-page--lib .lib-lead {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
	line-height: 1.55;
	letter-spacing: -.01em;
	color: var(--fnl-white);
}
.fnl-page--lib .lib-note {
	max-width: 760px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fnl-sub);
}
.fnl-page--lib .lib-note a,
.fnl-page--lib .lib-lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* /reviews: "On Trustpilot, <date>" under a review's author (SEO plan A7). The
   role line's own style (style.css .author__info>span) does the rest. */
.quote__wall .elem .author>.author__info>span.rv-src { margin-top: 3px; }
.quote__wall .elem .author>.author__info>span.rv-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Links inside the vz cards the library reuses (site.css never needed them). */
.fnl-page--lib .vz-fit__card a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Cards: capabilities (links) and differentiators (static). */
.fnl-page--lib .lib-cards {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fnl-gap);
}
/* Two or four cards: a 2 x n grid, so no card sits alone on a row. */
.fnl-page--lib .lib-cards--two { max-width: 900px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fnl-page--lib .lib-card {
	display: block;
	padding: 28px;
	background: var(--fnl-card-bg);
	border: var(--fnl-border);
	border-radius: 12px;
	box-shadow: var(--fnl-inner-light);
	text-decoration: none;
	transition: border-color .2s var(--fnl-ease-out);
}
.fnl-page--lib a.lib-card:hover { border-color: var(--fnl-green); }
.fnl-page--lib .lib-card__title {
	margin: 0 0 10px;
	font-family: "Inter", "Inter Fallback", "Inter Fallback Roboto", sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.027em;
	color: var(--fnl-white);
}
.fnl-page--lib .lib-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fnl-sub); }
.fnl-page--lib .lib-card p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Industry chips. */
.fnl-page--lib .lib-chips {
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.fnl-page--lib .lib-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: var(--fnl-border);
	border-radius: 999px;
	background: var(--fnl-card-bg);
	font-size: 15px;
	color: var(--fnl-white);
	text-decoration: none;
	transition: border-color .2s var(--fnl-ease-out);
}
.fnl-page--lib .lib-chips a:hover { border-color: var(--fnl-green); }

/* Key facts: a real table, two columns. */
.fnl-page--lib .lib-facts {
	max-width: 900px;
	margin: 0 auto;
	padding: 8px 28px;
	background: var(--fnl-card-bg);
	border: var(--fnl-border);
	border-radius: 12px;
	box-shadow: var(--fnl-inner-light);
}
.fnl-page--lib .lib-lead + .lib-facts { margin-top: 36px; }
/* A many-column table scrolls inside its card on a phone; the page never does. */
.fnl-page--lib .lib-facts--wide { max-width: 1040px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fnl-page--lib .lib-facts--wide .lib-table { min-width: 620px; }
.fnl-page--lib .lib-table--facts { margin: 0; }
.fnl-page--lib .lib-table--facts th { width: 34%; }
.fnl-page--lib .lib-table--facts tr:last-child th,
.fnl-page--lib .lib-table--facts tr:last-child td { border-bottom: 0; }
.fnl-page--lib .lib-table a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 991px) {
	.fnl-page--lib .lib-related__list,
	.fnl-page--lib .lib-cards { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.fnl-page--lib .lib-lead { font-size: 17px; }
	.fnl-page--lib .lib-facts { padding: 4px 16px; }
	.fnl-page--lib .lib-table--facts th,
	.fnl-page--lib .lib-table--facts td { display: block; width: auto; padding: 8px 0; }
	.fnl-page--lib .lib-table--facts th { padding-top: 14px; border-bottom: 0; }
	/* A many-column table that is a list of things (the /compare glance table)
	   stacks: one block per row, each cell labelled from its column. */
	.fnl-page--lib .lib-facts--stack { overflow-x: visible; }
	.fnl-page--lib .lib-facts--stack .lib-table { min-width: 0; }
	.fnl-page--lib .lib-facts--stack thead { display: none; }
	.fnl-page--lib .lib-facts--stack tr { display: block; padding: 14px 0; border-bottom: var(--fnl-divider); }
	.fnl-page--lib .lib-facts--stack tr:last-child { border-bottom: 0; }
	.fnl-page--lib .lib-facts--stack th,
	.fnl-page--lib .lib-facts--stack td { display: block; padding: 3px 0; border-bottom: 0; }
	.fnl-page--lib .lib-facts--stack th { padding-bottom: 6px; font-size: 16px; }
	.fnl-page--lib .lib-facts--stack td::before { content: attr(data-label) ": "; color: var(--fnl-white); font-weight: 500; }
}
@media (max-width: 767px) {
	.fnl-page--lib .lib-sources__list li { grid-template-columns: 1fr; gap: 4px; }
	.fnl-page--lib .lib-byline__sep { display: block; height: 0; overflow: hidden; margin: 0; }
}
/* Comparisons with one public rating: two cards, centred, not a three-column
   grid with a hole (the Zeely page has three). Phones stack as before. */
@media (min-width: 992px) {
	.fnl-page--lib .vz-rate--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 690px; }
}
/* Links inside a section lead ("tell us at support@...") read as text links. */
.fnl-page--lib .vz-head p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A table cell's text sits in one .vz-table__val, so on a phone (where the
   cell is a grid of label and value) a link inside it stays in its sentence. */
.fnl-page--lib .vz-table [role="cell"] a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A comparison table whose column names outgrow the 72px phone label
   ("AdAmigo.ai", "Valiant Agency") puts each label above its cell instead. */
@media (max-width: 767px) {
	.fnl-page--lib .vz-table--stack .vz-table__row [role="cell"] { grid-template-columns: 1fr; gap: 2px; }
}
/* Three-way comparisons (/compare/a-vs-b-vs-valiantai): three fit cards and a
   four-column table on a desktop. Phones stack exactly as two-way pages do. */
@media (min-width: 992px) {
	.fnl-page--lib .vz-fit--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fnl-page--lib .vz-table--three .vz-table__row { grid-template-columns: 1fr 1.3fr 1.3fr 1.3fr; gap: 20px; }
}
@media (min-width: 768px) and (max-width: 991px) {
	.fnl-page--lib .vz-fit--three { grid-template-columns: 1fr; }
	.fnl-page--lib .vz-table--three .vz-table__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; font-size: 14px; }
}

/* Alternatives and best-of lists (/alternatives, /best): one card per tool,
   in the comparison cards' own look. */
.fnl-page--lib .lib-picks { display: grid; gap: var(--fnl-gap); max-width: 900px; margin: 0 auto; }
.fnl-page--lib .lib-pick {
	padding: 32px;
	background: var(--fnl-card-bg);
	border: var(--fnl-border);
	border-radius: 12px;
	box-shadow: var(--fnl-inner-light);
	scroll-margin-top: 110px;
}
.fnl-page--lib .lib-pick--us { border-color: var(--fnl-green); }
.fnl-page--lib .lib-pick h2 {
	margin: 0 0 6px;
	font-family: "Inter", "Inter Fallback", "Inter Fallback Roboto", sans-serif;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.027em;
	line-height: 1.25;
	color: var(--fnl-white);
	text-transform: none;
}
.fnl-page--lib .lib-pick__best { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--fnl-green); }
.fnl-page--lib .lib-pick__verdict { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--fnl-white); }
.fnl-page--lib .lib-pick__meta { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--fnl-sub); }
.fnl-page--lib .lib-pick__meta a,
.fnl-page--lib .lib-pick__cols a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fnl-page--lib .lib-pick__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fnl-page--lib .lib-pick__label { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--fnl-white); }
.fnl-page--lib .lib-pick__cols ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--fnl-sub); }
.fnl-page--lib .lib-pick__link { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--fnl-green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.fnl-page--lib .lib-pick { padding: 24px; }
	.fnl-page--lib .lib-pick h2 { font-size: 21px; }
	.fnl-page--lib .lib-pick__verdict { font-size: 16px; }
	.fnl-page--lib .lib-pick__cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Trust answers (/learn/<tool>-review): the star split, the review themes and
   the billing terms list. */
.fnl-page--lib .lib-split { max-width: 520px; margin-top: 32px; }
.fnl-page--lib .lib-split__themes { margin-top: 32px; }
.fnl-page--lib .lib-pick__terms { display: grid; gap: 12px; margin: 0; padding-left: 18px; list-style: disc; font-size: 16px; line-height: 1.55; color: var(--fnl-sub); }
/* Lists of drawbacks ("What reviewers complain about", "Look elsewhere if")
   get a plain dot, not the green tick that marks a strength. */
.fnl-page--lib .vz-fit__card--neg li::before {
	top: .6em;
	left: 3px;
	width: 7px;
	height: 7px;
	border: 0;
	border-radius: 50%;
	background: var(--fnl-sub);
	transform: none;
}
/* The star split stays two columns on a phone (it is short; stacking it
   doubles its height). */
@media (max-width: 767px) {
	.fnl-page--lib .lib-split .lib-table--facts th,
	.fnl-page--lib .lib-split .lib-table--facts td { display: table-cell; padding: 10px 0; border-bottom: var(--fnl-divider); }
	.fnl-page--lib .lib-split .lib-table--facts th { width: 40%; }
	.fnl-page--lib .lib-split .lib-table--facts tr:last-child :is(th, td) { border-bottom: 0; }
}