/* Info sites (EP-017): shared editorial base.
   Each site's stylesheet = this file + its @font-face rules + assets/themes/<siteId>.css
   + `:root { --accent; --accent-ink }` from site.json. Flat fills only: no gradients,
   shadows or glows. Sky (#0fc9ff) is never used: it is MentionPilot's colour. */
:root {
  --paper: #ffffff;
  --surface: #f3f5f7;
  --ink: #0a1219;
  --ink-2: #36434e;
  --ink-3: #56636e;
  --rule: #d9dfe4;
  --accent: #1f4fd1;
  --accent-ink: #ffffff;

  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-ui: var(--font-text);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-stretch: 100%;
  --display-tracking: -0.02em;

  --body: 1.0625rem;
  --leading: 1.62;
  --measure: 40rem;
  --h1: clamp(2.125rem, 1.5rem + 3vw, 3.25rem);
  --h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --h3: 1.1875rem;
  --radius: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--body);
  line-height: var(--leading);
  overflow-wrap: break-word;
  font-kerning: normal;
}

.wrap {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

/* Links and focus */
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.table-wrap:focus-visible {
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 0.75rem;
  color: var(--paper);
}

/* Header: wordmark + site navigation. Wraps on small screens; no script. */
.site-header {
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 2rem;
  padding-block: 1rem 0.875rem;
}
.wordmark {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  font-size: 1.1875rem;
  line-height: 1.2;
  text-decoration: none;
}
.wordmark:hover {
  color: var(--ink);
}

/* Site mark (lib/brand.mjs). Parts in currentColor; knock-outs painted with the surface colour
   behind the mark (--mark-knock), so parts can move. Accent headers set --mark-color/--mark-knock.
   Motion: transform/opacity only, once on load and again on hover/focus of the header link
   (a second animation name is added, so leaving hover does not replay), loops in .logo-loader,
   nothing under prefers-reduced-motion. */
.wordmark {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.5em;
}
.brand-mark {
  flex: none;
  width: 1.375em;
  height: 1.375em;
  overflow: visible;
  color: var(--mark-color, var(--accent));
}
.brand-mark path,
.brand-mark circle {
  fill: currentColor;
}
.brand-mark .mk-k {
  fill: var(--mark-knock, var(--paper));
}
.brand-mark .mk-ks {
  fill: none;
  stroke: var(--mark-knock, var(--paper));
}
.brand-mark .mk-fx {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  opacity: 0;
}
.brand-mark g,
.brand-mark [class*="mk-"] {
  transform-box: fill-box;
  transform-origin: center;
}
.footer-name {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.footer-name .brand-mark {
  width: 1.25em;
  height: 1.25em;
}
.logo-loader {
  display: inline-flex;
  color: var(--accent);
}
.logo-loader .brand-mark {
  width: 2rem;
  height: 2rem;
}
@media (forced-colors: active) {
  .brand-mark { color: LinkText; }
  .footer-name .brand-mark, .logo-loader .brand-mark { color: CanvasText; }
  .brand-mark .mk-k { fill: Canvas; }
  .brand-mark .mk-ks { stroke: Canvas; }
}
@media (prefers-reduced-motion: no-preference) {
  .mk-anim .mk-pulse { animation: mk-ping 900ms ease-out both; }
  .mk-anim .mk-right { animation: mk-from-right 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .mk-anim .mk-left { animation: mk-from-left 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .mk-anim .mk-wave1 { animation: mk-wave 450ms ease-out both; }
  .mk-anim .mk-wave2 { animation: mk-wave 450ms ease-out 250ms both; }
  .mk-anim .mk-star { animation: mk-pop 650ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .mk-anim .mk-dot { animation: mk-drop 800ms ease-out both; }

  .wordmark:is(:hover, :focus-visible) .mk-pulse { animation: mk-ping 900ms ease-out both, mk-ping-r 900ms ease-out both; }
  .wordmark:is(:hover, :focus-visible) .mk-right { animation: mk-from-right 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both, mk-from-right-r 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .wordmark:is(:hover, :focus-visible) .mk-left { animation: mk-from-left 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both, mk-from-left-r 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .wordmark:is(:hover, :focus-visible) .mk-wave1 { animation: mk-wave 450ms ease-out both, mk-wave-r 450ms ease-out both; }
  .wordmark:is(:hover, :focus-visible) .mk-wave2 { animation: mk-wave 450ms ease-out 250ms both, mk-wave-r 450ms ease-out 250ms both; }
  .wordmark:is(:hover, :focus-visible) .mk-star { animation: mk-pop 650ms cubic-bezier(0.3, 1.4, 0.5, 1) both, mk-pop-r 650ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .wordmark:is(:hover, :focus-visible) .mk-dot { animation: mk-drop 800ms ease-out both, mk-drop-r 800ms ease-out both; }

  .logo-loader .mk-pulse { animation: mk-ping 1200ms ease-out infinite; }
  .logo-loader .mk-right { animation: mk-apart-right 1400ms ease-in-out infinite; }
  .logo-loader .mk-left { animation: mk-apart-left 1400ms ease-in-out infinite; }
  .logo-loader .mk-wave1 { animation: mk-wave-loop 1200ms ease-in-out infinite; }
  .logo-loader .mk-wave2 { animation: mk-wave-loop 1200ms ease-in-out 200ms infinite; }
  .logo-loader .mk-star { animation: mk-star-loop 1200ms ease-in-out infinite; }
  .logo-loader .mk-dot { animation: mk-dot-loop 1000ms ease-in-out infinite; }
}
/* Each load keyframe has a twin (-r) so hover can start it again. */
@keyframes mk-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes mk-ping-r { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes mk-from-right { from { transform: translateX(2.5px); } }
@keyframes mk-from-right-r { from { transform: translateX(2.5px); } }
@keyframes mk-from-left { from { transform: translateX(-2.5px); } }
@keyframes mk-from-left-r { from { transform: translateX(-2.5px); } }
@keyframes mk-wave { from { opacity: 0; transform: translateX(-2px); } }
@keyframes mk-wave-r { from { opacity: 0; transform: translateX(-2px); } }
@keyframes mk-pop { from { transform: scale(0); } }
@keyframes mk-pop-r { from { transform: scale(0); } }
@keyframes mk-drop { 0% { opacity: 0; transform: translateY(-6px); } 55% { opacity: 1; transform: translateY(0.6px); } 78% { transform: translateY(-0.8px); } 100% { transform: none; } }
@keyframes mk-drop-r { 0% { opacity: 0; transform: translateY(-6px); } 55% { opacity: 1; transform: translateY(0.6px); } 78% { transform: translateY(-0.8px); } 100% { transform: none; } }
@keyframes mk-apart-right { 50% { transform: translateX(2.5px); } }
@keyframes mk-apart-left { 50% { transform: translateX(-2.5px); } }
@keyframes mk-wave-loop { 0%, 100% { opacity: 0.25; } 35% { opacity: 1; } }
@keyframes mk-star-loop { 50% { transform: scale(0.55); } }
@keyframes mk-dot-loop { 50% { transform: translateY(-3px); } }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.site-nav a {
  display: inline-block;
  padding: 0.375rem 0 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Page head: H1, one-line dek, date. The answer paragraph follows at once. */
main {
  padding-bottom: 2rem;
}
.page-head {
  max-width: none;
  padding-block: clamp(1.75rem, 1rem + 4vw, 3.5rem) 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}
h1 {
  font-size: var(--h1);
  line-height: 1.05;
  margin: 0;
  max-width: 56rem;
}
.dek {
  margin: 0.875rem 0 0;
  max-width: 42rem;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.45;
  text-wrap: pretty;
}
@media (max-width: 40em) {
  .dek {
    font-size: 1.0625rem;
  }
  .prose > p:first-child {
    font-size: 1.125rem;
  }
}
.page-meta {
  margin: 1rem 0 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

/* Prose column: comfortable measure; tables, cards and indexes use the full width. */
.prose > * {
  max-width: var(--measure);
  margin-block: 0;
}
.prose > * + * {
  margin-top: 1.125rem;
}
.prose > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.55;
}
.prose > .table-wrap,
.prose > .card-grid,
.prose > .category-index,
.prose > .wide,
.prose > figure.cover {
  max-width: none;
}
.prose > .table-wrap:not(.vendor-table):not(.source-matrix):not(.ended-table):not(.score-breakdown) {
  max-width: 56rem;
}
.prose > h2 {
  font-size: var(--h2);
  margin-top: 3.25rem;
  scroll-margin-top: 1rem;
}
.prose > h3,
.prose h3 {
  font-size: var(--h3);
  margin-top: 2.125rem;
  scroll-margin-top: 1rem;
}
.prose > h2 + *,
.prose > h3 + * {
  margin-top: 0.625rem;
}
.prose > h2 + h3 {
  margin-top: 1.25rem;
}
.prose > .table-wrap,
.prose > .card-grid,
.prose > .category-index,
.prose > .definition,
.prose > figure {
  margin-top: 1.75rem;
}
.prose > .table-wrap + *,
.prose > .card-grid + *,
.prose > .category-index + *,
.prose > .definition + *,
.prose > figure + * {
  margin-top: 1.75rem;
}
.prose > .scroll-hint + .table-wrap {
  margin-top: 0.375rem;
}

strong {
  font-weight: 650;
}
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
pre {
  overflow-x: auto;
  background: var(--surface);
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.5;
}
pre code {
  background: none;
  padding: 0;
}
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: 2.5rem;
}
blockquote {
  margin-inline: 0;
  padding: 0.125rem 0 0.125rem 1.125rem;
  border-left: 2px solid var(--ink);
  color: var(--ink-2);
}
blockquote p {
  margin: 0;
}
blockquote p + p {
  margin-top: 0.75rem;
}

/* Lists. Bulleted lists stay quiet; ordered lists read as numbered steps. */
.prose ul,
.prose ol {
  padding-left: 1.25rem;
}
.prose li + li {
  margin-top: 0.4rem;
}
.prose li > p {
  margin: 0;
}
.prose ul > li::marker {
  color: var(--ink-3);
}
.prose > ol {
  list-style: none;
  padding-left: 0;
  counter-reset: step;
}
.prose > ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.625rem;
  min-height: 1.75rem;
}
.prose > ol > li + li {
  margin-top: 0.875rem;
}
.prose > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prose > ol[start] {
  counter-reset: none;
}

/* Checklists: GFM task lists (- [ ] item). */
.prose li:has(> input[type="checkbox"]) {
  list-style: none;
  position: relative;
  margin-left: -1.25rem;
  padding-left: 2rem;
}
.prose li > input[type="checkbox"] {
  appearance: none;
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1.5px solid var(--ink-3);
  border-radius: 3px;
  background: var(--paper);
}
.prose li > input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.prose li > input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.08rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* "On this page" (lib/page.mjs). Narrow screens: a compact disclosure card after the
   answer. From 75em: a sticky card in the right margin. Entries are numbered; motion.js
   marks the section in view (.is-active + aria-current). Plain links without script. */
.toc,
.toc-side nav {
  font-family: var(--font-ui);
}
.toc-ic {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent);
}
.toc ol,
.toc-side ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.toc li + li,
.toc-side li + li {
  margin-top: 0.125rem;
}
.toc ol a,
.toc-side ol a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}
.toc-n {
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.toc ol a:hover,
.toc-side ol a:hover {
  background: var(--surface);
  color: var(--ink);
}
.toc ol a.is-active,
.toc-side ol a.is-active {
  background: var(--tint, var(--surface));
  color: var(--ink);
  font-weight: 650;
}
.toc ol a.is-active .toc-n,
.toc-side ol a.is-active .toc-n {
  color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .toc ol a,
  .toc-side ol a {
    transition: background-color 0.2s ease, color 0.2s ease;
  }
}

/* Narrow screens: "On this page" as a compact card (details/summary, no script). */
.toc {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg, 16px);
  background: var(--paper);
}
.toc summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.9375rem;
}
.toc summary::-webkit-details-marker {
  display: none;
}
.toc summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.25rem 0.25rem auto;
  border: solid var(--ink-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.toc[open] summary::after {
  margin-bottom: -0.125rem;
  transform: rotate(-135deg);
}
.toc-count {
  color: var(--ink-3);
  font-weight: 500;
  font-size: 0.8125rem;
}
.toc nav {
  padding: 0 0.5rem 0.625rem;
  border-top: 1px solid var(--rule);
}
.toc ol {
  padding-top: 0.5rem;
}

/* Wide screens: the list moves into the right margin as a sticky card. Tables, cards and
   indexes that span the full width pass over it (they sit above it on a paper background). */
.page-body {
  position: relative;
}
.toc-side {
  display: none;
}
@media (min-width: 75em) {
  .toc {
    display: none;
  }
  .toc-side {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15.5rem;
  }
  /* Guide layout: the page body is the .wrap itself; end the card on the content edge. */
  .wrap.page-body > .toc-side {
    right: clamp(1.125rem, 4vw, 2.5rem);
  }
  .toc-side nav {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 1.125rem 0.625rem 0.75rem;
    border: 1.5px solid var(--rule);
    border-radius: var(--radius-lg, 16px);
    background: var(--paper);
  }
  .toc-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.625rem 0.75rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }
  .toc-top {
    display: inline-block;
    margin: 0.625rem 0.625rem 0;
    color: var(--ink-3);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
  }
  .toc-top::before {
    content: "↑ ";
  }
  .toc-top:hover {
    color: var(--accent);
    text-decoration: underline;
  }
  .prose > .table-wrap,
  .prose > .scroll-hint,
  .prose > .card-grid,
  .prose > .category-index,
  .prose > .wide {
    position: relative;
    z-index: 2;
    background: var(--paper);
  }
}

/* Tables: strong header rule, quiet zebra rows, tabular figures. Wide tables scroll
   inside their region with a sticky first column; on phones every row becomes a
   labelled card (see the max-width: 40em block). */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
}
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.625rem;
  font-weight: 600;
  color: var(--ink);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 0.875rem;
}
thead th {
  vertical-align: bottom;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  background: var(--paper);
}
tbody th,
tbody td {
  border-bottom: 1px solid var(--rule);
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody tr:nth-child(even) > * {
  background: var(--surface);
}
tbody th {
  font-weight: 700;
  background: var(--paper);
}
tbody th a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
tbody th a:hover {
  color: var(--accent);
}
th:first-child,
td:first-child {
  padding-left: 0.5rem;
}
.vendor-table tbody th,
.source-matrix tbody th,
.ended-table tbody th,
.vendor-table thead th:first-child,
.source-matrix thead th:first-child,
.ended-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 8rem;
  border-right: 1px solid var(--rule);
}
.cell-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 400;
}
td.c-price {
  font-weight: 650;
  color: var(--ink);
  min-width: 9rem;
}
td.c-limits,
td.c-bestFor {
  min-width: 11rem;
}
td.c-sources,
td.c-allowance {
  min-width: 9rem;
}
td.unpublished,
td.missing {
  color: var(--ink-3);
}
td.checked {
  color: var(--ink-3);
  font-size: 0.8125rem;
  white-space: nowrap;
}
td.checked a {
  /* 24 px tall tap target (WCAG 2.5.8) without changing the text size. */
  display: inline-block;
  padding-block: 4px;
  color: var(--ink-3);
}
td.checked a:hover {
  color: var(--accent);
}
.vendor-table.cols-1 table,
.vendor-table.cols-2 table {
  min-width: 36rem;
}
.vendor-table.cols-3 table {
  min-width: 46rem;
}
.vendor-table.cols-4 table {
  min-width: 54rem;
}
.vendor-table.cols-5 table {
  min-width: 62rem;
}
.vendor-table table {
  min-width: 66rem;
}
.ended-table table {
  min-width: 52rem;
}
.source-matrix table {
  min-width: 48rem;
}
.source-matrix td[class^="state-"] {
  white-space: nowrap;
}
.state-yes {
  font-weight: 600;
}
.state-no,
.state-unknown {
  color: var(--ink-3);
}
.sym {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.45rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  vertical-align: -0.05em;
  position: relative;
  overflow: hidden;
}
.sym-yes {
  background: var(--accent);
}
.sym-partial::after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: var(--accent);
}
.sym-no {
  border: 0;
  border-radius: 0;
  height: 2px;
  vertical-align: 0.3em;
  background: var(--ink-3);
}
/* Key strip directly under a source matrix (::source-matrix legend="true"). */
.prose > .matrix-legend {
  max-width: none;
  margin-top: 0.625rem;
}
.matrix-legend {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
}
.matrix-legend ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 52em) {
  .matrix-legend ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.matrix-legend li {
  display: flex;
  gap: 0;
  align-items: baseline;
  margin: 0;
}
.matrix-legend li .sym {
  flex: none;
}
.matrix-legend strong {
  color: var(--ink);
}
.matrix-legend .ml-note {
  margin: 0.75rem 0 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* The vendor's stated reason under "Partial" (vendors.json sources.partialReasons). */
.source-matrix td.state-partial .cell-note {
  white-space: normal;
  min-width: 6rem;
  max-width: 7.5rem;
}

/* Rank + score columns (::source-matrix scores="true", ::score-breakdown). Rank and tool stay
   pinned while the rest scrolls sideways. */
.has-scores table {
  min-width: 56rem;
}
.score-breakdown table {
  min-width: 62rem;
}
.has-scores .rank,
.score-breakdown .rank {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 2.75rem;
  min-width: 2.75rem;
  font-variant-numeric: tabular-nums;
}
td.rank {
  background: var(--paper);
  font-weight: 800;
  color: var(--ink);
}
/* Score in the matrix: number over a small star row, so the column stays narrow. */
.has-scores td.score-cell .rating {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.has-scores td.score-cell .stars {
  font-size: 0.8125rem;
}
.has-scores thead th:first-child,
.score-breakdown thead th:first-child {
  min-width: 2.75rem;
  border-right: 0;
}
.has-scores tbody th,
.has-scores thead th:nth-child(2),
.score-breakdown tbody th,
.score-breakdown thead th:nth-child(2) {
  position: sticky;
  left: 2.75rem;
  z-index: 1;
  min-width: 8rem;
  border-right: 1px solid var(--rule);
}
.score-breakdown tbody th {
  background: var(--paper);
}
td.score-cell {
  white-space: nowrap;
}
.has-scores th,
.has-scores td,
.score-breakdown th,
.score-breakdown td {
  padding-inline: 0.5rem;
}
.has-scores td.checked,
.score-breakdown td.checked {
  white-space: normal;
  min-width: 5.5rem;
}
.score-breakdown td.sb-crit {
  min-width: 7.5rem;
}
.sb-fact {
  display: block;
  color: var(--ink);
}
/* Analysis features: one line per feature with the matrix symbol and the source-linked label. */
.sb-feats {
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: nowrap;
}
.sb-feats .sym {
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.35rem;
}
.sb-feats .sym-no {
  height: 2px;
}
.sb-fnote {
  color: var(--ink-3);
}
.sb-pts {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-pts b {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}
.scroll-hint {
  display: none;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
@media (min-width: 40.01em) and (max-width: 72em) {
  .scroll-hint:has(+ .vendor-table:not(.cols-1):not(.cols-2):not(.cols-3):not(.cols-4)) {
    display: block;
  }
}
@media (min-width: 40.01em) and (max-width: 62em) {
  .scroll-hint:has(+ .vendor-table),
  .scroll-hint:has(+ .source-matrix),
  .scroll-hint:has(+ .ended-table) {
    display: block;
  }
}
@media (min-width: 40.01em) and (max-width: 72em) {
  .scroll-hint:has(+ .score-breakdown),
  .scroll-hint:has(+ .has-scores) {
    display: block;
  }
}

/* Phone layout: each table row becomes a card with labelled fields. */
@media (max-width: 40em) {
  .table-wrap {
    overflow: visible;
    border-bottom: 0;
  }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td,
  .table-wrap caption {
    display: block;
    width: auto;
  }
  .table-wrap[class] table {
    min-width: 0;
  }
  .table-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table-wrap tbody tr {
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 0 0.875rem;
  }
  .table-wrap tbody tr + tr {
    margin-top: 1rem;
  }
  .table-wrap tbody tr > *,
  .table-wrap tbody tr:nth-child(even) > * {
    background: none;
    border: 0;
    padding: 0.3rem 0;
    position: static;
    min-width: 0;
  }
  .table-wrap tbody th {
    font-size: 1.0625rem;
    padding-bottom: 0.375rem;
  }
  /* Visual label only: the empty alternative text ("/ ''") keeps screen readers from
     reading it on top of the column header they already get from the ARIA table roles. */
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    content: attr(data-label) / "";
    display: block;
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .table-wrap td.checked {
    margin-top: 0.375rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rule);
    white-space: normal;
  }
  .table-wrap td.checked::before {
    display: none;
  }
  .table-wrap td.checked br {
    display: none;
  }
  .table-wrap td.checked a {
    margin-left: 0.5rem;
  }
  /* Source matrix: one line per source, label left and state right. */
  .source-matrix td[class^="state-"] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem 0;
  }
  .source-matrix td[class^="state-"]::before {
    display: inline;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink);
    order: -1;
    margin-right: auto;
  }
  .source-matrix td[class^="state-"] .sym {
    align-self: center;
  }
  .source-matrix td.state-partial {
    flex-wrap: wrap;
  }
  .source-matrix td.state-partial .cell-note {
    flex-basis: 100%;
    max-width: none;
    margin-top: 0;
    text-align: right;
  }
  /* Rank + tool on one line, every other cell full width below. */
  .has-scores tbody tr,
  .score-breakdown tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    align-items: baseline;
  }
  .has-scores tbody tr > *,
  .score-breakdown tbody tr > * {
    grid-column: 1 / -1;
  }
  .table-wrap tbody td.rank {
    position: static;
    grid-column: 1;
    width: auto;
    min-width: 0;
    font-size: 1.0625rem;
  }
  .table-wrap tbody td.rank::before {
    content: "#";
    content: "#" / "";
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: var(--ink-3);
  }
  .has-scores tbody th,
  .score-breakdown tbody th {
    grid-column: 2;
  }
  .table-wrap td.score-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem 0;
  }
  .table-wrap td.score-cell::before,
  .score-breakdown td.sb-crit::before {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ink);
  }
  .score-breakdown td.sb-crit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    border-bottom: 1px solid var(--rule);
    padding: 0.45rem 0;
  }
  .score-breakdown td.sb-crit::before {
    grid-column: 1 / -1;
  }
  .score-breakdown td.sb-crit > * {
    grid-column: 1;
  }
  .score-breakdown td.sb-crit > .sb-pts {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: 0;
  }
}

