/* 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: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/literata-latin-wght-normal.9adbeac5b1.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("/assets/literata-latin-wght-italic.ab198d6616.woff2") format("woff2");
}

/* whatissociallistening — comfortable educational reading.
   Literata: a book face drawn for long reading on screens (Google Play Books). Larger
   body size and more leading than the sans sites; navigation, tables and small labels
   use the system sans so the reading text stays the only serif voice.
   v4: every page uses `layout: landing` (plum hero) with the learning components from
   lib/components-learn.mjs, styled below. */
:root {
  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --font-display: var(--font-text);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 620;
  --display-tracking: -0.012em;
  --body: 1.1875rem;
  --leading: 1.7;
  --measure: 38rem;
  --h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --h3: 1.25rem;
  --surface: #f4f3f6;
  --plum-soft: #f6eef8;
  --plum-line: #e4d2ea;
  --lift: 0 28px 60px -24px rgba(40, 8, 48, 0.45), 0 2px 6px rgba(40, 8, 48, 0.08);
}
h1 {
  font-weight: 560;
  letter-spacing: -0.02em;
}
.dek {
  font-size: 1.25rem;
}
.prose > p:first-child {
  font-size: 1.3125rem;
}
.definition p {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.6875rem);
  font-weight: 400;
}
.prose > ol > li::before {
  font-family: var(--font-text);
  font-size: 0.9375rem;
}

/* ====================== Hero ====================== */
.lp-hero {
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem);
}
.lp-hero h1 {
  max-width: 14ch;
  font-weight: 700;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.lp-hero-grid {
  align-items: start;
}
@media (min-width: 60em) {
  .lp-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(24rem, 0.9fr);
    padding-top: 1rem;
  }
}
.hero-lead {
  margin-top: 1.75rem;
  max-width: 36rem;
}
.hero-lead p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  line-height: 1.55;
}
.hero-lead dfn {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline 3px var(--star);
  text-underline-offset: 0.22em;
}
.lead-label {
  margin: 0 0 0.625rem;
  color: var(--star);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-lead a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* Hero cards (loop, quiz, query deck, hour, facts): the one lifted surface on the page. */
.loop-card,
.quiz-card,
.qdeck-card,
.hour-card,
.facts-card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--lift);
  font-family: var(--font-ui);
}
.loop-title,
.quiz-title,
.qdeck-title,
.hour-title,
.facts-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.loop-title .ic,
.quiz-title .ic,
.qdeck-title .ic,
.hour-title .ic,
.facts-title .ic {
  color: var(--accent);
}

/* ---------- ::loop ---------- */
.loop-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin: 1rem 0 0;
  padding: 0.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--plum-soft);
}
.lm {
  position: relative;
  cursor: pointer;
}
.lm input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lm > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s;
}
.lm input:checked + span {
  background: var(--accent);
  color: #fff;
}
.lm input:focus-visible + span {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
.loop-panel {
  margin-top: 1.25rem;
}
.loop-monitor {
  display: none;
}
.loop:has(#loop-monitor:checked) .loop-listen {
  display: none;
}
.loop:has(#loop-monitor:checked) .loop-monitor {
  display: block;
}
.ring-wrap {
  position: relative;
  width: min(100%, 21rem);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ring-wrap::before,
.ring-orbit {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
}
.ring-wrap::before {
  border: 2px dashed var(--plum-line);
}
.ring-orbit i {
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 0 4px #fff;
}
.ring {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each step's icon sits on the ring; its label goes outside (above the top step, below the rest). */
.rs {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 7.5rem;
  text-align: center;
  transform: translate(-50%, -1.375rem);
}
.rs-1 { left: 50%; top: 21%; flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 1.375rem)); }
.rs-2 { left: 79%; top: 50%; }
.rs-3 { left: 50%; top: 79%; }
.rs-4 { left: 21%; top: 50%; }
.rs-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--plum-soft);
  color: var(--accent);
  box-shadow: 0 0 0 4px #fff;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.rs-ic .ic {
  width: 1.25rem;
  height: 1.25rem;
}
.rs-t {
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0.375rem;
  border-radius: 6px;
  background: var(--paper);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
}
.rs-n {
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ring-core {
  position: absolute;
  inset: 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 650;
}
.ring-core .ic {
  width: 1.375rem;
  height: 1.375rem;
}
.loop-note {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
}
.line {
  display: grid;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ln {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--plum-soft);
}
.ln .rs-ic {
  background: #fff;
  box-shadow: none;
}
.ln .rs-t {
  padding: 0;
  background: none;
  font-size: 1rem;
}
.line-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  color: #1f7a45;
  font-weight: 700;
}
.line-end .ic {
  width: 1.25rem;
  height: 1.25rem;
}

