/* Comparisons (/compare/, /compare/{slug}/) and alternatives (/alternatives/{tool}/).
   Sizes follow components/ComparisonPage.tsx, app/compare/page.tsx and components/AlternativesPage.tsx. */

/* ── Shared ─────────────────────────────────────────────────────── */
.pb-cmp, .pb-cmp-archive, .pb-alt { padding-top: var(--nav-h); }
.pb-cmp--a { --pb-side: var(--accent); }
.pb-cmp--b { --pb-side: var(--accent2); }

.pb-cmp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text3); }
.pb-cmp-crumbs a { color: var(--text3); text-decoration: none; }
.pb-cmp-crumbs a:hover { text-decoration: underline; }
.pb-cmp-crumbs [aria-current] { color: var(--text2); }

.pb-cmp-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pb-cmp-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.pb-cmp-avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* Same rules as the old site's .pb-prose, scoped so other templates are untouched. */
.pb-cmp-prose { font-family: var(--font-lora); }
.pb-cmp-prose > * { margin: 0; }
.pb-cmp-prose > * + * { margin-top: 1.1em; }
.pb-cmp-prose p { line-height: 1.85; font-size: 17px; color: var(--text2); }
.pb-cmp-prose h2 { font-family: var(--font-space); font-size: 24px; font-weight: 700; color: var(--text); margin-top: 2em; scroll-margin-top: 140px; }
#section-body .pb-cmp-prose > h2:first-child { margin-top: 0; }
.pb-cmp-prose h3 { font-family: var(--font-space); font-size: 18px; font-weight: 600; color: var(--text); margin-top: 1.5em; }
.pb-cmp-prose > h3:first-child { margin-top: 0; }
.pb-cmp-prose strong { font-weight: 700; color: var(--text); }
.pb-cmp-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.pb-cmp-prose a:hover { opacity: 0.8; }
.pb-cmp-prose ul, .pb-cmp-prose ol { padding-left: 26px; margin-bottom: 1em; color: var(--text2); }
.pb-cmp-prose ul { list-style-type: disc; }
.pb-cmp-prose ol { list-style-type: decimal; }
.pb-cmp-prose li { margin-bottom: 6px; line-height: 1.75; }
.pb-cmp-prose li > p { margin: 0; }
.pb-cmp-prose blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; color: var(--text2); font-style: italic; }
.pb-cmp-prose img { max-width: 100%; border-radius: 10px; display: block; }
.pb-cmp-prose code { background: rgba(255,255,255,0.07); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; font-size: 0.85em; color: var(--accent2); }

/* ── Single comparison ──────────────────────────────────────────── */
.pb-cmp-nav .pb-section-nav__inner { position: relative; } /* offsetParent for compare.js */
.pb-cmp-nav .pb-section-nav__tab { padding: 12px 16px; font-size: 13px; }
.pb-cmp__wrap { max-width: 860px; margin: 0 auto; padding: 24px 24px 80px; }
.pb-cmp__wrap--empty { padding-top: 80px; }
.pb-cmp__title { font-family: var(--font-space); font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); margin-bottom: 20px; }
.pb-cmp__wrap--empty .pb-cmp__title { font-size: 32px; font-weight: 700; margin-bottom: 16px; }

