/* ==========================================================================
   The Job Ticket — design system
   Palette : ink navy #14213D · slate #3D4A5D · paper #F7F8F6
             safety orange #F4772E (CTA + accent only) · win green #1F7A4D
   Type    : Space Grotesk (display) · Inter (body)
   Signature: the "work order" verdict card — ruled like a paper job ticket
   ========================================================================== */

:root{
  /* ---- core palette ---- */
  --ink:#14213D;
  --slate:#3D4A5D;
  --paper:#F7F8F6;
  --line:#D9DDD4;
  --cta:#F4772E;
  --win:#1F7A4D;

  /* ---- derived ---- */
  --ink-80:#414c68;
  --ink-60:#6e768b;
  --line-soft:#E8EBE5;
  --cta-dark:#D65F19;
  --cta-tint:#FDF1E9;
  --win-bg:#F0F7F3;
  --win-line:#BFDCCC;
  --flag:#B4690E;
  --surface:#fff;

  /* ---- type ---- */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --fs-xs:.75rem;
  --fs-sm:.85rem;
  --fs-base:1rem;
  --fs-md:1.075rem;
  --fs-lg:1.25rem;
  --fs-xl:1.5rem;
  --fs-2xl:clamp(1.45rem,1.1rem + 1.5vw,1.95rem);
  --fs-3xl:clamp(1.85rem,1.25rem + 2.8vw,2.85rem);
  --fs-hero:clamp(2.1rem,1.35rem + 3.6vw,3.4rem);

  /* ---- space (4px base) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;

  /* ---- shape ---- */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(20,33,61,.06),0 1px 3px rgba(20,33,61,.08);
  --shadow-md:0 4px 6px -1px rgba(20,33,61,.08),0 10px 22px -6px rgba(20,33,61,.14);

  /* ---- layout ---- */
  --wrap:1080px;
  --wrap-narrow:760px;
  --measure:70ch;
  --rule:28px;            /* ruled-paper pitch on the verdict card */
}

*{box-sizing:border-box}

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

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

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-5)}

/* Break a section out of the 960/1080 container without restructuring the
   header include (which opens <main class="wrap"> for every page). */
.bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- typography ---------- */
h1,h2,h3,h4,.logo-text,.display{
  font-family:var(--display);
  letter-spacing:-.018em;
  line-height:1.18;
}
h1{font-size:var(--fs-3xl);margin:var(--s-6) 0 var(--s-3);font-weight:700}
h2{
  font-size:var(--fs-2xl);
  margin:var(--s-8) 0 var(--s-4);
  padding-bottom:var(--s-2);
  border-bottom:2px solid var(--ink);
  font-weight:700;
}
h3{font-size:var(--fs-lg);margin:var(--s-6) 0 var(--s-2);font-weight:700}
p{margin:0 0 var(--s-4)}
main p,main li{max-width:var(--measure)}
ul,ol{padding-left:1.25em}
li{margin-bottom:var(--s-2)}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--cta-dark)}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}

:focus-visible{outline:3px solid var(--cta);outline-offset:2px;border-radius:2px}

/* muted small print — timestamps, table parentheticals, source notes */
.updated{font-size:var(--fs-sm);color:var(--slate)}
main p.updated{max-width:var(--measure)}

/* the last-updated stamp emitted by updated() in config.php */
.stamp{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--display);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:100px;
  padding:var(--s-1) var(--s-3);
  margin:0 0 var(--s-5);
}
.stamp::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--win);
}

