/* Shared components for inner pages (built by lib/Components.pm).
   Same visual language as the approved homepage-v3: white cards, 1px hairlines (--line),
   soft shadows (--shadow-soft / --shadow-lift), 16-20px radii, Figtree headings, teal buttons,
   amber only on stars and score badges. Tokens only: no raw color values.
   Depends on tokens.css and the shared variables defined in styles.css (:root --line, --soft, ...). */

/* ---------- page shell for inner pages ---------- */
.page-hero { padding-block: clamp(32px, 5vw, 64px) var(--space-8); }
.page-hero h1 { font-size: clamp(36px, 3.4vw + 16px, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin: var(--space-4) 0; max-width: 18em; }
.page-hero__lead { font-size: clamp(18px, 0.5vw + 15px, 21px); line-height: 1.5; color: var(--ink-muted); max-width: 46em; margin: 0; }
.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: clamp(26px, 1.4vw + 18px, 34px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.stack > * + * { margin-top: var(--space-6); }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.crumbs a:hover { color: var(--ink); border-color: var(--ink); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- ScoreBadge ---------- */
.scorebox { display: inline-grid; justify-items: start; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; }
.scorebox:hover { border-color: var(--line-strong); }
.scorebox:hover .scorebox__how { text-decoration: underline; }
.scorebox__label { color: var(--ink-muted); }
.scorebox__pill { font-family: var(--font-mono); font-weight: var(--score-weight); font-size: var(--score-size); line-height: var(--score-line); background: var(--amber); color: var(--on-amber); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); }
.scorebox__pill mark.ph { background: var(--surface-raised); outline-color: var(--on-amber); }
.scorebox .stars .star { width: 20px; height: 20px; }
.scorebox__how { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--teal); font-weight: 600; }

/* ---------- VerdictBadge ---------- */
.verdict-box { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.verdict-box__q { margin: 0; font-size: clamp(24px, 1vw + 18px, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.verdict-box__line { margin: 0; font-size: var(--body-lg-size); line-height: var(--body-lg-line); max-width: 46em; }
.verdict-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-weight: 700; }
.verdict-badge .icon { width: 18px; height: 18px; }
.verdict-badge--pro { background: var(--pro-100); color: var(--pro); }
.verdict-badge--con { background: var(--con-100); color: var(--con); }
.verdict-badge--ph { background: var(--soft); color: var(--ink); }
.verdict-badge--mixed { background: var(--soft); color: var(--ink); border: 1px solid var(--line, currentColor); }

/* ---------- ProsCons ---------- */
.proscons { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .proscons { grid-template-columns: 1fr 1fr; } }
.proscons__col { padding: var(--space-6); border-radius: 18px; border: 1px solid var(--line); }
.proscons__col--pro { background: var(--pro-100); }
.proscons__col--con { background: var(--con-100); }
.proscons__h { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: 19px; }
.proscons__col--pro .proscons__h, .proscons__col--pro li > .icon { color: var(--pro); }
.proscons__col--con .proscons__h, .proscons__col--con li > .icon { color: var(--con); }
.proscons ul { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
.proscons li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink); }
.proscons li > .icon { width: 20px; height: 20px; margin-top: 4px; }

/* ---------- SummaryCard (sticky on desktop) ---------- */
.summary-card { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lift); }
@media (min-width: 1024px) { .summary-card { position: sticky; top: 96px; } }
.summary-card__head { display: flex; align-items: center; gap: var(--space-3); }
.summary-card__name { margin: 0; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.summary-card .scorebox { box-shadow: none; padding: 0; border: 0; }
.summary-card__facts { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.summary-card__facts > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.summary-card__facts dt { color: var(--ink-muted); font-size: var(--caption-size); }
.summary-card__facts dd { margin: 0; font-weight: 600; text-align: right; }
.summary-card__visit { width: 100%; }
.summary-card__visit .icon { width: 18px; height: 18px; }
.summary-card__note { margin: 0; padding: var(--space-3); background: var(--soft); border-radius: 12px; color: var(--ink); }

/* ---------- ComparisonTable (scrolls inside its own container) ---------- */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-raised); box-shadow: var(--shadow-soft); -webkit-overflow-scrolling: touch; }
.compare:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.compare__table { width: 100%; min-width: 720px; border-collapse: collapse; }
.compare__table th, .compare__table td { text-align: left; padding: var(--space-4); vertical-align: middle; border-top: 1px solid var(--line); }
.compare__table thead th { border-top: 0; background: var(--soft); font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-muted); font-weight: var(--label-weight); }
.compare__rank { width: 48px; font-family: var(--font-mono); font-weight: var(--score-weight); color: var(--teal); }
.compare__tool { font-weight: 700; position: sticky; left: 0; background: var(--surface-raised); }
.compare__leaving td, .compare__leaving th { background: var(--soft); }
.compare__leaving .compare__rank { min-width: 120px; }
.compare__leaving .label { color: var(--ink); }

/* ---------- FilterChips ---------- */
.filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font-size: var(--caption-size); font-weight: 600; text-decoration: none; }
.filter-chip:hover { border-color: var(--ink); text-decoration: none; }
.filter-chip.is-on { background: var(--teal-100); border-color: var(--teal); color: var(--ink); }
.filter-chip .icon { width: 16px; height: 16px; color: var(--teal); }

