/* Generated by sites/fleet/build.mjs — do not edit on the server. */

:root {
  /*
   * Stops Chrome's Auto Dark Mode from inverting the site.
   * Without this the palette is ignored on any device with dark mode on: the
   * browser force-inverts a page it believes has no opinion, so a white page
   * with dark cards arrives as a black page with washed-out cards. Declaring an
   * explicit light scheme is the documented opt-out, and it is not the same as
   * a media query — it tells the engine the light rendering is deliberate.
   */
  color-scheme: light;

  --chq-radius: 14px;
  --chq-radius-sm: 9px;
  --chq-line: var(--wp--preset--color--line);
  --chq-shadow: 0 1px 2px rgba(15,23,20,.05), 0 8px 24px -14px rgba(15,23,20,.20);
  --chq-shadow-lift: 0 2px 6px rgba(15,23,20,.07), 0 22px 48px -22px rgba(15,23,20,.30);
  --chq-maxw: 78rem;

  /* Internal-link highlight. Same value as the link_decor widget's YELLOW, which
     is weighted as the starting champion — so the CSS baseline and the A/B test
     agree on day one instead of the page changing colour when JS lands.

     It is a deep mustard rather than a true yellow because it has to be legible.
     Measured contrast on white: #FFD700 is 1.40:1 and the widget's older gold
     #b8892a is 3.16:1, both under the 4.5:1 WCAG AA requires for body text —
     and link text at 17px is body text even when bold, since the 3:1 relaxation
     only starts at 18.66px bold. This value is 5.11:1.

     A true yellow is usable here only as a BACKGROUND behind dark text.
     The wash below is that hover background. */
  --chq-ilink: #8F6700;
  --chq-ilink-wash: rgba(143,103,0,.13);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; }

/* Long product names and bare URLs are endemic to review content. */
p, li, h1, h2, h3, h4, td, th, dd, dt, figcaption { overflow-wrap: break-word; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* iOS zooms any focused control rendered under 16px. */
input, select, textarea, button { font: inherit; }
input, select, textarea { font-size: max(16px, 1rem); }

.chq-shell { width: 100%; max-width: var(--chq-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.chq-section { padding-block: clamp(2.75rem, 7vw, 5rem); }
.chq-section--tight { padding-block: clamp(2rem, 5vw, 3.25rem); }
.chq-section--surface { background: var(--wp--preset--color--surface); }

.chq-kicker {
  font-family: var(--wp--preset--font-family--body);
  font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  margin: 0 0 .75rem;
}
.chq-kicker--onDark { color: var(--wp--preset--color--accent); }

.chq-h2 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .6rem; font-weight: 600;
}
.chq-lead { color: var(--wp--preset--color--muted); max-width: 46rem; margin: 0 0 2rem; font-size: 1.03rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.chq-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--chq-line);
}
.chq-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.chq-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.chq-brand img { max-height: 40px; width: auto; display: block; }
.chq-brand__text {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em;
  color: var(--wp--preset--color--ink);
}
.chq-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.chq-nav a {
  display: inline-block; padding: .5rem .7rem; border-radius: var(--chq-radius-sm);
  font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--wp--preset--color--ink); white-space: nowrap;
}
.chq-nav a:hover { background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--primary-dark); }
.chq-nav__cta {
  background: var(--wp--preset--color--primary) !important; color: #fff !important;
  padding: .55rem 1rem !important; border-radius: 999px !important; font-weight: 600 !important;
}
.chq-nav__cta:hover { background: var(--wp--preset--color--primary-dark) !important; }

.chq-burger {
  margin-left: auto; display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--chq-line); border-radius: 10px;
  background: var(--wp--preset--color--base); cursor: pointer; padding: 0;
}
.chq-burger span { display: block; width: 18px; height: 2px; background: var(--wp--preset--color--ink); position: relative; }
.chq-burger span::before, .chq-burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: inherit;
}
.chq-burger span::before { top: -6px; } .chq-burger span::after { top: 6px; }

@media (max-width: 900px) {
  .chq-burger { display: flex; }
  .chq-nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--chq-line);
    padding: .5rem clamp(1rem, 4vw, 2rem) 1.25rem; box-shadow: var(--chq-shadow);
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .chq-nav[hidden] { display: none; }
  .chq-nav a { padding: .85rem .25rem; border-bottom: 1px solid var(--chq-line); border-radius: 0; font-size: 1.02rem; }
  .chq-nav__cta { margin-top: .9rem; text-align: center; border-bottom: 0 !important; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.chq-hero { background: var(--wp--preset--color--dark); color: #fff; position: relative; overflow: hidden; }
.chq-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 88% 6%, color-mix(in srgb, var(--wp--preset--color--primary) 42%, transparent) 0%, transparent 62%),
    radial-gradient(46% 70% at 4% 96%, color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) 0%, transparent 60%);
}
.chq-hero__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 9vw, 6.25rem); }

/* Photo hero (home.heroImage). The veil is heaviest where the copy sits — the
   left on desktop, everything on a phone, where the text covers the photo. */
.chq-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.chq-hero--photo::after { background: linear-gradient(to top, rgba(8,10,12,.94) 0%, rgba(8,10,12,.80) 55%, rgba(8,10,12,.58) 100%); }
@media (min-width: 940px) {
  .chq-hero--photo::after { background: linear-gradient(90deg, rgba(8,10,12,.92) 0%, rgba(8,10,12,.74) 48%, rgba(8,10,12,.28) 100%); }
}
.chq-hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .chq-hero__grid { grid-template-columns: 1.35fr .65fr; } }