.pb-cmp-hero { margin-bottom: 40px; }
.pb-cmp-hero .pb-cmp-crumbs { margin-bottom: 20px; }
.pb-cmp-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.pb-cmp-byline__name { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.pb-cmp-byline__name:hover { text-decoration: underline; }
.pb-cmp-byline__role { margin-left: 8px; font-size: 13px; color: var(--text3); }
.pb-cmp-byline__meta { font-size: 13px; color: var(--text3); }
.pb-cmp-cover { margin-bottom: 36px; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; }
.pb-cmp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pb-cmp-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.pb-cmp-vs__badge { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-space); font-size: 14px; font-weight: 800; color: var(--text2); }
.pb-cmp-tool { background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--pb-side); border-radius: 16px; padding: 24px; text-align: center; }
.pb-cmp-tool__logo { position: relative; width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pb-cmp-tool__logo img { width: 100%; height: 100%; object-fit: contain; }
.pb-cmp-tool__logo__letter { font-family: var(--font-space); font-size: 20px; font-weight: 700; color: var(--pb-side); }
.pb-cmp-tool__name { font-family: var(--font-space); font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.pb-cmp-tool__price { display: inline-block; margin-bottom: 16px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--pb-side); background: color-mix(in srgb, var(--pb-side) 15%, transparent); color: var(--pb-side); font-size: 12px; font-weight: 600; }
.pb-cmp-tool__actions { display: flex; flex-direction: column; gap: 8px; }
.pb-cmp-tool__visit { display: block; padding: 9px 16px; border-radius: 9px; background: var(--pb-side); color: #000; font-size: 13px; font-weight: 700; text-decoration: none; transition: opacity 0.15s; }
.pb-cmp-tool__visit:hover { opacity: 0.88; }
.pb-cmp-tool__review { display: block; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--border2); color: var(--text2); font-size: 13px; text-decoration: none; transition: color 0.15s; }
.pb-cmp-tool__review:hover { color: var(--text); }

.pb-cmp-section { margin-bottom: 48px; }
.pb-cmp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pb-cmp-verdict { margin-bottom: 48px; padding: 28px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; }
.pb-cmp-verdict__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 20px; }
.pb-cmp-verdict__head h2 { font-family: var(--font-space); font-size: 20px; font-weight: 700; color: var(--text); }
.pb-cmp-verdict__summary { margin: 0 0 24px; font-size: 15px; line-height: 1.65; color: var(--text2); }
.pb-cmp-verdict__label { margin-bottom: 10px; font-family: var(--font-space); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pb-side); }

.pb-cmp-list { list-style: none; margin: 0; padding: 0; }
.pb-cmp-list li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--text2); }
.pb-cmp-list__mark { flex-shrink: 0; color: var(--pb-side); }
.pb-cmp-list--pros li, .pb-cmp-list--cons li { margin-bottom: 7px; }
.pb-cmp-list--pros { margin-bottom: 14px; }
.pb-cmp-list--pros .pb-cmp-list__mark { color: var(--green); font-weight: 700; }
.pb-cmp-list--cons { padding-top: 14px; border-top: 1px solid var(--border); }
.pb-cmp-list--cons .pb-cmp-list__mark { color: var(--red); font-weight: 700; }

.pb-cmp-card { background: var(--bg2); border: 1px solid var(--border); border-top: 3px solid var(--pb-side); border-radius: 14px; padding: 22px; }
.pb-cmp-card__title { margin-bottom: 16px; font-family: var(--font-space); font-size: 16px; font-weight: 700; color: var(--pb-side); }
.pb-cmp-card__title--sm { font-size: 15px; margin-bottom: 14px; }

.pb-cmp-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; }
.pb-cmp-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
.pb-cmp-table thead tr { background: var(--bg3); }
.pb-cmp-table thead th { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; font-family: var(--font-space); font-size: 14px; font-weight: 700; color: var(--pb-side); }
.pb-cmp-table thead th:first-child { width: 34%; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; }
.pb-cmp-table tbody tr:nth-child(odd) { background: var(--bg2); }
.pb-cmp-table tbody tr:nth-child(even) { background: var(--bg); }
.pb-cmp-table tbody th, .pb-cmp-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.pb-cmp-table tbody th { font-weight: 600; color: var(--text2); }
.pb-cmp-table td { color: var(--text); }

.pb-cmp-final { padding: 20px 24px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); }

.pb-cmp-faq { display: flex; flex-direction: column; gap: 8px; }
.pb-cmp-faq__item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pb-cmp-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg2); cursor: pointer; list-style: none; font-family: var(--font-space); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
.pb-cmp-faq__item summary::-webkit-details-marker { display: none; }
.pb-cmp-faq__item[open] summary { background: var(--bg3); }
.pb-cmp-faq__plus { flex-shrink: 0; display: inline-block; color: var(--accent); font-size: 18px; transition: transform 0.2s; }
.pb-cmp-faq__item[open] .pb-cmp-faq__plus { transform: rotate(45deg); }
.pb-cmp-faq__answer { padding: 16px 20px; background: var(--bg); border-top: 1px solid var(--border); font-size: 14px; line-height: 1.65; color: var(--text2); }

.pb-cmp-author { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; }
.pb-cmp-author__name { display: inline-block; margin-bottom: 2px; font-family: var(--font-space); font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; }
.pb-cmp-author__name:hover { text-decoration: underline; }
.pb-cmp-author__role { margin-bottom: 6px; font-size: 13px; color: var(--accent); }
.pb-cmp-author__bio { font-size: 13px; line-height: 1.6; color: var(--text3); }

