/* ==========================================================================
   Honest101 — SIMPLE comparison layout (toptechreport-style)
   Plain white page, restrained sans-serif type, narrow single column,
   vertically stacked product cards, one clear CTA per card.
   No framework, no external fonts, no tracking.

   Typography is ONE defined 7-step scale (see --fs-1..--fs-7 below). Every
   font-size in this file references a scale token — no one-off sizes.
   ========================================================================== */

:root {
  /* ---- type scale: 7 steps, reused everywhere ---- */
  --fs-1: 12px;  /* fine print, captions, badges, labels, table heads */
  --fs-2: 13px;  /* trust text: rating source, review meta, footer/legal */
  --fs-3: 15px;  /* small body: bullets, secondary copy, nav, controls */
  --fs-4: 17px;  /* base body */
  --fs-5: 20px;  /* prose / lede / h3 */
  --fs-6: 24px;  /* h2 / product-card titles */
  --fs-7: 34px;  /* h1 */

  --wrap: 778px;
  --ink: #111;
  --ink-soft: #333;
  --muted: #6b6b6b;
  --line: #e3e3e3;
  --line-strong: #cfcfcf;
  --accent: #1a5fb4;
  --accent-deep: #124a8f;
  --good: #1a7f37;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --radius: 8px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;
  --sticky-h: 66px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-4);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.22; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: var(--fs-7); }
