/* ===========================================================================
   news-v2.css — the /news section's own components.
   Loads AFTER blog-v2.css and blog-index-v2.css and depends on both:
   trackers reuse `.v2-*` (article chrome, product cards, FAQ accordion) and
   the hubs reuse `.bi-*` (card grid, filter pills). Only what is genuinely
   new to a tracker lives here, under the `nw-` prefix.

   No dark-mode block, deliberately: blog-v2.css defines no dark theme, so a
   dark /news inside an otherwise light article shell would be a broken hybrid
   rather than a feature. Same light-only call the price strips already made.

   ⚠️ The `body.blog-v2 a` specificity trap. blog-v2.css styles every anchor
   inside a `.blog-v2` body, and news pages carry that class deliberately (it
   is what makes the price strips and card styling arrive). Any anchor styled
   here therefore needs the same `body.blog-v2` prefix or blog-v2.css wins on
   specificity and the link renders as body copy. Every anchor rule below is
   written that way on purpose — do not "simplify" the selectors.
   =========================================================================== */

:root {
  --nw-live: #16a34a;
  --nw-live-bg: rgba(22, 163, 74, .10);
  --nw-warn: #b45309;
  --nw-warn-bg: rgba(180, 83, 9, .10);
  --nw-bad: #b91c1c;
  --nw-bad-bg: rgba(185, 28, 28, .08);
  --nw-muted: #64748b;
  --nw-muted-bg: rgba(100, 116, 139, .10);
}

/* ---------------------------------------------------------- freshness pill */
/* One component, four states, and the ONLY thing that may claim a cadence.
   See freshness() in scripts/build-news-index.mjs. */

.nw-fresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nw-fresh-live { color: var(--nw-live); background: var(--nw-live-bg); }
.nw-fresh-checked { color: var(--nw-warn); background: var(--nw-warn-bg); }
.nw-fresh-stale,
.nw-fresh-archived { color: var(--nw-muted); background: var(--nw-muted-bg); }

.nw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: nw-pulse 2.4s ease-in-out infinite;
}

@keyframes nw-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Respect the reader's setting — a pulsing dot is decoration, not information;
   the pill's text already carries the whole meaning. */
@media (prefers-reduced-motion: reduce) {
  .nw-dot { animation: none; }
}

/* ------------------------------------------------------------------ chips */

.nw-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--v2-hairline);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--v2-ink-soft);
  white-space: nowrap;
}

.nw-chip-solid {
  border-color: transparent;
  background: var(--v2-brand);
  color: #fff;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- status bar */

.nw-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 18px 0 0;
}

.nw-stamp,
.nw-byline {
  font-family: var(--v2-mono);
  font-size: 11.5px;
  color: var(--v2-ink-soft);
}

body.blog-v2 .nw-byline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.blog-v2 .nw-byline a:hover { color: var(--v2-brand); }

/* ------------------------------------------------------------- predictions */
/* The three calls. Deliberately heavy: this is the object the section is
   selling, and a wrong one has to be as visible as a right one. */