/* ── Archive ────────────────────────────────────────────────────── */
.pb-cmp-archive { min-height: 80vh; }
.pb-cmp-archive__inner { max-width: 1100px; margin: 0 auto; padding: 56px 24px 80px; }
.pb-cmp-archive__head { margin-bottom: 48px; }
.pb-cmp-archive__head .pb-cmp-crumbs { margin-bottom: 16px; }
.pb-cmp-archive__head h1 { margin-bottom: 12px; font-family: var(--font-space); font-size: 36px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); }
.pb-cmp-archive__head p { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.6; color: var(--text2); }
.pb-cmp-archive__empty { padding: 80px 24px; margin: 0; text-align: center; font-size: 15px; color: var(--text3); }

.pb-cmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.pb-cmp-card-link { display: block; text-decoration: none; }
.pb-cmp-teaser { height: 100%; overflow: hidden; background: var(--bg2); border: 1px solid var(--border2); border-radius: 18px; transition: border-color 0.2s, transform 0.2s; }
.pb-cmp-card-link:hover .pb-cmp-teaser, .pb-cmp-card-link:focus-visible .pb-cmp-teaser { border-color: var(--accent); transform: translateY(-2px); }
.pb-cmp-teaser__cover { aspect-ratio: 16 / 7; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--bg3)) 0%, var(--bg3) 100%); }
.pb-cmp-teaser__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-cmp-teaser__cover > span { font-family: var(--font-space); font-size: 28px; font-weight: 800; color: var(--text3); opacity: 0.4; }
.pb-cmp-teaser__body { padding: 22px 24px; }
.pb-cmp-teaser__pill { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 3px 10px; border-radius: 100px; border: 1px solid var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); }
.pb-cmp-teaser__pill > span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pb-cmp-teaser h2 { margin: 0 0 10px; font-family: var(--font-space); font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; color: var(--text); }
.pb-cmp-teaser p { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--text2); }
.pb-cmp-teaser__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pb-cmp-teaser__author { display: flex; align-items: center; gap: 8px; }
.pb-cmp-teaser__name { font-size: 13px; font-weight: 600; color: var(--text); }
.pb-cmp-teaser__date { font-size: 11px; color: var(--text3); }
.pb-cmp-teaser__read { font-size: 12px; color: var(--text3); white-space: nowrap; }

.pb-cmp-archive .pagination { margin-top: 40px; }
.pb-cmp-archive .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.pb-cmp-archive .page-numbers { padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; color: var(--text2); text-decoration: none; }
.pb-cmp-archive .page-numbers.current { border-color: var(--accent); color: var(--accent); }