/* Toggles and filters need :has(); without it they are hidden and every panel / card shows. */
@supports not selector(:has(*)) {
  .loop-mode,
  .card-filter {
    display: none;
  }
}
/* Pause control for the endless loop and typing motion (WCAG 2.2.2). */
.x-pause {
  display: none;
  position: relative;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
  cursor: pointer;
}
.x-pause input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .x-pause {
    display: inline-flex;
  }
  .loop:has(.x-pause input:checked) .ring-orbit,
  .loop:has(.x-pause input:checked) .rs-ic,
  .qdeck:has(.x-pause input:checked) .qd-typed span,
  .qdeck:has(.x-pause input:checked) .qd-box::after {
    animation-play-state: paused;
  }
}

/* ---------- ::quiz ---------- */
.qz-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.qz-list li + li {
  border-top: 1px solid var(--rule);
}
.qz summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0;
  cursor: pointer;
  list-style: none;
}
.qz summary::-webkit-details-marker {
  display: none;
}
.qz-n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--plum-soft);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.qz-q {
  font-size: 0.9688rem;
  line-height: 1.4;
}
.qz-hint {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.qz summary:hover .qz-hint {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}
.qz[open] .qz-hint {
  visibility: hidden;
}
.qz-a {
  margin: 0 0 0.875rem 2.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.qa {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 6px;
  color: #fff;
  font-size: 0.8125rem;
}
.qa-monitoring {
  background: var(--ink);
}
.qa-listening {
  background: var(--accent);
}
.qa-both {
  background: #1f7a45;
}

/* ---------- ::query-deck ---------- */
.qd-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  height: 3.25rem;
  margin: 1rem 0 0;
  padding: 0 1rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
  overflow: hidden;
}
.qd-typed {
  position: relative;
  flex: 1;
  height: 1.5rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}
.qd-typed span {
  position: absolute;
  inset: 0 auto 0 0;
  white-space: nowrap;
  line-height: 1.5rem;
  visibility: hidden;
}
.qd-typed span:first-child {
  visibility: visible;
}
.qd-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.qd-list li + li {
  border-top: 1px solid var(--rule);
}
.qd-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.25rem;
  color: var(--ink);
  text-decoration: none;
}
.qd-list a > .ic {
  width: 1rem;
  height: 1rem;
  color: var(--ink-3);
  transition: transform 0.2s;
}
.qd-list a:hover > .ic {
  color: var(--accent);
  transform: translate(2px, -2px);
}
.qd-ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: var(--plum-soft);
  color: var(--accent);
}
.qd-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.qd-text code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}
.qd-l {
  color: var(--ink-3);
  font-size: 0.8125rem;
}

