/* ==========================================================================
   What2Buy brand v2: "Night Stream". Swap stylesheet, loaded AFTER style.css
   and INSTEAD OF brand.css:
     <link rel="stylesheet" href="/assets/css/style.css?v=…">
     <link rel="stylesheet" href="/assets/css/brand-v2.css?v=…">
   Spec: design/brand-v2/BRAND-v2.md. Selectors match the live templates in
   src/_includes (header, mega menu, mobile menu, search, tiles, cards, guide
   pages, quick picks, compare table, footer).

   Rules baked in here:
   * Dark base. Grid texture and glow ONLY in the home hero and page/hub
     headers. Article text sits on plain Midnight: no grid, scanlines or glow.
   * Guide body copy 17px, max ~68ch, line-height 1.75. Sentence case titles.
   * ONE Amazon CTA style (.btn-amazon: Neon Teal + Midnight text, 11.62:1).
     Site actions (Search, .btn-primary) are Violet + white (5.15:1).
   * Coral = ranks/accents, Teal = Amazon CTA + focus + links, Violet = site actions.
   * Fonts self-hosted (CSP font-src 'self'): Space Grotesk + Inter, 59 KB.
   * prefers-reduced-motion: no transforms/transitions; no animated layers at all.

   Sections: 1 fonts · 2 tokens · 3 legacy aliases · 4 base · 5 header + nav
   · 6 mobile menu · 7 search · 8 buttons/chips/badges · 9 home hero · 10 hub
   cards (tiles + photo thumbnails) · 11 post cards/lists · 12 page + hub
   headers · 13 guide page · 14 quick picks · 15 compare table · 16 product
   cards · 17 sidebar/jumpnav/pickbar · 18 gift + vs + misc · 19 footer
   · 20 motion, forced colours
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, Latin subset, variable weight) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-latin-wght.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks (measured against Arial / Liberation Sans) to keep the swap shift small */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.65%; ascent-override: 89.99%; descent-override: 22.41%; line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
  font-weight: 500 700;
  size-adjust: 102.75%; ascent-override: 95.77%; descent-override: 28.42%; line-gap-override: 0%;
}

/* ---------- 2. Night Stream tokens ---------- */
:root {
  color-scheme: dark;                 /* native scrollbars, form controls and autofill in dark */
  --ns-bg: #0B1020;                   /* Midnight: page */
  --ns-bg-deep: #080C18;              /* footer */
  --ns-panel: #141A30;                /* cards, panels */
  --ns-panel-2: #10162B;              /* inputs, wells, ghost buttons */
  --ns-panel-3: #1B2342;              /* hover, active pills */
  --ns-line: #26304F;                 /* card borders (decorative) */
  --ns-line-2: #34406A;               /* stronger dividers, chip borders */
  --ns-input: #5E6A99;                /* form field outlines: 3.41:1 on Panel-2 */
  --ns-text: #E8ECF7;                 /* headings + UI text: 16.02:1 on Midnight */
  --ns-body: #D6DCEA;                 /* long-form body copy (softer, less halation): 13.6:1 */
  --ns-muted: #A3ADC8;                /* secondary text: 8.45:1 Midnight, 7.68:1 Panel */
  --ns-coral: #FF6B5B;                /* Happy Coral: bag, the "2", rank numbers (Midnight text 6.77:1) */
  --ns-coral-text: #FF8A7D;           /* coral TEXT: 8.28:1 */
  --ns-teal: #2DE2CF;                 /* Neon Teal: Amazon CTA (Midnight text 11.62:1), handle */
  --ns-teal-text: #5EEAD4;            /* links, focus ring, teal text: 12.80:1 */
  --ns-violet: #6D4AFF;               /* site actions (Search): white text 5.15:1 */
  --ns-violet-hover: #5B38F0;         /* white 6.42:1 */
  --ns-violet-text: #B39CFF;          /* violet TEXT: 7.47:1 on Panel */
  --ns-pink: #FF7AB6;                 /* Stream Pink: streaming tone */
  --ns-gold-text: #FFD58A;
  --ns-good: #4ADE80;
  --ns-bad: #FB8080;
  --ns-glow-teal: 0 0 0 1px rgba(45,226,207,.55), 0 0 18px rgba(45,226,207,.30);
  --ns-glow-coral: 0 0 22px rgba(255,107,91,.40);
  --ns-rim: linear-gradient(135deg, rgba(45,226,207,.55), rgba(52,64,106,.55) 38%, rgba(52,64,106,.55) 62%, rgba(255,107,91,.5));
  --ns-grid: linear-gradient(rgba(94,106,153,.07) 1px, transparent 1px) 0 0 / 32px 32px,
             linear-gradient(90deg, rgba(94,106,153,.07) 1px, transparent 1px) 0 0 / 32px 32px;
}