.chq-hero h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.1rem, 1.15rem + 4.1vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.028em; margin: 0 0 1.1rem; color: #fff; font-weight: 600;
  text-wrap: balance;
}
.chq-hero p.chq-hero__lead {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem); line-height: 1.68;
  color: rgba(255,255,255,.80); max-width: 40rem; margin: 0 0 1.9rem;
}
.chq-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.chq-btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .96rem;
  transition: transform .15s ease, background-color .15s ease;
}
.chq-btn:hover { transform: translateY(-1px); }
.chq-btn--primary { background: var(--wp--preset--color--primary); color: #fff !important; }
.chq-btn--primary:hover { background: var(--wp--preset--color--primary-dark); }
.chq-btn--ghost { background: rgba(255,255,255,.09); color: #fff !important; border: 1px solid rgba(255,255,255,.26); }
.chq-btn--ghost:hover { background: rgba(255,255,255,.16); }

/* Persona card in the hero — the face doing the E-E-A-T work. */
.chq-persona {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--chq-radius); padding: 1.5rem; backdrop-filter: blur(6px);
}
.chq-persona__top { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.chq-persona__avatar {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  border: 2px solid rgba(255,255,255,.30); background: var(--wp--preset--color--primary);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.3rem;
  font-family: var(--wp--preset--font-family--heading);
}
.chq-persona__name { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.1rem; color: #fff; margin: 0; }
.chq-persona__role { font-size: .8rem; color: rgba(255,255,255,.62); margin: .1rem 0 0; }
.chq-persona__bio { font-size: .93rem; line-height: 1.62; color: rgba(255,255,255,.80); margin: 0 0 1rem; }
.chq-persona__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.chq-persona__list li {
  font-size: .84rem; color: rgba(255,255,255,.78); padding-left: 1.4rem; position: relative; line-height: 1.45;
}
.chq-persona__list li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--accent); font-weight: 700;
}

/* ── Trust bar ──────────────────────────────────────────────────────────── */
.chq-trustbar { background: var(--wp--preset--color--dark-surface); border-top: 1px solid rgba(255,255,255,.09); }
.chq-trustbar ul {
  list-style: none; margin: 0; padding: .95rem 0; display: flex; flex-wrap: wrap;
  gap: .6rem clamp(1rem, 4vw, 2.75rem); justify-content: center;
}
.chq-trustbar li {
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.66); display: flex; align-items: center; gap: .45rem;
}
.chq-trustbar li::before { content: '●'; color: var(--wp--preset--color--accent); font-size: .55rem; }

/* ── Generic card grid ──────────────────────────────────────────────────── */
.chq-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.chq-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.chq-card {
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chq-card:hover { transform: translateY(-3px); box-shadow: var(--chq-shadow-lift); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--chq-line)); }
.chq-card__media { aspect-ratio: 16 / 10; background: var(--wp--preset--color--surface-alt); overflow: hidden; }
.chq-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chq-card__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.chq-card__cat { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.chq-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; line-height: 1.28; margin: 0; font-weight: 600; }
.chq-card__title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.chq-card__title a:hover { color: var(--wp--preset--color--primary-dark); }
.chq-card__excerpt { font-size: .9rem; color: var(--wp--preset--color--muted); margin: 0; line-height: 1.55; }
.chq-card__meta { margin-top: auto; padding-top: .5rem; font-size: .78rem; color: var(--wp--preset--color--muted); }

/* ── Instant finder ─────────────────────────────────────────────────────── */
.chq-finder { max-width: 54rem; }
.chq-finder__input {
  width: 100%; padding: .95rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--chq-line); background: var(--wp--preset--color--base);
  box-shadow: var(--chq-shadow);
}
.chq-finder__input:focus { border-color: var(--wp--preset--color--primary); }
.chq-finder__count { font-size: .8rem; color: var(--wp--preset--color--muted); margin: .6rem 0 .9rem; }
.chq-finder__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  max-height: 21rem; overflow-y: auto; padding-right: .35rem;
}
.chq-finder__list a {
  display: block; padding: .5rem .7rem; border-radius: var(--chq-radius-sm);
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  text-decoration: none; font-size: .9rem; color: var(--wp--preset--color--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chq-finder__list a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-dark); }
.chq-finder__empty { font-size: .92rem; color: var(--wp--preset--color--muted); margin: .8rem 0 0; }

/* ── Category showcase ──────────────────────────────────────────────────── */
/* Asymmetric on desktop: the first tile spans two columns and two rows, which
   is what stops a category grid from reading like a table of link buttons. */
.chq-cats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 900px) {
  .chq-cats { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12.5rem; }
  .chq-cat--lead { grid-column: span 2; grid-row: span 2; }
}

.chq-cat {
  position: relative; display: block; overflow: hidden; border-radius: var(--chq-radius);
  min-height: 12.5rem; text-decoration: none; background: var(--wp--preset--color--dark-surface);
  isolation: isolate;
}
.chq-cat__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); z-index: 0;
}
.chq-cat:hover .chq-cat__img { transform: scale(1.06); }
.chq-cat__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,14,12,.92) 0%, rgba(8,14,12,.55) 42%, rgba(8,14,12,.12) 100%);
}
.chq-cat__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 1.15rem; }
.chq-cat__name {
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: #fff;
  font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.chq-cat--lead .chq-cat__name { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }
.chq-cat__count { color: rgba(255,255,255,.78); font-size: .78rem; margin-top: .3rem; font-weight: 500; }

/* ── Latest: lead story + stack ─────────────────────────────────────────── */
.chq-latest { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .chq-latest { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.chq-leadstory {
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease;
}
.chq-leadstory:hover { box-shadow: var(--chq-shadow-lift); border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--chq-line)); }
.chq-leadstory__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wp--preset--color--surface-alt); }
.chq-leadstory__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.chq-leadstory:hover .chq-leadstory__media img { transform: scale(1.04); }
.chq-leadstory__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.chq-leadstory__title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); line-height: 1.18; margin: 0; font-weight: 600; letter-spacing: -.018em; }
.chq-leadstory__title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.chq-leadstory__title a:hover { color: var(--wp--preset--color--primary-dark); }

.chq-stack { display: grid; gap: .85rem; align-content: start; }
.chq-mini {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .9rem; align-items: center;
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: .6rem; transition: border-color .16s ease, transform .16s ease;
}
.chq-mini:hover { border-color: var(--wp--preset--color--primary); transform: translateX(2px); }
.chq-mini__media { display: block; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; background: var(--wp--preset--color--surface-alt); }
.chq-mini__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chq-mini__body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.chq-mini__title { font-family: var(--wp--preset--font-family--heading); font-size: .99rem; line-height: 1.26; margin: 0; font-weight: 600; }
.chq-mini__title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.chq-mini__title a:hover { color: var(--wp--preset--color--primary-dark); }

/* ── Scoring pillars ────────────────────────────────────────────────────── */
.chq-pillars { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.chq-pillar {
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: 1.35rem 1.25rem; position: relative;
}
.chq-pillar__n {
  font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 600;
  color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent); line-height: 1; margin-bottom: .6rem;
}
.chq-pillar h3 { font-size: 1.02rem; margin: 0 0 .4rem; font-weight: 600; }
.chq-pillar p { font-size: .89rem; color: var(--wp--preset--color--muted); margin: 0; line-height: 1.58; }

/* ── Head-to-head ───────────────────────────────────────────────────────── */
.chq-versus { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.chq-vs {
  display: flex; align-items: center; justify-content: center; gap: .7rem; text-decoration: none;
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: 1.05rem .9rem; text-align: center;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.chq-vs:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-2px); box-shadow: var(--chq-shadow); }
.chq-vs__side { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .99rem; color: var(--wp--preset--color--ink); flex: 1; line-height: 1.25; }
.chq-vs__mid {
  flex: 0 0 auto; font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--surface-alt); border-radius: 999px; padding: .28rem .5rem;
}

/* ── Infographics ───────────────────────────────────────────────────────── */
/* Three cards side by side on desktop, stacked on a phone. minmax() is guarded
   with min(100%, …) — an unguarded minmax(18rem, 1fr) cannot shrink below its
   floor and overflows a 320px viewport, which is the single most common way a
   grid breaks a phone layout. */
.chq-igs { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.chq-ig {
  margin: 0; background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: 1.4rem 1.3rem; min-width: 0;
}
.chq-ig__head { margin: 0 0 1.1rem; }
.chq-ig__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.06rem; font-weight: 600; margin: 0 0 .4rem; color: var(--wp--preset--color--ink); }
.chq-ig__cap { font-size: .85rem; color: var(--wp--preset--color--muted); margin: 0; line-height: 1.55; }
.chq-ig__foot { font-size: .76rem; color: var(--wp--preset--color--muted); margin: .85rem 0 0; }

/* Flow — numbered chain. The connector is a pseudo-element on the number so it
   cannot desynchronise from the list when a step's text wraps to a new height. */
.chq-ig__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.chq-ig__step { display: flex; gap: .85rem; align-items: flex-start; padding-bottom: 1rem; position: relative; }
.chq-ig__step:last-child { padding-bottom: 0; }
.chq-ig__stepn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .86rem;
  background: var(--wp--preset--color--primary); color: #fff; position: relative; z-index: 1;
}
.chq-ig__step:not(:last-child) .chq-ig__stepn::after {
  content: ''; position: absolute; top: 30px; left: 50%; width: 2px; height: calc(100% + .7rem);
  transform: translateX(-50%); background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
.chq-ig__stepb { display: block; min-width: 0; }
.chq-ig__stepb strong { display: block; font-size: .95rem; font-weight: 600; color: var(--wp--preset--color--ink); margin-bottom: .18rem; }
.chq-ig__stepb span { display: block; font-size: .84rem; color: var(--wp--preset--color--muted); line-height: 1.5; }

/* Bars — label / track / value. grid rather than flex so every value column
   lines up regardless of how long the labels are. */
.chq-ig__bars { display: grid; gap: .6rem; }
.chq-ig__bar {
  display: grid; grid-template-columns: minmax(0, 7.5rem) 1fr auto; gap: .7rem; align-items: center;
  text-decoration: none; padding: .2rem 0;
}
.chq-ig__barlabel { font-size: .84rem; color: var(--wp--preset--color--ink); overflow-wrap: anywhere; line-height: 1.3; }
.chq-ig__bartrack { height: 11px; border-radius: 999px; background: var(--wp--preset--color--surface-alt); overflow: hidden; }
.chq-ig__barfill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
}
.chq-ig__barval { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.chq-ig__bar:hover .chq-ig__barlabel { color: var(--wp--preset--color--primary-dark); }
.chq-ig__bar:hover .chq-ig__bartrack { box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent); }

/* Donut. transform rotates nothing — the offsets are computed in PHP so the
   arc starts at 12 o'clock without a transform that would also rotate the
   centred text. */
.chq-ig__donutwrap { display: grid; gap: 1rem; grid-template-columns: minmax(0, 8.5rem) 1fr; align-items: center; }
.chq-ig__donut { width: 100%; height: auto; }
.chq-ig__ring { stroke: var(--wp--preset--color--surface-alt); }
.chq-ig__seg--0 { stroke: var(--wp--preset--color--primary); }
.chq-ig__seg--1 { stroke: var(--wp--preset--color--accent); }
.chq-ig__seg--2 { stroke: var(--wp--preset--color--good); }
.chq-ig__donutn { font-family: var(--wp--preset--font-family--heading); font-size: 6px; font-weight: 700; fill: var(--wp--preset--color--ink); }
.chq-ig__donutl { font-size: 2.6px; fill: var(--wp--preset--color--muted); letter-spacing: .08em; text-transform: uppercase; }
.chq-ig__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.chq-ig__key { display: grid; grid-template-columns: 12px 1fr auto; gap: .5rem; align-items: baseline; }
.chq-ig__swatch { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.chq-ig__key--0 .chq-ig__swatch { background: var(--wp--preset--color--primary); }
.chq-ig__key--1 .chq-ig__swatch { background: var(--wp--preset--color--accent); }
.chq-ig__key--2 .chq-ig__swatch { background: var(--wp--preset--color--good); }
.chq-ig__keyl { font-size: .84rem; color: var(--wp--preset--color--ink); line-height: 1.35; overflow-wrap: anywhere; }
.chq-ig__keyn { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .9rem; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  /* Below this the three-column bar row cannot hold a readable label AND a
     track, so the track drops to its own line rather than squeezing to nothing. */
  .chq-ig__bar { grid-template-columns: 1fr auto; }
  .chq-ig__bartrack { grid-column: 1 / -1; order: 3; }
  .chq-ig__donutwrap { grid-template-columns: 1fr; justify-items: center; }
  .chq-ig__donut { max-width: 11rem; }
}

/* ── In-post infographics ───────────────────────────────────────────────── */
/* Four reusable shapes for figures inside post_content: steps, split, matrix
   and compare. They live in the THEME stylesheet rather than in each post so a
   design change is one edit instead of eighteen — post_content carries only
   semantic markup, which also means a future rewrite of a post cannot leave a
   half-styled figure behind.

   Same rule as the homepage set: no shape here renders a statistic. These are
   processes, thresholds and comparisons — the things that are true because the
   page says them, not because a survey did. */
.chq-pig {
  margin: 2rem 0; padding: 1.4rem 1.3rem; border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); background: var(--wp--preset--color--surface);
}
.chq-pig__kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--primary); margin: 0 0 .35rem;
}
.chq-pig__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; font-weight: 600; margin: 0 0 1rem; color: var(--wp--preset--color--ink); line-height: 1.3; }
.chq-pig__note { font-size: .8rem; color: var(--wp--preset--color--muted); margin: 1rem 0 0; line-height: 1.5; }

