/* ==========================================================================
   Top 5 review page: styles
   PART 1  SETTINGS: colours, fonts, text size  <- edit here
   PART 2  Base
   PART 3  Site header (the site name) and footer
   PART 4  Page parts, top to bottom
   PART 5  Sticky bars and popup
   PART 6  Tablet and phone sizes
   PART 7  Animations (the sticky bars, the table spotlight, the swipe cue, the FAQ and "What's inside",
           the "As seen on" logos, the switches of PART 1)
   ========================================================================== */

/* ---------- PART 1: SETTINGS ---------- */
:root {
  /* Colours: the CanXida guide palette (navy, blue, cream, terracotta buttons) */
  --bg: #FFFDF9;            /* page background (warm white) */
  --bg-warm: #F5F0E6;       /* cream: "Who it's for", notes, table labels, disclosure */
  --card: #FFFFFF;          /* cards and table */
  --ink: #0E354C;           /* navy: titles, dark tags, score row, footer */
  --ink-soft: #2B3A44;      /* body text */
  --text-2: #2B3A44;        /* text in cards */
  --text-3: #586773;        /* small print, labels */
  --rule: #D5CBB8;          /* lines and borders */
  --rule-soft: #E0D7C6;     /* light lines */
  --track: #E0D7C6;         /* empty part of the score circles */
  --accent: #17598A;        /* blue: italic titles, numbers, #1 column, good values */
  --accent-deep: #0E354C;   /* navy */
  --accent-tint: #E6EEF3;   /* light blue-grey: #1 column, note boxes */
  --accent-light: #9CC0DC;  /* italic title on the navy block */
  --button: #B4561F;        /* terracotta: all "Check Availability" buttons */
  --button-hover: #9A4A1C;
  --winner: #0E354C;        /* #1 card border */
  --pick: #A94F1B;          /* "Editor's Pick" tag (terracotta for words) */
  --good: #17598A;          /* ticks, "+" and good values */
  --bad: #A94F1B;           /* "-" in Limitations */
  --mid: #586773;           /* score circles of #2 to #5 */
  --dark: #0E354C;          /* "Our Recommendation" block and footer (navy) */
  --green: #8BC63F;         /* logo green: decoration only (footer link), never for text on white */

  /* Fonts (loaded from Google Fonts in the <head> of the page) */
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Text size of the whole page: 1 = normal, 1.05 = 5% bigger, 0.95 = 5% smaller. */
  --scale: 1;

  /* Animations that are OFF on the reference page: 1 = on, 0 = off */
  --fx-highlight-sweep: 0;  /* the bold phrase under the title gets a highlighter sweep */
  --fx-dial-draw: 0;        /* the score circles draw themselves when they appear */
}

/* ---------- PART 2: BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(100% * var(--scale)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 800px; margin: 0 auto; padding: 0 32px; }
/* Anything with the "hidden" attribute stays hidden, even if its class sets a display (used to hide parts the client may want back) */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
section[id], article[id] { scroll-margin-top: 84px; }

/* ---------- PART 3: SITE HEADER AND FOOTER ---------- */
/* Header: the site name only, centred. The name shrinks a little on narrow phones so it stays on one line. */
.site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--rule-soft); background: var(--bg); }
/* Name on the left, "Advertising Disclosure" on the right (pages with the popup); the name alone is centred */
.site-header__inner { display: flex; align-items: center; justify-content: center; gap: 12px 24px; max-width: 960px; margin: 0 auto; padding: 16px 16px; }
.site-header__inner:has(.disclosure-btn) { justify-content: space-between; }
.site-header__brand { display: block; color: var(--ink); text-align: center; text-decoration: none; }
.site-header__name { display: block; font: 600 clamp(1.0625rem, 5.4vw, 1.375rem)/1.1 var(--font-head); letter-spacing: -.01em; white-space: nowrap; }