/* ---------- 3. Legacy aliases: every variable style.css (and the old brand.css) used ---------- */
:root {
  /* old --w2b-* names (style.css uses them directly). --w2b-navy now means "ink" (heading/UI text);
     the few components that used navy as a FILL are re-styled in sections 5-17. */
  --w2b-coral: var(--ns-coral);
  --w2b-teal: var(--ns-teal);
  --w2b-navy: var(--ns-text);
  --w2b-cream: var(--ns-bg);
  --w2b-cta: var(--ns-teal);
  --w2b-cta-hover: var(--ns-teal-text);
  --w2b-cta-active: #22C9B8;
  --w2b-cta-ink: var(--ns-bg);
  --w2b-coral-ink: var(--ns-coral-text);
  --w2b-coral-50: rgba(255,107,91,.12);
  --w2b-coral-100: rgba(255,107,91,.24);
  --w2b-teal-ink: var(--ns-teal-text);
  --w2b-teal-50: rgba(45,226,207,.10);
  --w2b-teal-100: rgba(45,226,207,.22);
  --w2b-text: var(--ns-body);
  --w2b-muted: var(--ns-muted);
  --w2b-surface: var(--ns-panel);
  --w2b-surface-2: var(--ns-panel-2);
  --w2b-cream-200: var(--ns-panel-3);
  --w2b-border: var(--ns-line);
  --w2b-border-strong: var(--ns-line-2);
  --w2b-input-border: var(--ns-input);
  --w2b-focus: var(--ns-teal-text);
  --w2b-footer-text: #C9CFDF;
  --w2b-footer-muted: var(--ns-muted);
  --w2b-footer-rule: var(--ns-line);
  --w2b-good: var(--ns-good); --w2b-bad: var(--ns-bad);
  --w2b-warn-bg: #2A2414; --w2b-warn-border: #8A6A1F; --w2b-warn-ink: var(--ns-gold-text);
  --w2b-font-head: "Space Grotesk", "Space Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w2b-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w2b-fs-h1: clamp(2.125rem, 1.6rem + 2vw, 2.875rem);
  --w2b-fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --w2b-fs-h3: 1.25rem;
  --w2b-fs-h4: 1.0625rem;
  --w2b-radius-card: 16px;
  --w2b-radius: 12px;
  --w2b-radius-sm: 10px;
  --w2b-radius-pill: 999px;
  --w2b-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --w2b-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.32);
  --w2b-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.55);
  --w2b-shadow-cta: inset 0 -3px 0 rgba(0,0,0,.18);

  /* original style.css names */
  --bg: var(--ns-bg);
  --surface: var(--ns-panel);
  --surface-2: var(--ns-panel-2);
  --ink: var(--ns-text);
  --text: var(--ns-body);
  --muted: var(--ns-muted);
  --border: var(--ns-line);
  --border-strong: var(--ns-line-2);
  --brand: var(--ns-teal-text);
  --brand-hover: #99F6E4;
  --brand-50: rgba(45,226,207,.10);
  --brand-100: rgba(45,226,207,.22);
  --cta: var(--ns-teal);
  --cta-hover: var(--ns-teal-text);
  --cta-ink: var(--ns-bg);
  --good: var(--ns-good);
  --bad: var(--ns-bad);
  --warn-bg: #2A2414; --warn-border: #8A6A1F; --warn-ink: var(--ns-gold-text);
  --radius: var(--w2b-radius-card);
  --radius-sm: 12px;
  --font: var(--w2b-font-body);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* system mono only: no mono web font */
  --shadow-sm: var(--w2b-shadow-sm);
  --shadow: var(--w2b-shadow);
  --shadow-lg: var(--w2b-shadow-lg);
  --fs-2xl: var(--w2b-fs-h2);
  --fs-3xl: var(--w2b-fs-h1);
  --header-h: 66px;
}