h2 { font-size: var(--fs-6); }
h3 { font-size: var(--fs-5); }
h4 { font-size: var(--fs-2); }
p { margin: 0 0 1em; line-height: 1.55; }
small { font-size: var(--fs-2); }
li { line-height: 1.5; }
section { padding: 22px 0; }
[id] { scroll-margin-top: 84px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.narrow, .narrow-wrap { max-width: 720px; }

.eyebrow { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin: 0 0 .5em; }
.lede { font-size: var(--fs-5); color: var(--ink-soft); }
.lede-leadin { font-size: var(--fs-5); font-weight: 600; color: var(--ink); }

/* ---------- skip link + header (single line) ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: #111; color: #fff; padding: 8px 14px; border-radius: 0 0 6px 0; z-index: 100; }
.skip:focus { left: 0; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 54px; }
.brand { font-family: var(--sans); font-weight: 700; font-size: var(--fs-4); text-decoration: none; color: var(--ink); }
.brand b { color: var(--accent); }
.brand .dot { color: var(--muted); }

.nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.nav a { color: var(--ink-soft); font-size: var(--fs-3); font-weight: 500; padding: 7px 10px; border-radius: 6px; text-decoration: none; }
.nav a:hover { background: #f2f2f2; text-decoration: none; }
.nav a.active { color: var(--ink); font-weight: 700; }

.nav-toggle { display: none; margin-left: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; padding: 10px 14px; min-height: 44px; font-size: var(--fs-2); font-family: var(--sans); color: var(--ink); cursor: pointer; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0;
         flex-direction: column; align-items: stretch; gap: 0;
         background: #fff; border-bottom: 1px solid var(--line);
         padding: 6px; display: none; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
}

/* ---------- slim draft notice ---------- */
.draft-ribbon { background: #f5f5f5; color: #5a5a5a; text-align: center; font-size: var(--fs-2); padding: 6px 12px; border-bottom: 1px solid var(--line); }
.draft-ribbon b { color: #333; font-weight: 600; }

/* ---------- intro (compact title, not a hero) ---------- */
.intro { padding: 24px 0 6px; }
.intro .upd { color: var(--muted); font-size: var(--fs-2); margin: 0 0 8px; }
.intro h1 { margin-bottom: .4rem; }
.intro .lede { max-width: none; }
.intro .lede--intro p { margin: 0 0 .6em; }
.intro .lede--intro p:last-child { margin-bottom: .5em; }
.intro .lede-leadin { max-width: none; margin: .2em 0 0; }
.disclosure-line, .disclosure {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-size: var(--fs-2); color: #555; margin: 16px 0 4px;
}
.disclosure-line b, .disclosure b { color: #333; }

/* ---------- advertiser disclosure: trigger + popup ---------- */
.adv-trigger {
  display: inline-block; background: none; border: 0; padding: 0;
  font-family: var(--sans); font-size: var(--fs-2); font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.adv-trigger:hover { color: var(--accent-deep); }
.adv-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.adv-trigger-line { margin: 14px 0 4px; font-size: var(--fs-2); color: var(--muted); }

/* No-JS default: the panel is a normal, always-visible disclosure box so the
   text stays present for crawlers and readers without JavaScript. */
.adv-panel {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: var(--fs-2); color: #555; margin: 14px 0 4px; max-width: 74ch;
}
.adv-panel p { margin: 0 0 .5em; }
.adv-panel p:last-child { margin-bottom: 0; }
.adv-panel__title { font-weight: 700; color: #333; }
.adv-panel__link a { font-weight: 600; }
.adv-panel__close { display: none; }
.adv-backdrop { display: none; }

/* With JS available (.js set on <html>) the same panel becomes a popup,
   hidden until a trigger opens it. */
.js .adv-panel { display: none; }
.js .adv-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 190; }
.js .adv-backdrop[hidden] { display: none; }
.js .adv-panel.is-open {
  display: block; position: fixed; z-index: 200; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: 80vh; overflow-y: auto; background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 20px; margin: 0; box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
}
.js .adv-panel__close {
  display: block; position: absolute; top: 8px; right: 10px; width: 32px; height: 32px;
  background: none; border: 0; font-size: var(--fs-5); line-height: 1; color: var(--muted); cursor: pointer;
}
.js .adv-panel__close:hover { color: var(--ink); }
.js .adv-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 640px) {
  .js .adv-panel.is-open { padding: 16px; }
}

/* ---------- stacked product cards ---------- */
.list { padding: 18px 0 6px; }
.pcard { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 22px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; margin: 0 0 14px; }
.pcard__main { min-width: 0; }

/* product image column — plain background, object-fit contain, no frames/shadows */
.pcard__media { min-width: 0; align-self: start; }
.pcard__media img { width: 100%; height: 160px; object-fit: contain; background: #fff; }
.pcard__media-credit { font-size: var(--fs-1); line-height: 1.5; color: var(--muted); margin: 6px 0 0; text-align: center; }
.pcard__media--fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 160px; padding: 8px; background: var(--bg-soft); border-radius: 6px; }
.pcard__media-name { font-size: var(--fs-2); font-weight: 700; color: var(--ink-soft); line-height: 1.35; }
.pcard__media-note { font-size: var(--fs-1); color: var(--muted); margin-top: 4px; }
.pcard--featured { border: 2px solid var(--ink); }
.pcard__badge { position: absolute; top: -11px; left: 16px; background: var(--ink); color: #fff; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pcard__badge { display: inline-flex; align-items: center; gap: 6px; }
.pcard__badge-icon { display: block; flex: none; margin-top: -1px; }
.pcard__rank { font-size: var(--fs-2); font-weight: 700; color: var(--muted); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.pcard__rank .num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #f0f0f0; color: #333; font-size: var(--fs-1); flex: 0 0 auto; }
.pcard__name { font-size: var(--fs-6); margin: 0 0 .35em; }
.pcard__oneliner { font-size: var(--fs-3); color: var(--ink-soft); margin-bottom: 10px; }

/* bullet lists */
ul.tick, ul.cross, ul.bullets { list-style: none; margin: 0 0 12px; padding: 0; font-size: var(--fs-3); }
ul.tick li, ul.cross li, ul.bullets li { position: relative; padding: 3px 0 3px 22px; line-height: 1.5; }
ul.tick li::before { content: "\2713"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
ul.cross li::before { content: "\2013"; position: absolute; left: 2px; color: #999; font-weight: 700; }
ul.bullets li::before { content: "\2022"; position: absolute; left: 4px; color: var(--muted); }
ul.bullets .k { color: var(--muted); }
ul.bullets .v { font-weight: 600; color: var(--ink); }

/* ---------- buttons / CTA ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-3); padding: 12px 20px; border-radius: 6px; border: 1px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.25; text-align: center; }
.btn:hover { text-decoration: none; }
.btn-cta, .btn-primary, .btn-brass { background: var(--accent); color: #fff; }
.btn-cta:hover, .btn-primary:hover, .btn-brass:hover { background: var(--accent-deep); color: #fff; }
.btn-outline, .btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); font-weight: 600; font-size: var(--fs-3); padding: 9px 16px; }
.btn-outline:hover, .btn-ghost:hover { background: #f6f6f6; }
.btn-sm { padding: 8px 14px; font-size: var(--fs-2); }
.btn-lg { padding: 14px 28px; font-size: var(--fs-4); }
.btn-link { font-size: var(--fs-3); font-weight: 600; color: var(--accent); }

.pcard__cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.pcard__cta .btn-cta { flex: 1 1 100%; }
.pcard__fine { font-size: var(--fs-1); color: var(--muted); margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }

/* ---------- card LEFT rail: product image + rating panel beneath it ---------- */
.pcard__rail { min-width: 0; align-self: start; }
.pcard__rating {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
}
.pcard__rating-label { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.pcard__rating-value { font-size: var(--fs-3); font-weight: 700; line-height: 1.5; color: var(--ink); margin: 0 0 4px; }
.pcard__rating-value b { font-size: var(--fs-5); color: var(--accent); }
.pcard__rating-value--none { font-size: var(--fs-3); font-style: italic; font-weight: 600; color: var(--muted); }
.pcard__rating-source { font-size: var(--fs-2); color: var(--muted); line-height: 1.5; margin: 0 0 8px; }
.pcard__sales { font-size: var(--fs-1); color: var(--muted); margin: 0; line-height: 1.5; }
.pcard__sales b { color: var(--ink-soft); }

@media (max-width: 640px) {
  .pcard { grid-template-columns: 1fr; }
  .pcard__media { width: 100%; max-width: 100%; margin: 0 auto 2px; }
  .pcard__media img { height: 220px; }
  .pcard__media--fallback { height: auto; min-height: 92px; }
  .pcard__rail { margin-bottom: 10px; }
}

/* ---------- spec table (kept, restyled simply) ---------- */
.table-hint { display: none; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; position: relative; }
@media (max-width: 720px) {
  .table-hint { display: block; font-size: var(--fs-2); color: var(--muted); margin: 0 0 8px; }
  .table-wrap::after { content: ""; position: absolute; top: 0; right: 0; width: 32px; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.94)); pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0; }
}
table.spec { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--fs-3); }
table.spec caption { text-align: left; padding: 12px 14px 0; color: var(--muted); font-size: var(--fs-2); }
table.spec th, table.spec td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
table.spec thead th { background: #f7f7f7; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .05em; color: #444; }
table.spec tbody tr:last-child td { border-bottom: none; }
table.spec.compare { min-width: 100%; }
table.spec.compare th, table.spec.compare td { padding: 10px 12px; font-size: var(--fs-2); }
table.spec.compare th.criterion { text-align: left; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; color: #444; background: #f7f7f7; width: 110px; }
table.spec.compare thead th { position: static; font-size: var(--fs-1); line-height: 1.25; }
table.spec.compare thead th.col-featured, table.spec.compare td.col-featured { background: #eef4fb; }
table.spec.compare thead th.col-featured { color: var(--accent-deep); }
@media (max-width: 720px) { table.spec.compare { min-width: 760px; } }

/* ---------- featured-again band ---------- */
.featured-again { padding: 8px 0 4px; }
.featured-again .band { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.featured-again .band__label { font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.featured-again h2 { margin-bottom: .25em; }
.featured-again p { font-size: var(--fs-3); color: var(--ink-soft); }
.featured-again .btn-cta { margin-top: 6px; }

/* ---------- "What we liked" green-check feature list ---------- */
.liked { padding: 22px 0 6px; }
.liked h2 { margin-bottom: .3em; }
.liked-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.liked-list li { position: relative; min-width: 0; padding: 4px 0 4px 26px; }
.liked-list li::before { content: "\2713"; position: absolute; left: 0; top: 3px; color: var(--good); font-weight: 700; font-size: var(--fs-4); line-height: 1.45; }
.liked-list__head { display: block; font-weight: 700; color: var(--ink); font-size: var(--fs-4); line-height: 1.45; }
.liked-list__body { display: block; color: var(--ink-soft); font-size: var(--fs-3); line-height: 1.5; }
@media (max-width: 640px) { .liked-list { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- "The Verdict" CTA card ---------- */
.verdict-cta-sec { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 22px; }
.verdict-cta { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.verdict-cta__media { min-width: 0; }
.verdict-cta__media img { width: 100%; height: 200px; object-fit: contain; background: #fff; border-radius: 6px; margin: 0 auto; }
.verdict-cta__body { min-width: 0; }
.verdict-cta__brand { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.verdict-cta__name { font-size: var(--fs-5); margin: 0 0 10px; }
.verdict-cta__rating-label { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.verdict-cta__rating-value { font-size: var(--fs-4); font-weight: 800; line-height: 1.5; color: var(--ink); margin: 0 0 6px; }
.verdict-cta__rating-value b { color: var(--accent); }
.verdict-cta__rating-value--none { font-size: var(--fs-3); font-style: italic; font-weight: 600; color: var(--muted); }
.verdict-cta__rating-source { font-size: var(--fs-2); color: var(--muted); margin: 0 0 14px; }
.verdict-cta__verdict { font-size: var(--fs-4); color: var(--ink-soft); margin: 0 0 16px; max-width: 62ch; }
.verdict-cta__fine { font-size: var(--fs-1); color: var(--muted); margin: 12px 0 0; max-width: 62ch; }
@media (max-width: 640px) {
  .verdict-cta { grid-template-columns: 1fr; gap: 16px; }
  .verdict-cta__media img { height: 200px; }
  .verdict-cta__action .btn-cta { width: 100%; }
}

/* ---------- (retained) attributed marketplace rating block ---------- */
.amz-rating-sec { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 22px; }
.amz-rating { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.amz-rating p { margin: 0 0 .5em; }
.amz-rating p:last-child { margin-bottom: 0; }
.amz-rating__label { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); }
.amz-rating__score { font-size: var(--fs-4); font-weight: 700; color: var(--ink); }
.amz-rating__num { font-size: var(--fs-6); font-weight: 800; color: var(--accent); margin-right: 2px; }
.amz-rating__count { font-size: var(--fs-3); color: var(--ink-soft); }
.amz-rating__attr { font-size: var(--fs-2); color: #555; }
.amz-rating__note { font-size: var(--fs-2); color: var(--muted); }

/* ---------- "What owners say on Amazon" ---------- */
.orev-sec { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 22px; }
.orev-sec h3 { margin-top: 1.2em; }
.orev-list { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.orev { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; }
.orev__quote { font-size: var(--fs-3); font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.orev__meta { font-size: var(--fs-2); color: var(--muted); margin: 0; }
.orev__vp { color: var(--good); font-weight: 700; }
.orev-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 6px; }
.orev-themes__col h4 { margin: 0 0 .4em; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.orev-themes__col ul { margin: 0; padding-left: 1.1em; }
.orev-themes__col li { font-size: var(--fs-3); color: var(--ink-soft); margin-bottom: .45em; }
.orev-themes__col--crit h4 { color: #8a4b12; }
@media (max-width: 640px) {
  .orev-list, .orev-themes { grid-template-columns: 1fr; }
}

/* ---------- review below ---------- */
.review-below { padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 22px; }
.prose p { max-width: 70ch; }
/* plain (classless) prose paragraphs use the reading step so desktop body text
   lands in the 65-75 characters-per-line band; classed utility <p> are untouched */
.prose p:not([class]) { font-size: var(--fs-5); }
.verdict-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; }
.verdict-box p:last-child { margin-bottom: 0; }
.not-ranked { font-size: var(--fs-3); color: #555; margin: 0; }
.kbd-note { font-size: var(--fs-2); color: var(--muted); }
.claims-note { font-size: var(--fs-2); color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq { padding: 20px 0 10px; }
.faq details { border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 8px; }
.faq summary { cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: var(--fs-4); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { padding: 0 16px 14px; color: var(--ink-soft); font-size: var(--fs-3); }

/* ---------- callouts (review / legal) ---------- */
.callout { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--bg-soft); }
.callout h3 { margin-top: 0; }
.callout ul { margin: .4em 0 0; padding-left: 1.1em; }
.callout li { margin-bottom: .35em; }
.callout--note { background: #f6f8fb; border-color: #dde6f0; }
.callout--pending { background: #fbf7ee; border-color: #e6cf9e; }

/* ---------- review page layout ---------- */
.review-layout { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
@media (max-width: 880px) { .review-layout { grid-template-columns: 1fr; } }
.toc { position: sticky; top: 74px; font-size: var(--fs-3); border-left: 2px solid var(--line); padding-left: 14px; }
.toc h4 { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; color: #888; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 4px 0; color: var(--ink-soft); }
@media (max-width: 880px) { .toc { position: static; border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } }
.review-body h2 { margin-top: 1.5em; }
.review-body h2:first-child { margin-top: 0; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.pill--confirmed { background: #e7f3e9; color: #1a7f37; border: 1px solid #cfe6d3; }
.pill--partial { background: #fbf3e2; color: #7a5a12; border: 1px solid #e6cf9e; }
.pill--unconfirmed, .pill--pending { background: #f0f0f0; color: #666; border: 1px solid #ddd; }

/* ---------- footer (light & simple) ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 32px; padding: 24px 0; font-size: var(--fs-2); color: var(--muted); }
.site-footer h4 { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; color: #888; margin: 0 0 .6em; }
.site-footer a { color: #444; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
@media (max-width: 680px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4em; font-size: var(--fs-2); }
.footer-brand { font-weight: 700; font-size: var(--fs-4); color: #222; margin-bottom: .3em; }
.footer-fine { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; font-size: var(--fs-1); color: #888; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---------- misc ---------- */
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.source-list { margin: .3em 0 0; padding-left: 1.1em; }
.source-list li { margin-bottom: .5em; font-size: var(--fs-3); }
.source-list .src-meta { color: var(--muted); font-size: var(--fs-2); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.breadcrumbs { font-size: var(--fs-2); color: var(--muted); margin: 0 0 12px; }
.breadcrumbs a { color: var(--muted); }

/* feature -> benefit line in the "What we liked" list */
.liked-list__benefit { display: block; color: var(--ink); font-size: var(--fs-4); line-height: 1.55; margin-top: 3px; }
.liked-list__benefit b { color: var(--ink); }

/* ==========================================================================
   Mobile tap targets (44px) + mobile-only sticky CTA bar
   The 44px rule applies at the MOBILE breakpoint only; desktop stays compact.
   ========================================================================== */
@media (max-width: 720px) {
  /* every interactive element at least 44px tall; 44px wide where the label allows */
  .skip, .brand, .nav-toggle,
  .adv-trigger, .btn-link, .inline-link,
  .btn, .btn-outline, .btn-ghost, .btn-cta, .btn-primary, .btn-brass, .btn-sm, .btn-lg,
  .site-footer li a, .faq summary, .toc a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer li a, .adv-trigger, .nav-toggle, .toc a { min-width: 44px; }
  .brand { min-width: 44px; }
  .pcard__cta .btn-cta { flex: 1 1 100%; }
}

/* Sticky CTA bar: hidden by default (no JS → no obstruction of content).
   Only revealed when JS is present (.js) AND the viewport is mobile. */
.sticky-cta { display: none; }
.sticky-cta__btn { font-weight: 700; }

@media (max-width: 720px) {
  .js .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: #fff; border-top: 1px solid var(--line);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  .js .sticky-cta[hidden] { display: none; }
  .js .sticky-cta__btn { width: 100%; min-height: 48px; }
  /* keep the bar from covering the footer disclosure or the last content */
  body.has-sticky-cta { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px) + 18px); }
  .sticky-cta__btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
}

.pcard__cta-note { font-size: var(--fs-1); color: var(--muted, #555); margin: 10px 0 6px; }
.site-footer--slim { padding: 18px 0; border-top: 1px solid var(--line, #e5e5e5); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }