/* =========================================================
   RobotVacuumLab — Editorial Tech Lab CSS (UPDATED / AUDIT-READY)
   Goals: clean, trustworthy, fast, accessible, mobile-first

   Updates in this version:
   - FIX: video is truly responsive + premium (uses .yt-responsive wrapper)
   - FIX: removed conflicting .note.video-embed selector + aspect-ratio auto override
   - IMPROVE: video card layout (desktop split, tight mobile)
   - KEEP: cookie banner opacity/contrast (premium glass, readable)
   - KEEP: overflow protection so text never spills outside cards/tags/buttons
   - KEEP: cookie banner uses [hidden], mobile-nav [hidden], CTA glow/shimmer,
           dark mode, reduced motion
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Typography */
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.75rem;    /* 44px */

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* Layout */
  --container: 72rem; /* 1152px */
  --gutter: clamp(1rem, 3vw, 1.5rem);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;

  /* Colors (light-first) */
  --bg: #ffffff;
  --surface: #fbfcfd;
  --surface-2: #f4f6f8;
  --border: #e3e7ec;

  --text: #0c1220;
  --muted: #4b5565;
  --muted-2: #6b7280;

  /* Accent (subtle “lab green”) */
  --accent: #0ea37f;
  --accent-2: #0b7a60;
  --accent-soft: rgba(14,163,127,.12);

  /* Attention */
  --warn: #b45309;
  --warn-soft: rgba(180,83,9,.12);

  /* Success / Danger */
  --ok: #15803d;
  --ok-soft: rgba(21,128,61,.12);
  --bad: #b91c1c;
  --bad-soft: rgba(185,28,28,.10);

  /* Shadow (soft only) */
  --shadow: 0 10px 22px rgba(12,18,32,.06);
  --shadow-sm: 0 6px 14px rgba(12,18,32,.05);

  /* Focus */
  --focus: 0 0 0 3px rgba(14,163,127,.22);

  /* Transitions */
  --t: 160ms ease;

  /* Hairline gradient */
  --hairline: linear-gradient(90deg, rgba(14,163,127,.35), rgba(14,163,127,0));

  /* Cookie banner tokens */
  --banner-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --banner-border: color-mix(in srgb, var(--accent) 14%, var(--border));
  --banner-shadow: 0 18px 44px rgba(12,18,32,.12);
}

/* Auto dark-mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f17;
    --surface: #0f1624;
    --surface-2: #121b2c;
    --border: rgba(255,255,255,.10);

    --text: #eef2f7;
    --muted: #b6c0cf;
    --muted-2: #9aa6b6;

    --accent: #21d6a6;
    --accent-2: #12b68a;
    --accent-soft: rgba(33,214,166,.12);

    --shadow: 0 14px 28px rgba(0,0,0,.35);
    --shadow-sm: 0 10px 18px rgba(0,0,0,.25);
    --focus: 0 0 0 3px rgba(33,214,166,.22);

    --hairline: linear-gradient(90deg, rgba(33,214,166,.35), rgba(33,214,166,0));

    --banner-bg: color-mix(in srgb, var(--surface) 86%, transparent);
    --banner-border: rgba(255,255,255,.12);
    --banner-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
}

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Global overflow safety */
body{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* Prevent long URLs/words from breaking layout */
p, h1, h2, h3, h4, li, a, span, strong{
  overflow-wrap: anywhere;
  word-break: normal;
}

img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
}

input, button, textarea, select{
  font: inherit;
  color: inherit;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 0.5rem;
}