/* ---------- ::hour ---------- */
.hour-card {
  counter-reset: hdone;
}
.hr-bar {
  display: flex;
  gap: 4px;
  height: 0.625rem;
  margin: 1.125rem 0 0;
}
.hr-bar i {
  flex: 1;
  border-radius: 999px;
  background: var(--plum-soft);
  transition: background-color 0.3s;
}
.hr-bar .g-5 { flex-grow: 5; }
.hr-bar .g-10 { flex-grow: 10; }
.hr-bar .g-15 { flex-grow: 15; }
.hr-bar .g-20 { flex-grow: 20; }
.hour:has(.hr-list li:nth-child(1) input:checked) .hr-bar i:nth-child(1),
.hour:has(.hr-list li:nth-child(2) input:checked) .hr-bar i:nth-child(2),
.hour:has(.hr-list li:nth-child(3) input:checked) .hr-bar i:nth-child(3),
.hour:has(.hr-list li:nth-child(4) input:checked) .hr-bar i:nth-child(4),
.hour:has(.hr-list li:nth-child(5) input:checked) .hr-bar i:nth-child(5),
.hour:has(.hr-list li:nth-child(6) input:checked) .hr-bar i:nth-child(6),
.hour:has(.hr-list li:nth-child(7) input:checked) .hr-bar i:nth-child(7),
.hour:has(.hr-list li:nth-child(8) input:checked) .hr-bar i:nth-child(8) {
  background: var(--accent);
}
.hr-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.hr-list li + li {
  border-top: 1px solid var(--rule);
}
.hr-list label {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  cursor: pointer;
}
.hr-list input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0;
  opacity: 0;
  cursor: pointer;
}
.hr-box {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--plum-line);
  color: transparent;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.hr-box .ic {
  width: 1rem;
  height: 1rem;
}
.hr-list input:checked + .hr-box {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}
.hr-list input:focus-visible + .hr-box {
  outline: 3px solid var(--star);
  outline-offset: 2px;
}
.hr-list input:checked ~ .hr-t {
  color: var(--ink-3);
  text-decoration: line-through;
}
.hr-t {
  font-size: 0.9688rem;
  line-height: 1.35;
}
.hr-m {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hr-list input.m-5:checked { counter-increment: hdone 5; }
.hr-list input.m-10:checked { counter-increment: hdone 10; }
.hr-list input.m-15:checked { counter-increment: hdone 15; }
.hr-list input.m-20:checked { counter-increment: hdone 20; }
.hr-done {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 0.875rem;
}
.hr-count::before {
  content: counter(hdone);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- ::facts ---------- */
.facts-card dl {
  margin: 0.75rem 0 0;
}
.facts-card dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
}
.facts-card dl > div + div {
  border-top: 1px solid var(--rule);
}
.facts-card dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.facts-card dt .ic {
  color: var(--accent);
}
.facts-card dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ====================== Body ====================== */
.lp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
  padding-top: 1rem;
}
.lp-body > * {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
@media (min-width: 56em) {
  .lp-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-body > .exc.is-half {
    grid-column: auto;
  }
}
.lp-body > h2 {
  margin-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  max-width: 18ch;
  font-weight: 700;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lp-body > h2 + p {
  margin-top: 0.875rem;
  max-width: 38rem;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.55;
}
.lp-body > p {
  margin-top: 1.5rem;
  max-width: 40rem;
}
.lp-body > .lsteps,
.lp-body > .lcards,
.lp-body > .vs,
.lp-body > .card-filter {
  margin-top: 2.25rem;
}
.lp-body > .exc {
  margin-top: 2rem;
}
.lp-body > .lp-band {
  margin-top: clamp(4.5rem, 3rem + 5vw, 7rem);
}
.lp-body > .faq {
  margin-top: clamp(4rem, 3rem + 4vw, 6.5rem);
}
.lp-body > .cta {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.lp-body .faq > h2 {
  font-weight: 700;
}
.lp-body > .download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  justify-self: start;
  margin-top: 1.5rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--accent);
  font-family: var(--font-ui);
}
.lp-body > .download a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.lp-body > .download a:hover {
  text-decoration: underline;
}
.lp-body > .download .download-meta {
  color: #ecd9f1;
}
.lp-body > .download + p {
  margin-top: 0.75rem;
  color: var(--ink-2);
  font-size: 1rem;
}
/* Four tips: a 2 x 2 grid, then one row on wide screens (the shared grid is 3 columns). */
@media (min-width: 40em) {
  .tip-grid:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .tip-grid:has(> li:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- ::steps ---------- */
.lsteps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 40em) {
  .lsteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .lsteps.n-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lsteps.n-3,
  .lsteps.n-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lstep {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--plum-soft);
}
.lstep::before {
  content: none;
}
.ls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.ls-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}
.ls-ic .ic {
  width: 1.5rem;
  height: 1.5rem;
}
.ls-n {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lstep h3 {
  margin: 1.125rem 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;
}
.lstep p:last-child {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.ls-total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.ls-total .ic {
  color: var(--accent);
}
.ls-total strong {
  color: var(--ink);
}

@media (max-width: 39.99em) {
  .lstep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.125rem 1.25rem;
  }
  .ls-top {
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .lstep h3 {
    margin-top: 0;
  }
}

/* ---------- ::cards ---------- */
.lcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .lcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64em) {
  .lcards.n-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lcards.n-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lcard {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  transition: box-shadow 0.2s, transform 0.2s;
}
.lcard:has(a):hover {
  box-shadow: inset 0 0 0 2px var(--accent);
  transform: translateY(-3px);
}
.lc-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: var(--plum-soft);
  color: var(--accent);
}
.lc-ic .ic {
  width: 1.5rem;
  height: 1.5rem;
}
.lcard h3 {
  margin: 1.125rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.lcard > p {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.lcard .lc-go {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 650;
}
.lc-go a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent);
}
.lc-go .ic {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 39.99em) {
  .lcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.125rem 1.25rem;
  }
  .lc-ic {
    grid-row: 1 / span 3;
    width: 2.5rem;
    height: 2.5rem;
  }
  .lcard h3 {
    margin-top: 0;
  }
  .lcard .lc-go {
    padding-top: 0.5rem;
  }
}
.lcards.is-no .lcard {
  box-shadow: none;
  background: var(--surface);
}
.lcards.is-no .lc-ic {
  position: relative;
  background: var(--paper);
  color: var(--ink-2);
}
.lcards.is-no .lc-ic::after {
  content: "";
  position: absolute;
  inset: 22% 47%;
  border-radius: 2px;
  background: #c2263a;
  transform: rotate(-45deg);
}

/* ---------- ::example ---------- */
.exc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  scroll-margin-top: 1.5rem;
}
.exc:target {
  box-shadow: inset 0 0 0 3px var(--accent);
}
.exc-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--plum-soft);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 650;
}
.exc h3 {
  margin: 0.875rem 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.exc-ill,
.exc-pub {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.exc-pub {
  color: #1f7a45;
}
.exc-sit {
  margin: 0.875rem 0 0;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.exc-k {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.exc-k .ic {
  color: var(--accent);
}
.exc-q {
  margin-top: 1.125rem;
}
.exc-q ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.exc-q code {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8438rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.exc-src {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}
.exc-src li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.exc-src .ic {
  color: var(--accent);
}
.exc-out {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
}
.exc:not(.is-half) .exc-out {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.exc-out > div {
  padding: 1rem 1.125rem;
  border-radius: var(--radius-lg);
  background: var(--plum-soft);
}
.exc-out .exc-act {
  background: var(--accent);
  color: #fff;
}
.exc-act .exc-k,
.exc-act .exc-k .ic {
  color: #f1dcf5;
}
.exc-out p:last-child {
  margin: 0.375rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}
.exc-cite {
  margin: 1rem 0 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

/* ---------- ::card-filter ---------- */
.card-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.card-filter legend {
  float: left;
  margin-right: 0.25rem;
  padding: 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.cf-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lp-body:has(#cf-public:checked) .exc:not(.k-public),
.lp-body:has(#cf-small:checked) .exc:not(.k-small),
.lp-body:has(#cf-b2b:checked) .exc:not(.k-b2b) {
  display: none;
}

/* ---------- ::tally ---------- */
.tally {
  margin: 1.5rem 0 0;
  padding: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  font-family: var(--font-ui);
}
.tally figcaption {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
}
.tally ul {
  display: grid;
  gap: 0.875rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.tally li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.25rem 1rem;
}
@media (min-width: 40em) {
  .tally li {
    grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 2.5rem;
  }
}
.tl-l {
  font-size: 0.9375rem;
}
.tl-bar {
  grid-column: 1 / 2;
  height: 0.875rem;
  border-radius: 999px;
  background: #e6e2ea;
  overflow: hidden;
}
@media (min-width: 40em) {
  .tl-bar {
    grid-column: auto;
  }
}
.tl-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9a8aa1;
  transform-origin: left;
}
.is-mark .tl-bar i {
  background: var(--accent);
}
.is-mark .tl-l {
  font-weight: 700;
}
.tl-v {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (min-width: 40em) {
  .tl-v {
    grid-row: auto;
    grid-column: auto;
  }
}
.tl-note {
  margin: 1.125rem 0 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.w-0 { width: 0; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* ---------- ::versus ---------- */
.vs {
  overflow-x: auto;
}
.vs table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
}
.vs th,
.vs td {
  padding: 1rem 1.25rem;
  border: 0;
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  line-height: 1.5;
}
.vs thead th {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}
.vs thead th .ic {
  margin-right: 0.5rem;
  vertical-align: -0.15em;
}
.vs thead .vs-l {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface);
}
.vs thead .vs-r {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--accent);
  color: #fff;
}
.vs tbody th {
  width: 22%;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vs tbody .vs-l {
  background: var(--surface);
}
.vs tbody .vs-r {
  background: var(--plum-soft);
}
.vs tbody tr + tr > * {
  border-top: 1px solid var(--rule);
}
.vs tbody tr:last-child .vs-l,
.vs tbody tr:last-child .vs-r {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.vs .vs-l + .vs-r,
.vs td + td {
  border-left: 8px solid var(--paper);
}
@media (max-width: 39.99em) {
  .vs table,
  .vs tbody,
  .vs tr,
  .vs th,
  .vs td {
    display: block;
    width: auto;
  }
  .vs thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .vs tbody tr {
    margin-bottom: 1rem;
  }
  .vs tbody th {
    width: auto;
    padding: 0 0 0.5rem;
    border: 0 !important;
    background: none;
  }
  .vs tbody td {
    border: 0 !important;
    border-radius: 0 !important;
  }
  .vs tbody td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
  }
  .vs tbody .vs-l {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  }
  .vs tbody .vs-r {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  }
}

/* ---------- Motion (learning components) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .loop-card,
  .quiz-card,
  .qdeck-card,
  .hour-card,
  .facts-card {
    animation: lp-land 0.9s 0.3s var(--ease-out) both;
  }
  .hero-lead {
    animation: lp-up 0.8s 0.4s var(--ease-out) both;
  }
  /* The loop: a dot circles the ring and each step lights as it passes (8 s a lap). */
  .ring-orbit {
    animation: wisl-orbit 8s linear infinite;
  }
  .rs .rs-ic {
    animation: wisl-lit 8s linear infinite;
  }
  .rs-2 .rs-ic { animation-delay: 2s; }
  .rs-3 .rs-ic { animation-delay: 4s; }
  .rs-4 .rs-ic { animation-delay: 6s; }
  .lp-hero.is-offscreen .ring-orbit,
  .lp-hero.is-offscreen .rs-ic,
  .lp-hero.is-offscreen .qd-typed span,
  .lp-hero.is-offscreen .qd-box::after,
  .loop-card:hover .ring-orbit,
  .loop-card:hover .rs-ic,
  .loop-card:focus-within .ring-orbit,
  .loop-card:focus-within .rs-ic,
  .qdeck-card:hover .qd-typed span,
  .qdeck-card:hover .qd-box::after,
  .qdeck-card:focus-within .qd-typed span,
  .qdeck-card:focus-within .qd-box::after {
    animation-play-state: paused;
  }
  .loop-monitor .ln {
    animation: lp-rise 0.5s var(--ease-out) both;
  }
  .loop-monitor .ln-2 { animation-delay: 0.25s; }
  .loop-monitor .line-end {
    animation: lp-pop 0.5s 0.55s var(--ease-back) both;
  }
  .qz[open] .qz-a {
    animation: lp-rise 0.35s var(--ease-out);
  }
  /* The search box types each query in turn. */
  .qd-typed span {
    animation: wisl-type 12s steps(28, end) infinite;
  }
  .qd-typed span:first-child {
    visibility: hidden;
  }
  .qd-typed span:nth-child(2) { animation-delay: 3s; }
  .qd-typed span:nth-child(3) { animation-delay: 6s; }
  .qd-typed span:nth-child(4) { animation-delay: 9s; }
  .qd-box::after {
    content: "";
    position: absolute;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--star);
    animation: wisl-blink 1s steps(2, start) infinite;
  }
  /* Below the fold (assets/motion.js adds is-pending / is-in). */
  .lsteps .lstep.is-pending.is-in:nth-child(2),
  .lcards .lcard.is-pending.is-in:nth-child(2) { transition-delay: 0.08s; }
  .lsteps .lstep.is-pending.is-in:nth-child(3),
  .lcards .lcard.is-pending.is-in:nth-child(3) { transition-delay: 0.16s; }
  .lsteps .lstep.is-pending.is-in:nth-child(4),
  .lcards .lcard.is-pending.is-in:nth-child(4) { transition-delay: 0.24s; }
  .lsteps .lstep.is-pending.is-in:nth-child(n + 5) { transition-delay: 0.32s; }
  .is-pending .ls-ic,
  .is-pending .lc-ic {
    transform: scale(0.4) rotate(-20deg);
  }
  .is-pending.is-in .ls-ic,
  .is-pending.is-in .lc-ic {
    transform: none;
    transition: transform 0.6s 0.2s var(--ease-back);
  }
  .tally.is-pending .tl-bar i {
    transform: scaleX(0);
  }
  .tally.is-pending.is-in .tl-bar i {
    transform: none;
    transition: transform 1s 0.2s var(--ease-out);
  }
  .tally.is-in li:nth-child(2) .tl-bar i { transition-delay: 0.3s; }
  .tally.is-in li:nth-child(3) .tl-bar i { transition-delay: 0.4s; }
  .tally.is-in li:nth-child(n + 4) .tl-bar i { transition-delay: 0.5s; }
  .lcard,
  .exc {
    transition: box-shadow 0.2s, transform 0.2s;
  }
}
@keyframes wisl-orbit {
  to {
    transform: rotate(1turn);
  }
}
@keyframes wisl-lit {
  0%,
  14% {
    background: var(--accent);
    color: #fff;
    transform: scale(1.12);
  }
  24%,
  100% {
    background: var(--plum-soft);
    color: var(--accent);
    transform: none;
  }
}
/* Shown / hidden with visibility (discrete), not opacity: text is never drawn half-faded, */
/* so it always keeps its full colour contrast.                                           */
@keyframes wisl-type {
  0% {
    visibility: visible;
    clip-path: inset(0 100% 0 0);
  }
  12% {
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
  22% {
    visibility: visible;
    clip-path: inset(0 0 0 0);
  }
  24%,
  100% {
    visibility: hidden;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes wisl-blink {
  to {
    visibility: hidden;
  }
}
@media print {
  .loop-mode,
  .ring-orbit,
  .qd-box,
  .card-filter {
    display: none;
  }
  .loop-monitor {
    display: block;
  }
}

:root { --accent: #7b2d8b; --accent-ink: #ffffff; }