.nw-preds { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.nw-pred {
  padding: 18px 20px;
  border: 1px solid var(--v2-hairline);
  border-left: 3px solid var(--v2-brand);
  border-radius: 12px;
  background: var(--v2-card);
}

.nw-pred-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.nw-pred-n {
  font-family: var(--v2-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-pred-label { margin: 0; font-size: 16px; font-weight: 600; flex: 1 1 auto; }

.nw-pred-call {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.nw-pred-basis,
.nw-pred-against,
.nw-pred-shipped {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v2-ink-soft);
}

.nw-pred-basis strong,
.nw-pred-against strong,
.nw-pred-shipped strong { color: var(--v2-ink); font-weight: 600; }

.nw-verdict {
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nw-verdict-open { color: var(--nw-muted); background: var(--nw-muted-bg); }
.nw-verdict-right { color: var(--nw-live); background: var(--nw-live-bg); }
.nw-verdict-missed { color: var(--nw-bad); background: var(--nw-bad-bg); }
.nw-verdict-unfalsifiable { color: var(--nw-warn); background: var(--nw-warn-bg); }

/* ---------------------------------------------------------------- changelog */

.nw-log { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--v2-hairline); }

.nw-log-row { position: relative; padding-bottom: 20px; }

.nw-log-row::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--v2-brand);
  box-shadow: 0 0 0 3px var(--v2-bg);
}

/* A beat can be linked and shared, which is the whole reason changelog
   entries carry a stable id. Highlight the one the URL points at. */
.nw-log-row:target { background: var(--nw-live-bg); border-radius: 8px; padding-left: 10px; margin-left: -10px; }

.nw-log-date {
  display: block;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 4px;
}

.nw-log-note { margin: 0; font-size: 14.5px; line-height: 1.65; }

body.blog-v2 .nw-log-anchor {
  color: var(--v2-ink-soft);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
}

.nw-log-row:hover .nw-log-anchor { opacity: 1; }

/* Never hide a focus target from a keyboard user. */
body.blog-v2 .nw-log-anchor:focus-visible { opacity: 1; outline: 2px solid var(--v2-brand); outline-offset: 2px; }

/* --------------------------------------------------------------- deal cards */

.nw-stat-note {
  font-family: var(--v2-mono);
  font-size: 12px;
  color: var(--v2-ink-soft);
  margin: 0 0 18px;
  line-height: 1.6;
}

/* A short stamp can be monospace; a full sentence cannot. This line grew from
   "Checked 2 Sep 2026" into a sentence explaining the ranking, and monospace
   body copy at that length is heavy to read. */
.nw-checked {
  font-size: 13px;
  color: var(--v2-ink-soft);
  margin: 0 0 20px;
  line-height: 1.65;
  max-width: 68ch;
}

/* The headline number of "discounts that aren't". Large on purpose — it is
   the shareable object — but never coloured as an alarm. */
.nw-stat-lead {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.6;
}

.nw-stat-lead strong {
  font-size: 30px;
  font-weight: 700;
  color: var(--v2-ink);
}

.nw-deals { display: grid; gap: 16px; }

@media (min-width: 720px) {
  .nw-deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nw-deal-cat {
  display: inline-block;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 6px;
}

.nw-deal-line {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.nw-deal-good strong { color: var(--nw-live); }

/* Forensic, not accusatory. The two numbers sit beside each other and the
   reader draws the conclusion — which is also why this is not red. */
.nw-deal-bad strong { color: var(--nw-warn); }

.nw-deal-mrp {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--v2-ink-soft);
}

.nw-badge-warn { background: var(--nw-warn) !important; }

/* ---------------------------------------------------------------- related */

.nw-rel { display: grid; gap: 12px; }

@media (min-width: 640px) {
  .nw-rel { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

body.blog-v2 .nw-rel-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--v2-hairline);
  border-radius: 12px;
  background: var(--v2-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}

body.blog-v2 .nw-rel-card:hover {
  border-color: var(--v2-brand);
  transform: translateY(-2px);
}

.nw-rel-kicker {
  display: block;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-brand);
  margin-bottom: 6px;
}

.nw-rel-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.45; }

/* ----------------------------------------------------------------- shared */

.nw-empty {
  padding: 18px 20px;
  border: 1px dashed var(--v2-hairline);
  border-radius: 12px;
  color: var(--v2-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Hub cards: the freshness pill and category chip share a row above the title. */
.nw-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

.nw-meta-strong { color: var(--v2-brand); font-weight: 600; }

/* ------------------------------------------------------------ prose bits */
/* Three components blog-v2.css does not have. Everything else on a tracker
   page reuses an existing .v2-* component — check before adding a fourth. */

.nw-callout {
  margin: 22px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--v2-brand);
  border-radius: 0 10px 10px 0;
  background: var(--v2-secondary);
}

.nw-callout p { margin: 0; font-size: 15px; line-height: 1.65; }

.nw-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--v2-ink-soft);
}