::selection{ background: rgba(14,163,127,.18); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Utilities ---------- */
.container{
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.stack > * + *{ margin-top: 1rem; }
.stack-sm > * + *{ margin-top: 0.75rem; }
.stack-lg > * + *{ margin-top: 1.5rem; }

.grid{
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem){
  .grid{ gap: 1.15rem; }
  .grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Helper to allow children to shrink in flex/grid without overflow */
.min0{ min-width: 0; }

.muted{ color: var(--muted); }
.small{ font-size: var(--text-sm); }
.tiny{ font-size: var(--text-xs); }
.mono{ font-family: var(--font-mono); }
.nowrap{ white-space: nowrap; }
.hidden{ display: none !important; }

.hr{
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 1.75rem 0;
}

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
  transform: translateY(-140%);
  transition: transform var(--t);
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  .site-header{ background: var(--bg); }
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
}

/* Prevent brand overflow on tight widths */
.brand{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.brand > span{ min-width: 0; }
.brand-title,
.brand-sub{
  display: block;
  max-width: 32ch;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.brand-mark{
  width: 48px;
  height: 48px;
  border-radius: 1.05rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

@media (prefers-color-scheme: dark){
  .site-header .brand-mark img{
    filter: brightness(0) invert(1) contrast(1.15)
            drop-shadow(0 1px 1px rgba(0,0,0,.65));
  }
}

.brand-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 1.12rem;
}
.brand-sub{
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.1;
}

.nav{
  display: none;
  gap: 0.5rem;
  align-items: center;
}
@media (min-width: 48rem){
  .nav{ display: flex; }
}
.nav a{
  padding: 0.55rem 0.75rem;
  border-radius: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
  border: 1px solid transparent;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav a:hover{
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  border-color: var(--border);
}
.nav a[aria-current="page"]{
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}

.nav-cta{ display: none; }
@media (min-width: 48rem){
  .nav-cta{ display: inline-flex; }
}

/* Mobile menu */
.menu-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.9rem;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.menu-btn:hover{ background: var(--surface-2); }
.menu-btn:active{ transform: translateY(1px); }
@media (min-width: 48rem){
  .menu-btn{ display: none; }
}

/* Mobile nav uses [hidden] */
.mobile-nav{
  display: block;
  padding: 0.75rem 0 1rem;
}
.mobile-nav[hidden]{ display: none; }

.mobile-nav a{
  display: block;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.95rem;
  text-decoration: none;
  margin-top: 0.55rem;
  color: var(--muted);
}
.mobile-nav a:hover{
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  padding: 0.9rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.breadcrumbs ol{
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
}
.breadcrumbs a{
  color: var(--muted);
  text-decoration: none;
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs a:hover{ color: var(--text); text-decoration: underline; }
.breadcrumbs .sep{ color: var(--muted-2); }

/* ---------- Hero ---------- */
.hero{
  padding: clamp(1.25rem, 3vw, 2rem) 0 1.25rem;
}
.hero-card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hero-media{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-body{
  padding: clamp(1rem, 2.6vw, 1.5rem);
  min-width: 0;
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::before{
  content:"";
  width: 18px;
  height: 1px;
  background: var(--hairline);
}

.h1{
  margin: 0.5rem 0 0;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  font-size: clamp(1.75rem, 3.3vw, 2.75rem);
  text-wrap: balance;
}

.h3{
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

.lede{
  margin: 0.75rem 0 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--muted);
  line-height: var(--lh-loose);
  max-width: 65ch;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--t), background var(--t), border-color var(--t), filter var(--t);
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover{ background: var(--accent-2); text-decoration: none; }
.btn:active{ transform: translateY(1px); }

.btn-secondary{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover{ background: var(--surface-2); }

.btn-ghost{
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
}
.btn-ghost:hover{
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

/* Explicit price CTA class */
.btn-price{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-radius: .95rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow:
    0 10px 26px rgba(14,163,127,.18),
    0 0 0 3px rgba(14,163,127,.10);
  transition: transform var(--t), filter var(--t), box-shadow var(--t), background var(--t);
  position: relative;
  isolation: isolate;
}
.btn-price:hover{
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 14px 34px rgba(14,163,127,.25),
    0 0 0 4px rgba(14,163,127,.14),
    0 0 28px rgba(14,163,127,.22);
}
.btn-price:active{ transform: translateY(0); filter: brightness(1.02); }
.btn-price:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(14,163,127,.22),
    0 0 0 7px rgba(14,163,127,.12),
    0 16px 36px rgba(14,163,127,.22);
}

/* Glow layer */
.btn-price::before{
  content:"";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(14,163,127,.38), rgba(14,163,127,0) 70%);
  filter: blur(10px);
  opacity: .65;
  z-index: -1;
  animation: ctaGlow 2.4s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{ transform: scale(.98); opacity: .55; }
  50%{ transform: scale(1.03); opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
  .btn-price::before{ animation: none !important; }
}

/* ---------- Main content ---------- */
main{ padding: 1.25rem 0 3rem; }
.section{ margin-top: 2rem; }

.section-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  min-width: 0;
}
.section-title h2{
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  letter-spacing: -0.02em;
  min-width: 0;
  text-wrap: balance;
}
.section-title .hint{
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 52ch;
}

/* ---------- Cards ---------- */
.card{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t), background var(--t), border-color var(--t);
  min-width: 0;
}
.card:hover{
  background: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  transform: translateY(-1px);
}
.card .card-body{
  padding: 1rem;
  min-width: 0;
}

/* Prevent long titles/links from breaking the card */
.card h3{
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  min-width: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.card h3 a{
  display: inline-block;
  max-width: 100%;
  min-width: 0;
}

/* Keep paragraphs inside */
.card p{
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 65ch;
}

/* Meta row */
.card .meta{
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

/* “Top pick” / highlight card */
.card.pick{
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  max-width: 100%;
}
.badge.accent{
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* Tags: no overflow, nice wrapping */
.tag{
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: 0.75rem;
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  max-width: 100%;
  min-width: 0;
}

/* Links inside tags should not expand forever */
.tag a{
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Equal-height cards & pinned meta row (desktop+) */
@media (min-width: 48rem){
  .card .card-body{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .card .meta{ margin-top: auto; }
}

/* ---------- Tables ---------- */
.table-wrap{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.table{
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td{
  padding: 0.85rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table th{
  text-align: left;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tr:last-child td{ border-bottom: 0; }

/* Optional: if any price link doesn't have .btn-price */
.table td:last-child a:not(.btn-price){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform var(--t), background var(--t), border-color var(--t);
}
.table td:last-child a:not(.btn-price):hover{
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  text-decoration: none;
}
.table td:last-child a:not(.btn-price):active{ transform: translateY(1px); }

/* ---------- Callouts / Notes ---------- */
.note{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1rem;
  min-width: 0;
}
.note.accent{
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
}
.note.warn{
  border-color: color-mix(in srgb, var(--warn) 28%, var(--border));
  background: linear-gradient(180deg, var(--warn-soft), var(--surface));
}
.note h3{ margin: 0 0 0.4rem; font-size: 1.05rem; text-wrap: balance; }
.note p{ margin: 0.25rem 0 0; color: var(--muted); }

/* ---------- Pros / Cons ---------- */
.pros-cons{ display: grid; gap: 1rem; }
@media (min-width: 48rem){
  .pros-cons{ grid-template-columns: 1fr 1fr; }
}
.pros, .cons{
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1rem;
  min-width: 0;
}
.pros{
  border-color: color-mix(in srgb, var(--ok) 25%, var(--border));
  background: linear-gradient(180deg, var(--ok-soft), var(--surface));
}
.cons{
  border-color: color-mix(in srgb, var(--bad) 22%, var(--border));
  background: linear-gradient(180deg, var(--bad-soft), var(--surface));
}
.pros h3, .cons h3{ margin: 0 0 0.5rem; font-size: 1.05rem; text-wrap: balance; }
.pros ul, .cons ul{ margin: 0; padding-left: 1.1rem; color: var(--muted); }
.pros li + li, .cons li + li{ margin-top: 0.35rem; }

/* ---------- FAQ (details/summary) ---------- */
.faq{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}
.faq details{ border-top: 1px solid var(--border); }
.faq details:first-child{ border-top: 0; }

.faq summary{
  cursor: pointer;
  list-style: none;
  padding: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.faq summary::-webkit-details-marker{ display: none; }

.faq summary::after{
  content: "+";
  width: 32px;
  height: 32px;
  border-radius: 0.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  transition: transform var(--t), background var(--t), color var(--t);
  flex: 0 0 auto;
}
.faq details[open] summary::after{
  content: "−";
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}
.faq details[open] summary{
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.faq .answer{
  padding: 0 1rem 1rem;
  color: var(--muted);
  line-height: var(--lh-loose);
}

/* ---------- Article typography ---------- */
.article{ max-width: 75ch; }
.article h1{ margin: 0.5rem 0 0; }
.article h2, .article h3{
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
.article p{ margin: 0.85rem 0; color: var(--text); }
.article p.muted{ color: var(--muted); }
.article ul, .article ol{ margin: 0.85rem 0; padding-left: 1.25rem; }
.article li + li{ margin-top: 0.4rem; }
.article blockquote{
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface-2);
  border-radius: 0.75rem;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 2rem 0;
  background: var(--surface);
}
.footer-logo{
  display: block;
  height: 44px;
  width: auto;
  margin-bottom: 0.75rem;
  opacity: .95;
}
.footer-inner{
  display: grid;
  gap: 1rem;
  min-width: 0;
}
@media (min-width: 48rem){
  .footer-inner{
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}
.footer-nav a{
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer-nav a:hover{ background: var(--surface-2); color: var(--text); }
.footer-note{ color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---------- Print ---------- */
@media print{
  .site-header, .nav, .mobile-nav, .menu-btn, .hero-actions, .footer-nav, .cookie-banner { display: none !important; }
  body{ background: #fff; color: #000; }
  a{ text-decoration: underline; }
}

/* ---------- Small helpers you’ll reuse ---------- */
.last-updated{
  margin-top: 0.75rem;
  font-size: var(--text-xs);
  color: var(--muted-2);
}
.kpi{
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  min-width: 0;
}
.kpi .item{
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 0.9rem;
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 100%;
}

/* =========================================================
   Cookie Banner (premium + accessible)
   - Uses [hidden] attribute
   - Strong opacity in both modes
   ========================================================= */
.cookie-banner{
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9998;
  padding: 0.9rem var(--gutter) 1rem;
  background: transparent;
  pointer-events: none;
}
.cookie-banner[hidden]{ display: none; }

.cookie-banner__inner{
  pointer-events: auto;
  border: 1px solid var(--banner-border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1.1rem;
  box-shadow:
    var(--banner-shadow),
    0 0 0 4px rgba(14,163,127,.08);
  padding: 0.9rem;
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

@media (prefers-color-scheme: dark){
  .cookie-banner__inner{
    background: rgba(12,18,32,.88);
    border-color: rgba(255,255,255,.14);
    box-shadow:
      var(--banner-shadow),
      0 0 0 4px rgba(33,214,166,.10);
  }
}

@media (min-width: 48rem){
  .cookie-banner__inner{
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1rem 1.05rem;
    gap: 1rem;
  }
}

.cookie-banner__text{ min-width: 0; }
.cookie-banner__text strong{
  display: inline-block;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}
.cookie-banner__text p{ margin: 0.25rem 0 0; color: var(--muted); line-height: 1.55; }

.cookie-banner__text a{
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.cookie-banner__text a:hover{ color: var(--text); }

.cookie-banner__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
  min-width: 0;
}
@media (min-width: 48rem){
  .cookie-banner__actions{ justify-content: flex-end; }
}
.cookie-banner__actions .btn{
  padding: 0.65rem 0.9rem;
  border-radius: 0.9rem;
}

/* =========================================================
   VIDEO — PRO RESPONSIVE (uses .yt-responsive)
   Use with:
   <section class="note video-card">
     <div class="video-card__text">...</div>
     <div class="yt-responsive"><iframe ...></iframe></div>
   </section>
   ========================================================= */
.video-title{
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.video-privacy{ margin-top: .6rem; }

.note.video-card{
  box-shadow: var(--shadow-sm);
}

.yt-responsive{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-top: .6rem;
}
.yt-responsive iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Desktop split layout */
.video-card{
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}
.video-card__text{ min-width: 0; }

@media (min-width: 64rem){
  .video-card{
    grid-template-columns: 1fr 1.25fr;
    align-items: center;
    gap: 1rem;
  }
}
@media (min-width: 80rem){
  .video-card{ grid-template-columns: 1fr 1.35fr; }
}

/* =========================================================
   RobotVacuumLab — CTA BOOST PATCH (kept)
   ========================================================= */
.meta a[data-affiliate="amazon"],
.meta a[href*="amazon.ca/dp/"],
.meta a[href*="amazon.ca/gp/"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .55rem .75rem;
  border-radius: .9rem;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;

  color: #fff;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:
    0 10px 22px rgba(14,163,127,.18),
    0 0 0 3px rgba(14,163,127,.10);
  transition: transform var(--t), filter var(--t), box-shadow var(--t);

  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meta a[data-affiliate="amazon"]:hover,
.meta a[href*="amazon.ca/dp/"]:hover,
.meta a[href*="amazon.ca/gp/"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.06);
  box-shadow:
    0 14px 34px rgba(14,163,127,.24),
    0 0 0 4px rgba(14,163,127,.14),
    0 0 22px rgba(14,163,127,.16);
  text-decoration: none;
}

.meta a[data-affiliate="amazon"]:active,
.meta a[href*="amazon.ca/dp/"]:active,
.meta a[href*="amazon.ca/gp/"]:active{
  transform: translateY(0);
  filter: brightness(1.02);
}

/* Shimmer highlight (table CTA) */
.btn-price{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  position: relative;
  overflow: hidden;
}
.btn-price::after{
  content:"";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 55%;
  height: 160%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  opacity: .55;
  filter: blur(.2px);
  animation: rvlShimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rvlShimmer{
  0%{ transform: translateX(0) skewX(-18deg); opacity: .0; }
  20%{ opacity: .45; }
  55%{ opacity: .35; }
  100%{ transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

/* HERO Amazon CTA stronger */
.hero-top-pick .btn.btn-secondary[href*="amazon.ca"]{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:
    0 12px 28px rgba(14,163,127,.20),
    0 0 0 3px rgba(14,163,127,.10);
}
.hero-top-pick .btn.btn-secondary[href*="amazon.ca"]:hover{
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  filter: brightness(1.06) saturate(1.06);
  transform: translateY(-1px);
}
.hero-top-pick .btn.btn-secondary[href*="amazon.ca"]:active{
  transform: translateY(0);
}

/* Dark mode: stronger glow */
@media (prefers-color-scheme: dark){
  .btn-price,
  .meta a[data-affiliate="amazon"],
  .meta a[href*="amazon.ca/dp/"],
  .meta a[href*="amazon.ca/gp/"],
  .hero-top-pick .btn.btn-secondary[href*="amazon.ca"]{
    box-shadow:
      0 16px 36px rgba(0,0,0,.35),
      0 0 0 4px rgba(33,214,166,.12),
      0 0 28px rgba(33,214,166,.14);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-price::after{ animation: none !important; }
}

/* =========================================================
   RVL — Mobile comparison table upgrade (premium + readable)
   Add at END of /assets/css/styles.css
   ========================================================= */

.table-hint{
  margin: .35rem 0 .65rem;
}

/* Wrapper: intentional horizontal scroll */
.table-wrap{
  position: relative; /* REQUIRED for fade hints */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Fade hints left/right */
.table-wrap[data-scroll-hint="true"]::before,
.table-wrap[data-scroll-hint="true"]::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 22px;
  pointer-events:none;
  z-index: 3;
}
.table-wrap[data-scroll-hint="true"]::before{
  left:0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}
.table-wrap[data-scroll-hint="true"]::after{
  right:0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
}

/* Table: more air + scanning */
.table th,
.table td{
  padding: .85rem .85rem;
  line-height: 1.35;
}

/* Sticky header: keep it crisp */
.table thead th{
  backdrop-filter: blur(8px);
}

/* Mobile: force a clean scroll width + sticky “Pick” column */
@media (max-width: 768px){
  .table{ min-width: 820px; } /* overrides your 720px for better readability */

  /* Sticky first column */
  .table th:first-child,
  .table td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    box-shadow: 10px 0 18px rgba(0,0,0,.06);
  }
  .table thead th:first-child{
    z-index: 4; /* header pinned col above everything */
    background: var(--surface-2);
  }
  .table td:first-child{
    min-width: 220px;
  }

  /* Make non-CTA links finger-friendly */
  .table td a:not(.btn-price){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .7rem;
    border-radius: .85rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
  .table td a:not(.btn-price):hover{
    background: var(--surface-2);
  }

  /* CTA already good, just ensure consistent sizing */
  .table .btn-price{
    padding: .6rem .85rem;
    border-radius: .95rem;
  }
}

/* =========================================================
   RVL — TABLE UPGRADE (FINAL OVERRIDE)
   Paste at END of styles.css
   - sticky “Pick” col (mobile)
   - scroll hint fade
   - consistent thumb + pick layout
   - safer stacking/z-index
   ========================================================= */

/* 1) Table hint spacing */
.table-hint{
  margin: .35rem 0 .65rem;
}

/* 2) Wrapper: scroll intent + fade hints */
.table-wrap{
  position: relative; /* required for ::before/::after fade */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Fade overlays (only if data-scroll-hint=true) */
.table-wrap[data-scroll-hint="true"]::before,
.table-wrap[data-scroll-hint="true"]::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width: 22px;
  pointer-events:none;
  z-index: 3;
}
.table-wrap[data-scroll-hint="true"]::before{
  left:0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--bg) 92%, transparent),
    transparent
  );
}
.table-wrap[data-scroll-hint="true"]::after{
  right:0;
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--bg) 92%, transparent),
    transparent
  );
}

/* 3) Table ergonomics */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Keep header sticky and readable */
.table th{
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
}

/* 4) Pick cell layout (works with the HTML I gave you: .pick-wrap + .table-thumb) */
.table-thumb{
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  display: inline-block;
  flex: 0 0 auto;
}

.pick-wrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pick-text{
  min-width: 0;
}

/* 5) Mobile: increase min-width + sticky first column */
@media (max-width: 768px){
  /* force enough width so columns don’t become unreadable */
  .table{ min-width: 820px; }

  /* Sticky first column */
  .table th:first-child,
  .table td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    box-shadow: 10px 0 18px rgba(0,0,0,.06);
  }

  /* Header cell above the sticky column */
  .table thead th:first-child{
    z-index: 4;
    background: var(--surface-2);
  }

  /* Give the Pick column breathing room */
  .table td:first-child{
    min-width: 220px;
  }

  /* Make non-CTA links finger-friendly */
  .table td a:not(.btn-price){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .7rem;
    border-radius: .85rem;
    border: 1px solid var(--border);
    background: var(--surface);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
  .table td a:not(.btn-price):hover{
    background: var(--surface-2);
  }

  /* CTA sizing consistency */
  .table .btn-price{
    padding: .6rem .85rem;
    border-radius: .95rem;
  }
}

/* 6) Dark mode: stronger sticky shadow + fades */
@media (prefers-color-scheme: dark){
  .table th:first-child,
  .table td:first-child{
    box-shadow: 10px 0 22px rgba(0,0,0,.45);
  }

  .table-wrap[data-scroll-hint="true"]::before{
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--bg) 88%, transparent),
      transparent
    );
  }
  .table-wrap[data-scroll-hint="true"]::after{
    background: linear-gradient(
      270deg,
      color-mix(in srgb, var(--bg) 88%, transparent),
      transparent
    );
  }
}