/* ---------- Pagination ---------- */
.pager ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; }
.pager__num, .pager__step, .pager__gap { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 44px; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-btn, 10px); font-weight: 600; text-decoration: none; color: var(--ink); }
.pager__num, .pager__step { border: 1px solid var(--line-strong); background: var(--surface-raised); }
.pager__num:hover, .pager__step:hover { border-color: var(--ink); }
.pager__num.is-current { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.pager__step .icon { width: 18px; height: 18px; }
.pager__gap { color: var(--ink-muted); }

/* ---------- Byline ---------- */
.byline { margin: 0; color: var(--ink-muted); }
.byline a { color: var(--ink); font-weight: 600; }

/* ---------- AuthorBox ---------- */
.author-box { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
@media (max-width: 479px) { .author-box { grid-template-columns: 1fr; } }
.author-box__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.author-box__photo--ph { background: var(--surface); border: 1.5px dashed var(--ink-muted); font-size: 11px; text-align: center; }
.author-box__photo--ph mark.ph { outline: none; background: none; padding: 0; }
.author-box__body > * { margin: 0 0 var(--space-2); }
.author-box__eyebrow { color: var(--ink-muted); }
.author-box__name { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.author-box .text-link { font-weight: 600; }

/* ---------- DisclosureBox (client brands) ---------- */
.disclosure-box { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); background: var(--soft); border: 1px solid var(--line-strong); border-radius: 16px; }
.disclosure-box > .icon { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 3px; }
.disclosure-box p { margin: 0; color: var(--ink); }
.disclosure-box a { font-weight: 600; }

/* ---------- Form field set ---------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: 700; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-muted); }
.field__hint { margin: 0; }
.field__control { width: 100%; }
textarea.field__control { min-height: 120px; padding-block: var(--space-3); resize: vertical; line-height: 1.5; }
.field__error { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--con); font-weight: 600; font-size: var(--caption-size); }
.field__error .icon { width: 18px; height: 18px; flex: none; }
.field--error .field__control { border-color: var(--con); border-width: 2px; }


/* A scrolling table must never widen its layout: grid/flex parents get minmax(0,1fr) / min-width:0 */
.compare { max-width: 100%; min-width: 0; }
.compare { position: relative; } /* keeps the visually-hidden caption inside the scroll box */
.compare__leaving .compare__rank .label { white-space: nowrap; }

/* =================================================================
   Review template (/review/{slug}/)
   ================================================================= */
.review { padding-bottom: var(--space-16); }
.review__head { padding-block: clamp(28px, 4vw, 56px) var(--space-6); display: grid; gap: var(--space-4); max-width: 820px; }
.review__head h1 { font-size: clamp(34px, 3.2vw + 16px, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.review__eyebrow { margin: var(--space-2) 0 0; }
.review__score { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding-top: var(--space-2); }
.review__score-text { margin: 0; font-weight: 700; }

/* one reading column + sticky summary card beside it on desktop; on phones the card follows the short version (DOM order) */
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.review-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .review-grid { grid-template-columns: minmax(0, 720px) 320px; column-gap: var(--space-12); justify-content: space-between; }
  .review-grid > * { grid-column: 1; }
  .review-grid > .summary-card { grid-column: 2; grid-row: 1 / span 30; align-self: start; }
}
.short-version { padding: var(--space-6); background: var(--soft); border: 1px solid var(--line); border-radius: 20px; }
.short-version p { margin: 0; }
.summary-card__alt { font-weight: 600; text-align: center; }

.prose h2 { margin-top: 0; }
.prose > h3 { font-size: 21px; margin-top: var(--space-6); }
.prose--wide { max-width: none; }

/* screenshots (placeholder until real images exist) */
.shot { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.shot__ph { display: grid; place-content: center; gap: var(--space-2); text-align: center; min-height: 240px; padding: var(--space-6); border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--teal) 40%, var(--line-strong)); background: radial-gradient(color-mix(in srgb, var(--teal) 18%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, color-mix(in srgb, var(--teal-100) 25%, var(--surface-raised)); }
.shot img { border: 2px solid var(--outline); border-radius: var(--radius-md); }

/* data tables (results, pricing) reuse the comparison table look, narrower min width */
.compare__table--data { min-width: 480px; }
.compare__table--data tbody th { font-weight: 700; }

/* callout on teal-100 (safety) */
.callout { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); background: var(--teal-100); border-radius: 16px; }
.callout > .icon { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 3px; }
.callout p { margin: 0; color: var(--ink); }
:root[data-theme="dark"] .callout > .icon { color: var(--ink); }

/* changed / historical service banner */
.review-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 16px; }
.review-banner > .icon { width: 22px; height: 22px; flex: none; color: var(--ink); margin-top: 3px; }
.review-banner p { margin: 0; font-weight: 600; }

/* related reviews */
.review-related { margin-top: var(--space-16); display: grid; gap: var(--space-6); }
.review-related h2 { margin: 0; font-size: clamp(26px, 1.4vw + 18px, 34px); letter-spacing: -0.03em; font-weight: 800; }
.review-related__links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; }
.review-related__links:empty { display: none; }
.review .verdict-box { margin-top: var(--space-4); }
/* review fixes: no empty grid rows, headings inside components keep their own spacing, tidy table */
.review-grid { row-gap: 0; }
.review-grid > * + * { margin-top: var(--space-12); }
.review-grid > .short-version + .summary-card { margin-top: var(--space-6); }
@media (min-width: 1024px) { .review-grid > .summary-card { margin-top: 0 !important; } .review-grid > .summary-card + * { margin-top: var(--space-6); } }
.prose .faq__q, .prose .verdict-box__q, .prose .proscons__h { margin: 0; }
.prose .faq { margin-top: var(--space-4); }
.compare__table thead th, .compare__tool, .compare__table td:nth-child(3), .compare__table td:nth-child(4) { white-space: nowrap; }
.compare .rating { flex-wrap: nowrap; }

/* plain bulleted lists inside article text */
.prose > ul { list-style: disc; padding-left: 1.25em; margin: 0 0 var(--space-4); }
.prose > ul li { margin-bottom: var(--space-2); }
.prose > ul li::marker { color: var(--teal); }

/* Comparison table: fits its box, no sideways scrolling */
.compare__table, .compare__table--data { min-width: 0; }
.compare__best { white-space: normal; min-width: 10ch; }
.compare__link { white-space: nowrap; text-align: right; }
.compare__tool { position: static; }
@media (max-width: 760px) {
  /* stack each tool as a small card */
  .compare__table:not(.compare__table--data) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare__table:not(.compare__table--data), .compare__table:not(.compare__table--data) tbody { display: block; }
  .compare__table:not(.compare__table--data) tr { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); padding: var(--space-4); border-top: 1px solid var(--line); }
  .compare__table:not(.compare__table--data) tr:first-child { border-top: 0; }
  .compare__table:not(.compare__table--data) th, .compare__table:not(.compare__table--data) td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
  .compare__table:not(.compare__table--data) .compare__rank { width: auto; }
  .compare__table:not(.compare__table--data) td[data-label], .compare__table:not(.compare__table--data) .compare__link { grid-column: 1 / -1; }
  .compare__table:not(.compare__table--data) td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
}
.summary-card__facts dt { white-space: nowrap; }

/* ===================== Best-of list page ===================== */
.best { padding-bottom: var(--space-16); }
.best__head { padding-block: clamp(28px, 4vw, 56px) var(--space-6); display: grid; gap: var(--space-4); max-width: 820px; }
.best__head h1 { font-size: clamp(34px, 3.2vw + 16px, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.best__head p { margin: 0; }
.best__intro { max-width: 68ch; }
.best__section { margin-top: var(--space-12); display: grid; gap: var(--space-6); }
.best__section > h2, .best__related > h2 { margin: 0; font-size: clamp(26px, 1.4vw + 18px, 34px); letter-spacing: -0.03em; font-weight: 800; }
.best__tie { margin: 0; }

/* quick picks: 3 cards */
.quick-picks { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .quick-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-pick { box-shadow: var(--shadow-soft); border-radius: 20px; }
.quick-pick__label { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--teal-100); color: var(--teal); font-weight: 700; }
.quick-pick__head { display: flex; align-items: center; gap: var(--space-3); }
.quick-pick__name { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.quick-pick__reason { color: var(--ink-muted); }
.quick-pick__cta { margin-top: auto; padding-top: var(--space-2); }
.quick-pick__cta .btn { width: 100%; justify-content: center; }

/* the ranked list */
.best-list { margin-top: var(--space-12); display: grid; gap: var(--space-8); max-width: 860px; }
.best-item { display: grid; gap: var(--space-4); padding: clamp(20px, 3vw, 36px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.best-item > p { margin: 0; }
.best-item__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.best-item__num { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--teal); color: var(--on-teal); font-family: var(--font-mono); font-weight: var(--score-weight); font-size: 24px; }
.best-item__title { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.best-item__title h2 { margin: 0; font-size: clamp(22px, 1vw + 16px, 28px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; }
.best-item__logo { flex: none; }
.best-item__for { color: var(--ink); }
.best-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.best-item__price { margin: 0; }
.best-item .btn-row { margin: 0; }
@media (max-width: 560px) { .best-item__logo { display: none; } .best-item__foot .btn-row, .best-item__foot .btn { width: 100%; justify-content: center; } }

/* text sections below the list */
.best__body { margin-top: var(--space-16); display: grid; gap: var(--space-12); max-width: 760px; }
.best__body > * { margin: 0; }
.best__left { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.best__left li { padding: var(--space-4) var(--space-6); background: var(--soft); border: 1px solid var(--line); border-radius: 16px; }
.best__left li p { margin: 0 0 var(--space-1); }
.timeline--compact { margin: var(--space-4) 0; }
.best__related { margin-top: var(--space-16); display: grid; gap: var(--space-6); }
.best-list { max-width: none; }
.prose > ul.best__left { list-style: none; padding-left: 0; }
.best__left li::marker { content: none; }
:root[data-theme="dark"] .quick-pick__label { color: var(--ink); }
@media (min-width: 640px) {
  .timeline.timeline--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline.timeline--compact li { border: 0; }
  .timeline.timeline--compact li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .timeline.timeline--compact li:nth-child(even) { border-left: 1px solid var(--line); }
}

/* best-of: per-tool write-up */
.best-item__summary { font-size: 17px; }
.best-item__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 760px) { .best-item__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.best-item__stats div { display: grid; gap: 4px; align-content: start; padding: var(--space-4); background: var(--soft); }
.best-item__stats dt { font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-muted); }
.best-item__stats dd { margin: 0; font-family: var(--font-mono); font-weight: var(--score-weight); font-size: 22px; color: var(--teal); }
.best-item__text { display: grid; gap: var(--space-2); max-width: 72ch; }
.best-item__text h3 { margin: var(--space-3) 0 0; font-size: 19px; letter-spacing: -0.01em; }
.best-item__text p { margin: 0; }

/* best-of: tools that didn't make the list */
.best__wide { margin: 0; display: grid; gap: var(--space-4); max-width: none; }
.best__wide > h2 { margin: 0; font-size: clamp(26px, 1.4vw + 18px, 34px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; }
.best__lead { margin: 0; color: var(--ink-muted); max-width: 68ch; }
.left-cards { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-2); }
@media (min-width: 860px) { .left-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.left-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.left-card p { margin: 0; }
.left-card__head { display: flex; align-items: center; gap: var(--space-3); }
.left-card__name { margin: 0 0 2px; font-size: 21px; letter-spacing: -0.02em; }
.left-card__why { padding: var(--space-4); background: var(--con-100); border-radius: 14px; display: grid; gap: var(--space-1); }
.left-card__why .label { color: var(--con); font-weight: 700; }
.left-card .text-link { justify-self: start; }

/* numbered steps inside article text */
.prose > ol.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.prose > ol.steps li { counter-increment: step; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 64px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.prose > ol.steps li::before { content: counter(step); position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--teal); color: var(--on-teal); font-family: var(--font-mono); font-weight: var(--score-weight); }
.prose .compare { margin: var(--space-4) 0; }

/* compact related-list links */
.related-links { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .related-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.list-link { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5, 20px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.list-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.list-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.list-link__icon { flex: none; }
.list-link__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.list-link__title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.list-link__arrow { flex: none; color: var(--teal); display: grid; }
.list-link__arrow .icon { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .list-link { transition: none; } .list-link:hover { transform: none; } }
.site-footer .brand { display: inline-flex; }
.best__wide { margin-top: var(--space-16); }
.best__layout { margin-top: var(--space-16); display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.best__layout .best__body { margin-top: 0; }
.toc { display: none; }
@media (min-width: 1100px) {
  .best__layout { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; }
  .toc { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 96px; padding: var(--space-5, 20px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
  .best__layout .best__body { grid-column: 1; grid-row: 1; }
}
.toc__title { margin: 0 0 var(--space-3); color: var(--ink-muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink); font-size: 15px; line-height: 1.35; text-decoration: none; }
.toc a:hover { background: var(--soft); color: var(--teal); }
.toc a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.best__body > *, .best__layout > * { min-width: 0; }
/* small data tables wrap instead of scrolling sideways */
.compare__table--data th, .compare__table--data td { white-space: normal !important; }
@media (max-width: 560px) { .compare__table--data th, .compare__table--data td { padding: var(--space-3) var(--space-2); font-size: 14px; } .compare__table--data thead th { font-size: 10px; letter-spacing: 0.04em; } }
.compare__table thead td { background: var(--soft); }

/* ===================== Alternatives page ===================== */
.switch-grid { margin-top: var(--space-6); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .switch-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.why-switch { padding: clamp(20px, 3vw, 36px); background: var(--soft); border: 1px solid var(--line); border-radius: 24px; display: grid; gap: var(--space-4); }
.why-switch__lead { margin: 0; font-weight: 600; }
.why-switch h2 { margin: var(--space-2) 0 0; font-size: clamp(24px, 1.2vw + 17px, 30px); letter-spacing: -0.03em; font-weight: 800; }
.why-switch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .why-switch__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-switch__list li { padding: var(--space-4) var(--space-5, 20px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; }
.why-switch__list h3 { margin: 0 0 var(--space-1); font-size: 17px; letter-spacing: -0.01em; }
.why-switch__list p { margin: 0; color: var(--ink-muted); }

.glance { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
@media (min-width: 1024px) { .glance { position: sticky; top: 96px; } }
.glance p { margin: 0; }
.glance__head { display: flex; align-items: center; gap: var(--space-3); }
.glance__eyebrow { color: var(--ink-muted); }
.glance__title { margin: 2px 0 0; font-size: 22px; letter-spacing: -0.02em; font-weight: 800; }
.glance__facts { margin: 0; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.glance__facts div { display: flex; justify-content: space-between; gap: var(--space-4); }
.glance__facts dt { color: var(--ink-muted); white-space: nowrap; }
.glance__facts dd { margin: 0; font-weight: 700; text-align: right; }
.glance__fair { font-size: 15px; color: var(--ink-muted); }
.glance__cta { justify-content: center; }

.why-over { padding: var(--space-4) var(--space-5, 20px); background: var(--teal-100); border-radius: 16px; display: grid; gap: var(--space-1); }
.why-over p { margin: 0; }
.why-over__q { color: var(--teal); font-weight: 700; }
:root[data-theme="dark"] .why-over__q { color: var(--ink); }

/* alternatives: head-to-head table + switch / stay boxes */
.best-item__text .compare { margin: var(--space-2) 0 var(--space-2); }
.best-item__text { max-width: none; }
.best-item__text > p { max-width: 72ch; }
.compare--vs tbody th { width: 30%; }
.compare--vs td:last-child, .compare--vs thead th:last-child { background: color-mix(in srgb, var(--teal-100) 45%, var(--surface-raised)); font-weight: 600; }
.compare--vs thead th:last-child { color: var(--teal); }
:root[data-theme="dark"] .compare--vs thead th:last-child { color: var(--ink); }
.switch-stay { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .switch-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.switch-stay__box { padding: var(--space-4) var(--space-5, 20px); border-radius: 16px; border: 1px solid var(--line); display: grid; gap: var(--space-1); }
.switch-stay__box p { margin: 0; }
.switch-stay__box .label { font-weight: 700; }
.switch-stay__box--go { background: var(--pro-100); }
.switch-stay__box--go .label { color: var(--pro); }
.switch-stay__box--stay { background: var(--soft); }
.switch-stay__box--stay .label { color: var(--ink-muted); }

/* ===================== Guide page ===================== */
.byline__icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.short-answer { margin-top: var(--space-6); max-width: 860px; padding: clamp(20px, 3vw, 32px); background: var(--soft); border: 1px solid var(--line); border-radius: 24px; display: grid; gap: var(--space-2); }
.short-answer__label { margin: 0; font-size: var(--label-size); color: var(--teal); font-weight: 700; }
.short-answer p { margin: 0; }
:root[data-theme="dark"] .short-answer__label { color: var(--ink); }
.guide .best__layout { margin-top: var(--space-12); }
/* guides: table of contents shows on every screen size (brief), inline on phones and sticky on desktop */
.toc.toc--always { display: block; padding: var(--space-5, 20px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
.toc--always ol { list-style: none; counter-reset: toc; }
.toc--always li { counter-increment: toc; }
.toc--always a { display: flex; gap: var(--space-2); }
.toc--always a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); padding-top: 2px; flex: none; }

/* tool callout: one per section at most */
.tool-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-6) 0; padding: var(--space-4) var(--space-5, 20px); background: var(--teal-100); border-radius: 16px; }
.tool-callout__body { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.tool-callout p { margin: 0; }
.tool-callout__text { font-size: 15px; color: var(--ink); }
.tool-callout__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.tool-callout__link .icon { width: 16px; height: 16px; }

/* common mistakes: cons-style list */
.prose > ul.mistakes { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.mistakes li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--con-100); border-radius: 14px; margin: 0; }
.mistakes li::marker { content: none; }
.mistakes .icon { flex: none; width: 20px; height: 20px; color: var(--con); margin-top: 3px; }

.source-note { margin-top: calc(-1 * var(--space-2)); }
.guide-link__icon { background: var(--teal-100); color: var(--teal); }
.guide .shot { margin: var(--space-4) 0; }
:root[data-theme="dark"] .tool-callout__link { color: var(--ink); }

/* ===================== Category hub + /categories/ ===================== */
.hub-band { background: var(--teal-100); border-bottom: 1px solid var(--line); }
.hub-band__inner { padding-block: clamp(28px, 4vw, 56px); display: grid; gap: var(--space-4); max-width: 860px; margin-inline: auto; text-align: center; justify-items: center; }
.hub-band__inner .crumbs ol { justify-content: center; }
.hub-band h1 { margin: 0; font-size: clamp(34px, 3.2vw + 16px, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
.hub-band p { margin: 0; }
.hub-band__intro { max-width: 62ch; }
.hub-band .label.tag { color: var(--teal); }
:root[data-theme="dark"] .hub-band .label.tag { color: var(--ink); }
.hub__more { margin: var(--space-6) 0 0; text-align: center; }
.hub__types-intro { max-width: 68ch; margin: 0 auto var(--space-6); text-align: center; color: var(--ink-muted); }
.hub-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.hub__count { margin: 0 0 var(--space-4); }
.hub-grid .review-row[hidden] { display: none; }
.soon { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.soon__item { padding: var(--space-3) var(--space-5, 20px); background: var(--surface-raised); border: 1px dashed var(--line-strong); border-radius: 999px; font-weight: 600; }
/* hub card rows: same cards as the homepage, centred when a category has only one or two */
@media (min-width: 640px) {
  [data-grid^="hub-"] { display: flex; flex-wrap: wrap; justify-content: center; }
  [data-grid^="hub-"] > * { flex: 0 1 calc((100% - 2 * var(--space-4)) / 2); min-width: 0; }
}
@media (min-width: 1024px) { [data-grid^="hub-"] > * { flex-basis: calc((100% - 2 * var(--space-4)) / 3); } }
.hub-band__inner { justify-items: stretch; }
.hub-band__inner > * { min-width: 0; max-width: 100%; }
.hub-band__intro { margin-inline: auto; }
.hub-band .crumbs ol { flex-wrap: wrap; }
:root[data-theme="dark"] .hub-band { --ink-muted: var(--ink); }
.hub__more .more-link { white-space: normal; max-width: 100%; }

/* ===================== Hub hero (homepage hero, recast per category) ===================== */
.hero--hub { --brand: var(--teal); --brand-2: var(--teal-100); position: relative; overflow: hidden; padding-bottom: clamp(40px, 5vw, 72px); }
.hero--hub::after { /* soft glow in the platform's colours, behind everything */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 12% 28%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(40% 55% at 88% 40%, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}
.hero--hub > * { position: relative; z-index: 1; }
.hero--hub .crumbs { margin-bottom: var(--space-6); }
.hero--hub .crumbs ol { justify-content: center; flex-wrap: wrap; }
.hero--hub .hero__inner { max-width: 820px; margin-inline: auto; }
.hero--hub .hero__inner > * { max-width: 100%; }
.hero--hub .display-xl { max-width: 13em; }
.hero__stage:not(.hero__stage--band) .hero--hub .display-xl, .hero--hub .hero__stage:not(.hero__stage--band) .display-xl { font-size: clamp(44px, 4vw + 12px, 72px); }
.hub-hero__byline { margin: 0 0 var(--space-6); }
.hero--hub .hero__sub { margin-bottom: var(--space-4); }

/* themed icon tiles and "notification" chips */
.fi-tile--glyph { background: var(--surface-raised); }
.fi-tile--glyph svg { width: 48%; height: 48%; }
.fi--chip { width: auto !important; height: auto !important; }
.fi-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: var(--surface-raised); border-radius: 999px; white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--ink); box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent); outline: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); outline-offset: -1px; }
.fi-chip__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: var(--on-teal); flex: none; }
.fi-chip__icon .icon, .fi-chip__icon svg { width: 16px; height: 16px; }
.hero__stage--band .fi-chip { font-size: 13px; padding: 6px 12px 6px 6px; }
.hero__stage--band .fi-chip__icon { width: 24px; height: 24px; }

/* facts window under the headline */
.hub-stats { margin-top: clamp(32px, 4vw, 56px); }
.hub-stats__body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .hub-stats__body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-stat { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); text-align: center; justify-items: center; }
.hub-stat + .hub-stat { border-top: 1px solid var(--line); }
@media (min-width: 760px) { .hub-stat + .hub-stat { border-top: 0; border-left: 1px solid var(--line); } }
.hub-stat p { margin: 0; }
.hub-stat__label { color: var(--ink-muted); }
.hub-stat__value { display: flex; align-items: baseline; justify-content: center; gap: 2px; min-height: 48px; align-items: center; }
.hub-stat__num { font-family: var(--font-mono); font-weight: var(--score-weight); font-size: 40px; line-height: 1; color: var(--teal); }
.hub-stat__unit { font-family: var(--font-mono); font-size: 18px; color: var(--ink-muted); align-self: flex-end; padding-bottom: 4px; }
:root[data-theme="dark"] .hub-stat__num { color: var(--ink); }
.hub-stat .rating { transform: scale(1.25); transform-origin: center; }

/* Light "Suggest a tool" card for category pages: same card, page-coloured instead of solid teal */
.cta-portal--light {
  color: var(--ink);
  background:
    radial-gradient(45% 70% at 12% 30%, color-mix(in srgb, var(--teal-100) 70%, transparent), transparent 70%),
    radial-gradient(45% 70% at 88% 70%, color-mix(in srgb, var(--teal-100) 55%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--surface-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.cta-portal--light h2 { color: var(--ink); }
.cta-portal--light .hero__sub { color: var(--ink-muted); }
.cta-portal--light :focus-visible { outline-color: var(--focus); }
.cta-portal--light .tile__spot { background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--teal) 8%, transparent), transparent 70%); }

/* ===================== Archive pages ===================== */
.archive { padding-top: var(--space-12); }
.archive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.sort-form { display: flex; align-items: center; gap: var(--space-2); }
.sort-form__label { font-size: var(--caption-size); font-weight: 600; color: var(--ink-muted); }
.sort-form__select { min-height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 10px); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: var(--caption-size); font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sort-form__select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.archive__count { margin: 0 0 var(--space-4); }
.archive__empty { margin: var(--space-6) 0; padding: var(--space-6); text-align: center; background: var(--soft); border: 1px dashed var(--line-strong); border-radius: 16px; }
.archive .pager { margin-top: var(--space-10, 40px); }
@media (min-width: 900px) { .archive-grid--rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .archive-grid--rows > .review-row:nth-child(odd) { border-right: 1px solid var(--line); } }
.archive-grid--rows .review-row[hidden] { display: none; }
.archive__h2 { margin: 0 0 var(--space-6); font-size: clamp(26px, 1.4vw + 18px, 34px); letter-spacing: -0.03em; font-weight: 800; }

/* guides grouped by topic */
.guide-groups { display: grid; gap: var(--space-12); }
.guide-group__title { margin: 0 0 var(--space-6); font-size: clamp(26px, 1.4vw + 18px, 34px); letter-spacing: -0.03em; font-weight: 800; scroll-margin-top: 96px; }

/* author header */
.author-hero { background: linear-gradient(180deg, var(--soft), transparent); padding-block: clamp(28px, 4vw, 56px) var(--space-6); }
.author-head { margin-top: var(--space-6); display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) { .author-head { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-10, 40px); } }
.author-head__photo { width: 160px; height: 160px; border-radius: 24px; border: 1px solid var(--line-strong); object-fit: cover; box-shadow: var(--shadow-soft); }
.author-head__photo--ph { display: grid; place-items: center; text-align: center; padding: var(--space-3); background: var(--surface-raised); border-style: dashed; font-size: 13px; }
.author-head__body { display: grid; gap: var(--space-3); max-width: 72ch; }
.author-head__body > * { margin: 0; }
.author-head h1 { font-size: clamp(34px, 3.2vw + 16px, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
.author-head__role { font-weight: 700; color: var(--ink-muted); }
.author-tags, .author-stats, .author-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.author-tag { padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--brown) 12%, var(--surface-raised)); color: var(--brown); font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; font-weight: 700; }
.author-stats li { color: var(--ink-muted); }
.author-stats__num { font-family: var(--font-mono); font-weight: var(--score-weight); color: var(--ink); }
.author-grid { display: grid; gap: var(--space-6); }
.author-grid [hidden] { display: none !important; }

/* ===================== Static pages (about, methodology, editorial policy) ===================== */
.static-page { padding-block: var(--space-12) var(--space-8); }
.static-page__body { margin-inline: auto; max-width: 720px; display: grid; gap: var(--space-12); }
.static-page__body > section > :first-child { margin-top: 0; }
.static-page__body h2 { margin-bottom: var(--space-4); }
.static-page__body .btn-row { margin-top: var(--space-4); justify-content: flex-start; }
.static-page__body .scale-wrap { margin-top: var(--space-4); }
.static-team { padding-block: var(--space-8); }
/* "choose one" block: both versions kept until the team picks the true one */
.choose { display: grid; gap: var(--space-3); padding: var(--space-5, 20px); border: 2px dashed var(--line-strong); border-radius: 18px; background: var(--soft); margin: var(--space-4) 0; }
.choose p { margin: 0; }
.choose__label { font-weight: 700; }
.choose__label::before { content: "Choose one: "; color: var(--brown); font-family: var(--font-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; }
.choose__option { display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; }
.choose__tag { color: var(--ink-muted); }

/* ===================== Forms (contact, suggest a tool): newsletter-style card ===================== */
.form-card { display: grid; gap: var(--space-5, 20px); padding: clamp(20px, 3vw, 32px); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.form-card__note { margin: 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--line-strong); border-radius: 10px; }
.form-card__fields { display: grid; gap: var(--space-5, 20px); }
.form-card__fields [hidden] { display: none; }
.form-card .field__label { font-size: 16px; }
.form-card textarea.input { min-height: 140px; padding-block: var(--space-3); resize: vertical; line-height: 1.5; }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--surface-raised); }
.field--check { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: var(--space-3); row-gap: var(--space-1); }
.field--check .field__label { grid-column: 2; font-weight: 600; }
.field--check .field__hint, .field--check .field__error { grid-column: 2; }
.field__check { grid-row: 1; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--teal); }
.field__check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--con); }
.field__error[hidden] { display: none; }
.form-card__actions .btn { min-width: 200px; justify-content: center; }
.form-card__success { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5, 20px); background: var(--pro-100); border-radius: 14px; }
.form-card__success[hidden] { display: none; }
.form-card__success .icon { flex: none; width: 24px; height: 24px; color: var(--pro); margin-top: 2px; }
.form-card__success p { margin: 0; font-weight: 600; }
.form-card__success:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* honeypot: off-screen, never seen or reached by people */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__side { margin-top: var(--space-4); }
.paper-note { padding: var(--space-5, 20px); background: var(--soft); border: 1px solid var(--line); border-radius: 16px; }
.paper-note p { margin: 0; }
.timeline--three { margin-top: var(--space-4); }
@media (min-width: 640px) { .timeline.timeline--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .timeline.timeline--three li:nth-child(n+3) { border-top: 0; } .timeline.timeline--three li + li { border-left: 1px solid var(--line); border-top: 0; } }

/* ===================== Legal pages ===================== */
.legal__updated { margin: 0 0 var(--space-4); }
.legal__notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5, 20px); background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 14px; }
.legal__notice .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.legal__notice p { margin: 0; }
.toc--inline { position: static; }

/* ===================== 404 ===================== */
.notfound { padding-block: clamp(40px, 6vw, 88px) var(--space-8); }
.notfound__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.notfound__mascot { width: min(280px, 100%); aspect-ratio: 1; margin-bottom: var(--space-6); }
.notfound .display-xl { max-width: 12em; margin: 0 0 var(--space-4); }
.notfound__line { max-width: 40ch; margin: 0 0 var(--space-6); color: var(--ink-muted); }
.notfound__search { width: min(560px, 100%); margin-bottom: var(--space-6); }
.static-page__body .toc.toc--inline { grid-column: auto; grid-row: auto; position: static; display: block; }
/* dropdown arrow drawn with theme colours (works in light and dark) */
.sort-form__select, .field__select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-color: var(--surface-raised);
}

/* ===================== Section divider: two lines with a magnifying glass ===================== */
.section-divider { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); position: relative; z-index: 1; }
.section-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 35%, var(--line-strong)); }
.section-divider__line + .section-divider__mark + .section-divider__line { background: linear-gradient(270deg, transparent, var(--line-strong) 35%, var(--line-strong)); }
.section-divider__mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-soft); color: var(--teal); }
.section-divider__mark svg { width: 20px; height: 20px; transform: rotate(-8deg); }
/* if a section has nothing to show and hides itself, don't stack two dividers */
.section-divider + section[hidden] + .section-divider { display: none; }

/* Platypus Reviews logo (header + footer) */
.brand__logo { display: block; height: 56px; width: auto; flex: none; }
.footer__logo .brand__logo { height: 72px; }
@media (max-width: 640px) { .site-header .brand__logo { height: 44px; } }

/* Platypus mascot (homepage hero window, 404) */
.mascot { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.window__side .mascot { max-height: 260px; }
.notfound__mascot.mascot { width: auto; height: 220px; aspect-ratio: auto; margin-bottom: var(--space-6); }
.section-divider__mark { width: 60px; height: 60px; }
.section-divider__mark img { width: auto; height: 36px; display: block; transform: rotate(-6deg); }
/* white platypus outline sits on a teal badge (dark teal in dark mode, where --teal is light) */
.section-divider__mark { background: var(--teal); border-color: var(--teal); }
.section-divider__mark img { height: 38px; }
:root[data-theme="dark"] .section-divider__mark { background: var(--teal-100); border-color: var(--line-strong); }
/* minimal grey platypus outline: no badge, the outline is painted in a theme grey through its shape (mask) */
.section-divider__mark { width: auto; height: auto; background: none; border: 0; box-shadow: none; padding: 0 var(--space-1); }
:root[data-theme="dark"] .section-divider__mark { background: none; border: 0; }
.section-divider__icon { display: block; width: 36px; height: 42px; background: color-mix(in srgb, var(--ink) 38%, transparent);
  -webkit-mask: url("../img/platypus-outline.png") center / contain no-repeat; mask: url("../img/platypus-outline.png") center / contain no-repeat; transform: rotate(-6deg); }
/* homepage card rows fill themselves from the data: centre them when there are only one or two cards */
@media (min-width: 640px) {
  [data-grid="alternatives"], [data-grid="lists"], [data-grid="guides"] { display: flex; flex-wrap: wrap; justify-content: center; }
  [data-grid="alternatives"] > *, [data-grid="lists"] > *, [data-grid="guides"] > * { flex: 0 1 calc((100% - 2 * var(--space-4)) / 2); min-width: 0; }
}
@media (min-width: 1024px) { [data-grid="alternatives"] > *, [data-grid="lists"] > *, [data-grid="guides"] > * { flex-basis: calc((100% - 2 * var(--space-4)) / 3); } }

/* "How we test every tool": Platypus logo in place of the screenshot (same card as the score table beside it) */
.method__logo { display: grid; place-items: center; padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); min-height: 280px; }
.method__logo img { display: block; width: auto; height: auto; max-height: 300px; max-width: 100%; }

/* ===================== Tighter section spacing (all pages) ===================== */
:root { --section-gap: clamp(44px, 5vw, 80px); --divider-gap: clamp(28px, 3vw, 44px); }
.section { padding-block: var(--section-gap); }
.section__head { margin-bottom: var(--space-8); }
/* equal space above and below each divider: the sections on either side give the same amount */
.section-divider { padding-block: 0; }
section:has(+ .section-divider) { padding-bottom: var(--divider-gap); }
.section-divider + section { padding-top: var(--divider-gap); }
.fi-letter--seo { font-size: 30cqw; letter-spacing: -0.02em; }

/* real company logos inside the logo tile */
.tool-logo--img { border: 1px solid var(--line); background: var(--surface-raised); overflow: hidden; padding: 0; }
.tool-logo--img img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* author avatars are full images (no dashed placeholder frame) */
.author-head__photo:not(.author-head__photo--ph), .author-box__photo:not(.author-box__photo--ph), .author__photo:not(.author__photo--ph) { border-style: solid; object-fit: cover; }
:root[data-theme="dark"] .callout .text-link, :root[data-theme="dark"] .tool-callout__text .text-link { color: var(--ink); }

/* Comparison table: always fits its box. Cells wrap, and when the box itself is narrow (review column,
   phones) each tool becomes a small stacked card, so there is never a sideways scroll. */