.nw-disclosure {
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--v2-hairline);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--v2-ink-soft);
}

.nw-table-cap {
  caption-side: top;
  padding: 0 0 10px;
  text-align: left;
  font-size: 12.5px;
  color: var(--v2-ink-soft);
}

/* ------------------------------------------------------------- hub filters */
/* Below three trackers the generator emits no pills, and a filter bar with one
   option is furniture rather than a control. Hiding it here — instead of in the
   page — means the bar returns by itself as the section grows.

   Tests for an actual `.bi-pill`, NOT for `.bi-pills:empty`. The injected region
   leaves a newline and indentation inside the container, and a whitespace text
   node defeats `:empty` — which shipped an empty grey strip carrying a lone
   filter icon. */
.bi-filterbar:not(:has(.bi-pill)) { display: none; }

/* --------------------------------------------------------------- prose */
/*
 * blog-v2.css styles prose only inside `.v2-intro-paras`; a bare <p> in a
 * section gets nothing — no measure, no spacing, no colour. The blogs never hit
 * this because every paragraph there sits in a wrapper. A tracker is mostly
 * running prose between generated blocks, so it is styled here instead of
 * wrapping every paragraph in a div.
 *
 * Scoped to `.v2-main-col` so it cannot reach the generated card bodies, and
 * this file loads only on /news.
 */
body.blog-v2 .v2-main-col > section > p {
  max-width: 68ch;           /* measure — the column is ~884px, far too wide to read */
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--v2-ink-soft);
}

body.blog-v2 .v2-main-col > section > p strong { color: var(--v2-ink); font-weight: 600; }

body.blog-v2 .v2-main-col > section > p a {
  color: var(--v2-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Sections need to breathe; nothing in blog-v2.css spaces bare <section>s. */
body.blog-v2 .v2-main-col > section { margin: 0 0 56px; }

body.blog-v2 .v2-main-col > section:last-of-type { margin-bottom: 32px; }

.nw-callout,
.nw-note,
.nw-disclosure,
.nw-checked,
.nw-stat-note,
.nw-stat-lead { max-width: 68ch; }

/* ------------------------------------------------------- deal grid cards */
/*
 * The cards themselves come from js/products-card.js and are styled by
 * products.css under `body.products-v2`, which the tracker page also carries.
 * Only the tracker-specific verdict line is added here.
 */
.nw-deals { margin: 0 0 8px; }

body.products-v2 .nw-deal .nw-deal-line {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--v2-hairline);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--v2-ink-soft);
  max-width: none;
}

/* The guide link on a deal card. Every pick comes from a product we have
   reviewed, so this is the page's main internal-linking surface. */
body.products-v2 .nw-deal .nw-deal-guide { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; }

body.products-v2 .nw-deal .nw-deal-guide a {
  color: var(--v2-brand);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--v2-brand) 35%, transparent);
}

body.products-v2 .nw-deal .nw-deal-guide a::before { content: "Our review: "; color: var(--v2-ink-soft); }

body.products-v2 .nw-deal .nw-deal-guide a:hover { border-bottom-color: var(--v2-brand); }

/* ========================================================================
   PORTED FROM THE REFERENCE DESIGN
   The three elements the first build substituted or skipped: confidence
   chips, the sticky "Jump to" rail, and numbered section eyebrows.
   ======================================================================== */

/* Confidence rendering moved to the signal-bar block at the end of this
   file: the pill version is superseded, not merely restyled. */

body.blog-v2 a.nw-cite,
.nw-cite {
  font-family: var(--v2-mono);
  font-size: 10.5px;
  color: var(--v2-ink-soft);
  text-decoration: none;
}

body.blog-v2 a.nw-cite { border-bottom: 1px dotted var(--v2-ink-soft); }
body.blog-v2 a.nw-cite:hover { color: var(--v2-brand); border-bottom-color: var(--v2-brand); }

/* ------------------------------------------------------- the sticky rail */
/* The reference design's signature navigation: visible for the whole read,
   not hidden behind a dropdown. Collapses below the rail breakpoint, where
   the article-nav dropdown already covers it. */

.nw-grid { gap: 40px; }

.nw-rail { display: none; }

@media (min-width: 1080px) {
  .nw-grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
  }
  .nw-rail {
    display: block;
    position: sticky;
    top: calc(var(--v2-nav-h) + 56px);
    padding-top: 4px;
  }
}

.nw-rail-eyebrow {
  margin: 0 0 12px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-rail-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--v2-hairline);
  display: grid;
  gap: 9px;
}

body.blog-v2 .nw-rail-link {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--v2-ink-soft);
  text-decoration: none;
  transition: color .15s;
}

body.blog-v2 .nw-rail-link:hover,
body.blog-v2 .nw-rail-link:focus-visible { color: var(--v2-brand); }

body.blog-v2 .nw-rail-key { color: var(--v2-ink); font-weight: 600; }
body.blog-v2 .nw-rail-key::before { content: "\2605\00a0"; color: var(--v2-brand); }

/* ---------------------------------------------------- numbered eyebrows */

.nw-num {
  font-family: var(--v2-mono);
  color: var(--v2-brand);
  margin-right: 8px;
  letter-spacing: .06em;
}

/* The old full-width fact STRIP lived here. It is superseded by the boxed
   facts card further down, and had to be deleted rather than overridden:
   it set flex-direction:column on .nw-fact, the later rule does not reset
   it, so the confidence bars stacked under the text instead of sitting
   right of it. Partial overrides of a shorthand-adjacent property are how
   that happens — remove the block, do not layer on it. */

/* ------------------------------------------------------------- mechanics */

.nw-mechs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.nw-mech {
  padding: 16px 18px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg);
  background: var(--v2-card);
}

.nw-mech-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nw-mech-label { margin: 0; font-size: 15px; font-weight: 600; }
.nw-mech-value { margin: 0 0 8px; font-size: 14.5px; color: var(--v2-ink); }
.nw-mech-meaning { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--v2-ink-soft); }
.nw-mech-src { margin: 0; }

/* -------------------------------------------------------- editions table */

.nw-ed-disputed td { background: var(--nw-warn-bg); }
.nw-ed-forecast { opacity: .8; }
.nw-ed-forecast th, .nw-ed-forecast td { border-top: 2px dashed var(--v2-hairline); }

.nw-ed-dispute {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--v2-ink-soft);
  max-width: 46ch;
}

/* ---------------------------------------------------------- alternatives */

.nw-lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.75; color: var(--v2-ink); max-width: 68ch; }
.nw-lead strong { font-weight: 700; }

.nw-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.nw-alt {
  padding: 16px 18px;
  border: 1px solid var(--v2-hairline);
  border-left: 3px solid var(--v2-ink-soft);
  border-radius: var(--v2-r-lg);
  background: var(--v2-card);
}

.nw-alt-name { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.nw-alt-what { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--v2-ink-soft); }
.nw-alt-limit { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--v2-ink); }
.nw-alt-limit strong { font-weight: 600; }

/* ========================================================================
   REFERENCE-DESIGN PORT, ROUND 2
   Signal-bar confidence, the hero facts card, the top-three row, the
   buy-or-wait tabs and the sale-day playbook.
   ======================================================================== */

/* ------------------------------------------------- confidence, as bars */
/* Replaces the coloured text pill. Three bars read at a glance down a
   twenty-row table where twenty pills do not, and `confirmed` adds a tick so
   the four states never depend on colour alone. */

.nw-conf { display: inline-flex; align-items: flex-end; gap: 4px; white-space: nowrap; cursor: help; }

.nw-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }

.nw-bar {
  width: 3px;
  height: var(--h, 5px);
  border-radius: 1px;
  background: var(--v2-hairline);
}

.nw-bar.on { background: currentColor; }

.nw-tick { width: 11px; height: 11px; margin-left: 1px; }

.nw-conf-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