/* ---------- 4. Base ---------- */
html { background: var(--ns-bg); }
body { font-family: var(--w2b-font-body); background: var(--ns-bg); color: var(--ns-body); }
h1, h2, h3, h4 { font-family: var(--w2b-font-head); color: var(--ns-text); letter-spacing: -.02em; text-transform: none; }
h1 { font-size: var(--w2b-fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
h2 { font-size: var(--w2b-fs-h2); font-weight: 700; line-height: 1.15; }
h3 { font-size: var(--w2b-fs-h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--w2b-fs-h4); font-weight: 600; line-height: 1.3; }
strong, b { color: inherit; }
a { color: var(--ns-teal-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #99F6E4; }
:focus-visible { outline: 2px solid var(--ns-teal-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(45,226,207,.32); color: #fff; }
code { background: var(--ns-panel-3); color: var(--ns-teal-text); }
.muted { color: var(--ns-muted); }
.skip-link { background: var(--ns-teal); color: var(--ns-bg); font-weight: 700; border-radius: 0 0 10px 0; }
img { color: var(--ns-muted); }   /* alt text colour if an image fails */

/* small caps labels (replaces the mockup's mono labels): Space Grotesk, uppercase, tracked */
.kicker, .mm-label, .search-results .sr-group, .footer-heading, .compare th, .pros-cons h3, .product-title .job,
.ribbon, .soon-pill, .pickbar-txt small, .gift-facts small, .score-label, .planned li span, .edge-tag, .ph-tile small {
  font-family: var(--w2b-font-head);
}
.kicker { font-weight: 600; font-size: .75rem; letter-spacing: .1em; color: var(--ns-teal-text); }

/* draft bar */
.draft-bar { background: var(--ns-panel-3); color: var(--ns-text); border-bottom: 1px solid var(--ns-line-2); }
.draft-bar strong { color: var(--ns-coral-text); }

/* ---------- 5. Header + desktop nav / mega menu ---------- */
.site-header { background: rgba(11,16,32,.94); backdrop-filter: none; -webkit-backdrop-filter: none;   /* no blur: cheaper on low-end Android */
  border-bottom: 1px solid var(--ns-line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(45,226,207,.5) 30%, rgba(255,107,91,.45) 70%, transparent); opacity: .7; }
.header-inner { min-height: var(--header-h); }
.logo { gap: 0; }
.logo img { display: block; height: 36px; width: auto; }
@media (max-width: 599px) { .logo img { height: 32px; } }
.header-links a { color: var(--ns-muted); font-family: var(--w2b-font-head); font-weight: 500; font-size: .9rem; }
.header-links a:hover { color: var(--ns-text); }

.cat-nav { background: var(--ns-bg); border-bottom: 1px solid var(--ns-line); }
.cat-nav ul { gap: .2rem; padding: .4rem 0; }
.cat-nav a { font-family: var(--w2b-font-head); font-weight: 500; font-size: .9rem; color: var(--ns-body);
  padding: .5rem .8rem; border-radius: var(--w2b-radius-pill); border-bottom: 0; }
.cat-nav a svg { color: var(--ns-muted); }
.cat-nav a:hover, .has-mega:hover > a, .has-mega:focus-within > a { color: var(--ns-text); background: var(--ns-panel); }
.cat-nav a[aria-current="page"] { color: var(--ns-text); background: var(--ns-panel-3); box-shadow: inset 0 0 0 1px var(--ns-line-2); border-bottom-color: transparent; }
.cat-nav a[aria-current="page"] svg { color: var(--ns-teal-text); }
.soon-pill { color: var(--ns-gold-text); background: rgba(255,194,102,.14); font-weight: 600; }
@media (min-width: 900px) {
  .mega { top: calc(100% + 6px); background: var(--ns-panel); border: 1px solid var(--ns-line-2); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: .9rem; }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* hover bridge over the gap */
  .mega-head { border-bottom-color: var(--ns-line); }
  .mega-head::after { content: ""; display: table; clear: both; }
  .mega-head a { color: var(--ns-text); background: none; font-family: var(--w2b-font-head); }
  .mega-head a:hover { color: var(--ns-teal-text); background: none; }
  .mega-head p { color: var(--ns-muted); }
  .mega-thumb { float: right; margin: 0 0 .4rem .85rem; width: 96px; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }   /* optional hub photo */
  .mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cat-nav .mega li a { color: var(--ns-body); font-family: var(--w2b-font-body); font-weight: 500; border-radius: 10px; }
  .cat-nav .mega li a:hover { background: var(--ns-panel-3); color: var(--ns-text); }
  .mega b { color: var(--ns-text); font-weight: 600; }
  .mega small { color: var(--ns-muted); }
}

/* ---------- 6. Mobile header: search + menu panels (< 900px) ---------- */
.icon-btn { background: var(--ns-panel); color: var(--ns-text); border: 1px solid var(--ns-line-2); border-radius: 12px; }
.nav-toggle { background: var(--ns-panel-3); color: var(--ns-text); border: 1px solid var(--ns-line-2); border-radius: 12px;
  font-family: var(--w2b-font-head); font-weight: 600; }
.hdr-pop[open] > summary { box-shadow: inset 0 0 0 1px var(--ns-teal-text); }
.hdr-panel { background: var(--ns-panel); border-top: 1px solid var(--ns-line-2); box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.search-sheet .search-field { background: var(--ns-panel-2); border-color: var(--ns-input); }
.mm-label { color: var(--ns-muted); font-weight: 600; }
.mobile-menu summary { color: var(--ns-text); font-family: var(--w2b-font-head); font-weight: 600; }
.mobile-menu details[open] > summary { background: var(--ns-panel-3); }
.mobile-menu summary .mm-count, .mobile-menu summary .chev { color: var(--ns-muted); }
.mm-sub li + li { border-top-color: var(--ns-line); }
.mm-sub a { color: var(--ns-body); }
.mm-sub a:hover { color: var(--ns-teal-text); }
.mm-sub .count { background: rgba(45,226,207,.10); color: var(--ns-teal-text); }
.mm-sub .mm-all { color: var(--ns-teal-text); }
.mm-soon { background: var(--ns-panel-2); color: var(--ns-muted); border: 1px solid var(--ns-line); }
.mm-soon strong { color: var(--ns-text); }
.mm-card { background: var(--ns-panel-2); border-color: var(--ns-line-2); color: var(--ns-text); }
.mm-card svg { color: var(--ns-coral-text); }
.link-btn { color: var(--ns-coral-text); }

/* ---------- 7. Search ---------- */
.search-field { background: var(--ns-panel-2); border: 1.5px solid var(--ns-input); border-radius: 14px; }
.search-field svg { color: var(--ns-muted); }
.search-field:focus-within { border-color: var(--ns-teal-text); box-shadow: var(--ns-glow-teal); }
.search input { color: var(--ns-text); }
.search input::placeholder { color: var(--ns-muted); opacity: 1; }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.search-lg .search-field { padding: .4rem .4rem .4rem 1.1rem; box-shadow: 0 0 0 4px rgba(45,226,207,.06), 0 10px 40px rgba(0,0,0,.45); }
.search-lg .search-field:focus-within { box-shadow: var(--ns-glow-teal), 0 10px 40px rgba(0,0,0,.45); }
/* Search = site action: Violet + white (never the Amazon teal) */
.search-lg button { background: var(--ns-violet); color: #fff; border-radius: 11px; font-family: var(--w2b-font-head); font-weight: 600; padding: .8rem 1.35rem; }
.search-lg button:hover { background: var(--ns-violet-hover); color: #fff; }
.search-results { background: var(--ns-panel); border: 1px solid var(--ns-line-2); box-shadow: 0 24px 60px rgba(0,0,0,.6); border-radius: 14px; }
.search-sheet .search-results { background: transparent; }
.search-results .sr-group { color: var(--ns-muted); font-weight: 600; }
.search-results [role="option"] a { color: var(--ns-text); }
.search-results [role="option"].active a, .search-results [role="option"] a:hover { background: var(--ns-panel-3); }
.search-results .sr-txt small, .search-results .empty-result, .search-results [role="option"] .icon { color: var(--ns-muted); }
.search-results mark { background: rgba(255,107,91,.28); color: #fff; }
.search-all a { background: var(--ns-panel); border-color: var(--ns-line); color: var(--ns-text); }
.search-all a:hover { border-color: var(--ns-teal-text); }
.search-all small { color: var(--ns-muted); }

/* ---------- 8. Buttons, chips, badges ---------- */
.btn { font-family: var(--w2b-font-head); font-weight: 600; border-radius: 12px; padding: .8rem 1.3rem; letter-spacing: 0;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s; }
.btn-sm { padding: .55rem .9rem; border-radius: 10px; }
/* THE Amazon CTA ("Check price on Amazon"): one style everywhere. Neon Teal + Midnight text 11.62:1 */
.btn-amazon, .btn-amazon:visited { background: var(--ns-teal); color: var(--ns-bg); border-color: var(--ns-teal); box-shadow: var(--w2b-shadow-cta); font-weight: 700; }
.btn-amazon:hover { background: var(--ns-teal-text); border-color: var(--ns-teal-text); color: var(--ns-bg); box-shadow: 0 0 0 3px rgba(45,226,207,.22), var(--w2b-shadow-cta); transform: translateY(-1px); }
.btn-amazon:active { background: #22C9B8; transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.btn-amazon:focus-visible { outline: 2px solid var(--ns-teal-text); outline-offset: 3px; }
/* Site actions (non-Amazon): Violet + white */
.btn-primary { background: var(--ns-violet); color: #fff; border-color: var(--ns-violet); }
.btn-primary:hover { background: var(--ns-violet-hover); color: #fff; }
/* Secondary */
.btn-ghost { background: var(--ns-panel-2); color: var(--ns-text); border: 1px solid var(--ns-line-2); }
.btn-ghost:hover { border-color: var(--ns-input); color: #fff; background: var(--ns-panel-3); }

.chip { background: var(--ns-panel); border: 1px solid var(--ns-line-2); color: var(--ns-text); font-family: var(--w2b-font-body); font-weight: 500; }
.chip svg { color: var(--ns-muted); }
.chip:hover { border-color: var(--ns-teal-text); color: var(--ns-text); background: var(--ns-panel-3); }
.chip-sm { font-size: .8125rem; }
.popular .chip::before { content: "#"; content: "#" / ""; color: var(--ns-teal-text); margin-right: 1px; font-weight: 600; }

.ribbon { font-weight: 700; letter-spacing: .08em; border-radius: 6px; }
.ribbon-gold { background: rgba(255,194,102,.12); color: var(--ns-gold-text); box-shadow: inset 0 0 0 1px rgba(255,194,102,.38); }
.ribbon-green { background: rgba(52,211,153,.12); color: #6EE7B7; box-shadow: inset 0 0 0 1px rgba(52,211,153,.38); }
.ribbon-brand { background: rgba(45,226,207,.10); color: var(--ns-teal-text); box-shadow: inset 0 0 0 1px rgba(45,226,207,.35); }
.badge-coral, .badge-teal { display: inline-flex; align-items: center; gap: .3rem; font: 700 .72rem/1.2 var(--w2b-font-head); letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: .3rem .6rem; }
.badge-coral { background: rgba(255,107,91,.12); color: var(--ns-coral-text); box-shadow: inset 0 0 0 1px rgba(255,107,91,.35); }
.badge-teal { background: rgba(45,226,207,.10); color: var(--ns-teal-text); box-shadow: inset 0 0 0 1px rgba(45,226,207,.35); }
/* Price pill (hero frame): the site shows NO prices, so it points to Amazon for today's price */
.price-pill { display: inline-flex; align-items: center; gap: .45rem; background: var(--ns-coral); color: var(--ns-bg);
  font: 700 .7rem/1 var(--w2b-font-head); letter-spacing: .1em; text-transform: uppercase; padding: .42rem .65rem .42rem .55rem;
  border-radius: 6px; box-shadow: var(--ns-glow-coral); white-space: nowrap; }
.price-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ns-bg); flex: none; }

/* tone colours on dark (tile icons, fallback tiles). background-COLOR only, so .ph-tile keeps its dot grid */
.tone-gaming { background-color: rgba(179,156,255,.14); color: #B39CFF; }
.tone-consoles-accessories { background-color: rgba(255,194,102,.13); color: #FFC266; }
.tone-streaming-creator-gear { background-color: rgba(255,122,182,.14); color: #FF7AB6; }
.tone-pc-peripherals { background-color: rgba(45,226,207,.12); color: #5EEAD4; }
.tone-audio { background-color: rgba(103,232,249,.12); color: #67E8F9; }
.tone-office { background-color: rgba(134,239,172,.12); color: #86EFAC; }
.tone-smart-home { background-color: rgba(147,197,253,.13); color: #93C5FD; }
.tone-gifts { background-color: rgba(253,164,175,.14); color: #FDA4AF; }
.tone-grooming { background-color: rgba(125,211,252,.13); color: #7DD3FC; }
[class*="tone-"].tile-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }

/* ---------- 9. Home hero (the one place with grid + glow) ---------- */
.hero { position: relative; border-bottom: 1px solid var(--ns-line);
  background:
    radial-gradient(620px 400px at 82% 22%, rgba(45,226,207,.10), transparent 70%),
    radial-gradient(540px 380px at 6% 78%, rgba(255,107,91,.09), transparent 70%),
    var(--ns-grid), var(--ns-bg); }
.hero h1 { font-size: clamp(2.35rem, 1.5rem + 2.7vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: .9rem; }
.hero h1 .accent { color: var(--ns-coral-text); text-shadow: 0 0 28px rgba(255,107,91,.5); }
.hero .kicker { color: var(--ns-teal-text); font-size: .8rem; letter-spacing: .12em; gap: .6rem; margin-bottom: 1rem; }
.hero .kicker svg { display: none; }
.hero .kicker::before { content: ""; width: 22px; height: 2px; background: var(--ns-teal); box-shadow: 0 0 8px var(--ns-teal); flex: none; }
.lede { color: var(--ns-muted); font-size: 1.09rem; line-height: 1.6; }
.popular { color: var(--ns-muted); gap: .5rem; }
.popular > span:first-child { font: 600 .72rem/1 var(--w2b-font-head); letter-spacing: .1em; text-transform: uppercase; margin-right: .2rem; }
.trust-row { color: var(--ns-muted); font-weight: 500; }
.trust-row svg { color: var(--ns-teal); }
/* hero art in a stream-overlay frame: rounded panel + teal corner brackets + price pill */
.hero-art { position: relative; border-radius: 22px; padding: 16px;
  background: linear-gradient(180deg, rgba(27,35,66,.65), rgba(16,22,43,.65)); border: 1px solid var(--ns-line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.hero-art::after { content: ""; position: absolute; inset: -1px; border-radius: 22px; border: 2px solid var(--ns-teal); pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(45,226,207,.8));
  -webkit-mask: linear-gradient(#000 0 0) top left / 26px 26px no-repeat, linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
                linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat, linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat;
          mask: linear-gradient(#000 0 0) top left / 26px 26px no-repeat, linear-gradient(#000 0 0) top right / 26px 26px no-repeat,
                linear-gradient(#000 0 0) bottom left / 26px 26px no-repeat, linear-gradient(#000 0 0) bottom right / 26px 26px no-repeat; }
.hero-art .price-pill { position: absolute; top: -12px; left: 24px; z-index: 1; }
@media (max-width: 899.98px) {
  .hero-art { padding: 8px; border-radius: 16px; margin-bottom: 1.25rem; }
  .hero-art::after { border-radius: 16px; }
  .hero-art .price-pill { top: -10px; left: 14px; font-size: .625rem; padding: .36rem .55rem .36rem .5rem; }
  .hero-inner { padding-top: 1.75rem; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 2.3rem; }
  .popular { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; justify-content: flex-start;
    margin-inline: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
  .popular::-webkit-scrollbar { display: none; }
  .popular > * { flex: none; scroll-snap-align: start; }
  .popular > span:first-child { display: none; }
}
@media (min-width: 900px) { .hero-inner { gap: 2.5rem; padding: 3.5rem 0 3.75rem; } }

/* ---------- 10. Hub cards ("Browse guides" tiles), with optional photo thumbnails ---------- */
.tile { position: relative; background: var(--ns-panel); border: 1px solid var(--ns-line); box-shadow: none; color: var(--ns-body);
  border-radius: var(--w2b-radius-card); }
.tile:hover { border-color: var(--ns-line-2); background: var(--ns-panel-3); box-shadow: 0 14px 36px rgba(0,0,0,.4); color: var(--ns-body); }
.tile-name { color: var(--ns-text); font-family: var(--w2b-font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.tile-subs, .tile-desc, .tile-count { color: var(--ns-muted); }
.tile.tile-soon { background: var(--ns-panel-2); }
.tile.tile-soon .tile-count { color: var(--ns-gold-text); }
/* Photo cards. Markup (see BRAND-v2.md §8): <a class="tile has-media"><span class="tile-media"><img …></span>…</a>
   Grid gets 4 columns when it holds photo cards. */
.tile-grid:has(.tile-media), .tile-grid.tile-grid--photos { gap: 1.1rem; }
@media (min-width: 1000px) { .tile-grid:has(.tile-media), .tile-grid.tile-grid--photos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 999.98px) { .tile-grid:has(.tile-media), .tile-grid.tile-grid--photos { grid-template-columns: repeat(3, 1fr); } }
.tile.has-media { padding: 8px 8px 14px; gap: .2rem;
  border: 1px solid transparent; background: linear-gradient(var(--ns-panel), var(--ns-panel)) padding-box, var(--ns-rim) border-box;
  box-shadow: 0 0 22px -8px rgba(45,226,207,.22), 0 16px 40px rgba(0,0,0,.35); }
.tile.has-media:hover { background: linear-gradient(var(--ns-panel-3), var(--ns-panel-3)) padding-box, var(--ns-rim) border-box;
  box-shadow: 0 0 0 1px rgba(45,226,207,.25), 0 0 30px -6px rgba(45,226,207,.35), 0 20px 48px rgba(0,0,0,.45); transform: translateY(-2px); }
.tile-media { order: -2; position: relative; display: block; aspect-ratio: 3 / 2; margin: 0 0 .55rem; border-radius: 11px; overflow: hidden;
  background: var(--ns-panel-2); }
.tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  background: linear-gradient(to top, rgba(11,16,32,.42), rgba(11,16,32,0) 38%); }
.tile.has-media .tile-name, .tile.has-media .tile-subs, .tile.has-media .tile-count { padding-inline: 6px; }
.tile.has-media .tile-subs { order: -1; font: 600 .68rem/1.2 var(--w2b-font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--ns-teal-text); }
.tile.has-media:not(.tile-sub) .tile-subs { color: var(--ns-coral-text); }
.tile.has-media .tile-icon { display: none; }
.tile.has-media .tile-count { font-size: .78rem; padding-top: .15rem; }
/* no photo yet: same 3:2 slot, Night Stream fallback (tone grid + icon halo + bag mark) */
.tile-media.is-fallback { display: grid; place-items: center;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 22%, transparent), transparent 58%),
    linear-gradient(color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 1px, transparent 1px);
  background-size: auto, 16px 16px, 16px 16px; background-color: #151A33; }
.tile-media.is-fallback .icon { width: 30%; height: auto; aspect-ratio: 1; padding: 6%; border-radius: 50%; stroke-width: 1.6;
  background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent), 0 0 22px color-mix(in srgb, currentColor 30%, transparent); box-sizing: content-box; }
.tile-media.is-fallback::before { content: ""; position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px;
  background: url("/assets/img/icon.svg") center / contain no-repeat; }
/* Option B: title over the photo (add .tile-grid--overlay to the grid) */
.tile-grid--overlay .tile.has-media { padding: 0; overflow: hidden; justify-content: flex-end; min-height: 0; }
.tile-grid--overlay .tile-media { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; border-radius: 0; }
.tile-grid--overlay .tile.has-media { aspect-ratio: 4 / 3; }
.tile-grid--overlay .tile-media::after { background: linear-gradient(to top, rgba(11,16,32,.94) 0%, rgba(11,16,32,.88) 42%, rgba(11,16,32,0) 78%); box-shadow: none; }   /* text zone (bottom ~38%) stays >= 88% dark: AA on any photo */
.tile-grid--overlay .tile.has-media > :not(.tile-media) { position: relative; z-index: 1; padding-inline: 14px; }
.tile-grid--overlay .tile.has-media .tile-name { color: #fff; font-size: 1.08rem; }
.tile-grid--overlay .tile.has-media .tile-count { color: #C9CFDF; padding-bottom: 12px; }
.tile-grid--overlay .tile.has-media .tile-subs { margin-top: auto; }
.tile-grid--overlay .tile.has-media .tile-count { margin-top: 0; padding-top: 0; }
.tile-grid--overlay .tile-media.is-fallback { place-items: start center; padding-top: 9%; }
.tile-grid--overlay .tile-media.is-fallback .icon { width: 22%; }

/* Odd one out: when the last tile would sit alone on its row (13 live tiles = 4+4+4+1 / 3·4+1 / 2·6+1), it spans the
   row as a deliberate wide card: photo/fallback the same size as its neighbours', labels + short description beside it. */
.tile-grid--photos .tile-desc { display: none; }
@media (min-width: 1000px) {
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) { grid-column: 1 / -1; display: grid; align-content: center; column-gap: 1.25rem; padding: 8px;
    grid-template-columns: calc((100% + 18px - 3 * 1.1rem) / 4 - 18px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) .tile-media { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: center; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) > :not(.tile-media) { grid-column: 2; padding-inline: 0; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) .tile-subs { grid-row: 2; } .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) .tile-name { grid-row: 3; font-size: 1.15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) .tile-desc { grid-row: 4; display: block; max-width: 46ch; font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(4n+1) .tile-count { grid-row: 5; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; align-content: center; column-gap: 1.25rem; padding: 8px;
    grid-template-columns: calc((100% + 18px - 2 * 1.1rem) / 3 - 18px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) .tile-media { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: center; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) > :not(.tile-media) { grid-column: 2; padding-inline: 0; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) .tile-subs { grid-row: 2; } .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) .tile-name { grid-row: 3; font-size: 1.15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) .tile-desc { grid-row: 4; display: block; max-width: 46ch; font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(3n+1) .tile-count { grid-row: 5; }
}
@media (max-width: 699.98px) {
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) { grid-column: 1 / -1; display: grid; align-content: center; column-gap: 1.25rem; padding: 8px;
    grid-template-columns: calc((100% + 18px - 1 * 1.1rem) / 2 - 18px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto 1fr; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) .tile-media { grid-column: 1; grid-row: 1 / -1; margin: 0; align-self: center; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) > :not(.tile-media) { grid-column: 2; padding-inline: 0; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) .tile-subs { grid-row: 2; } .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) .tile-name { grid-row: 3; font-size: 1.15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) .tile-desc { grid-row: 4; display: block; max-width: 46ch; font-size: .9rem; line-height: 1.5; margin-top: .15rem; }
  .tile-grid--photos > .tile.has-media:last-child:nth-child(2n+1) .tile-count { grid-row: 5; }
}

/* how-it-works panel */
.how { background: var(--ns-panel); border: 1px solid var(--ns-line); box-shadow: none; }
.how-item .tile-icon { background: rgba(45,226,207,.10); color: var(--ns-teal-text); box-shadow: inset 0 0 0 1px rgba(45,226,207,.3); }
.how-item h3 { color: var(--ns-text); }
.how-item p { color: var(--ns-muted); }

/* ---------- 11. Post cards + lists ---------- */
.section-head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); letter-spacing: -.025em; }
.section-head p { color: var(--ns-muted); }
.section-head a { color: var(--ns-teal-text); }
.card { background: var(--ns-panel); border: 1px solid var(--ns-line); box-shadow: none; border-radius: var(--w2b-radius-card); }
.card:hover { border-color: var(--ns-line-2); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.card-media img { background: var(--ns-panel-2); border-bottom: 1px solid var(--ns-line); }
.card h3 { font-size: 1.15rem; }
.card h3 a { color: var(--ns-text); }
.card h3 a:hover { color: var(--ns-teal-text); }
.card .kicker { font-size: .7rem; }
.card-desc { color: var(--ns-muted); }
.card-top { background: var(--ns-panel-2); border-color: var(--ns-line); color: var(--ns-body); }
.card-top b { color: var(--ns-text); }
.card-top .rank-dot, .gift-num { background: var(--ns-coral); color: var(--ns-bg); }
.card-meta { color: var(--ns-muted); }
.card-flag { background: var(--ns-coral); color: var(--ns-bg); }
.latest-item { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; color: var(--ns-body); border-radius: 14px; }
.latest-item:hover { border-color: var(--ns-line-2); background: var(--ns-panel-3); color: var(--ns-body); box-shadow: none; }
.latest-item .kicker { font-size: .68rem; }
.latest-title { color: var(--ns-text); }
.latest-meta { color: var(--ns-muted); }

/* ---------- 12. Page + hub headers (header area: soft glow allowed, no grid behind long text) ---------- */
.page-hero, .post-header { background: radial-gradient(760px 280px at 92% -20%, rgba(45,226,207,.08), transparent 70%),
    radial-gradient(520px 240px at -5% 120%, rgba(255,107,91,.05), transparent 70%), var(--ns-bg);
  border-bottom: 1px solid var(--ns-line); }
.breadcrumbs ol { color: var(--ns-muted); font-size: .8125rem; }
.breadcrumbs a { color: var(--ns-muted); }
.breadcrumbs a:hover { color: var(--ns-teal-text); }
.breadcrumbs li + li::before { color: var(--ns-line-2); content: "/"; }
.standfirst { color: var(--ns-muted); }
.hub-title .tile-icon { border-radius: 14px; }
.hub-meta { color: var(--ns-muted); font-weight: 500; }
.hub-meta svg { color: var(--ns-teal-text); }
.hub-meta a { color: var(--ns-teal-text); }
.hub-intro-long { color: var(--ns-body); }
/* hub header with its photo (add .has-media to .page-hero and a <figure class="hub-media">, see BRAND-v2.md §8) */
.hub-media { margin: 0; position: relative; border-radius: 18px; padding: 8px; aspect-ratio: auto;
  border: 1px solid transparent; background: linear-gradient(var(--ns-panel), var(--ns-panel)) padding-box, var(--ns-rim) border-box;
  box-shadow: 0 0 34px -10px rgba(45,226,207,.35), 0 30px 70px rgba(0,0,0,.5); }
.hub-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 11px; }
.hub-media::after { content: ""; position: absolute; inset: 8px; border-radius: 11px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); background: linear-gradient(to top, rgba(11,16,32,.35), transparent 35%); }
@media (min-width: 900px) {
  .page-hero.has-media > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); column-gap: 3rem;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: start; }   /* text block centred against the photo */
  .page-hero.has-media > .wrap > * { grid-column: 1; }
  .page-hero.has-media .breadcrumbs { grid-column: 1 / -1; grid-row: 1; }
  .page-hero.has-media .hub-title { grid-row: 3; }
  .page-hero.has-media .hub-intro { grid-row: 4; }
  .page-hero.has-media .hub-meta { grid-row: 5; }
  .page-hero.has-media .hub-media { grid-column: 2; grid-row: 2 / -1; align-self: center; }
  .page-hero.has-media { padding-bottom: 2.5rem; }
}
@media (max-width: 899.98px) { .hub-media { margin: 1.25rem 0 0; max-width: 560px; } }

/* ---------- 13. Guide / article pages: CALM. Plain Midnight behind text, 17px, ~68ch ---------- */
.post-header { padding: 1.5rem 0 1.75rem; }
.post-header h1 { font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem); line-height: 1.12; max-width: 30ch; text-transform: none; }
.post-header .kicker a { color: var(--ns-teal-text); }
.page-post main { font-size: 1.0625rem; }                       /* 17px body on articles */
.prose { max-width: 68ch; line-height: 1.75; color: var(--ns-body); }
.prose a, .verdict a, .product-who a, .buying-guide a, .faq a { color: var(--ns-teal-text); text-decoration: underline; }
.prose h2, .prose h3 { color: var(--ns-text); }
.prose li::marker { color: var(--ns-muted); }
.prose blockquote { background: var(--w2b-warn-bg); border-left-color: var(--w2b-warn-border); color: var(--w2b-warn-ink); }
.intro { font-size: 1.125rem; }
mark.joe, .joe { background: rgba(255,213,138,.14); color: #FFE2A8; box-shadow: inset 0 0 0 1px rgba(255,213,138,.25); }
.meta-row { color: var(--ns-muted); }
.meta-row a { color: var(--ns-text); }
.meta-row svg { color: var(--ns-teal-text); }
.meta-row img { box-shadow: 0 0 0 1.5px var(--ns-teal); }
.meta-link { color: var(--ns-teal-text); }
.meta-link:hover { color: #99F6E4; }
/* affiliate disclosure (full sentence lives in partials/disclosure.njk: keep it) */
.notice { background: var(--ns-panel-2); border: 1px solid var(--ns-line-2); color: var(--ns-body); border-radius: 12px; }
.notice-disclosure { border-left: 3px solid var(--ns-violet-text); color: var(--ns-body); }
.notice-disclosure svg { color: var(--ns-violet-text); }
.notice-disclosure strong { color: var(--ns-text); }
.notice-disclosure a { color: var(--ns-teal-text); text-decoration: underline; }
.notice-draft { background: var(--w2b-warn-bg); border-color: var(--w2b-warn-border); color: var(--w2b-warn-ink); }
.how-chose-line { background: transparent; border: 0; padding: .1rem 0; color: var(--ns-muted); }
.how-chose-line strong { color: var(--ns-text); }
.block-title { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); }
.buying-guide { background: var(--ns-panel-2); border: 1px solid var(--ns-line); box-shadow: none; }
.buying-guide > * { max-width: 68ch; }
.faq details { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
.faq summary { color: var(--ns-text); font-family: var(--w2b-font-head); font-weight: 600; }
.faq summary::after { color: var(--ns-coral-text); }
.faq details .prose { color: var(--ns-body); }
.author-box { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
.author-box img { box-shadow: 0 0 0 2px var(--ns-teal); }
.trust-list { color: var(--ns-muted); }
.trust-list svg { color: var(--ns-teal-text); }
.trust-list strong { color: var(--ns-text); }
.price-note { color: var(--ns-muted); }
.price-note svg { color: var(--ns-teal-text); }

/* ---------- 14. Quick picks ---------- */
.qp { background: var(--ns-panel); border: 1px solid var(--ns-line-2); border-radius: 20px; box-shadow: none; }
.qp-title { font-size: 1.4rem; }
.qp-bolt { background: rgba(255,107,91,.12); color: var(--ns-coral-text); box-shadow: inset 0 0 0 1px rgba(255,107,91,.35); }
.qp-row { background: var(--ns-panel-2); border: 1px solid var(--ns-line-2); border-radius: 14px; }
.qp-row.is-top { border: 1.5px solid rgba(255,107,91,.75); box-shadow: none; background: linear-gradient(90deg, rgba(255,107,91,.07), transparent 45%), var(--ns-panel-2); }
.qp-name { font-family: var(--w2b-font-head); font-weight: 600; font-size: 1.05rem; }
.qp-name a { color: var(--ns-text); }
.qp-name a:hover { color: var(--ns-teal-text); }
.qp-for { color: var(--ns-muted); }
.qp-for strong { color: var(--ns-coral-text); font-weight: 600; }

/* product images + fallback tiles */
.pimg-box { background: #F3F5FA; border-color: var(--ns-line-2); }          /* product photos are shot on white */
.pimg-credit { color: var(--ns-muted); }
.ph-tile { border-color: color-mix(in srgb, currentColor 22%, transparent);
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 18%, transparent), transparent 60%),
    linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, currentColor 9%, transparent) 1px, transparent 1px);
  background-size: auto, 14px 14px, 14px 14px; background-position: 0 0; }
.ph-halo { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 50%, transparent); }
.ph-mark { background: var(--ns-bg); box-shadow: 0 0 0 1px var(--ns-line-2); }
.pimg-rank { background: var(--ns-bg); color: var(--ns-text); box-shadow: inset 0 0 0 1px var(--ns-line-2); font-family: var(--w2b-font-head); }
.pimg-rank.is-top { background: var(--ns-coral); color: var(--ns-bg); box-shadow: none; }

/* ---------- 15. Compare table ---------- */
.compare { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
.compare th { background: var(--ns-panel-2); color: var(--ns-muted); border-bottom-color: var(--ns-line); font-weight: 600; letter-spacing: .08em; }
.compare td { border-bottom-color: var(--ns-line); color: var(--ns-body); }
.compare tbody tr:hover td { background: #18203B; }
.compare .c-rank b { background: var(--ns-coral); color: var(--ns-bg); font-family: var(--w2b-font-head); }
.compare .c-name a { color: var(--ns-text); }
.compare .c-name a:hover { color: var(--ns-teal-text); }
@media (max-width: 760px) {
  .compare { background: none; }
  .compare tr { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
  .compare td[data-label]:not(.c-name):not(.c-rank)::before { color: var(--ns-muted); }
}

/* ---------- 16. Product cards ---------- */
.product { background: var(--ns-panel); border: 1px solid var(--ns-line); box-shadow: none; border-radius: 18px; }
.product-rank { background: var(--ns-coral); color: var(--ns-bg); border-radius: 12px; box-shadow: 0 0 0 4px var(--ns-bg); font-family: var(--w2b-font-head); }
.product-title h2 { color: var(--ns-text); }
.product-title .brand { color: var(--ns-muted); }
.product-title .job { color: var(--ns-violet-text); font-weight: 600; letter-spacing: .1em; }
.cta-note { color: var(--ns-muted); }
.product-who { background: rgba(45,226,207,.07); color: var(--ns-body); box-shadow: inset 3px 0 0 var(--ns-teal); }
.product-who strong { color: var(--ns-text); }
.product-who svg { color: var(--ns-teal-text); }
.verdict { color: var(--ns-body); }
.verdict strong { color: var(--ns-text); }
.pros h3 { color: var(--ns-good); } .cons h3 { color: var(--ns-bad); }
.pros-cons h3 { font-weight: 600; letter-spacing: .1em; }
.pros li svg { color: var(--ns-good); } .cons li svg { color: var(--ns-bad); }
.specs { background: var(--ns-panel-2); border-color: var(--ns-line); }
.specs summary { color: var(--ns-text); }
.specs summary .chev { color: var(--ns-muted); }
.specs dl > div { border-top-color: var(--ns-line); }
.specs dt, .spec-src, .spec-src a { color: var(--ns-muted); }
.specs dd { color: var(--ns-text); }
.score { background: var(--ns-panel-2); box-shadow: inset 0 0 0 3px var(--ns-teal-text); }
.score-num { color: var(--ns-text); } .score-label { color: var(--ns-muted); }
.score-tbc { border-color: var(--ns-line-2); background: var(--ns-panel-2); }

/* ---------- 17. Sidebar ("On this page"), jump nav, mobile pick bar ---------- */
.toc { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
.toc-title { color: var(--ns-text); font-weight: 600; }
.toc-picks a { color: var(--ns-body); }
.toc-picks a b { background: var(--ns-panel-2); border-color: var(--ns-line-2); color: var(--ns-text); font-family: var(--w2b-font-head); }
.toc-picks a:hover { background: var(--ns-panel-3); }
.toc a.is-active { background: rgba(255,107,91,.12); color: var(--ns-coral-text); }
.toc-picks a.is-active b { background: var(--ns-coral); border-color: var(--ns-coral); color: var(--ns-bg); }
.toc-more { border-top-color: var(--ns-line); }
.toc-how { background: var(--ns-panel-3); color: #C9CFDF; border: 1px solid var(--ns-line-2); }
.toc-how .toc-how-title { color: #fff; font-weight: 600; }
.toc-how .toc-how-title .icon { color: var(--ns-teal); }
.toc-how a { color: var(--ns-coral-text); }
.toc-note { color: var(--ns-muted); }
@media (min-width: 900px) and (max-width: 1179px) {
  .jumpnav { background: rgba(11,16,32,.96); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--ns-line); }
}
.jumpnav a { background: var(--ns-panel); border: 1px solid var(--ns-line-2); color: var(--ns-text); }
.jumpnav a:hover { border-color: var(--ns-teal-text); color: var(--ns-text); }
.jumpnav a b { background: var(--ns-coral); color: var(--ns-bg); }
.pickbar { background: var(--ns-panel); border-color: var(--ns-line-2); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pickbar-jump { color: var(--ns-text); }
.pickbar-ico { background: var(--ns-panel-2); border-color: var(--ns-line-2); color: var(--ns-muted); }
.pickbar-txt small { color: var(--ns-coral-text); font-weight: 600; }

/* ---------- 18. Gift guides, vs pages, hub page bits, static pages, age gate ---------- */
.gift-card, .vs-card, .vs-verdict, .vs-choose .pros-cons > div { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; }
.gift-body .brand, .vs-card .brand { color: var(--ns-muted); }
.gift-facts li { background: var(--ns-panel-2); border-color: var(--ns-line); color: var(--ns-text); }
.gift-facts small { color: var(--ns-muted); }
.gift-facts li svg, .gift-for svg { color: var(--ns-teal-text); }
.gift-jump .chip b { color: var(--ns-muted); }
.vs-badge { background: var(--ns-panel-3); color: var(--ns-text); box-shadow: inset 0 0 0 1px var(--ns-line-2); font-family: var(--w2b-font-head); }
.vs-verdict { border-left-color: var(--ns-coral); }
.vs-table th[scope="row"] { color: var(--ns-text); }
.vs-table td.edge { background: rgba(74,222,128,.08); }
.edge-tag { color: var(--ns-good); background: rgba(74,222,128,.12); }
.vs-choose .pros-cons h3 { color: var(--ns-text); }
.empty { background: var(--ns-panel); border-color: var(--ns-line-2); color: var(--ns-muted); }
.empty strong { color: var(--ns-text); }
.planned li { background: var(--ns-panel); border-color: var(--ns-line); color: var(--ns-body); }
.planned li span { color: var(--ns-gold-text); background: rgba(255,194,102,.14); font-weight: 600; }
.static-page .prose { background: var(--ns-panel); border-color: var(--ns-line); box-shadow: none; max-width: none; }
.contact-form { background: var(--ns-panel-2); border-color: var(--ns-line); }
.contact-form label { color: var(--ns-text); }
.contact-form input, .contact-form select, .contact-form textarea { background: var(--ns-panel-2); color: var(--ns-text); border: 1.5px solid var(--ns-input); }
.search-field:focus-within, .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--ns-teal-text); box-shadow: var(--ns-glow-teal); }
.author-sub { color: var(--ns-muted); }
.author-head img { box-shadow: 0 0 0 2px var(--ns-teal); }
.age-badge, .age-gate-badge { background: var(--ns-text); color: var(--ns-bg); }
.notice-drink { background: var(--ns-panel-2); border-color: var(--ns-line-2); border-left-color: var(--ns-text); color: var(--ns-text); }
.age-noscript { background: var(--ns-panel-3); color: var(--ns-text); }
.age-gate { background: rgba(5,8,16,.82); }
.age-gate-box { background: var(--ns-panel); border: 1px solid var(--ns-line-2); }
.age-gate-box p { color: var(--ns-muted); }

/* ---------- 19. Footer ---------- */
.site-footer { background: var(--ns-bg-deep); color: #C9CFDF; border-top: 1px solid var(--ns-line); }
.footer-brand img { display: block; height: 32px; width: auto; }
.site-footer p, .footer-heading { color: var(--ns-muted) !important; }
.footer-heading { font-weight: 600; letter-spacing: .1em; }
.site-footer a { color: var(--ns-text); }
.site-footer ul a:hover { color: var(--ns-teal-text); }
.footer-legal { border-top-color: var(--ns-line); }

/* ---------- 20. Motion + forced colours ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn-amazon:hover, .btn-amazon:active, .card:hover, .tile:hover, .tile.has-media:hover { transform: none; }
}
@media (forced-colors: active) {
  .hero h1 .accent { text-shadow: none; }
  .btn, .chip, .tile, .card, .qp-row, .search-field { border: 1px solid CanvasText; }
  .hero-art::after, .site-header::after { display: none; }
  .price-pill::before { background: CanvasText; }
}