/* ── Alternatives ───────────────────────────────────────────────── */
.pb-alt { min-height: 100vh; }
.pb-alt__col { max-width: 820px; margin: 0 auto; }
.pb-alt__hero, .pb-alt__section, .pb-alt__cards { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pb-alt__hero { padding-top: 56px; padding-bottom: 40px; }
.pb-alt__hero .pb-cmp-crumbs { gap: 8px; margin-bottom: 24px; font-size: 14px; line-height: 20px; }
.pb-alt__pills { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pb-alt__pill { padding: 4px 12px; line-height: 16px; border-radius: 100px; background: var(--bg3); border: 1px solid var(--border2); font-size: 12px; font-weight: 500; color: var(--text3); }
.pb-alt__pill--cat { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pb-alt__title { margin-bottom: 16px; font-family: var(--font-space); font-size: 42px; font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; color: var(--text); }
.pb-alt__intro { margin: 0 0 24px; font-family: var(--font-lora); font-size: 18px; font-style: italic; line-height: 1.65; color: var(--text2); }
.pb-alt__against { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 32px; padding: 16px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--border2); color: var(--accent); }
.pb-alt__against svg { flex-shrink: 0; margin-top: 2px; }
.pb-alt__against p { margin: 0; font-size: 14px; color: var(--text2); }
.pb-alt__against strong { color: var(--text); }
.pb-alt__against a { color: var(--accent); text-decoration: none; }
.pb-alt__rule { margin: 0; border: 0; border-top: 1px solid var(--border); }

.pb-alt__section { padding-top: 40px; padding-bottom: 40px; }
.pb-alt__section--end { padding-top: 24px; padding-bottom: 80px; }
.pb-alt__h2 { margin-bottom: 16px; font-family: var(--font-space); font-size: 18px; font-weight: 700; color: var(--text); }
.pb-alt__h2--lg { margin-bottom: 24px; font-size: 20px; }
.pb-alt__table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; }
.pb-alt__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pb-alt__table thead tr { background: var(--bg3); }
.pb-alt__table th { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; font-family: var(--font-space); font-weight: 600; color: var(--text); }
.pb-alt__table td { padding: 12px 16px; color: var(--text2); }
.pb-alt__table tbody tr + tr { border-top: 1px solid var(--border); }
.pb-alt__table-name { font-weight: 600; }
.pb-alt__table-name a { color: var(--text); text-decoration: none; }
.pb-alt__table-name a:hover { text-decoration: underline; }
.pb-alt__yes { color: var(--green); }
.pb-alt__no { color: var(--red); }
.pb-alt__review-link { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; white-space: nowrap; }

.pb-alt__cards { padding-top: 24px; padding-bottom: 24px; }
.pb-alt__cards .pb-alt__col { display: flex; flex-direction: column; gap: 24px; }
.pb-alt-card { padding: 24px; overflow: hidden; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); border-top: 2px solid var(--green); scroll-margin-top: 5rem; }
.pb-alt-card.is-first { border-top-color: var(--accent); }
.pb-alt-card.is-second { border-top-color: var(--accent2); }
.pb-alt-card__top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
.pb-alt-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.pb-alt-card__title h3 { font-family: var(--font-space); font-size: 20px; font-weight: 700; color: var(--text); }
.pb-alt-card__rank { padding: 2px 8px; border-radius: 100px; background: var(--bg3); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text3); }
.pb-alt-card__cat { margin: 0; font-size: 12px; color: var(--text3); }
.pb-alt-card__meta { display: flex; align-items: center; flex-shrink: 0; gap: 12px; font-size: 14px; font-weight: 600; }
.pb-alt-card__meta .pb-stars .is-off { color: var(--accent); } /* old design: outlined stars in the accent colour */
.pb-alt-card__rating { color: var(--text); }
.pb-alt-card__price { color: var(--accent); }
.pb-alt-card__desc { margin: 0 0 20px; font-family: var(--font-lora); font-size: 15px; line-height: 1.75; color: var(--text2); }
.pb-alt-card__pc { display: grid; gap: 16px; margin-bottom: 20px; }
.pb-alt-card__box { padding: 16px; border-radius: 12px; }
.pb-alt-card__box.is-pros { background: var(--green-dim); border: 1px solid var(--green); --pb-mark: var(--green); }
.pb-alt-card__box.is-cons { background: var(--red-dim); border: 1px solid var(--red); --pb-mark: var(--red); }
.pb-alt-card__box > p { margin: 0 0 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pb-mark); }
.pb-alt-card__box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-alt-card__box li { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text2); }
.pb-alt-card__box .pb-icon { flex-shrink: 0; margin-top: 3px; color: var(--pb-mark); }

.pb-alt__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; background: var(--accent); color: #000; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity 0.15s; }
.pb-alt__btn:hover { opacity: 0.85; }
.pb-alt__btn--ghost { background: transparent; border: 1px solid var(--border2); color: var(--text2); }

.pb-alt__faq { display: flex; flex-direction: column; gap: 16px; }
.pb-alt__faq-item { padding: 20px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border); }
.pb-alt__faq-item h3 { margin-bottom: 8px; font-family: var(--font-space); font-size: 15px; font-weight: 600; color: var(--text); }
.pb-alt__faq-item p { margin: 0; font-family: var(--font-lora); font-size: 14px; line-height: 1.625; color: var(--text2); }

.pb-alt__empty { padding: 32px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); border-top: 2px solid var(--accent); }
.pb-alt__empty h2 { margin-bottom: 10px; font-family: var(--font-space); font-size: 20px; font-weight: 700; color: var(--text); }
.pb-alt__empty p { margin: 0 0 20px; font-family: var(--font-lora); font-size: 15px; line-height: 1.75; color: var(--text2); }
.pb-alt__empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width: 640px) {
	.pb-alt-card { padding: 32px; }
	.pb-alt-card__pc { grid-template-columns: 1fr 1fr; }
}
/* The old page kept two columns on phones, which squeezed the cards; stack them instead. */
@media (max-width: 640px) {
	.pb-cmp__title, .pb-cmp-archive__head h1 { font-size: 28px; }
	.pb-alt__title { font-size: 32px; }
	.pb-cmp-vs { grid-template-columns: 1fr; gap: 12px; }
	.pb-cmp-vs__badge { margin: 0 auto; }
	.pb-cmp-2col { grid-template-columns: 1fr; }
	.pb-cmp-verdict { padding: 22px; }
}