.nw-conf-confirmed { color: var(--nw-live); }
.nw-conf-strong    { color: var(--v2-brand); }
.nw-conf-mixed     { color: var(--nw-warn); }
.nw-conf-weak      { color: var(--nw-muted); }

.nw-legend {
  list-style: none;
  margin: 20px 0 0;
  padding: 14px 18px;
  display: grid;
  gap: 8px 26px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-xl);
  background: var(--v2-card);
}

.nw-legend-row { display: flex; align-items: center; gap: 10px; }
.nw-legend-means { font-size: 12.5px; color: var(--v2-ink-soft); }

/* ------------------------------------------------------ hero + facts card */

.nw-crumbs { font-family: var(--v2-mono); font-size: 11px; margin-bottom: 18px; }

.nw-hero-grid { display: grid; gap: 28px; align-items: start; }

@media (min-width: 1024px) {
  .nw-hero-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; }
}

.nw-facts {
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl);
  background: var(--v2-card);
  overflow: hidden;
}

.nw-facts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--v2-hairline);
}

.nw-count { margin: 2px 0 0; font-family: var(--v2-mono); }
.nw-count strong { font-size: 34px; font-weight: 700; line-height: 1; color: var(--v2-ink); }
.nw-count span { font-size: 13px; color: var(--v2-ink-soft); }

.nw-facts-window {
  font-family: var(--v2-mono);
  font-size: 10.5px;
  color: var(--v2-ink-soft);
  border: 1px solid var(--v2-hairline);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.nw-facts-rows { display: grid; }

.nw-fact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}

.nw-fact + .nw-fact { border-top: 1px solid var(--v2-hairline); }

.nw-fact-main { min-width: 0; }

.nw-fact-k {
  margin: 0 0 3px;
  font-family: var(--v2-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-fact-v { margin: 0; font-family: var(--v2-mono); font-size: 14px; font-weight: 500; color: var(--v2-ink); }
.nw-fact-note { margin: 3px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--v2-ink-soft); }

/* -------------------------------------------------------- top three savings */
/* The best three above the fold. Making a reader scroll twenty-four cards to
   find the best one is asking them to do the job this page claims to do. */

.nw-top-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 34px 0 14px;
}

.nw-top-eyebrow {
  margin: 0;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

body.blog-v2 .nw-top-all {
  font-family: var(--v2-mono);
  font-size: 11.5px;
  color: var(--v2-ink-soft);
  text-decoration: none;
}

body.blog-v2 .nw-top-all:hover { color: var(--v2-brand); }

.nw-tops { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 700px)  { .nw-tops { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nw-tops { grid-template-columns: repeat(3, 1fr); } }

.nw-top {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl);
  background: var(--v2-card);
  padding: 0 16px 16px;
  overflow: hidden;
}

.nw-top-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: var(--v2-brand);
  border-radius: 999px;
  padding: 3px 9px;
}

.nw-top-media {
  margin: 0 -16px 12px;
  padding: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--v2-secondary), var(--v2-card));
  border-bottom: 1px solid var(--v2-hairline);
}

.nw-top-media img { width: auto; height: 128px; max-width: 100%; object-fit: contain; }

.nw-top-cat {
  margin: 0 0 6px;
  font-family: var(--v2-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-top-name { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; line-height: 1.3; }

.nw-top-price { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.nw-top-now { font-family: var(--v2-mono); font-size: 19px; font-weight: 600; color: var(--v2-ink); }

.nw-top-pill {
  font-family: var(--v2-mono);
  font-size: 10.5px;
  color: var(--nw-live);
  background: var(--nw-live-bg);
  border-radius: 999px;
  padding: 3px 8px;
}

.nw-top-saved {
  margin: 0 0 14px;
  font-family: var(--v2-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--nw-live);
}

body.blog-v2 .nw-top-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--v2-r-lg);
  background: var(--v2-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

body.blog-v2 .nw-top-cta:hover { background: var(--v2-brand-soft); }

/* --------------------------------------------------- buy now or wait tabs */

.nw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.nw-tab {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--v2-hairline);
  background: var(--v2-card);
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.nw-tab:hover { color: var(--v2-ink); }
.nw-tab.is-on { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }

.nw-bw-panel {
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl);
  background: var(--v2-card);
  overflow: hidden;
}

.nw-bw-head { padding: 18px 20px; background: var(--v2-secondary); border-bottom: 1px solid var(--v2-hairline); }

.nw-bw-verdict {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.nw-bw-wait { color: var(--v2-brand); }
.nw-bw-buy  { color: var(--nw-live); }
.nw-bw-skip { color: var(--nw-warn); }

.nw-bw-headline { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--v2-ink); }

.nw-bw-points { list-style: none; margin: 0; padding: 16px 20px; display: grid; gap: 10px; }

.nw-bw-points li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--v2-ink-soft);
}