/* ---------- header ---------- */
.site-header{
  background:var(--ink);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding-top:var(--s-3);
  padding-bottom:var(--s-3);
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  color:#fff;
  text-decoration:none;
  flex-shrink:0;
}
.logo-mark{width:34px;height:auto;display:block}
.logo-text{font-size:1.16rem;font-weight:700;letter-spacing:-.02em}
.logo:hover{color:#fff}
.logo:hover .logo-text{text-decoration:underline;text-underline-offset:3px}

/* nav — always visible. On narrow screens it drops to its own full-width row
   and scrolls sideways, so every destination stays one tap away instead of
   two behind a hamburger. No toggle means nothing to break without JS. */
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--s-1);
}
.nav-links a{
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  white-space:nowrap;
  padding:var(--s-1) var(--s-2);
  opacity:.88;
  border-bottom:2px solid transparent;
}
.nav-links a:hover{opacity:1;color:#fff}
.nav-links a[aria-current="page"]{opacity:1;border-bottom-color:var(--cta)}

@media (max-width:820px){
  .site-header .wrap{flex-wrap:wrap;gap:var(--s-2)}
  .nav-links{
    order:3;
    width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    gap:var(--s-1);
    margin:0 calc(-1 * var(--s-4));
    padding:0 var(--s-4) var(--s-1);
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    padding:var(--s-2) var(--s-3);
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    border-radius:100px;
    font-size:var(--fs-sm);
    opacity:1;
  }
  .nav-links a[aria-current="page"]{
    background:var(--cta);
    border-color:var(--cta);
    border-bottom-color:var(--cta);
  }
}

/* ---------- FTC disclosure ----------
   Required site-wide (Housecall Pro program terms), but "site-wide" means
   present on every page, not a loud top-of-page banner competing with the
   hero. Lives in the footer as a quiet line; every page with an actual CTA
   also restates it right under the verdict card's buttons via
   .disclose-inline, which is the placement that matters most to a reader
   mid-decision. */
.disclosure{
  font-size:var(--fs-xs);
  color:var(--ink-60);
  margin:0 0 var(--s-4);
  max-width:none;
}
.disclosure a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.disclosure a:hover{color:var(--cta-dark)}

/* restated at the point of decision, under the verdict CTAs */
.disclose-inline{
  font-size:var(--fs-xs);
  color:var(--slate);
  margin:0;
  padding:var(--s-3) var(--s-5) var(--s-5);
  border-top:1px dashed var(--line);
}

main{padding-bottom:var(--s-8)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  background:var(--cta);
  color:#fff;
  text-decoration:none;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  padding:var(--s-3) var(--s-5);
  border-radius:var(--radius-sm);
  border:1px solid var(--cta);
  box-shadow:var(--shadow-sm);
  transition:background .12s ease,transform .12s ease;
}
.btn:hover{background:var(--cta-dark);border-color:var(--cta-dark);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-block{display:flex;width:100%}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:none;
}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-invert{background:var(--cta);border-color:var(--cta)}
.btn-sm{font-size:var(--fs-sm);padding:var(--s-2) var(--s-3)}

/* ---------- signature: work-order verdict card ---------- */
.verdict{
  border:2px solid var(--ink);
  border-radius:var(--radius-md);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  margin:var(--s-6) 0 var(--s-7);
  overflow:hidden;
}
.verdict::before{
  content:"THE VERDICT";
  display:block;
  background:var(--ink);
  color:#fff;
  font-family:var(--display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.16em;
  padding:var(--s-2) var(--s-4);
}
.verdict-body{
  padding:var(--s-5);
  /* ruled paper — pitch matches the line-height below so text sits on the rules */
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule) - 1px),
    var(--line-soft) calc(var(--rule) - 1px),
    var(--line-soft) var(--rule));
  background-origin:content-box;
  background-clip:content-box;
}
.verdict-body p{
  font-size:var(--fs-md);
  line-height:var(--rule);
  margin:0;
  max-width:none;
}
.verdict-body p + p{margin-top:var(--rule)}

.verdict-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-4);
  padding:0 var(--s-5) var(--s-5);
}
.pick{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--s-4);
  background:var(--surface);
  position:relative;
}
.pick .for{
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:600;
  line-height:1.4;
}
.pick .tool{
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-xl);
  line-height:1.1;
}
.pick .why{font-size:var(--fs-sm);color:var(--slate);margin:0}
.pick .btn{margin-top:auto}