/* steps — numbered vertical flow */
.chq-pig__steps { list-style: none; margin: 0; padding: 0; }
.chq-pig__step { display: flex; gap: .85rem; align-items: flex-start; padding-bottom: 1rem; position: relative; }
.chq-pig__step:last-child { padding-bottom: 0; }
.chq-pig__n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .82rem;
  background: var(--wp--preset--color--primary); color: #fff; position: relative; z-index: 1;
}
.chq-pig__step:not(:last-child) .chq-pig__n::after {
  content: ''; position: absolute; top: 28px; left: 50%; width: 2px; height: calc(100% + .7rem);
  transform: translateX(-50%); background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
.chq-pig__b { min-width: 0; }
.chq-pig__b strong { display: block; font-size: .95rem; margin-bottom: .15rem; color: var(--wp--preset--color--ink); }
.chq-pig__b span { display: block; font-size: .85rem; color: var(--wp--preset--color--muted); line-height: 1.5; }

/* split — two columns that mean opposite things */
.chq-pig__split { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.chq-pig__col { background: var(--wp--preset--color--base); border: 1px solid var(--chq-line); border-radius: 10px; padding: .95rem 1rem; min-width: 0; }
.chq-pig__col--yes { border-left: 3px solid var(--wp--preset--color--good); }
.chq-pig__col--no  { border-left: 3px solid var(--wp--preset--color--bad); }
.chq-pig__colh { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .92rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.chq-pig__col--yes .chq-pig__colh { color: var(--wp--preset--color--good); }
.chq-pig__col--no  .chq-pig__colh { color: var(--wp--preset--color--bad); }
.chq-pig__col ul { margin: 0; padding-left: 1.1rem; }
.chq-pig__col li { font-size: .85rem; color: var(--wp--preset--color--ink); margin: 0 0 .38rem; line-height: 1.45; }
.chq-pig__col li:last-child { margin-bottom: 0; }

/* matrix — labelled cells, each a thing with a one-line verdict */
.chq-pig__matrix { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.chq-pig__cell { background: var(--wp--preset--color--base); border: 1px solid var(--chq-line); border-radius: 10px; padding: .85rem .9rem; min-width: 0; }
.chq-pig__cellt { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .88rem; margin: 0 0 .25rem; color: var(--wp--preset--color--ink); overflow-wrap: anywhere; }
.chq-pig__cellv { font-size: .8rem; color: var(--wp--preset--color--muted); line-height: 1.45; margin: 0; }
.chq-pig__tag { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .16rem .42rem; border-radius: 999px; margin-bottom: .4rem; }
.chq-pig__tag--yes { background: color-mix(in srgb, var(--wp--preset--color--good) 15%, transparent); color: var(--wp--preset--color--good); }
.chq-pig__tag--no  { background: color-mix(in srgb, var(--wp--preset--color--bad) 15%, transparent); color: var(--wp--preset--color--bad); }
.chq-pig__tag--mid { background: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent); color: var(--wp--preset--color--primary-dark); }

/* compare — a vs b, one row per dimension */
.chq-pig__cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .9rem; }
.chq-pig__cmph { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wp--preset--color--primary); padding-bottom: .4rem; border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent); }
.chq-pig__cmpr { font-size: .85rem; color: var(--wp--preset--color--ink); line-height: 1.45; padding: .45rem 0; border-bottom: 1px solid var(--chq-line); overflow-wrap: anywhere; }
.chq-pig__cmpl { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-top: .55rem; }

/* ── In-post infographics, second set ───────────────────────────────────────
   Five more shapes so a reader moving between posts does not meet the same
   three diagrams again. Same rule as the first set: none of these renders a
   statistic. calc shows an arithmetic RELATIONSHIP the reader fills in with
   their own measurements; quadrant and scale are editorial POSITIONING, which
   the page argues in prose either way; tiers is an ordering; anno decodes a
   label the manufacturer wrote. */

/* calc — a measurement the reader performs, laid out as arithmetic */
.chq-pig__calc { display: grid; gap: .3rem; max-width: 30rem; }
.chq-pig__calcrow {
  display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: baseline;
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: 9px; padding: .6rem .85rem;
}
.chq-pig__calclabel { font-size: .87rem; color: var(--wp--preset--color--ink); }
.chq-pig__calcval { font-family: var(--wp--preset--font-family--heading); font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--muted); white-space: nowrap; }
.chq-pig__calcop { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--primary); text-align: center; line-height: 1; }
.chq-pig__calcrow--result {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, var(--wp--preset--color--base));
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--chq-line));
  border-width: 2px;
}
.chq-pig__calcrow--result .chq-pig__calclabel { font-weight: 700; }
.chq-pig__calcrow--result .chq-pig__calcval { color: var(--wp--preset--color--primary-dark); }

/* quadrant — 2x2 positioning with named axes */
.chq-pig__quad { display: grid; gap: .5rem; }
.chq-pig__quadgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.chq-pig__quadcell {
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-radius: 10px; padding: .8rem .85rem; min-width: 0;
}
.chq-pig__quadcell strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: .88rem; margin-bottom: .2rem; color: var(--wp--preset--color--ink); }
.chq-pig__quadcell span { display: block; font-size: .79rem; color: var(--wp--preset--color--muted); line-height: 1.45; }
.chq-pig__quadcell--pick { border-color: var(--wp--preset--color--good); background: color-mix(in srgb, var(--wp--preset--color--good) 7%, var(--wp--preset--color--base)); }
.chq-pig__quadax { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.chq-pig__quadax--x { text-align: center; }

/* scale — a labelled spectrum, stops joined by a rule */
.chq-pig__scale { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); position: relative; }
.chq-pig__stop {
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-top: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
  border-radius: 0 0 9px 9px; padding: .7rem .8rem; min-width: 0;
}
.chq-pig__stop--strong { border-top-color: var(--wp--preset--color--good); }
.chq-pig__stop--weak { border-top-color: var(--wp--preset--color--bad); }
.chq-pig__stopt { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .87rem; color: var(--wp--preset--color--ink); margin-bottom: .2rem; }
.chq-pig__stopv { display: block; font-size: .78rem; color: var(--wp--preset--color--muted); line-height: 1.45; }