/* Answer card (lib/page.mjs answerCard): the opening answer paragraph under an "In short"
   kicker, its first sentence set heavier. Flat tinted card, accent badge, no edge rule. */
.answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.125rem;
  max-width: 46rem;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem) clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border-radius: var(--radius-lg, 16px);
  background: var(--surface);
}
.answer-badge {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.answer-badge .ic {
  width: 1.375rem;
  height: 1.375rem;
}
.answer-k {
  display: block;
  margin: 0.125rem 0 0.375rem;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prose > .answer p,
.lp-body > .answer p,
.answer p {
  margin: 0;
  max-width: none;
  color: var(--ink-2);
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.answer-lede {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Phones: a small badge beside the kicker, the answer below at full width. */
@media (max-width: 30em) {
  .answer {
    gap: 0.75rem 0.625rem;
    align-items: center;
  }
  .answer-body {
    display: contents;
  }
  .answer-badge {
    width: 2rem;
    height: 2rem;
  }
  .answer-badge .ic {
    width: 1.125rem;
    height: 1.125rem;
  }
  .answer-k {
    margin: 0;
  }
  .answer p {
    grid-column: 1 / -1;
  }
}

/* Trust strip (::disclosure): short promises with icons and a "How we score" link. */
.trust,
.prose > .trust {
  max-width: 46rem;
}
.lp-body > .trust {
  max-width: 52rem;
  margin-top: 1.5rem;
}
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.875rem 0;
  border-block: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.trust ul,
.prose .trust ul,
.lp-body .trust ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust li,
.prose .trust li,
.lp-body .trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.trust li .ic {
  flex: none;
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.3125rem;
  border-radius: 50%;
  background: var(--tint, var(--surface));
  color: var(--accent);
}
.trust-more {
  margin-left: auto;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.trust-more:hover {
  text-decoration: underline;
}
.trust li + li,
.prose .trust li + li,
.lp-body .trust li + li {
  margin-top: 0;
}
@media (max-width: 40em) {
  .trust,
  .trust ul {
    flex-direction: column;
    align-items: flex-start;
  }
  .trust-more {
    margin-left: 0;
  }
}

/* Callout (::note): outlined card, accent info badge, optional **bold** lead-in. */
.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  padding: 1rem 1.25rem 1.0625rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg, 16px);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.note-badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}
.note-badge .ic {
  width: 1.125rem;
  height: 1.125rem;
}
.note p {
  margin: 0;
  padding-top: 0.25rem;
}
.note p > strong:first-child {
  color: var(--ink);
  font-weight: 700;
}
.illustrative {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--ink-3);
  border-radius: 3px;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.prose > .illustrative {
  max-width: 100%;
}

.page:has(.prose > .definition:first-child) .page-head {
  border-bottom: 0;
  margin-bottom: 0.5rem;
}
.definition {
  padding-block: 1.25rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.definition p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  line-height: 1.45;
  text-wrap: pretty;
}
.definition dfn {
  font-style: normal;
  font-weight: 700;
}

/* CTA and downloads */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1rem;
}
.prose > .cta {
  margin-top: 2.25rem;
}
.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-weight: 650;
  line-height: 1.3;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
}
.button:hover {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 82%, #000000);
}
.download {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-ui);
}
.download a {
  font-weight: 650;
}
.download-meta {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* Cards: tool descriptions (::tool-cards) and free allowances (::allowance-cards). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
  gap: 1rem;
}
.tool-card,
.allowance-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.125rem 0.875rem;
  font-family: var(--font-ui);
}
.tool-card h2,
.tool-card h3,
.tool-card h4,
.allowance-card h2,
.allowance-card h3,
.allowance-card h4 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.25;
}
.tool-card h3 a,
.allowance-card h3 a,
.tool-card h2 a,
.allowance-card h2 a,
.tool-card h4 a,
.allowance-card h4 a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
.card-lede {
  margin: 0.375rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.facts {
  margin: 0.875rem 0 0;
  display: grid;
  gap: 0.625rem;
}
.fact dt {
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
}
.fact dd {
  margin: 0.0625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.fact dd.unpublished {
  color: var(--ink-3);
}
.fact-price dd {
  font-size: 1.0625rem;
  font-weight: 650;
}
.fact-limits dd {
  font-weight: 600;
}
.card-checked {
  margin: auto 0 0;
  padding-top: 0.875rem;
  color: var(--ink-3);
  font-size: 0.75rem;
}
.card-sources a {
  display: inline-block;
  margin-left: 0.5rem;
  padding-block: 5px;
  color: var(--ink-3);
}
.free-type {
  align-self: flex-start;
  margin: 0.5rem 0 0;
  padding: 0.0625rem 0.5rem;
  background: var(--surface);
  border-radius: 3px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
}
.allowance {
  margin-top: 0.875rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--rule);
}
.allowance p {
  margin: 0;
}
.allowance-label {
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 700;
}
.allowance-value {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}
.allowance.unpublished .allowance-value {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 1rem;
}
.allowance .cell-note {
  font-weight: 400;
}

/* ::category-index — jump list to the page's H2 sections. */
.category-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  column-gap: 1.5rem;
  border-top: 2px solid var(--ink);
}
.prose .category-index li {
  margin: 0;
}
.category-index a {
  display: block;
  height: 100%;
  padding: 0.75rem 0 0.875rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.ci-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 1.0625rem;
  line-height: 1.25;
}
.ci-tools {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.category-index a:hover .ci-title {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* FAQ: plain question-and-answer list. */
.faq h3 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.375rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.faq h2 + h3 {
  margin-top: 1rem;
}
.faq p {
  margin: 0 0 0.75rem;
}
.prose > .faq {
  margin-top: 3.25rem;
}
.faq h2 {
  font-size: var(--h2);
  margin: 0;
}

/* Images (cover under the H1, inline figures). */
img {
  max-width: 100%;
  height: auto;
}
.prose img,
img.cover {
  display: block;
  border-radius: 4px;
}
figure {
  margin: 0;
}
figcaption {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.45;
}
/* Cover: under the H1, dek and date, as wide as the H1 column. */
img.cover {
  width: 100%;
  max-width: 56rem;
  margin-top: 1.5rem;
}

/* Footer: site links, About this site / Privacy. */
.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.footer-inner {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: 2.25rem 1.75rem;
}
@media (min-width: 48em) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.footer-name {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: 1rem;
}
.footer-links a {
  color: var(--ink-2);
}
.footer-links a:hover {
  color: var(--ink);
}
.footer-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

/* Contact form (::contact-form at the end of the About page; assets/contact.js sends it).
   Flat: a ruled section, plain inputs, the accent only on focus and the button. */
.contact {
  max-width: var(--measure);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}
.contact > h2 {
  margin-top: 0;
}
.cf-lede {
  color: var(--ink-2);
}
.cf-form {
  display: grid;
  gap: 1.125rem;
  margin-top: 1.25rem;
}
.contact [hidden] {
  display: none;
}
.cf-field {
  display: grid;
  gap: 0.375rem;
}
.cf-field label {
  font-family: var(--font-ui);
  font-weight: 650;
  color: var(--ink);
}
.cf-opt {
  font-weight: 400;
  color: var(--ink-3);
}
.cf-field input,
.cf-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}
.cf-field textarea {
  min-height: 10rem;
  resize: vertical;
}
.cf-field input:focus-visible,
.cf-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.cf-field [aria-invalid="true"] {
  border-color: #b42318;
}
.cf-hint,
.cf-err,
.cf-status,
.cf-noscript {
  margin: 0;
  font-size: 0.9375rem;
}
.cf-hint {
  color: var(--ink-3);
}
.cf-err,
.cf-status[data-state="error"] {
  color: #b42318;
  font-weight: 600;
}
.cf-status:empty {
  display: none;
}
.cf-noscript {
  font-weight: 600;
}
/* Honeypot: off-screen for people, still in the DOM for bots. */
.cf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-submit {
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}
.cf-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.cf-done {
  margin-top: 1.25rem;
  padding: 1.25rem 1.375rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}
.cf-done:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cf-done p {
  margin: 0.25rem 0 0;
}
.cf-done-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.25rem;
}