/* the recommended side */
.pick--winner{
  border:2px solid var(--ink);
  background:var(--cta-tint);
  box-shadow:var(--shadow-sm);
}
.pick--winner::after{
  content:"OUR PICK";
  position:absolute;
  top:calc(-1 * var(--s-3));
  left:var(--s-4);
  background:var(--cta);
  color:#fff;
  font-family:var(--display);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  padding:3px var(--s-2);
  border-radius:2px;
}

/* ---------- tables ---------- */
.table-scroll{
  overflow-x:auto;
  margin:var(--s-5) 0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background-color:var(--surface);
  /* Edge shadows hint that the table scrolls sideways. The two "cover" layers
     are attachment:local so they travel with the content and mask the shadow
     once you reach that end — and when nothing overflows, both stay masked. */
  background-image:
    linear-gradient(to right,var(--surface) 40%,rgba(255,255,255,0)),
    linear-gradient(to left,var(--surface) 40%,rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,rgba(20,33,61,.16),rgba(20,33,61,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(20,33,61,.16),rgba(20,33,61,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  font-size:.93rem;
  background:transparent;
}
caption{
  caption-side:top;
  text-align:left;
  font-size:var(--fs-sm);
  color:var(--slate);
  padding:var(--s-3) var(--s-4) 0;
}
th,td{
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-soft);
  padding:var(--s-3) var(--s-4);
  text-align:left;
  vertical-align:top;
}
th:last-child,td:last-child{border-right:0}
thead th{
  background:var(--ink);
  color:#fff;
  font-family:var(--display);
  font-weight:500;
  font-size:var(--fs-sm);
  letter-spacing:.01em;
  border-bottom:0;
  border-right-color:rgba(255,255,255,.16);
  vertical-align:bottom;
}
tbody tr:nth-child(even){background:rgba(20,33,61,.025)}
tbody tr:last-child td{border-bottom:0}
tbody th[scope="row"]{font-weight:600;font-family:var(--sans)}

/* vendor logo above the name in a column header.
   Logos are the vendors' own unmodified files; they sit on a white pill so
   they stay legible against the navy header without being recolored. */
.vendor{display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}
.vendor img{
  height:18px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  object-position:left center;
  background:#fff;
  border-radius:3px;
  padding:5px 8px;
  box-sizing:content-box;
}
.vendor-chip{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-base);
  letter-spacing:-.01em;
}

/* the recommended column */
.col-win{background:var(--win-bg)}
thead .col-win{
  background:var(--ink);
  box-shadow:inset 0 -4px 0 var(--cta);
}
tbody tr:nth-child(even) .col-win{background:#E7F1EB}
.col-win{border-left:2px solid var(--win-line);border-right:2px solid var(--win-line)}
td.win{color:var(--win);font-weight:600}
.flag{color:var(--flag);font-weight:600}

/* CTA row — puts the button in the same visual unit as the data */
.cta-row td,.cta-row th{
  background:var(--surface);
  border-top:2px solid var(--ink);
  border-bottom:0;
  padding:var(--s-4);
  vertical-align:middle;
}
.cta-row .label{
  font-family:var(--display);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.cta-row .btn{width:100%}

/* ---------- sticky mobile CTA ---------- */
.cta-sticky{display:none}
@media (max-width:640px){
  .cta-sticky{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:70;
    background:var(--ink);
    padding:var(--s-3) var(--s-4);
    padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(20,33,61,.22);
  }
  .cta-sticky .cta-sticky-label{
    flex:1 1 auto;
    min-width:0;
    color:#C7CDD8;
    font-size:11px;
    line-height:1.25;
  }
  .cta-sticky .cta-sticky-label b{
    display:block;
    font-family:var(--display);
    font-size:var(--fs-sm);
    font-weight:700;
    color:#fff;
    white-space:nowrap;
  }
  .cta-sticky .btn{flex:0 0 auto;padding:var(--s-2) var(--s-3)}
  body:has(.cta-sticky){padding-bottom:96px}
}

/* ---------- figures ---------- */
figure{margin:var(--s-5) 0}
figure img{
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
figcaption{
  font-size:var(--fs-sm);
  color:var(--slate);
  margin-top:var(--s-2);
  max-width:var(--measure);
}
.figure-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s-5);
}
.figure-grid figure{margin:0}
img{max-width:100%;height:auto}

/* ---------- Product photos (Aug 2026 pivot) ---------- */
.product-photo{
  margin:var(--s-4) 0;
  max-width:280px;
}
.product-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:#fff;
}
.product-photo figcaption{
  margin-top:var(--s-2);
  font-size:var(--fs-xs);
  color:var(--slate);
}

/* ---------- FAQ ---------- */
.faq{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-4);
  font-family:var(--display);
  font-size:var(--fs-md);
  font-weight:700;
  line-height:1.35;
  padding:var(--s-4) var(--s-5);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--paper)}