.compare { container-type: inline-size; overflow-x: visible; }
.compare__table:not(.compare__table--data) th, .compare__table:not(.compare__table--data) td { padding: var(--space-3); }
.compare__table:not(.compare__table--data) td:nth-child(4), .compare__table:not(.compare__table--data) .compare__tool { white-space: normal; }
@container (max-width: 780px) {
  .compare__table:not(.compare__table--data) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare__table:not(.compare__table--data), .compare__table:not(.compare__table--data) tbody { display: block; width: 100%; }
  .compare__table:not(.compare__table--data) tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5, 20px); border-top: 1px solid var(--line); }
  .compare__table:not(.compare__table--data) tr:first-child { border-top: 0; }
  .compare__table:not(.compare__table--data) th, .compare__table:not(.compare__table--data) td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
  .compare__table:not(.compare__table--data) .compare__rank { width: auto; grid-column: 1; }
  .compare__table:not(.compare__table--data) .compare__tool { grid-column: 2; font-size: 18px; }
  .compare__table:not(.compare__table--data) td:nth-child(3) { grid-column: 3; justify-self: end; }
  .compare__table:not(.compare__table--data) td[data-label="Price from"], .compare__table:not(.compare__table--data) td[data-label="Best for"], .compare__table:not(.compare__table--data) .compare__link { grid-column: 2 / -1; }
  .compare__table:not(.compare__table--data) td[data-label="Price from"]::before, .compare__table:not(.compare__table--data) td[data-label="Best for"]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--ink-muted); }
  .compare__table:not(.compare__table--data) td[data-label]::before { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; margin: 0; }
  .compare__table:not(.compare__table--data) .compare__leaving .compare__rank { grid-column: 1 / -1; }
}
/* small data tables: fixed layout so long words wrap inside the box instead of widening it */
.compare--data { overflow-x: auto; }
.compare__table--data { table-layout: fixed; width: 100%; }
.compare__table--data th, .compare__table--data td { overflow-wrap: anywhere; }