.not-found {
  padding-bottom: 3rem;
}
.not-found .page-head {
  border-bottom: 0;
  margin-bottom: 0.5rem;
}

@media print {
  .site-header,
  .site-footer,
  .toc,
  .toc-side,
  .cta,
  .scroll-hint {
    display: none;
  }
  .table-wrap {
    overflow: visible;
  }
}

/* Info sites v3 components (lib/components.mjs, lib/icons.mjs): logos, stars, source icons,
   buttons, the closing CTA band, the FAQ accordion and the `layout: landing` page (hero with
   tool finder, logo strip, podium, ranked list, tips band, scoring criteria).
   Appended after site.css in every site stylesheet. Colours come from tokens, so each site
   keeps its own accent. Icons are an inline SVG sprite (<use href="#i-…">). */
:root {
  --star: #ffb020;
  --star-off: #d3d9e1;
  --tint: color-mix(in srgb, var(--accent) 8%, #ffffff);
  --accent-deep: color-mix(in srgb, var(--accent) 78%, #000000);
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-back: cubic-bezier(0.2, 0.9, 0.3, 1.35);
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 0 27 24'%3E%3Cpath d='M12 1.4l3.2 6.6 7.2 1-5.2 5.1 1.2 7.2L12 17.9l-6.4 3.4 1.2-7.2L1.6 9l7.2-1z'/%3E%3C/svg%3E");
  --i-plus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ic {
  display: inline-block;
  flex: none;
  width: 1.125em;
  height: 1.125em;
  vertical-align: -0.2em;
}

/* ---------- Logos ---------- */
.logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.logo-sm {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
}
.logo-xs {
  width: 2rem;
  height: 2rem;
  padding: 0.3125rem;
  border-radius: 50%;
}
.logo-mono {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-2);
  background: var(--surface);
}
.tool-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.tool-cell .logo {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem;
  border-radius: 8px;
}

/* ---------- Stars + score (masked star row; fill width from st-N, N = half stars) ---------- */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.stars {
  position: relative;
  display: inline-block;
  flex: none;
  width: 5.625em;
  height: 1em;
  font-size: 1.0625rem;
}
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--i-star) left center / 1.125em 1em repeat-x;
  mask: var(--i-star) left center / 1.125em 1em repeat-x;
}
.stars::before {
  background: var(--star-off);
}
.stars::after {
  background: var(--star);
  right: auto;
  width: 0;
}
.st-1::after { width: 10%; }
.st-2::after { width: 20%; }
.st-3::after { width: 30%; }
.st-4::after { width: 40%; }
.st-5::after { width: 50%; }
.st-6::after { width: 60%; }
.st-7::after { width: 70%; }
.st-8::after { width: 80%; }
.st-9::after { width: 90%; }
.st-10::after { width: 100%; }
.score {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.rating-md .score {
  font-size: 1.375rem;
}
.rating-sm .score {
  font-size: 1.25rem;
}
.rating-xl {
  gap: 0.75rem;
}
.rating-xl .score {
  font-size: 3.5rem;
  letter-spacing: -0.045em;
}
.rating-xl .stars {
  font-size: 1.25rem;
}

/* ---------- Source icons ---------- */
/* Platform marks in brand colour (Simple Icons, CC0). Only covered sources get a slot. */
.brand-reddit { color: #ff4500; }
.brand-youtube { color: #ff0000; }
.brand-x { color: #000; }
.brand-bluesky { color: #1185fe; }
.brand-facebook { color: #0866ff; }
.brand-instagram { color: #e1306c; }
.brand-linkedin { color: #0a66c2; }
.brand-tiktok,
.brand-threads { color: #000; }
.brand-pinterest { color: #bd081c; }
.brand-snapchat { color: #9a8c00; }
.brand-tumblr { color: #36465d; }
.brand-twitch { color: #9146ff; }
.brand-vimeo { color: #1ab7ea; }
.brand-telegram { color: #26a5e4; }
.brand-quora { color: #b92b27; }
.src {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.src > span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--tint);
  color: var(--ink);
}
.src .ic {
  width: 1rem;
  height: 1rem;
}
.src > span.part {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
  color: var(--ink-2);
}
.src-unknown {
  color: var(--ink-3);
  font-size: 0.875rem;
}
.src-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.src-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.src-legend .key {
  width: 1rem;
  height: 1rem;
  border-radius: 5px;
}
.key-part .key {
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}
/* Tools that publish no price: a small outlined badge under the price (also the legend key). */
.price-hidden {
  display: inline-block;
  width: fit-content;
  margin-top: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  border: 1.5px solid #b42318;
  border-radius: 999px;
  color: #b42318;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
}
.src-legend .key-hidden .price-hidden {
  margin: 0 0.25rem 0 0;
}
.price {
  font-weight: 650;
  font-family: var(--font-ui);
}
.price.is-free {
  color: #0f7a54;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover {
  background: var(--accent-deep);
  color: var(--accent-ink);
}
.btn:active {
  transform: scale(0.97);
}
.btn .ic {
  width: 1rem;
  height: 1rem;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.btn-ghost:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* ---------- FAQ accordion (::faq) ---------- */
.faq-accordion h2 {
  margin-bottom: 0.5rem;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.375rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--tint) var(--i-plus-ink) center / 1rem no-repeat;
  transition: transform 0.3s var(--ease-out), background-color 0.25s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--star);
}
.faq-item summary:hover h3 {
  color: var(--accent);
}
.faq .faq-item h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.2s;
}
.faq-a {
  padding-bottom: 1.375rem;
  color: var(--ink-2);
  max-width: 40rem;
}
.faq-a p:last-child {
  margin-bottom: 0;
}

/* ---------- Closing CTA band (::cta with a title) ---------- */
.prose > .cta-band,
.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  margin-top: 4rem;
  padding: clamp(1.75rem, 1rem + 3.5vw, 4rem);
  background: var(--ink);
  border-radius: var(--radius-xl);
  max-width: none;
  color: var(--paper);
}
@media (min-width: 56em) {
  .prose > .cta-band,
  .cta-band {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.cta-copy > :first-child {
  margin-top: 0;
}
.cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 16em;
}
.cta-text {
  margin: 1rem 0 0;
  max-width: 34rem;
  color: #c9d1db;
  font-size: 1.0625rem;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
}

/* ====================== Landing layout (layout: landing) ====================== */
.layout-landing {
  overflow-x: clip;
}
.layout-landing main {
  padding-bottom: 0;
}
.layout-landing .site-header {
  background: var(--accent);
  border-bottom: 0;
  --mark-color: var(--accent-ink);
  --mark-knock: var(--accent);
}
.layout-landing .site-header .wordmark,
.layout-landing .site-header .site-nav a {
  color: var(--accent-ink);
}
.layout-landing .site-header .site-nav a[aria-current="page"] {
  border-bottom-color: var(--star);
}
.layout-landing .site-header .site-nav a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  background: var(--accent);
  color: var(--accent-ink);
}
.lp-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  align-items: center;
}
@media (min-width: 60em) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
    gap: 3.5rem;
  }
}
.lp-hero h1 {
  margin: 0;
  max-width: 13ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: inherit;
  text-wrap: balance;
}
.lp-hero h1 .w {
  display: inline-block;
}
.lp-hero .dek {
  margin: 1.5rem 0 0;
  max-width: 30ch;
  color: color-mix(in srgb, var(--accent-ink) 86%, var(--accent));
  font-family: var(--font-ui);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.45;
}
.lp-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--accent-ink) 74%, var(--accent));
}
.lp-proof li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--star);
  vertical-align: 0.1em;
}

/* Floating source icons behind the hero (decorative). */
.lp-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-drift span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.38);
}
.lp-drift .ic {
  width: 1.75rem;
  height: 1.75rem;
}
.lp-drift span:nth-child(1) { left: 3%; top: 64%; }
.lp-drift span:nth-child(2) { left: 45%; top: 4%; }
.lp-drift span:nth-child(3) { left: 50%; top: 58%; }
.lp-drift span:nth-child(4) { left: 93%; top: 3%; }
.lp-drift span:nth-child(5) { left: 2%; top: 28%; }
.lp-drift span:nth-child(6) { left: 94%; top: 52%; }
@media (max-width: 59.99em) {
  .lp-drift {
    display: none;
  }
}

/* ---------- Finder (hero aside) ---------- */
.finder {
  padding: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(6, 16, 70, 0.55);
}
.finder-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.finder-title .ic {
  color: var(--accent);
  width: 1.5rem;
  height: 1.5rem;
}
.fq {
  margin: 1.375rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.fq legend {
  padding: 0;
  margin-bottom: 0.625rem;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
}
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.opt {
  position: relative;
  cursor: pointer;
}
.opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.opt span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}
.opt .ic {
  width: 1rem;
  height: 1rem;
}
.opt:hover span {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.opt:active span {
  transform: scale(0.96);
}
.opt input:checked + span {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.opt input:focus-visible + span {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
.fm-wrap {
  margin-top: 1.5rem;
}
.fm {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem 1rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--tint);
}
.fm .logo {
  grid-row: span 2;
  width: 3.75rem;
  height: 3.75rem;
  border: 0;
  border-radius: 16px;
}
.fm-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fm-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  font-size: 0.9375rem;
}
.fm .src {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
}
.fm .src > span {
  background: var(--paper);
}
.fm .src > span.part {
  background: transparent;
}
.fm-why {
  grid-column: 1 / -1;
  margin: 0.625rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.fm-go {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
}
.fm-all {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--ink);
}
/* Which card shows: one rule per answer pair. Browsers without :has() show the first card. */
.fm.is-first { display: grid; }
@supports selector(:has(*)) {
  .fm.is-first { display: none; }
  .finder:has(#f-budget-free:checked):has(#f-where-web:checked) .m-free-web,
  .finder:has(#f-budget-free:checked):has(#f-where-reddit:checked) .m-free-reddit,
  .finder:has(#f-budget-free:checked):has(#f-where-social:checked) .m-free-social,
  .finder:has(#f-budget-low:checked):has(#f-where-web:checked) .m-low-web,
  .finder:has(#f-budget-low:checked):has(#f-where-reddit:checked) .m-low-reddit,
  .finder:has(#f-budget-low:checked):has(#f-where-social:checked) .m-low-social,
  .finder:has(#f-budget-any:checked):has(#f-where-web:checked) .m-any-web,
  .finder:has(#f-budget-any:checked):has(#f-where-reddit:checked) .m-any-reddit,
  .finder:has(#f-budget-any:checked):has(#f-where-social:checked) .m-any-social {
    display: grid;
  }
}

/* ---------- Logo strip ---------- */
.marquee {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: 1.25rem 0 7.5rem;
  overflow: hidden;
}
.mq-track {
  display: flex;
  width: max-content;
}
.mq-list {
  display: flex;
  gap: 0.875rem;
  margin: 0;
  padding: 0 0.875rem 0 0;
  list-style: none;
}
.mq-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 1.125rem 0.4375rem 0.4375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.mq-list .logo {
  border: 0;
}

/* Pause control for the moving strip and icons (WCAG 2.2.2). Checkbox + CSS, no script. */
.mq-pause {
  position: absolute;
  right: clamp(1.125rem, 4vw, 2.5rem);
  bottom: 6.75rem;
  z-index: 2;
  cursor: pointer;
}
.mq-pause input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.mq-pause span {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.mq-pause input:checked + span {
  background: var(--paper);
  color: var(--ink);
}
.mq-pause input:focus-visible + span {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mq-pause {
    display: none;
  }
}

/* ---------- Body sections ---------- */
.lp-body {
  padding-bottom: 4rem;
}
.lp-body h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 16ch;
  border: 0;
  padding: 0;
}
.lp-lede {
  margin: 0.875rem 0 0;
  max-width: 40rem;
  color: var(--ink-2);
  font-size: 1.125rem;
  line-height: 1.55;
}

/* Podium: three picks overlapping the hero's lower edge. */
.lp-podium {
  position: relative;
  z-index: 2;
  margin-top: -6rem;
}
.podium {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56em) {
  .podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pick {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 20px 40px -26px rgba(14, 23, 38, 0.3);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.pick:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 50px -26px rgba(14, 23, 38, 0.4);
}
.pick-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.pick-tag .ic {
  width: 0.9375rem;
  height: 0.9375rem;
}
.pick-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.375rem;
}
.pick-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pick .rating {
  margin-top: 1.25rem;
}
.pick .src {
  margin-top: 1rem;
}
.pick-why {
  flex: 1;
  margin: 1rem 0 0;
  color: var(--ink-2);
}
.pick-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.375rem 0 0;
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
}
.pick-foot .btn {
  padding: 0.5rem 1rem;
}

/* Ranked list */
.lp-ranked {
  margin-top: clamp(4rem, 3rem + 4vw, 6rem);
  scroll-margin-top: 1rem;
}
.rk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.rk-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.seg {
  position: relative;
  cursor: pointer;
}
.seg input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg > span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  transition: background-color 0.15s, color 0.15s;
}
.seg-count {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.seg input:checked + span {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.seg input:checked + span .seg-count {
  color: #aeb7c4;
}
.seg input:focus-visible + span {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
.lp-ranked:has(.f-free-plan:checked) .rk-row:not(.free-plan),
.lp-ranked:has(.f-free-trial:checked) .rk-row:not(.free-trial),
.lp-ranked:has(.f-self-serve:checked) .rk-row:not(.buy-self-serve),
.lp-ranked:has(.f-sales:checked) .rk-row:not(.buy-sales) {
  display: none;
}
.rk-list {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.rk-row {
  display: grid;
  grid-template-columns: 2.25rem auto minmax(0, 1.4fr) auto minmax(0, 1.2fr) minmax(7rem, 0.7fr) auto;
  gap: 1.125rem;
  align-items: center;
  padding: 1.125rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.15s;
}
.rk-row:hover {
  background: color-mix(in srgb, var(--tint) 55%, #ffffff);
}
.rk-n {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: #98a2b5;
}
.rk-tool {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rk-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.rk-best {
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.4;
}
.rk-price {
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.rk-buy {
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.rk-visit {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--ink);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.rk-visit .ic {
  width: 1.125rem;
  height: 1.125rem;
}
.rk-row:hover .rk-visit,
.rk-visit:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.rk-note {
  margin: 0.75rem 0 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
/* Free alert tools: small unranked box (no stars, no rank). */
.rating-na {
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.lp-alerts {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  scroll-margin-top: 1rem;
}
.lp-alerts > h2,
.lp-alerts > h3 {
  margin: 0;
  font-size: 1.25rem;
}
.at-text {
  margin: 0.375rem 0 0;
  color: var(--ink-3);
  font-size: 0.9375rem;
  max-width: 62ch;
}
.at-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.at-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 0.875rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.at-main,
.at-free {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.at-name {
  font-weight: 700;
}
.at-what,
.at-type,
.at-src {
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.4;
}
@media (max-width: 40em) {
  .at-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .at-row > .logo {
    grid-row: span 2;
  }
  .at-free {
    grid-column: 3;
    grid-row: 1;
  }
  .at-row > .src,
  .at-src {
    grid-column: 2 / -1;
  }
}
@media (max-width: 63.99em) {
  .rk-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo tool price"
      "logo rating visit"
      "logo src src";
    gap: 0.5rem 0.875rem;
    padding: 1.125rem 0;
  }
  .rk-n {
    display: none;
  }
  .rk-row > .logo {
    grid-area: logo;
    align-self: start;
  }
  .rk-tool { grid-area: tool; }
  .rk-row > .rating { grid-area: rating; }
  .rk-row > .src { grid-area: src; }
  .rk-price {
    grid-area: price;
    align-items: flex-end;
    text-align: right;
  }
  .rk-visit {
    grid-area: visit;
    justify-self: end;
  }
}
/* Phones: price under the name, so a long price note never squeezes the name column. */
@media (max-width: 40em) {
  .rk-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo tool tool"
      "logo price price"
      "logo rating visit"
      "logo src src";
  }
  .rk-price {
    align-items: flex-start;
    text-align: left;
  }
}
/* Ranked rows list only the sources a tool covers (up to 21): compact slots at every width. */
.rk-row > .src > span {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
}
.rk-row > .src .ic {
  width: 0.875rem;
  height: 0.875rem;
}
.rk-row > .src {
  gap: 0.25rem;
}

/* Tips band: full width, tinted. */
.lp-band {
  margin-top: clamp(4rem, 3rem + 4vw, 6rem);
  margin-inline: calc(50% - 50vw);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) calc(50vw - 50%);
  background: var(--tint);
}
.lp-quote {
  margin: 0;
  max-width: 50rem;
}
.lp-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.lp-quote blockquote p::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.25rem;
  font-size: 7rem;
  line-height: 0.6;
  color: var(--accent);
}
.lp-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 22ch;
}
.lp-quote figcaption {
  margin-top: 1.125rem;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.tip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56em) {
  .tip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tipc {
  padding: 1.625rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.tipc-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--star);
  color: var(--ink);
}
.tipc-ic .ic {
  width: 1.5rem;
  height: 1.5rem;
}
.tipc-k {
  margin: 1.125rem 0 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tipc h3 {
  margin: 0.25rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tipc p:last-child {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
}

/* How we score */
.lp-criteria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  margin-top: clamp(4rem, 3rem + 4vw, 6rem);
  scroll-margin-top: 1rem;
}
@media (min-width: 60em) {
  .lp-criteria {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 4rem;
    align-items: start;
  }
}
.crit-ties {
  margin-top: 0.75rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
}
.crit-intro .btn {
  margin-top: 0.5rem;
}
.crit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 34em) {
  .crit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* An odd last check (an odd number of criteria) takes the full row. */
  .crit-grid > .crit:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.crit {
  padding: 1.375rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
}
.crit-ic {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--tint);
  color: var(--accent);
}
.crit h3 {
  margin: 0.875rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 650;
}
.crit p {
  margin: 0.25rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.scale {
  display: flex;
  gap: 4px;
  margin-top: 1rem;
}
.scale i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: left;
}
.scale i:nth-child(1) { opacity: 0.25; }
.scale i:nth-child(2) { opacity: 0.4; }
.scale i:nth-child(3) { opacity: 0.6; }
.scale i:nth-child(4) { opacity: 0.8; }
.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.375rem;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

/* FAQ + CTA on the landing page */
.lp-body .faq {
  max-width: 50rem;
  margin-top: clamp(4rem, 3rem + 4vw, 6rem);
}
.lp-body .faq > h2 {
  margin-bottom: 1rem;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: words rise in turn, the finder lands, the strip scrolls, icons float. Pure CSS: */
  /* every animation ends on the visible state, so the page is complete without script.   */
  /* Hero keyframes move only (no fade): the headline and cards are painted on the first */
  /* frame, so the largest paint is not held back by an animation.                       */
  .lp-hero h1 .w {
    animation: lp-up 0.8s var(--ease-out) both;
  }
  .lp-hero h1 .w:nth-child(2) { animation-delay: 0.07s; }
  .lp-hero h1 .w:nth-child(3) { animation-delay: 0.14s; }
  .lp-hero h1 .w:nth-child(4) { animation-delay: 0.21s; }
  .lp-hero h1 .w:nth-child(5) { animation-delay: 0.28s; }
  .lp-hero h1 .w:nth-child(6) { animation-delay: 0.35s; }
  .lp-hero h1 .w:nth-child(n + 7) { animation-delay: 0.42s; }
  .lp-hero .dek {
    animation: lp-up 0.8s 0.4s var(--ease-out) both;
  }
  .lp-proof {
    animation: lp-up 0.8s 0.55s var(--ease-out) both;
  }
  .finder {
    animation: lp-land 0.9s 0.3s var(--ease-out) both;
  }
  .fm {
    animation: lp-pop 0.5s var(--ease-back);
  }
  .lp-drift span {
    animation: lp-float 9s ease-in-out infinite;
  }
  .lp-drift span:nth-child(2) { animation-delay: -3s; }
  .lp-drift span:nth-child(3) { animation-delay: -5s; }
  .lp-drift span:nth-child(4) { animation-delay: -1.5s; }
  .lp-drift span:nth-child(5) { animation-delay: -7s; }
  .lp-drift span:nth-child(6) { animation-delay: -4s; }
  .mq-track {
    animation: lp-scroll 45s linear infinite;
  }
  /* Looping hero animations pause while the hero is off screen (assets/motion.js). */
  .lp-hero.is-offscreen .lp-drift span,
  .lp-hero.is-offscreen .mq-track {
    animation-play-state: paused;
  }
  .marquee:hover .mq-track,
  .marquee:focus-within .mq-track,
  .marquee:has(.mq-pause input:checked) .mq-track,
  .lp-hero:has(.mq-pause input:checked) .lp-drift span {
    animation-play-state: paused;
  }
  .faq-item[open] .faq-a {
    animation: lp-rise 0.35s var(--ease-out);
  }

  /* Below the fold (assets/motion.js): fade/rise in, stars fill, scales grow, tip icons pop. */
  .is-pending {
    opacity: 0;
    transform: translateY(28px);
  }
  .is-pending.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .rk-row.is-pending.is-in:nth-child(2) { transition-delay: 0.04s; }
  .rk-row.is-pending.is-in:nth-child(3) { transition-delay: 0.08s; }
  .rk-row.is-pending.is-in:nth-child(4) { transition-delay: 0.12s; }
  .rk-row.is-pending.is-in:nth-child(5) { transition-delay: 0.16s; }
  .rk-row.is-pending.is-in:nth-child(n + 6) { transition-delay: 0.2s; }
  .podium .pick.is-pending.is-in:nth-child(2),
  .tip-grid .tipc.is-pending.is-in:nth-child(2),
  .crit-grid .crit.is-pending.is-in:nth-child(2) { transition-delay: 0.1s; }
  .podium .pick.is-pending.is-in:nth-child(3),
  .tip-grid .tipc.is-pending.is-in:nth-child(3),
  .crit-grid .crit.is-pending.is-in:nth-child(3) { transition-delay: 0.2s; }
  .crit-grid .crit.is-pending.is-in:nth-child(4) { transition-delay: 0.3s; }
  .crit-grid .crit.is-pending.is-in:nth-child(5) { transition-delay: 0.4s; }
  .crit-grid .crit.is-pending.is-in:nth-child(6) { transition-delay: 0.5s; }
  .is-pending .stars::after {
    clip-path: inset(0 100% 0 0);
  }
  .is-pending.is-in .stars::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.1s 0.25s var(--ease-out);
  }
  .is-pending .tipc-ic {
    transform: scale(0.4) rotate(-20deg);
  }
  .is-pending.is-in .tipc-ic {
    transform: none;
    transition: transform 0.6s 0.25s var(--ease-back);
  }
  .is-pending .scale i {
    transform: scaleX(0);
  }
  .is-pending.is-in .scale i {
    transform: none;
    transition: transform 0.45s var(--ease-out);
  }
  .is-in .scale i:nth-child(2) { transition-delay: 0.08s; }
  .is-in .scale i:nth-child(3) { transition-delay: 0.16s; }
  .is-in .scale i:nth-child(4) { transition-delay: 0.24s; }
  .is-in .scale i:nth-child(5) { transition-delay: 0.32s; }
}
@media (prefers-reduced-motion: reduce) {
  /* The strip stops and wraps; its looping copy is hidden. */
  .mq-track,
  .mq-list {
    flex-wrap: wrap;
    width: auto;
  }
  .mq-copy {
    display: none;
  }
}
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
}
/* Above-the-fold entrances: transform only, so the element is visible from the first paint. */
@keyframes lp-up {
  from {
    transform: translateY(0.6em);
  }
}
@keyframes lp-land {
  from {
    transform: translateY(30px) rotate(1.5deg);
  }
}
@keyframes lp-pop {
  from {
    opacity: 0.2;
    transform: scale(0.95) translateY(6px);
  }
}
@keyframes lp-float {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-22px) rotate(4deg);
  }
}
@keyframes lp-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media print {
  .is-pending {
    opacity: 1;
    transform: none;
  }
  .rk-filters,
  .mq-pause,
  .lp-drift,
  .marquee,
  .finder {
    display: none;
  }
  .lp-hero,
  .layout-landing .site-header {
    background: none;
    color: var(--ink);
  }
}

/* ---------- MentionPilot ad box (every ::cta) ----------
   A labelled ad, not the site's own voice: neutral grey box, system UI type, a plain dark
   button and a "Sponsored" label. Selectors are doubled (.cta.cta-ad) so site themes, which
   load after this file, do not restyle it in their display face or accent colour. */
.cta.cta-ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  max-width: 44rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #d5d9df;
  border-radius: 10px;
  background: #f4f5f7;
  color: #1f2933;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Small inline ad keeps its width even where a theme widens .prose > .cta. */
.prose > .cta.cta-ad:not(.cta-band) {
  max-width: 44rem;
}
.cta.cta-ad.cta-band {
  max-width: none;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: 12px;
}
@media (min-width: 56em) {
  .cta.cta-ad.cta-band {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: 2.5rem;
  }
}
.cta.cta-ad .cta-sponsored {
  grid-column: 1 / -1;
  margin: 0;
  color: #5f6b7a;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cta.cta-ad .cta-title {
  margin: 0;
  max-width: none;
  color: #1f2933;
  font-family: inherit;
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}
.cta.cta-ad .cta-text {
  margin: 0.5rem 0 0;
  color: #3e4a59;
  font-size: 1rem;
}
.cta.cta-ad .cta-actions {
  margin: 0;
}
.cta.cta-ad .button {
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  background: #1f2933;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.cta.cta-ad .button:hover {
  background: #3e4a59;
  color: #ffffff;
}

/* ---------- Rendering cost ---------- */
/* Landing sections after the first are laid out and painted only when the reader scrolls    */
/* near them, so the first layout covers the hero and the first section, not the whole page. */
/* Never the first section: it can start on screen, and a skipped block that is on screen   */
/* renders a frame late (a layout shift). `auto` in the intrinsic size keeps each section's */
/* real height once it has been rendered (no scroll jumps on the way back).                 */
.lp-body > :is(section, aside) ~ :is(section, aside) {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/bricolage-grotesque-latin-opsz-normal.a79fdb52d4.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/assets/instrument-sans-latin-wght-normal.2ee17598a9.woff2") format("woff2");
}

/* brandmonitoringtools — product comparisons, v3 look.
   Bricolage Grotesque (display): a characterful grotesk with an optical-size axis, set very
   tight and heavy so headings read like product packaging. Instrument Sans (text): precise,
   with tabular figures for prices and scores. Cobalt header on every page; the home page
   (layout: landing) extends it into a full hero. Flat fills; yellow only for stars and keys. */
:root {
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: var(--font-text);
  --display-weight: 800;
  --display-stretch: 100%;
  --display-tracking: -0.03em;
  --ink: #0e1726;
  --ink-2: #3b4558;
  --ink-3: #5a6478;
  --rule: #dfe3ee;
  --surface: #eef1fb;
  --body: 1.0625rem;
  --leading: 1.6;
  --measure: 41rem;
  --h1: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem);
  --h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --radius: 14px;
}

/* Header: cobalt band with white wordmark and navigation, on every page. */
.site-header {
  background: var(--accent);
  border-bottom: 0;
  --mark-color: var(--accent-ink);
  --mark-knock: var(--accent);
}
.header-inner {
  align-items: center;
  padding-block: 1.125rem;
}
.wordmark,
.wordmark:hover {
  color: var(--accent-ink);
  font-size: 1.25rem;
}
.site-nav a {
  color: color-mix(in srgb, var(--accent-ink) 82%, var(--accent));
}
.site-nav a:hover {
  color: var(--accent-ink);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.site-nav a[aria-current="page"] {
  color: var(--accent-ink);
  border-bottom-color: var(--star);
}
.site-header :focus-visible {
  outline-color: var(--star);
}

/* Headings */
h1 {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.prose > h2 {
  font-size: var(--h2);
  line-height: 1.05;
  margin-top: 4rem;
}
.prose h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Guide page head: a tinted band under the cobalt header. */
.page-head {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  padding-block: clamp(2.25rem, 1.25rem + 4vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-bottom: 2.5rem;
  background: var(--surface);
  border-bottom: 0;
}
body {
  overflow-x: clip;
}
.dek {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
}
.cover {
  margin-top: 2rem;
  border-radius: 20px;
}

/* Buttons */
.button {
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
}

/* Tables: rounded frame, firm tool column, logos in the first cell (lib/directives.mjs). */
.table-wrap {
  border: 1.5px solid var(--rule);
  border-radius: 18px;
}
thead th {
  border-top: 0;
  border-bottom: 1.5px solid var(--rule);
  background: var(--surface);
  font-size: 0.8125rem;
  padding-block: 0.875rem;
}
tbody tr:nth-child(even) > * {
  background: transparent;
}
tbody tr:hover > * {
  background: color-mix(in srgb, var(--surface) 60%, #ffffff);
}
.vendor-table td,
.vendor-table tbody th {
  padding-block: 0.9375rem;
}
.vendor-table tbody th {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.vendor-table tbody th a {
  color: var(--ink);
  text-decoration: none;
}
.vendor-table tbody th a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Cards */
.tool-card,
.allowance-card {
  border-radius: 18px;
}

/* ====================== Guide layout (layout: guide, lib/components-bmt.mjs) ======================
   The landing hero over the article reading column. Hero cards: ::source-picker and
   ::switcher (radio + CSS :has(); without :has() the first panel shows). Body: ::icon-cards,
   ::method, plus the shared ::tips band and ::cta. */
.layout-guide .lp-hero {
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.layout-guide .lp-hero h1 {
  font-size: clamp(2.625rem, 1.5rem + 4.6vw, 4.75rem);
  max-width: 12ch;
}
.layout-guide .lp-hero.no-aside h1 {
  max-width: 16ch;
}
@media (min-width: 60em) {
  .layout-guide .lp-hero.no-aside .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .layout-guide .lp-hero-main {
    padding-block: 1rem;
  }
}
.lp-guide {
  padding-top: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  padding-bottom: 4rem;
}
.lp-guide .prose > .answer + .trust,
.lp-guide .prose > .toc + .trust {
  margin-top: 1.5rem;
}
.lp-guide .prose > h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: clamp(3.5rem, 2.75rem + 3vw, 5rem);
  max-width: 18ch;
}
.lp-guide .prose > .lp-band,
.lp-guide .prose > .cta {
  max-width: none;
}
.lp-guide .prose > .faq {
  max-width: 50rem;
  margin-top: clamp(3.5rem, 2.75rem + 3vw, 5rem);
}
.lp-guide .prose > .lp-band {
  position: relative;
  z-index: 2;
}
.lp-guide .prose .tip-grid {
  padding-left: 0;
}
.lp-guide .prose .tip-grid > li + li {
  margin-top: 0;
}
.lp-guide .prose .tipc-k {
  margin-top: 1.125rem;
}

/* Hero picker card (shares the .finder card look). */
.gpick .sp-wrap {
  margin-top: 1.25rem;
}
.sp-panel,
.sw-panel {
  display: none;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--tint);
}
.sp-panel.is-first,
.sw-panel.is-first {
  display: block;
}
/* One rule per answer (::switcher allows 4): a 5th answer needs a line here. */
@supports selector(:has(*)) {
  .sw-panel.is-first {
    display: none;
  }
  .switcher:has(#sw-1:checked) .sw-1,
  .switcher:has(#sw-2:checked) .sw-2,
  .switcher:has(#sw-3:checked) .sw-3,
  .switcher:has(#sw-4:checked) .sw-4 {
    display: block;
  }
}
/* ::source-picker: toggle chips (assets/source-picker.js; inert without script). */
.spick [hidden] {
  display: none !important;
}
.msp-q {
  margin: 1.375rem 0 0;
}
.msp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.625rem;
}
.msp-legend {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
}
.msp-clear {
  padding: 0.25rem 0.125rem;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.msp-clear:disabled {
  color: var(--ink-3);
  text-decoration: none;
  cursor: default;
}
.msp-clear:focus-visible,
.msp-chip:focus-visible {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
.msp-chips {
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem 0.4375rem 0.625rem;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s, box-shadow 0.15s, color 0.15s, transform 0.15s;
}
.msp-chip .ic {
  width: 1rem;
  height: 1rem;
}
.is-live .msp-chip {
  cursor: pointer;
}
.is-live .msp-chip:hover {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.is-live .msp-chip:active {
  transform: scale(0.96);
}
.msp-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
/* Pressed state is not colour only: a drawn check mark follows the label. */
.msp-chip[aria-pressed="true"]::after {
  content: "";
  width: 0.3125rem;
  height: 0.625rem;
  margin: -0.1875rem 0 0 0.0625rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.msp-list .gt-name {
  overflow-wrap: normal;
}
.msp-list .price {
  max-width: 6.5rem;
}
.msp-list .gt-note {
  display: block;
  margin: 0.0625rem 0 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  line-height: 1.3;
}
.msp-prompt,
.msp-none {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.sp-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.sp-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.sp-part {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.gp-disc {
  margin: 0.75rem 0 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.gp-disc a {
  color: inherit;
}
.sp-more,
.sw-note {
  margin: 1rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.sw-note {
  color: var(--ink-3);
}
.sp-more a {
  color: var(--ink);
  font-weight: 600;
}
.sw-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--star);
  color: var(--ink);
}
.sw-ic .ic {
  width: 1.25rem;
  height: 1.25rem;
}
.sw-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sw-text {
  margin: 0.375rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.gt-list {
  display: grid;
  gap: 0.375rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}
.gt-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4375rem 0.75rem 0.4375rem 0.4375rem;
  border-radius: 12px;
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.gt-row .logo {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0.25rem;
  border-radius: 10px;
}
.gt-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.75rem;
  min-width: 0;
}
.gt-name {
  min-width: 0;
  font-weight: 650;
  color: var(--ink);
}
.gt-row .score {
  font-size: 0.875rem;
}
.gt-note {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.4375rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 500;
}
.gt-row .price {
  font-size: 0.8125rem;
  text-align: right;
}
@media (prefers-reduced-motion: no-preference) {
  .sw-panel,
  .sp-panel.is-pop {
    animation: lp-pop 0.45s var(--ease-back);
  }
}

/* ::icon-cards / ::method — icon cards in a responsive grid. */
.ic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 36em) {
  .ic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60em) {
  .ic-grid.ic-3,
  .ic-grid.ic-5,
  .ic-grid.ic-6,
  .ic-grid.ic-9 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ic-grid.ic-4,
  .ic-grid.ic-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ic-grid.method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* An odd last check (an odd number of criteria) takes the full row. */
  .ic-grid.method > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 75em) {
  .ic-grid.ic-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* The scoring rules are long: keep ::method at two columns. */
  .ic-grid.method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.prose > .ic-grid {
  margin-top: 1.75rem;
  padding: 0;
}
.prose > .ic-grid + * {
  margin-top: 1.75rem;
}
.prose .ic-grid > li + li {
  margin-top: 0;
}
.ic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.375rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.prose > ol.ic-grid > li::before {
  content: none;
}
.prose > ol.ic-grid > li {
  padding: 1.375rem;
}
.ic-badge {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 13px;
  background: var(--tint);
  color: var(--accent);
}
.ic-badge .ic {
  width: 1.375rem;
  height: 1.375rem;
}
.ic-n {
  position: absolute;
  top: 1.125rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--rule);
}
.ic-tag {
  margin: 1rem 0 0;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.ic-card h3,
.prose .ic-card h3 {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.ic-tag + h3,
.prose .ic-tag + h3 {
  margin-top: 0.25rem;
}
.ic-card p {
  margin: 0.375rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ic-card code {
  font-size: 0.8125rem;
}
.ic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: auto 0 0;
  padding: 0.875rem 0 0;
  list-style: none;
}
.prose .ic-chips li + li {
  margin-top: 0;
}
.ic-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
}
.ic-chips .ic {
  width: 0.875rem;
  height: 0.875rem;
}
.ic-chips .ic:not([class*="brand-"]) {
  color: var(--accent);
}
/* ::guide-cards with `later`: one row per card. Icon, title and why on the left; the
   sources on the right in two labelled groups ("Start with" filled, "Add later" outlined),
   each group on a shared label column so chips line up from row to row. */
.ic-grid.ic-rows {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}
.ic-rows .ic-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1rem;
  align-items: start;
  padding: 1.25rem;
}
.ic-rows .ic-main {
  min-width: 0;
}
.ic-rows .ic-card h3,
.prose .ic-rows .ic-card h3 {
  margin-top: 0.125rem;
}
.ic-rows .ic-card .ic-main p {
  margin-top: 0.25rem;
}
.ic-src {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.ic-src-g {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}
.ic-card .ic-src-k,
.prose .ic-card .ic-src-k {
  display: flex;
  align-items: center;
  min-height: 2.0625rem;
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ic-src .ic-chips {
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
.ic-src .ic-chips li {
  margin: 0;
  padding: 0.25rem 0.6875rem 0.25rem 0.5rem;
  border: 1.5px solid transparent;
  font-size: 0.8125rem;
}
.ic-src .is-later .ic-chips li {
  border-color: var(--rule);
  background: var(--paper);
  color: var(--ink-2);
}
@media (min-width: 52em) {
  .ic-rows .ic-card {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem);
    gap: 0 1.25rem;
    align-items: center;
    padding: 1.375rem 1.5rem;
  }
  .ic-rows .ic-badge {
    align-self: center;
  }
  .ic-src {
    grid-column: auto;
    margin: 0;
    padding: 0 0 0 1.5rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
    align-self: stretch;
    align-content: center;
  }
}

.gpick .opt input:checked + span .ic {
  color: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .ic-grid .ic-card.is-pending.is-in:nth-child(2) { transition-delay: 0.06s; }
  .ic-grid .ic-card.is-pending.is-in:nth-child(3) { transition-delay: 0.12s; }
  .ic-grid .ic-card.is-pending.is-in:nth-child(4) { transition-delay: 0.18s; }
  .ic-grid .ic-card.is-pending.is-in:nth-child(n + 5) { transition-delay: 0.24s; }
  .is-pending .ic-badge {
    transform: scale(0.5) rotate(-15deg);
  }
  .is-pending.is-in .ic-badge {
    transform: none;
    transition: transform 0.55s 0.2s var(--ease-back);
  }
}
@media print {
  .gpick {
    display: none;
  }
}

:root { --accent: #2340d9; --accent-ink: #ffffff; }