/* tiers — ranked bands */
.chq-pig__tiers { display: grid; gap: .5rem; }
.chq-pig__tier {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: .9rem; align-items: start;
  background: var(--wp--preset--color--base); border: 1px solid var(--chq-line);
  border-left: 4px solid var(--wp--preset--color--primary);
  border-radius: 9px; padding: .75rem .9rem;
}
.chq-pig__tiern { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: .87rem; color: var(--wp--preset--color--primary-dark); overflow-wrap: anywhere; }
.chq-pig__tierb { font-size: .84rem; color: var(--wp--preset--color--ink); line-height: 1.5; margin: 0; }
@media (max-width: 560px) { .chq-pig__tier { grid-template-columns: 1fr; gap: .25rem; } }

/* anno — a spec/label with numbered callouts decoded underneath */
.chq-pig__anno { display: grid; gap: .9rem; }
.chq-pig__annospec {
  background: var(--wp--preset--color--dark); color: #fff; border-radius: 10px;
  padding: .9rem 1rem; display: grid; gap: .4rem; font-family: var(--wp--preset--font-family--heading);
}
.chq-pig__annoline { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: baseline; font-size: .88rem; }
.chq-pig__annoline b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wp--preset--color--accent); color: #12100a; font-size: .72rem; font-weight: 800;
}
.chq-pig__annokey { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chq-pig__annokey li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: baseline; font-size: .84rem; color: var(--wp--preset--color--muted); line-height: 1.5; }
.chq-pig__annokey b {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
  color: var(--wp--preset--color--primary-dark); font-size: .72rem; font-weight: 800;
}
.chq-pig__annokey strong { color: var(--wp--preset--color--ink); }

/* ── Goal tiles ─────────────────────────────────────────────────────────── */
.chq-goals { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.chq-goal {
  display: flex; gap: .85rem; align-items: flex-start; text-decoration: none;
  padding: 1.1rem; border-radius: var(--chq-radius); border: 1px solid var(--chq-line);
  background: var(--wp--preset--color--base); transition: background-color .16s ease, border-color .16s ease;
}
.chq-goal:hover { background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--primary); }
.chq-goal__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  color: var(--wp--preset--color--primary); font-size: 1.05rem;
}
.chq-goal__t { font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 .15rem; font-size: 1rem; }
.chq-goal__d { font-size: .84rem; color: var(--wp--preset--color--muted); margin: 0; line-height: 1.45; }

/* ── Post furniture: callouts, TOC, author, verdict ─────────────────────── */
.chq-callout {
  border: 1px solid var(--chq-line); border-left: 4px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--surface); border-radius: var(--chq-radius-sm);
  padding: 1rem 1.15rem; margin: 1.75rem 0; font-size: .92rem; line-height: 1.6;
  color: var(--wp--preset--color--muted);
}
.chq-callout strong { color: var(--wp--preset--color--ink); }
.chq-callout--medical { border-left-color: var(--wp--preset--color--primary); }
.chq-callout__title {
  display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 600;
  color: var(--wp--preset--color--ink); font-size: .98rem; margin-bottom: .3rem;
}

.chq-toc {
  background: var(--wp--preset--color--surface); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: 1.1rem 1.25rem; margin: 1.75rem 0;
}
.chq-toc__title {
  font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--wp--preset--color--muted); margin: 0 0 .6rem;
}
.chq-toc ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .34rem; }
.chq-toc li { font-size: .93rem; line-height: 1.45; }
.chq-toc a { text-decoration: none; }
.chq-toc a:hover { text-decoration: underline; }

.chq-authorcard {
  display: flex; gap: 1.15rem; align-items: flex-start; flex-wrap: wrap;
  background: var(--wp--preset--color--surface); border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); padding: 1.5rem; margin: 2.5rem 0 1rem;
}
.chq-authorcard__avatar {
  width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  background: var(--wp--preset--color--primary); display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 1.5rem; font-family: var(--wp--preset--font-family--heading);
}
.chq-authorcard__body { flex: 1 1 16rem; min-width: 0; }
.chq-authorcard__label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 700; margin: 0 0 .2rem; }
.chq-authorcard__name { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 600; margin: 0 0 .5rem; }
.chq-authorcard__bio { font-size: .92rem; color: var(--wp--preset--color--muted); margin: 0; line-height: 1.62; }
.chq-authorcard__bio p { margin: 0 0 .7rem; }
.chq-authorcard__bio p:last-child { margin-bottom: 0; }

/* Tables in review content are wide by nature — scroll them, never the page. */
.chq-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.75rem 0; border: 1px solid var(--chq-line); border-radius: var(--chq-radius); }
.chq-tablewrap > table { margin: 0; border: 0; min-width: 34rem; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border: 1px solid var(--chq-line); padding: .6rem .75rem; text-align: left; }
.entry-content thead th { background: var(--wp--preset--color--surface-alt); font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: .85rem; }

/* ── Post header / body ─────────────────────────────────────────────────── */
.chq-posthead { padding-block: clamp(1.75rem, 4vw, 3rem) 0; }
.chq-posthead__cat { font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--wp--preset--color--primary); text-decoration: none; }
.chq-posthead h1 { font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.05rem); line-height: 1.09; letter-spacing: -.025em; margin: .6rem 0 .9rem; text-wrap: balance; }
.chq-posthead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .87rem; color: var(--wp--preset--color--muted); }
.chq-posthead__meta strong { color: var(--wp--preset--color--ink); font-weight: 600; }

.entry-content > * + * { margin-top: 1.15em; }
/* scroll-margin-top clears whatever is stuck to the top of the viewport when a
   table-of-contents link jumps to a heading.
   84px was sized for the sticky header alone (69px + air). It is WRONG on any
   page also running the trending-carousel widget, which pins a 108px strip at
   top:0 with z-index 9999 — measured on a live post, a TOC jump left the
   heading at top:84px, i.e. completely hidden behind the carousel. The reader
   clicks a contents link and arrives at what looks like the middle of the
   previous section.
   The extra offset is applied only when the carousel is actually on the page,
   so posts without it do not get a large dead gap above every heading. */