.faq summary::after{
  content:"+";
  font-weight:500;
  font-size:1.4rem;
  line-height:1;
  color:var(--cta);
  flex-shrink:0;
}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px dashed var(--line)}
.faq details > p{
  margin:0;
  padding:var(--s-4) var(--s-5);
  max-width:var(--measure);
}

/* ---------- homepage / generic layout blocks ---------- */
.hero{
  background:var(--ink);
  color:#fff;
  padding:var(--s-8) 0;
  margin-bottom:var(--s-7);
  border-bottom:4px solid var(--cta);
}
.hero .wrap{max-width:var(--wrap)}
.hero h1{
  font-size:var(--fs-hero);
  margin:0 0 var(--s-4);
  max-width:21ch;
  color:#fff;
  text-wrap:balance;
}
.hero p{
  font-size:var(--fs-md);
  color:#DDE1E9;
  max-width:58ch;
  margin-bottom:var(--s-5);
}
.hero .btn{font-size:var(--fs-md);padding:var(--s-4) var(--s-6)}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s-4);
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.2);
}
.stats .n{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-2xl);
  font-weight:700;
  color:var(--cta);
  line-height:1.1;
}
.stats .l{font-size:var(--fs-sm);color:#C7CDD8;line-height:1.4}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s-4);
  margin:var(--s-5) 0;
}
.card{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--s-5);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:var(--ink);
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
a.card:hover{
  border-color:var(--ink);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  color:var(--ink);
}
.card-thumb{
  display:block;
  width:calc(100% + var(--s-5) * 2);
  margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) 0;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--paper);
}
.card .eyebrow{
  font-family:var(--display);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cta-dark);
}
.card h3{margin:0;font-size:var(--fs-lg)}
.card p{margin:0;font-size:var(--fs-sm);color:var(--slate);max-width:none}

/* ---- Amazon product cards (Aug 2026 pivot) ---- */
.product-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--s-5);
  box-shadow:var(--shadow-sm);
}
.product-card h3{margin:0;font-size:var(--fs-lg)}
.product-card .rating{font-size:var(--fs-sm);color:var(--slate)}
.product-card .rating .stars{color:var(--cta-dark);font-weight:600}
.card-price-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  margin-top:auto;
  padding-top:var(--s-2);
}
.card-price{font-family:var(--display);font-weight:700;color:var(--ink)}
.card-cta-link{color:var(--cta-dark);font-weight:600;text-decoration:none;white-space:nowrap}
.card-cta-link:hover{color:var(--cta);text-decoration:underline}
.qp-price{font-weight:600;color:var(--ink)}
.qp-buy{color:var(--cta-dark);font-weight:600;text-decoration:none}
.qp-buy:hover{color:var(--cta);text-decoration:underline}

.callout{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--cta);
  border-radius:var(--radius-md);
  padding:var(--s-5);
  margin:var(--s-5) 0;
  box-shadow:var(--shadow-sm);
}
.callout > :last-child{margin-bottom:0}
.callout .eyebrow{
  display:block;
  font-family:var(--display);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cta-dark);
  margin-bottom:var(--s-2);
}

.linkgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--s-3);
  padding:0;
  margin:var(--s-5) 0;
  list-style:none;
}
.linkgrid li{margin:0}
.linkgrid a{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:var(--s-3) var(--s-4);
  text-decoration:none;
  font-weight:600;
  font-size:var(--fs-sm);
}
.linkgrid a:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{
  margin-top:var(--s-8);
  border-top:4px solid var(--ink);
  background:var(--surface);
  padding:var(--s-7) 0 var(--s-6);
  font-size:var(--fs-sm);
  color:var(--slate);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--s-6);
  margin-bottom:var(--s-6);
}
.footer-grid h4{
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 var(--s-3);
  font-weight:700;
}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:var(--s-2)}
.footer-grid a{color:var(--slate);text-decoration:none}
.footer-grid a:hover{color:var(--cta-dark);text-decoration:underline}
.footer-brand .logo{color:var(--ink);margin-bottom:var(--s-3)}
.footer-brand .logo-text{color:var(--ink)}
.footer-brand p{font-size:var(--fs-sm);max-width:38ch;margin:0}
.footer-legal{
  border-top:1px solid var(--line);
  padding-top:var(--s-4);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-5);
  align-items:center;
  font-size:var(--fs-xs);
}
.footer-legal p{margin:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .wrap{padding:0 var(--s-4)}
  h2{margin-top:var(--s-7)}
  .verdict-split{grid-template-columns:1fr;gap:var(--s-5)}
  .verdict-body,.verdict-split{padding-left:var(--s-4);padding-right:var(--s-4)}
  .hero{padding:var(--s-7) 0}
  .hero .btn{width:100%}
  .stats{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .footer-grid{grid-template-columns:1fr}
  .faq summary,.faq details > p{padding-left:var(--s-4);padding-right:var(--s-4)}
  /* keep the row label visible while the vendor columns scroll sideways */
  tbody th[scope="row"],thead th:first-child,tbody td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--surface);
    box-shadow:1px 0 0 var(--line);
  }
  thead th:first-child{background:var(--ink)}
  tbody tr:nth-child(even) td:first-child,
  tbody tr:nth-child(even) th[scope="row"]{background:#F4F5F3}
  .cta-row td:first-child{background:var(--surface)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  a.card:hover{transform:none}
}

@media print{
  .site-header,.cta-sticky,.disclosure{display:none}
  body{background:#fff}
  .faq details{display:block}
}

/* --- Author byline + author box (E-E-A-T) --- */
/* The byline rides inside the .stamp chip, separated by a hairline rule so it reads as
   a second field rather than a run-on. */
.stamp-by{
  padding-left:var(--s-2);
  margin-left:var(--s-1);
  border-left:1px solid var(--line);
  text-transform:none;
  letter-spacing:0;
}
.stamp-by a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.stamp-by a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.author-box{
  display:flex;
  gap:var(--s-4);
  align-items:flex-start;
  margin:var(--s-8) 0 var(--s-6);
  padding:var(--s-5);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
}
.author-avatar{
  flex:0 0 auto;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-sm);
  letter-spacing:.04em;
}
.author-info{min-width:0}
.author-name{
  margin:0 0 var(--s-2);
  font-family:var(--display);
  font-weight:700;
  font-size:var(--fs-md);
  color:var(--ink);
}
.author-name a{color:inherit;text-decoration:none;border-bottom:2px solid var(--cta)}
.author-name a:hover{color:var(--cta-dark)}
.author-bio{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-80);
  max-width:var(--measure);
}
@media (max-width:480px){
  .author-box{flex-direction:column;gap:var(--s-3)}
  .stamp{flex-wrap:wrap}
}

/* --- Breadcrumbs --- */
.breadcrumb{margin:var(--s-5) 0 calc(var(--s-2) * -1)}
.breadcrumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  list-style:none;margin:0;padding:0;
  font-size:var(--fs-xs);color:var(--slate);
}
.breadcrumb li{display:flex;align-items:center;gap:var(--s-2)}
.breadcrumb li+li::before{content:"›";color:var(--line);font-size:var(--fs-sm)}
.breadcrumb a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.breadcrumb [aria-current="page"]{color:var(--ink-80)}