/* A tick rather than a bullet: these are findings, not a shopping list. */
.nw-bw-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--v2-brand);
  border-bottom: 2px solid var(--v2-brand);
  transform: rotate(-45deg);
}

.nw-bw-foot { padding: 14px 20px; border-top: 1px solid var(--v2-hairline); }

body.blog-v2 .nw-bw-cta {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--v2-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

body.blog-v2 .nw-bw-cta:hover { background: var(--v2-brand-soft); }

/* ------------------------------------------------------------- playbook */

.nw-pbs { display: grid; gap: 16px; }

@media (min-width: 820px) { .nw-pbs { grid-template-columns: repeat(2, 1fr); } }

.nw-pb {
  padding: 18px 20px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl);
  background: var(--v2-card);
}

/* The warn card is tinted, because it is the one people skip. */
.nw-pb-warn { background: #fffbeb; border-color: #fde68a; }

.nw-pb-kicker {
  margin: 0 0 4px;
  font-family: var(--v2-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-pb-warn .nw-pb-kicker { color: #b45309; }

.nw-pb-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; line-height: 1.35; }

.nw-pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.nw-pb-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--v2-ink-soft); }

.nw-pb-n {
  flex: 0 0 auto;
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v2-ink-soft);
  opacity: .75;
  padding-top: 2px;
}

/* ------------------------------------------------- deal filter + sorting */

.nw-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}

.nw-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.nw-chipbtn {
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--v2-hairline);
  background: var(--v2-card);
  color: var(--v2-ink-soft);
  cursor: pointer;
}

.nw-chipbtn:hover { color: var(--v2-ink); }
.nw-chipbtn.is-on { background: var(--v2-brand); border-color: var(--v2-brand); color: #fff; }
.nw-chipn { font-family: var(--v2-mono); font-size: 10px; opacity: .7; margin-left: 6px; }

.nw-sortwrap { display: flex; align-items: center; gap: 8px; }

.nw-sortlabel,
.nw-count {
  font-family: var(--v2-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}

.nw-sort {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 9px;
  border-radius: var(--v2-r-md);
  border: 1px solid var(--v2-hairline);
  background: var(--v2-card);
  color: var(--v2-ink);
}

/* -------------------------------------------------------- claims table */

.nw-claim-num { font-family: var(--v2-mono); font-size: 12.5px; white-space: nowrap; }
.nw-claim-mean { color: var(--v2-ink-soft); font-size: 13.5px; line-height: 1.55; }

/* --------------------------------------------------------------- misc */

.nw-sub { margin: 32px 0 14px; font-size: 18px; font-weight: 600; }

.nw-log-more { margin-top: 8px; }

.nw-log-more summary {
  cursor: pointer;
  font-family: var(--v2-mono);
  font-size: 11.5px;
  color: var(--v2-ink-soft);
  padding: 6px 0;
}

.nw-log-more summary:hover { color: var(--v2-brand); }
.nw-log-more[open] summary { margin-bottom: 10px; }

/* The top-three row sits between the hero and the content column, outside
   .v2-hero so the hero fade cannot wash it out. */
.nw-topwrap { background: var(--v2-bg); padding: 0 0 8px; }
.nw-topwrap .nw-top-head { margin-top: 0; }