.site-footer { background: var(--dark); color: #fff; }
.site-footer__inner { max-width: 960px; margin: 0 auto; padding: 18px 20px 14px; text-align: center; }
.site-footer__top { display: flex; justify-content: center; }
.site-footer__brand { color: #fff; text-decoration: none; }
.site-footer__brand .site-header__name { font-size: clamp(1rem, 5vw, 1.25rem); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.site-footer__links li { display: flex; align-items: center; }
.site-footer__links .sep { margin: 0 10px; color: rgba(255, 255, 255, .6); }
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #fff;
  font-size: .8125rem;
  white-space: nowrap;
  text-decoration: none;
}
.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] { text-decoration: underline; }
.site-footer__copyright { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: .75rem; }
.site-footer__copyright a { color: var(--green); font-weight: 700; text-decoration: none; }
@media (min-width: 768px) {
  .site-header__inner { padding: 20px 16px; }
  .site-header .disclosure-btn { flex: none; }
  .site-header__name { font-size: 1.625rem; }
  .site-footer__links .sep { margin: 0 12px; }
}

/* ---------- PART 4: PAGE PARTS ---------- */

/* Small labels with a line in front ("KEY FINDINGS", eyebrow) */
.kicker,
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.kicker { margin-bottom: 18px; }
.kicker::before,
.eyebrow::before { content: ""; flex: none; width: 36px; height: 1.5px; background: #9C978D; }
.eyebrow { letter-spacing: .12em; }

.sec-title {
  max-width: 920px;
  margin-bottom: 36px;
  font: 500 2rem/1.15 var(--font-head);
  letter-spacing: -.02em;
}
.sec-title em { color: var(--accent); font-style: italic; font-weight: 400; }

.section { padding: 50px 0; border-bottom: 1px solid var(--rule); }
.section--warm { background: var(--bg-warm); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 0;
  background: var(--button);
  color: #fff;
  font: 600 .9375rem/1 var(--font-body);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.btn:hover { background: var(--button-hover); }
.btn svg { width: 14px; height: 14px; transition: transform .15s; }
.btn:hover svg { transform: translateX(3px); }
.btn--block { display: flex; width: 100%; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 13px 20px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font: 500 .875rem/1 var(--font-body);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pill:hover,
.pill.is-on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.pill--cta { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.pill--cta:hover { border-color: var(--accent-deep); background: var(--accent-deep); }
.pill--sm { padding: 8px 14px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* Tags (badges on the product cards) */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  font: 600 .625rem/1.6 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tag svg { width: 10px; height: 10px; }
.tag--dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.tag--muted { border-color: #D9D3C7; background: #EDEBE6; color: #555; }
.tag--blue { border-color: #1A4A7A; background: #E6F0FA; color: #1A4A7A; }
.tag--green { border-color: #0C5C2E; background: #E6F4EC; color: #0C5C2E; }
.tag--outline { border: 2px solid var(--ink); background: none; }
.tag--warn { background: var(--accent-tint); color: var(--accent-deep); }

/* Score circle: --score = score x 10 (set on each circle in the HTML) */
.dial {
  --dial: var(--accent);
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: conic-gradient(var(--dial) calc(var(--score, 95) * 1%), var(--track) 0);
}
.dial__in {
  display: grid;
  place-content: center;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
  text-align: center;
}
.dial__num { display: block; color: var(--accent); font: 500 2.25rem/.9 var(--font-head); letter-spacing: -.04em; }
.dial__lbl {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font: 600 .5625rem/1.5 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dial--sm { --dial: var(--mid); }
.dial--sm .dial__in { width: 86px; height: 86px; }
.dial--sm .dial__num { color: var(--text-2); font-size: 1.75rem; }

/* Grey placeholder for an icon (replace with an SVG icon) */
.icon-ph { width: 22px; height: 22px; border: 1.5px dashed currentColor; border-radius: 50%; }

/* 4.1 Hero */
.hero { padding-top: 76px; border-bottom: 1px solid var(--rule); }
.hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 30px;
}
.disclosure-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  font: 500 .6875rem/1 var(--font-body);
  letter-spacing: .12em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.disclosure-btn:hover { color: var(--ink); }
.disclosure-btn i { width: 6px; height: 6px; background: currentColor; }
h1 {
  max-width: 1080px;
  margin-bottom: 24px;
  font: 500 clamp(1.75rem, 1rem + 3.4vw, 3.5rem)/1.08 var(--font-head);
  letter-spacing: -.025em;
}
h1 em { color: var(--accent); font-style: italic; font-weight: 400; }
.hero__lead { max-width: 720px; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.hero__lead .mark { color: var(--ink); font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 42px; }
.hero__img { margin-top: 64px; padding-bottom: 64px; }
.hero__img img { width: 100%; border: 1px solid var(--rule); }

/* 4.2 Key findings */
.prose { max-width: 720px; }
.prose p { margin-bottom: 20px; font-size: 1.125rem; line-height: 1.7; }
.prose--bar p { padding-left: 18px; border-left: 3px solid var(--accent); }
.note {
  max-width: 720px;
  margin-top: 36px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
}
.prose + .note { margin-top: 16px; }
.note__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--accent);
  color: var(--accent);
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.note p:not(.note__tag) { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.note--callout { margin-top: 22px; }
.note--callout p:not(.note__tag) { color: var(--text-2); font-size: 1.0625rem; }

/* 4.3 Who it's for */
.who { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 720px; }
.who__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
}
.who__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.who__icon svg { width: 22px; height: 22px; }
.who__title {
  margin: 4px 0 10px;
  font: 600 .75rem/1.35 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.who__item p { color: var(--text-2); font-size: 1rem; line-height: 1.6; }

/* 4.4 What to look for */
.criteria { max-width: 760px; }
.crit {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.crit:first-child { border-top: 0; }
.crit__num { grid-row: 1 / 4; color: var(--accent); font: 500 2.5rem/1 var(--font-head); letter-spacing: -.04em; }
.crit h3 { margin: 2px 0 14px; font: 500 1.5rem/1.2 var(--font-head); letter-spacing: -.012em; }
.crit p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; }
.crit__target {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--accent);
  color: var(--text-2);
  font: 500 .75rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* 4.5 Comparison table */
.cmp { position: relative; margin-top: 30px; border: 1px solid var(--rule); background: var(--card); }
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: fixed; }
.cmp__table th,
.cmp__table td { border-bottom: 1px solid var(--rule); text-align: center; }
.cmp__imgs th { padding: 18px 8px 12px; background: var(--card); vertical-align: bottom; }
.cmp__imgs th:first-child { width: 128px; padding: 0; }
.cmp__imgs img { width: auto; height: 64px; margin: 0 auto 8px; object-fit: contain; }
/* The #1 bottle is shown bigger, with a shadow so the white bottle stands out on the tinted column */
.cmp__imgs .win img { width: 100%; max-width: 132px; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .16)); }
.cmp__rank {
  display: block;
  color: var(--text-2);
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp__imgs .win .cmp__rank { color: var(--accent); }
.cmp__names th,
.cmp__names td {
  padding: 10px 4px 14px;
  background: var(--card);
  color: var(--ink);
  font: 600 .6875rem/1.45 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cmp__table tbody th {
  padding: 14px 4px 14px 16px;
  background: var(--bg-warm);
  color: var(--ink);
  font: 500 1rem/1.45 var(--font-body);
  text-align: left;
}
.cmp__table tbody td { padding: 14px 4px; background: var(--card); color: var(--text-2); font-size: 1rem; line-height: 1.45; }
.cmp__table .win { background: var(--accent-tint); }
/* Frame around the #1 column on tablets and phones (on computers the script draws the "Top Pick" spotlight, PART 7) */
@media (max-width: 899px) {
  .cmp__table .win { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
  .cmp__imgs .win { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent); }
  .cmp__score .win { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); }
}
.v-good { color: var(--good); font-weight: 700; }
.v-plain { color: var(--text-3); font-weight: 500; }
.chk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; line-height: 1; }
.chk.yes { color: var(--good); font-size: 1.125rem; font-weight: 700; }
.chk.no { color: #9C978D; font-size: 1.25rem; }
.cmp__table .cmp__score th,
.cmp__table .cmp__score td { border-bottom: 0; background: var(--ink); color: var(--bg); }
.cmp__table .cmp__score th {
  padding: 18px 8px 18px 24px;
  font: 600 .9375rem/1.5 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp__table .cmp__score td { padding: 18px 8px; font: 400 1.75rem/1.4 var(--font-head); }
.cmp__table .cmp__score .win { background: var(--accent-deep); color: #fff; }
.cmp__cue {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
  color: var(--text-2);
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cmp__cue svg { color: var(--accent); }
.cmp__note { margin-top: 12px; color: var(--text-3); font-size: .6875rem; line-height: 1.45; }
.cmp__note + .cmp__note { margin-top: 6px; }
.cmp__note a { border-bottom: 1px solid var(--accent); color: var(--accent-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cmp__note a:hover { color: var(--accent); }
/* Trustpilot scores link to each brand's Trustpilot page */
.cmp__link { text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cmp__link:hover { text-decoration-color: currentColor; }

/* 4.6 Results: the #1 card */
.winner { margin-bottom: 64px; border: 2px solid var(--winner); background: var(--card); }
.winner__strip {
  padding: 14px 32px;
  background: var(--ink);
  color: var(--bg);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.winner__grid { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid var(--rule); }
.winner__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 20px;
  border-right: 1px solid var(--rule);
}
.winner__img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120%, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-tint) 0%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%);
}
.winner__img img {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .16));
}
.winner__info { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 22px; padding: 28px; }
/* Computers: a little less side padding, so the tags beside the wider box + bottle picture still pair up */
@media (min-width: 900px) { .winner__info { gap: 18px; padding: 28px 20px; } }
.winner__main { min-width: 0; }
.winner__pre {
  margin-bottom: 14px;
  color: var(--accent);
  font: 600 .75rem/1.3 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.winner h3 { margin-bottom: 8px; font: 500 1.75rem/1.05 var(--font-head); letter-spacing: -.024em; }
.winner__spec {
  margin-bottom: 24px;
  color: #6B665C;
  font: 400 .75rem/1.5 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.winner__score { padding-left: 22px; border-left: 1px solid var(--rule); }
.winner__body { padding: 32px 44px 36px; }

/* Strengths above Limitations in one column, as on the reference page */
.proscons { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 20px; }
.pc h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pc h4 span { color: var(--text-2); font-weight: 500; letter-spacing: .06em; }
.pc li { position: relative; padding: 8px 0 8px 24px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.55; }
.pc li::before { position: absolute; top: 11px; left: 0; font: 700 1rem/1 var(--font-body); }
.pc--pros li::before { content: "+"; color: var(--good); }
.pc--cons li::before { content: "\2212"; color: var(--bad); }

.bottomline {
  margin-bottom: 32px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.bottomline__tag {
  margin-bottom: 5px;
  color: var(--accent);
  font: 600 .75rem/1.55 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.winner__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.guarantee { display: inline-flex; align-items: center; gap: 7px; color: #4D4A44; font: 500 .8125rem/1 var(--font-body); }
.guarantee svg { width: 14px; height: 14px; color: var(--good); }

/* "What's inside" in the #1 card: opens like the FAQ (ingredients, label picture, clean-label icons) */
.inside { margin: 4px 0 24px; border: 1px solid var(--rule); background: var(--card); }
.inside__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px 22px;
  list-style: none;
  cursor: pointer;
}
.inside__q::-webkit-details-marker { display: none; }
.inside__q::after { content: "+"; color: var(--accent); font: 300 1.6rem/1 var(--font-head); transition: transform .25s; }
.inside[open] .inside__q { background: var(--bg); }
.inside[open] .inside__q::after { transform: rotate(45deg); }
.inside__title { color: var(--accent); font: 600 .75rem/1.55 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.inside__sub { color: var(--text-3); font-size: .875rem; line-height: 1.4; }
.inside__a { padding: 6px 22px 24px; background: var(--bg); }
.inside__grid { display: grid; grid-template-columns: 1fr 210px; align-items: start; gap: 32px; }
.ingr li { padding: 9px 0; border-bottom: 1px solid var(--rule-soft); color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.ingr li:last-child { border-bottom: 0; }
.ingr b { color: var(--ink); font-weight: 700; }
.ingr i { margin-left: 4px; color: var(--accent); font: 600 .625rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.ingr span { display: block; }
.inside__label { position: sticky; top: 84px; display: block; padding: 12px; border: 1px solid var(--rule); background: var(--card); text-decoration: none; }
.inside__label span { display: block; margin-top: 8px; color: var(--text-3); font: 600 .625rem/1 var(--font-body); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.inside__h {
  margin: 26px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.clean { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 8px; }
.clean li { display: flex; flex-direction: column; align-items: center; width: 76px; gap: 8px; color: var(--text-2); font: 600 .625rem/1.35 var(--font-body); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.clean img { width: 48px; height: 48px; }

.also {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  color: var(--text-2);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.also::before,
.also::after { content: ""; flex: 1; height: 1.5px; background: var(--rule); }

/* 4.7 Results: cards #2 to #5 */
.rank { margin-bottom: 18px; border: 1px solid var(--rule); background: var(--card); }
.rank__num {
  padding: 12px 28px;
  border-bottom: 1px solid var(--rule);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.rank__top { padding: 18px 28px; border-bottom: 1px solid var(--rule); }
.rank__head { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; column-gap: 20px; }
.rank__img img { width: auto; max-height: 96px; margin: 0 auto; }
.rank__info { min-width: 0; }
.rank h3 { font: 500 1.5625rem/1.2 var(--font-head); letter-spacing: -.014em; }
.rank__spec { margin-top: 6px; color: #6B665C; font-size: .875rem; line-height: 1.5; }
.rank__score { padding-left: 24px; border-left: 1px solid var(--rule); }
.rank__tags { gap: 5px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.rank__tags .tag { padding: 3px 8px; font-size: .6875rem; }
.rank__body { padding: 26px 28px; }
.rank .proscons { gap: 22px; margin-bottom: 22px; }
.rank .pc h4 { margin-bottom: 12px; padding-bottom: 8px; color: var(--text-3); font-size: .8125rem; letter-spacing: .08em; }
.rank .pc li { padding: 5px 0 5px 18px; }
.rank .pc li::before { top: 8px; font-size: .875rem; font-weight: 600; }
.rank .bottomline { margin-bottom: 0; }

/* 4.8 Timeline */
.timeline { position: relative; max-width: 720px; }
.timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 5px;
  width: 1.5px;
  background: #CFC9BD;
}
.tl { position: relative; padding: 0 0 32px 32px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
}
.tl:last-child::before { border-color: var(--accent); background: var(--accent); }
.tl__when {
  margin-bottom: 8px;
  color: var(--text-3);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.tl h3 { margin-bottom: 8px; font: 500 1.3125rem/1.25 var(--font-head); letter-spacing: -.012em; }
.tl p:not(.tl__when) { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }

/* 4.9 FAQ */
.faq { max-width: 720px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.faq__item + .faq__item { border-top: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  font: 500 1.25rem/1.35 var(--font-head);
  letter-spacing: -.008em;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; flex: none; color: var(--accent); font: 300 1.6rem/1 var(--font-head); transition: transform .25s; }
.faq__item[open] .faq__q { background: var(--bg); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 32px 28px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; }
.faq__item[open] .faq__a { background: var(--bg); }
.faq__a a { border-bottom: 1px solid var(--accent); color: var(--accent-deep); text-decoration: none; }
.faq__a a:hover { color: var(--accent); }

/* 4.10 Our recommendation (dark block) */
.verdict {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--dark);
  color: var(--bg);
}
.verdict::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(15, 92, 90, .38) 0%, transparent 60%);
  pointer-events: none;
}
.verdict__in { position: relative; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 40px; }
.kicker--light::before { background: rgba(255, 255, 255, .5); }
.kicker--light { color: #8F9A99; }
.verdict h2 { margin-bottom: 24px; color: var(--bg); font: 500 2.25rem/1.12 var(--font-head); letter-spacing: -.024em; }
.verdict h2 em { color: var(--accent-light); font-style: italic; font-weight: 400; }
.verdict__sub { max-width: 480px; color: rgba(255, 255, 255, .82); font-size: 1.125rem; line-height: 1.7; }
.pick { position: relative; padding: 32px 28px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.pick__tag {
  position: absolute;
  top: -14px;
  left: 32px;
  padding: 6px 14px;
  background: var(--pick);
  color: #fff;
  font: 600 .75rem/1.6 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pick__head {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.pick__img img { width: 100%; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .14)); }
.pick__name { margin-bottom: 4px; font: 500 1.375rem/1.15 var(--font-head); letter-spacing: -.014em; }
.pick__brand {
  margin-bottom: 14px;
  color: var(--text-2);
  font: 500 .6875rem/1.6 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pick__score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--accent);
  font: 400 2.5rem/1 var(--font-head);
  letter-spacing: -.03em;
}
.pick__score span {
  color: var(--text-2);
  font: 600 .6875rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pick__feat { margin-bottom: 28px; }
.pick__feat li {
  position: relative;
  padding: 10px 0 10px 26px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
}
.pick__feat li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--good);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pick__micro {
  margin-top: 12px;
  color: #6B665C;
  font: 500 .6875rem/1.7 var(--font-body);
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

/* 4.11 Research, references, disclosure */
.research p {
  max-width: 736px;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  font: italic 400 1.1875rem/1.65 var(--font-head);
  letter-spacing: -.005em;
}
.refs { padding: 64px 0; border-bottom: 1px solid var(--ink); }
.refs__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--accent);
  font: 600 .75rem/1.6 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.refs__title::before { content: ""; width: 32px; height: 1.5px; background: var(--accent); }
.refs ol { max-width: 760px; padding-left: 24px; list-style: decimal; }
.refs li { margin-bottom: 10px; color: var(--text-2); font-size: .875rem; line-height: 1.65; }
.refs em { color: var(--ink); font-weight: 600; }
.refs a { border-bottom: 1px solid var(--accent); color: var(--accent-deep); text-decoration: none; }
.refs a:hover { color: var(--accent); }
.disclosure { padding: 48px 0; border-bottom: 1px solid var(--rule); background: var(--bg-warm); }
.disclosure h2 {
  margin-bottom: 14px;
  color: var(--text-3);
  font: 600 .8125rem/1.5 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.disclosure p { max-width: 760px; margin-bottom: 10px; color: var(--text-2); font-size: .875rem; line-height: 1.7; }
.disclosure strong { color: var(--ink); font-weight: 600; }

/* 4.12 Contact, Terms and Privacy pages (contact.html, terms.html, privacy.html) */
.page-top { padding: 56px 0 44px; border-bottom: 1px solid var(--rule); }
.page-top h1 { margin-bottom: 16px; }
.page-updated { margin-top: 18px; color: var(--text-3); font-size: .875rem; }

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { display: flex; flex-direction: column; padding: 22px 20px; border: 1px solid var(--rule); background: var(--card); }
.contact-card .who__icon { margin-bottom: 16px; }
.contact-card .who__title { margin: 0 0 8px; }
.contact-card p { margin-bottom: 14px; color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.contact-card a {
  align-self: flex-start;
  margin-top: auto;
  border-bottom: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-card a:hover { color: var(--accent); }

.legal { max-width: 720px; }
.legal h2 { margin: 40px 0 12px; font: 500 1.375rem/1.25 var(--font-head); letter-spacing: -.012em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 22px 0 8px; font: 600 .75rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.legal h2 + h3 { margin-top: 0; }
.legal > p,
.legal > ul li { color: var(--text-2); font-size: 1.0625rem; line-height: 1.7; }
.legal > p + p { margin-top: 12px; }
.legal ul { margin: 12px 0; padding-left: 22px; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--accent); }
.legal .caps,
.legal .caps li { font-size: .9375rem; letter-spacing: .01em; }
.legal a { border-bottom: 1px solid var(--accent); color: var(--accent-deep); text-decoration: none; }
.legal a:hover { color: var(--accent); }
.legal .note { margin: 16px 0; }

/* 4.13 Homepage (index.html): the "Latest review" card that leads to the review page */
.latest { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; max-width: 760px; padding: 26px 28px; border: 1px solid var(--rule); background: var(--card); }
.latest__title { margin-bottom: 10px; font: 500 1.5rem/1.2 var(--font-head); letter-spacing: -.012em; }
.latest__title em { color: var(--accent); font-style: italic; font-weight: 400; }
.latest p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.latest .pill { white-space: nowrap; }

/* ---------- PART 5: STICKY BARS AND POPUP ---------- */
/* Both bars stay hidden until the scripts of step 6 add the class "is-shown". */
.snav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid var(--rule);
  background: rgba(250, 248, 243, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transform: translateY(-100%);
  visibility: hidden;
}
.snav.is-shown { transform: none; visibility: visible; }
.snav__progress { position: absolute; bottom: -2px; left: 0; width: 0; height: 5px; background: var(--accent); }
.snav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
/* The site name is long: it may shrink (and would end in "..." on a very narrow screen) so the buttons keep one line */
.snav__brand { min-width: 0; overflow: hidden; color: var(--ink); font: 600 .9375rem/1.2 var(--font-head); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.snav__pills { display: flex; flex: none; gap: 6px; }
.snav__pills .pill { white-space: nowrap; }
.snav__cta {
  flex: none;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font: 600 .8125rem/1 var(--font-body);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.snav__cta:hover { background: var(--accent-deep); }

.sbuy {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 120;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--rule);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateY(110%);
  visibility: hidden;
}
.sbuy.is-shown { transform: none; visibility: visible; }
.sbuy__in { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.sbuy__img { flex: none; width: 38px; height: 46px; object-fit: contain; }
.sbuy__text { flex: 1 1 auto; min-width: 0; }
.sbuy__name {
  display: -webkit-box;
  overflow: hidden;
  font: 500 1rem/1.2 var(--font-head);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sbuy__meta { color: var(--text-2); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.sbuy__meta b { color: var(--accent); }
.btn--sm { flex: none; padding: 11px 16px; font-size: .8125rem; white-space: nowrap; }

.popup {
  width: calc(100% - 36px);
  max-width: 560px;
  margin: auto;
  padding: 30px 34px 28px;
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}
.popup::backdrop { background: rgba(0, 0, 0, .45); }
.popup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.popup h2 { font: 600 .75rem/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.popup__x { padding: 0 2px; border: 0; background: none; color: var(--text-2); font-size: 1.5rem; line-height: .8; cursor: pointer; }
.popup__x:hover { color: var(--ink); }
.popup p { margin-bottom: 14px; color: var(--text-2); font-size: .9375rem; line-height: 1.65; }
.popup__ok {
  margin-top: 6px;
  padding: 11px 22px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font: 600 .6875rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.popup__ok:hover { background: var(--bg); color: var(--ink); }

/* ---------- PART 6: TABLET AND PHONE SIZES ---------- */

/* Tablet: the table scrolls sideways, the #1 card and the dark block go to one column */
@media (max-width: 899px) {
  .cmp__table { min-width: 760px; }
  .cmp__cue { display: flex; }
  .winner__grid { grid-template-columns: 1fr; }
  .winner__img { padding: 36px 28px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .verdict__in { grid-template-columns: 1fr; gap: 48px; }
}

/* Phone */
@media (max-width: 768px) {
  .wrap { padding: 0 18px; }
  section[id], article[id] { scroll-margin-top: 72px; }
  .kicker, .eyebrow { font-size: .6875rem; gap: 10px; }
  .eyebrow::before { width: 24px; }
  .sec-title { margin-bottom: 26px; font-size: 1.625rem; }
  .section { padding: 30px 0; }

  /* Phones: name on the left, "Advertising Disclosure" on the right, one line (as on the reference site).
     The disclosure label may break into two short lines so the long site name keeps a readable size. */
  .site-header__inner:has(.disclosure-btn) { justify-content: space-between; gap: 10px; padding: 12px 16px; }
  .site-header__inner:has(.disclosure-btn) .site-header__brand { flex: 1 1 auto; min-width: 0; text-align: left; }
  /* the name is about 15.2x its font size wide; the disclosure + gaps take about 146px of the screen width */
  .site-header__inner:has(.disclosure-btn) .site-header__name { font-size: clamp(.6875rem, 6.5vw - 11px, 1.125rem); }
  .site-header .disclosure-btn { flex: none; width: min-content; line-height: 1.3; text-align: right; white-space: normal; }
  .hero { padding-top: 20px; }
  .hero__top { margin-bottom: 18px; }
  .disclosure-btn { font-size: .625rem; letter-spacing: .06em; }
  h1 { margin-bottom: 12px; }
  .hero__lead { margin: 20px 0; }
  .pills { flex-wrap: nowrap; gap: 6px; margin-top: 18px; }
  .pill { flex: 1; justify-content: center; padding: 10px 6px; font-size: .75rem; white-space: nowrap; }
  .hero__img { margin-top: 20px; padding-bottom: 20px; }

  .note { padding: 16px; }
  .note__tag { margin-bottom: 8px; font-size: .625rem; }
  .note--callout { margin-top: 14px; }
  .note--callout p:not(.note__tag) { font-size: 1rem; }
  .who { grid-template-columns: 1fr; }
  .who__item p { font-size: .9375rem; }

  .crit { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
  .crit__num { grid-row: auto; font-size: 1.5rem; }
  .crit h3 { margin: 0; font-size: 1.125rem; }
  .crit p, .crit__target { grid-column: 1 / -1; }
  .crit p { margin-top: 10px; font-size: .9375rem; }

  /* Table: label column and #1 column stay in place, the rest scrolls */
  .cmp__table { min-width: 560px; }
  .cmp__imgs th, .cmp__table tbody td { padding: 12px 10px; font-size: .75rem; }
  .cmp__note { font-size: .625rem; }
  .cmp__imgs img { height: 44px; }
  .cmp__imgs .win img { max-width: 104px; }
  .cmp__names th, .cmp__names td { padding: 10px 8px 12px; font-size: .5625rem; }
  .cmp__table tbody th { padding: 12px 8px 12px 10px; font-size: .75rem; line-height: 1.35; }
  .cmp__imgs th:first-child,
  .cmp__names td:first-child,
  .cmp__table tbody th {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 112px;
    min-width: 112px;
  }
  .cmp__imgs th:first-child, .cmp__names td:first-child { background: var(--card); }
  .cmp__table .win { position: sticky; left: 112px; z-index: 3; width: 96px; min-width: 96px; }
  .cmp__imgs .win .cmp__rank {
    width: max-content;
    margin: 6px auto 0;
    padding: 4px 8px;
    background: var(--accent);
    color: #fff;
    font-size: .5625rem;
  }
  .cmp__table .cmp__score th { padding: 12px 8px 12px 10px; font-size: .625rem; }
  .cmp__table .cmp__score td { padding: 12px 10px; font-size: 1rem; }

  .winner { margin-bottom: 40px; }
  .winner__strip { padding: 14px 32px; }
  .winner__info { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .winner__pre { margin-bottom: 6px; }
  .winner h3 { font-size: 1.375rem; }
  .winner__spec { margin-bottom: 10px; }
  .tags { gap: 5px; }
  .tag { padding: 4px 8px; }
  .winner__score { display: flex; justify-content: center; margin: 0 -18px; padding: 16px 18px 0; border-top: 1px solid var(--rule); border-left: 0; }
  .dial { width: 118px; height: 118px; }
  .dial__in { width: 96px; height: 96px; }
  .dial__num { font-size: 2rem; }
  .winner__body { padding: 16px 16px 20px; }
  .proscons { grid-template-columns: 1fr; gap: 14px; }
  .pc h4 { margin-bottom: 8px; padding-bottom: 6px; font-size: .625rem; }
  .pc li { padding: 4px 0 4px 20px; font-size: .9375rem; }
  .pc li::before { top: 7px; font-size: .9375rem; }
  .bottomline { margin-bottom: 24px; padding: 10px 14px; font-size: .9375rem; }
  .winner__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { padding: 14px 24px; font-size: .8125rem; }
  .guarantee { justify-content: center; font-size: .75rem; }
  .inside { margin: 0 0 18px; }
  .inside__q { grid-template-columns: 1fr auto; row-gap: 2px; padding: 12px 14px; }
  .inside__sub { grid-column: 1; font-size: .8125rem; }
  .inside__q::after { grid-column: 2; grid-row: 1 / span 2; }
  .inside__a { padding: 4px 14px 18px; }
  .inside__grid { grid-template-columns: 1fr; gap: 18px; }
  .inside__label { position: static; max-width: 260px; margin: 0 auto; }
  .ingr li { padding: 8px 0; font-size: .875rem; }
  .inside__h { margin: 20px 0 12px; padding-bottom: 6px; font-size: .625rem; }
  .clean { gap: 14px 6px; }
  .clean li { width: calc((100% - 18px) / 4); }
  .clean img { width: 40px; height: 40px; }
  .also { margin-bottom: 14px; }

  .rank { margin-bottom: 30px; }
  .rank__num { padding: 11px 16px; }
  .rank__top { padding: 12px 14px; }
  .rank__head { grid-template-columns: 76px 1fr auto; column-gap: 12px; }
  .rank__img img { max-height: 100px; }
  .rank h3 { font-size: 1.2rem; }
  .rank__spec { margin-top: 4px; font-size: .8125rem; }
  .rank__score { padding-left: 10px; }
  .dial--sm { width: 64px; height: 64px; }
  .dial--sm .dial__in { width: 52px; height: 52px; }
  .dial--sm .dial__num { font-size: 1.125rem; }
  .dial--sm .dial__lbl { margin-top: 2px; font-size: .4375rem; }
  .rank__tags { gap: 4px; margin-top: 12px; padding-top: 10px; }
  .rank__tags .tag { padding: 2px 6px; font-size: .5625rem; }
  .rank__body { padding: 14px; }
  .rank .proscons { gap: 10px; }
  .rank .pc h4 { margin-bottom: 8px; padding-bottom: 6px; font-size: .75rem; }
  .rank .pc li { padding: 4px 0 4px 16px; }
  .rank .pc li::before { top: 7px; }

  .tl { padding: 0 0 26px 26px; }
  .tl h3 { font-size: 1.125rem; }
  .tl p:not(.tl__when) { font-size: .9375rem; }

  .faq__q { padding: 12px 16px; font-size: 1rem; }
  .faq__a { padding: 0 16px 14px; font-size: .9375rem; }

  .verdict { padding: 28px 0; }
  .verdict h2 { margin-bottom: 12px; font-size: 1.375rem; }
  .verdict__sub { font-size: .9375rem; }
  .pick { padding: 20px 18px; }
  .pick__tag { left: 18px; padding: 5px 11px; }
  .pick__head { grid-template-columns: 130px 1fr; gap: 16px; margin-bottom: 14px; padding-bottom: 14px; }
  .pick__name { font-size: 1.1875rem; }
  .pick__brand { margin-bottom: 8px; font-size: .625rem; }
  .pick__score { font-size: 1.875rem; }
  .pick__feat li { padding: 6px 0 6px 24px; font-size: .9375rem; }
  .pick__feat li::before { top: 10px; }

  .research p { padding-left: 16px; font-size: 1rem; }
  .refs li, .disclosure p { font-size: .8125rem; }

  .latest { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px; }
  .latest__title { font-size: 1.25rem; }
  .latest p { font-size: 1rem; }
  .latest .pill { justify-content: center; }
  .page-top { padding: 22px 0 26px; }
  .page-updated { margin-top: 12px; font-size: .8125rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 12px; }
  .contact-card { padding: 18px 16px; }
  .contact-card .who__icon { margin-bottom: 12px; }
  .legal h2 { margin-top: 30px; font-size: 1.25rem; }
  .legal > p, .legal > ul li { font-size: 1rem; }
  .legal .caps, .legal .caps li { font-size: .875rem; }

  .snav__pills { display: none; }
  .snav__in { gap: 10px; }
  .snav__brand { font-size: clamp(.6875rem, 3.6vw, .875rem); }
  .snav__cta { padding: 7px 10px; font-size: .6875rem; }
  .sbuy__in { gap: 10px; padding: 7px 0; }
  .sbuy__img { width: 30px; height: 38px; }
  .sbuy__name { font-size: .875rem; }
  .sbuy__meta { display: none; }
  .btn--sm { gap: 6px; padding: 9px 12px; font-size: .6875rem; }
  .popup { padding: 24px 20px; }
}

/* Very small phone: the third hero button goes on its own line */
@media (max-width: 379px) {
  .pills { flex-wrap: wrap; }
  .pill--cta { flex-basis: 100%; }
  /* sticky bar: a slimmer button so the whole site name still fits */
  .snav__in { gap: 8px; }
  .snav__cta { padding: 7px 8px; letter-spacing: .03em; }
}

/* Small phone */
@media (max-width: 640px) {
  .cmp__table { min-width: 500px; }
  .cmp__imgs th:first-child,
  .cmp__names td:first-child,
  .cmp__table tbody th { width: 96px; min-width: 96px; }
  .cmp__table .win { left: 96px; width: 84px; min-width: 84px; }
  .cmp__imgs th, .cmp__table tbody td { padding: 8px 6px; }
  .cmp__table tbody th { padding: 8px 6px 8px 8px; font-size: .6875rem; }
  .cmp__table .cmp__score td { padding: 9px 6px; font-size: .875rem; }
}

/* ---------- PART 7: ANIMATIONS ---------- */
/* The sticky bars slide in and out */
.snav { transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .35s; }
.snav.is-shown { transition: transform .35s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.sbuy { transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; }
.sbuy.is-shown { transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s; }

/* "Top Pick" spotlight on the comparison table (computers only; placed by the script) */
.cmp__spot {
  position: absolute;
  z-index: 5;
  border: 2px solid var(--accent);
  box-shadow: 0 12px 30px rgba(14, 53, 76, .18);
  pointer-events: none;
}
.cmp__chip {
  position: absolute;
  z-index: 6;
  padding: 5px 12px;
  background: var(--accent);
  color: #fff;
  font: 600 .6875rem/1.6 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 899px) { .cmp__spot, .cmp__chip { display: none; } }

/* "Swipe to compare" arrows nudge sideways (phones and tablets) */
@keyframes nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes nudge-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.cmp__cue .cue-l { animation: nudge-l 1.4s ease infinite; }
.cmp__cue .cue-r { animation: nudge-r 1.4s ease infinite; }

/* FAQ answers and "What's inside" open smoothly (height animated by the script) */
.faq__a.is-animating,
.inside__a.is-animating { overflow: hidden; }

/* Highlighter sweep on the bold phrase under the title (switch: --fx-highlight-sweep in PART 1) */
@keyframes hl-sweep { to { background-size: 100% 88%; } }
html.fx-sweep .hero__lead .mark {
  margin: 0 -5px;
  padding: 1px 5px;
  background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
  background-repeat: no-repeat;
  background-position: 0 60%;
  background-size: 0% 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: hl-sweep .9s cubic-bezier(.16, 1, .3, 1) .5s forwards;
}

/* Score circles draw themselves when they appear (switch: --fx-dial-draw in PART 1) */
@property --score { syntax: "<number>"; inherits: false; initial-value: 0; }
html.fx-dial .dial { transition: --score 1.6s cubic-bezier(.16, 1, .3, 1); }

/* Visitors who asked their device for less motion: everything shows at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.fx-sweep .hero__lead .mark { background-size: 100% 88%; }
}