.entry-content h2 { margin-top: 2.1em; scroll-margin-top: 84px; }
.entry-content h3 { margin-top: 1.6em; scroll-margin-top: 84px; }
body:has(#_chq_tc) .entry-content h2,
body:has(#_chq_tc) .entry-content h3,
body:has(#_chq_tc) .chq-pig { scroll-margin-top: 200px; }
.entry-content img { border-radius: var(--chq-radius-sm); }

/* Tall Pinterest-size photographs inside a post (figure.chq-pin). Capped by
   WIDTH per ratio, so each tops out near 880px tall on desktop — a 2:3 photo at
   full column width is taller than a laptop screen. Full width on a phone. */
.entry-content figure.chq-pin { margin: 2.25rem auto; }
.entry-content figure.chq-pin img { display: block; width: 100%; height: auto; margin: 0 auto; }
.entry-content figure.chq-pin--2x3 { max-width: min(100%, 36rem); }
.entry-content figure.chq-pin--9x16 { max-width: min(100%, 31rem); }
.entry-content figure.chq-pin--12x25 { max-width: min(100%, 27rem); }
.entry-content figure.chq-pin figcaption { font-size: .82rem; color: var(--wp--preset--color--muted); text-align: center; margin-top: .55rem; }
.entry-content ul, .entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: .4rem; }

/* ── In-content INTERNAL links ───────────────────────────────────────────────
 *
 * Two selectors, because internal links arrive by two different routes and both
 * have to look the same:
 *   a[href^="/"]   editorial links written into the post (root-relative)
 *   a[data-ilk]    links placed by the Dash internal-link injector, which
 *                  stamps the keyword it matched onto every link it creates
 *
 * Amazon links are absolute and carry neither, so the product buttons keep
 * their own orange styling and are never caught by this.
 *
 * Every colour falls back to the site's existing link colour, so a site whose
 * token file does not define an "ilink" colour renders exactly as it did before. Only
 * exqeo opts in today.
 */
.entry-content a[href^="/"],
.entry-content a[data-ilk] {
  color: var(--wp--preset--color--ilink, var(--wp--preset--color--primary-dark));
  font-weight: 700;
  text-decoration: underline;
  /* !important because the Twenty Twenty-Five PARENT theme ships
   * "a { text-decoration-thickness: 1px !important }". Without matching it, the rule
   * here loses silently and the underline renders hairline — the styling looks
   * applied in the stylesheet and is wrong on the page, which is only visible by
   * reading computed styles in a real browser. */
  text-decoration-thickness: 2px !important;
  text-underline-offset: .16em;
  text-decoration-color: var(--wp--preset--color--ilink-rule, currentColor);
  border-radius: 2px;
  /* A long slug or product name inside a link must not push the column wide. */
  overflow-wrap: anywhere;
  transition: background-color .12s ease, text-decoration-thickness .12s ease;
}
.entry-content a[href^="/"]:hover,
.entry-content a[href^="/"]:focus-visible,
.entry-content a[data-ilk]:hover,
.entry-content a[data-ilk]:focus-visible {
  background: var(--wp--preset--color--ilink-wash, transparent);
  text-decoration-thickness: 3px !important;
}
/* Headings own their own styling; a bold yellow link inside an H2 reads as a
 * broken heading rather than as a link, and a linked heading is an
 * over-optimisation tell in its own right. */
.entry-content :is(h1,h2,h3,h4,h5,h6) a[href^="/"],
.entry-content :is(h1,h2,h3,h4,h5,h6) a[data-ilk] {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  background: none;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.chq-footer { background: var(--wp--preset--color--dark); color: rgba(255,255,255,.72); margin-top: clamp(3rem, 8vw, 5rem); }
.chq-footer__inner { padding-block: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .chq-footer__inner { grid-template-columns: 1.4fr 1fr; } }
.chq-footer__brand { font-family: var(--wp--preset--font-family--heading); font-size: 1.3rem; color: #fff; margin: 0 0 .6rem; font-weight: 600; }
.chq-footer__blurb { font-size: .92rem; line-height: 1.65; max-width: 34rem; margin: 0 0 1.25rem; }
.chq-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.chq-footer__links a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .92rem; }
.chq-footer__links a:hover { color: #fff; text-decoration: underline; }
.chq-footer__legal {
  border-top: 1px solid rgba(255,255,255,.11); padding-block: 1.5rem;
  font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.52); display: grid; gap: .8rem;
}
.chq-footer h3 { color: #fff; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .9rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; }

.chq-search { display: flex; gap: .5rem; max-width: 22rem; }
.chq-search input {
  flex: 1 1 auto; min-width: 0; padding: .6rem .8rem; border-radius: var(--chq-radius-sm);
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff;
}
.chq-search input::placeholder { color: rgba(255,255,255,.45); }
.chq-search button {
  flex: 0 0 auto; padding: .6rem 1.1rem; border-radius: var(--chq-radius-sm); border: 0; cursor: pointer;
  background: var(--wp--preset--color--primary); color: #fff; font-weight: 600;
}
.chq-search button:hover { background: var(--wp--preset--color--primary-dark); }

/* Visible only to screen readers — used for the search label. */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Ad slots — reserved height so ads do not shift layout (CLS) ────────── */
.chq-ad { margin: 2rem auto; text-align: center; min-height: 100px; }
.chq-ad--inline { min-height: 280px; }

/* ── Pagination / archive ───────────────────────────────────────────────── */
.chq-archivehead { padding-block: clamp(2rem, 5vw, 3.25rem); background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--chq-line); }
.chq-archivehead h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.7rem); margin: 0 0 .5rem; }
.chq-pagination { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; padding-block: 2.5rem; }
.chq-pagination a, .chq-pagination span {
  padding: .55rem .95rem; border-radius: var(--chq-radius-sm); border: 1px solid var(--chq-line);
  text-decoration: none; font-size: .92rem; color: var(--wp--preset--color--ink);
}
.chq-pagination .current { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .chq-card:hover, .chq-btn:hover, .chq-vs:hover { transform: none; }
}

/* Skip link — keyboard users land on content, not the nav, on every page. */
.chq-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--primary); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--chq-radius-sm) 0; text-decoration: none; font-weight: 600;
}
.chq-skip:focus { left: 0; }

.chq-related__head { margin: clamp(2.5rem,6vw,3.5rem) 0 1.2rem; }
.chq-related .chq-card__title { font-size: 1.02rem; line-height: 1.35; }

/* ══ READ: callout ══════════════════════════════════════════════════════════
   The in-article internal link, written by lib/mlpInject.js.

   The form is not invented — it is lifted from the archive, where this site has
   used a bare "READ: <link>" line 51 times since 2021. Keeping the wording and
   giving it a rule means the new links look like the ones a returning reader
   has seen for four years, rather than like a plugin's related-posts box.

   Styled as a rule-and-indent rather than a filled card on purpose: it sits
   BETWEEN sections of a long read, and a heavy box there reads as an
   advertisement and gets scrolled past. */
.chq-read {
  margin: 1.6rem 0; padding: .55rem 0 .55rem 1rem;
  border-left: 3px solid var(--wp--preset--color--accent);
  font-size: .96rem; line-height: 1.55;
}
.chq-read strong {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin-right: .5em;
}
/* Bold, gold and underlined, because the previous treatment was too quiet to
   notice mid-article — which is the whole failure of an internal link. This is
   the NO-JAVASCRIPT baseline: the link_decor widget restyles these at runtime
   with !important and A/B tests the colour, but if its snippet never loads the
   link must still be obviously a link. A styling widget that fails open to
   "looks like body text" is worse than no widget. */
.chq-read a {
  color: var(--chq-ilink); font-weight: 700; overflow-wrap: break-word;
  text-decoration: underline; text-decoration-color: var(--chq-ilink);
  text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.chq-read a:hover { background: var(--chq-ilink-wash); }

/* In-content internal links get the same treatment. "._chq_ilink" is added at
   runtime by the link_decor snippet, so this rule only fires once that has run —
   it is here rather than in the snippet so the two cannot disagree about the
   resting state. External and affiliate links are deliberately NOT included:
   making an outbound affiliate link the loudest thing in a paragraph is how a
   review page starts reading as a sales page. */
.entry-content a[data-ilk],
.wp-block-post-content a[data-ilk],
.entry-content a._chq_ilink,
.wp-block-post-content a._chq_ilink {
  color: var(--chq-ilink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--chq-ilink);
  text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.entry-content a[data-ilk]:hover,
.wp-block-post-content a[data-ilk]:hover,
.entry-content a._chq_ilink:hover,
.wp-block-post-content a._chq_ilink:hover { background: var(--chq-ilink-wash); }

/* ══ Infographics ═══════════════════════════════════════════════════════════
   Styling for the HTML infographics built by lib/infographics.js. It lives in
   the fleet sheet rather than inline in each post for one reason that decides
   it: these blocks appear three-plus times per post, and inlining the CSS would
   repeat ~2 KB on every one of them, in the post_content, permanently. Here it
   is downloaded once and cached, and a design fix reaches every existing post
   without rewriting a single row in the database.

   Read alongside lib/infographics.js — the class names are its contract. */

.chq-infog {
  margin: 2.25rem 0; padding: 0; border: 1px solid var(--chq-line);
  border-radius: var(--chq-radius); background: var(--wp--preset--color--surface);
  overflow: hidden; /* keeps the coloured bars inside the rounded corner */
}
.chq-infog__head { display: block; padding: 1.05rem 1.15rem .85rem; border-bottom: 1px solid var(--chq-line); }
.chq-infog__kicker {
  display: block; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--wp--preset--color--primary); margin-bottom: .3em;
}
.chq-infog__title {
  display: block; font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.25; color: var(--wp--preset--color--ink);
}
.chq-infog__cap { display: block; margin-top: .4em; font-size: .9rem; color: var(--wp--preset--color--muted); line-height: 1.5; }
.chq-infog__src {
  margin: 0; padding: .6rem 1.15rem .8rem; font-size: .78rem;
  color: var(--wp--preset--color--muted); border-top: 1px solid var(--chq-line);
}

/* Per-type accent on the kicker. Six infographic types appear in one article,
   and without this they arrive as six identical grey boxes that a reader
   scrolls past as one texture. Tinting only the small uppercase kicker gives
   each type a recognisable signature at a glance while keeping the palette
   calm — the alternative, tinting the whole frame, turns a review page into a
   colour chart. These are also the styling hook for any per-type override, so
   every modifier the builders emit has a rule rather than being dead markup. */
.chq-infog--doseLadder .chq-infog__kicker { color: var(--wp--preset--color--bad); }
.chq-infog--versus     .chq-infog__kicker { color: var(--wp--preset--color--primary); }
.chq-infog--timeline   .chq-infog__kicker { color: var(--wp--preset--color--primary-dark); }
.chq-infog--statBand   .chq-infog__kicker { color: var(--wp--preset--color--accent); }
.chq-infog--stack      .chq-infog__kicker { color: var(--wp--preset--color--primary); }
.chq-infog--decision   .chq-infog__kicker { color: var(--wp--preset--color--good); }
/* The three that lay content out edge-to-edge do not want the head's rule as
   well as the grid's own 1px gap lines — it reads as a double border. */
.chq-infog--statBand .chq-infog__head,
.chq-infog--decision .chq-infog__head { border-bottom: 0; padding-bottom: .35rem; }

/* ── dose ladder ──────────────────────────────────────────────────────────
   Two bars per row on a shared per-row scale. The bars are block elements with
   a percentage width rather than a flex ratio, because the label has to sit
   INSIDE the bar when it fits and outside when it doesn't, and flex cannot do
   that without measuring. */
.chq-infog__rows { padding: .5rem .65rem; }
.chq-infog__row { padding: .7rem .5rem; border-bottom: 1px solid var(--chq-line); }
.chq-infog__row:last-child { border-bottom: 0; }
.chq-infog__label {
  font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--ink); margin-bottom: .45em;
  overflow-wrap: break-word; /* ingredient names are long and unbreakable */
}
.chq-infog__label small { display: block; font-weight: 400; font-size: .8rem; color: var(--wp--preset--color--muted); margin-top: .15em; }
.chq-infog__bars { display: grid; gap: .3rem; }
.chq-infog__bar {
  min-width: 3.5rem; /* a 2%-of-scale bar still has to hold its own label */
  border-radius: 5px; padding: .28rem .5rem; font-size: .8rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.chq-infog__bar--studied { background: var(--wp--preset--color--primary); color: #fff; }
.chq-infog__bar--actual  { background: var(--wp--preset--color--accent); color: #fff; }
/* A product carrying under 80% of the studied dose gets a visible flag. The
   left border is deliberately not the only signal — .is-short also changes the
   label weight, so it survives a greyscale print and a colour-blind reader. */
.chq-infog__row.is-short { border-left: 3px solid var(--wp--preset--color--bad); padding-left: .65rem; }
.chq-infog__row.is-short .chq-infog__label { color: var(--wp--preset--color--bad); }
.chq-infog__key {
  margin: 0; padding: .55rem 1.15rem .85rem; font-size: .8rem; color: var(--wp--preset--color--muted);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
}
.chq-infog__sw { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }
.chq-infog__sw--studied { background: var(--wp--preset--color--primary); }
.chq-infog__sw--actual  { background: var(--wp--preset--color--accent); }

/* ── versus table ─────────────────────────────────────────────────────────
   The table scrolls inside its own container. A three-column comparison of two
   product names does not fit 390px and never will, and letting the BODY scroll
   sideways instead is the single most common mobile defect in this fleet. */
.chq-infog__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chq-infog__table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 30rem; }
.chq-infog__table th, .chq-infog__table td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--chq-line); vertical-align: top; }
.chq-infog__table thead th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--muted); background: var(--wp--preset--color--surface-alt); }
.chq-infog__table tbody th { font-weight: 600; color: var(--wp--preset--color--ink); width: 30%; }
.chq-infog__table tr:last-child th, .chq-infog__table tr:last-child td { border-bottom: 0; }
/* The winning cell is marked with a glyph as well as a tint — colour alone is
   not an accessible way to say "this one is better". */
.chq-infog__table td.is-win { font-weight: 600; color: var(--wp--preset--color--good); }
.chq-infog__table td.is-win::before { content: "▲ "; font-size: .75em; }
.chq-infog__verdict { margin: 0; padding: .85rem 1.15rem; background: var(--wp--preset--color--surface-alt); font-size: .93rem; line-height: 1.55; }

/* ── timeline ─────────────────────────────────────────────────────────────
   minmax() floored with min() so a long "when" label cannot blow the column
   out on a narrow screen. */
.chq-infog__time { list-style: none; margin: 0; padding: .75rem 1.15rem 1rem; display: grid; gap: .1rem; counter-reset: none; }
.chq-infog__step {
  display: grid; grid-template-columns: minmax(min(6rem, 30%), max-content) 1fr; gap: .9rem;
  padding: .7rem 0; border-bottom: 1px solid var(--chq-line); align-items: baseline;
}
.chq-infog__step:last-child { border-bottom: 0; }
.chq-infog__when {
  font-weight: 700; font-size: .84rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--wp--preset--color--primary); overflow-wrap: break-word;
}
.chq-infog__what strong { display: block; font-size: .98rem; margin-bottom: .15em; }
.chq-infog__what span { display: block; font-size: .9rem; color: var(--wp--preset--color--muted); line-height: 1.55; }

/* ── stat band ────────────────────────────────────────────────────────────
   auto-fit with a min() floor: three stats sit in a row on a laptop and stack
   on a phone, and a 4-character number never forces a horizontal scrollbar. */
.chq-infog__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: 1px; background: var(--chq-line); }
.chq-infog__stat { background: var(--wp--preset--color--surface); padding: 1rem 1.05rem 1.1rem; }
.chq-infog__num {
  display: block; font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.5rem, 4.5vw, 2.05rem); line-height: 1.05; color: var(--wp--preset--color--primary);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word;
}
.chq-infog__slabel { display: block; margin-top: .35em; font-size: .88rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.chq-infog__snote { display: block; margin-top: .25em; font-size: .78rem; color: var(--wp--preset--color--muted); line-height: 1.45; }

/* ── stack list ───────────────────────────────────────────────────────────
   Three columns on a wide screen, and on a phone the dose moves under the name
   rather than being squeezed — a dose truncated to "25..." is worse than no
   dose at all. */
.chq-infog__stack { list-style: none; margin: 0; padding: .5rem .65rem; }
.chq-infog__stack li { display: grid; grid-template-columns: 1fr; gap: .1rem .9rem; padding: .7rem .5rem; border-bottom: 1px solid var(--chq-line); }
.chq-infog__stack li:last-child { border-bottom: 0; }
.chq-infog__iname { font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--ink); overflow-wrap: break-word; }
.chq-infog__idose { font-size: .88rem; font-weight: 600; color: var(--wp--preset--color--primary); font-variant-numeric: tabular-nums; }
.chq-infog__ifor { font-size: .88rem; color: var(--wp--preset--color--muted); line-height: 1.5; }
@media (min-width: 40rem) {
  .chq-infog__stack li { grid-template-columns: minmax(0, 1.1fr) minmax(min(5rem, 20%), max-content) minmax(0, 1.4fr); align-items: baseline; }
}
.chq-infog__total { margin: 0; padding: .75rem 1.15rem; background: var(--wp--preset--color--surface-alt); font-size: .89rem; color: var(--wp--preset--color--muted); }

/* ── decision branches ────────────────────────────────────────────────────*/
.chq-infog__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1px; background: var(--chq-line); }
.chq-infog__branch { background: var(--wp--preset--color--surface); padding: 1rem 1.05rem 1.15rem; }
.chq-infog__if {
  display: block; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--wp--preset--color--muted); margin-bottom: .4em;
}
.chq-infog__if::before { content: "If "; }
.chq-infog__then { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; line-height: 1.3; color: var(--wp--preset--color--ink); }
.chq-infog__why { display: block; margin-top: .4em; font-size: .87rem; color: var(--wp--preset--color--muted); line-height: 1.5; }

/* Print: readers of a dose chart print it. Backgrounds drop out by default in
   most browsers, so the bars are given a border to survive the loss of fill. */
@media print {
  .chq-infog { break-inside: avoid; border-color: #999; }
  .chq-infog__bar { border: 1px solid #333; color: #000 !important; }
}