:root{
  --paper:#FAF8F5; --surface:#FFFFFF; --sunk:#F2EFEA; --raise:#FFFFFF;
  --band:#F4F1F7; --band-warm:#F7F2ED; --edge:#E9E3DC;
  --ink:#191627; --body:#3D3853; --muted:#6E6883;
  --rule:#E2DCE9; --rule-soft:#EDE8F0;
  --brand:#4B3FA6; --brand-ink:#3A3080; --brand-soft:#4b3fa614; --brand-line:#4b3fa633;
  --manual:#1B6B4F; --manual-soft:#1b6b4f14;
  --mfr:#4B3FA6; --mfr-soft:#4b3fa614;
  --retail:#8A6414; --retail-soft:#8a641414;
  --unk:#6E6883; --unk-soft:#6e688314;
  --conflict:#A8431C; --conflict-soft:#a8431c14;
  --warm:#C4703F; --warm-soft:#c4703f14; --sand:#B08968;
  --shadow:0 1px 2px rgba(25,22,39,.04),0 4px 16px rgba(25,22,39,.05);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:10px; --maxw:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14111E; --surface:#1C1828; --sunk:#221D30; --raise:#241F33;
  --band:#191524; --band-warm:#1E1922; --edge:#2C2638;
  --ink:#F1EEF6; --body:#C9C4D6; --muted:#968FA8;
  --rule:#302A42; --rule-soft:#282236;
  --brand:#9B8CF5; --brand-ink:#B4A8FF; --brand-soft:#9b8cf51f; --brand-line:#9b8cf544;
  --manual:#5FCB9C; --manual-soft:#5fcb9c1f;
  --mfr:#9B8CF5; --mfr-soft:#9b8cf51f;
  --retail:#DCAA4E; --retail-soft:#dcaa4e1f;
  --unk:#968FA8; --unk-soft:#968fa81f;
  --conflict:#E38A63; --conflict-soft:#e38a631f;
  --warm:#E0A075; --warm-soft:#e0a07521; --sand:#C9A184;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}}
:root[data-theme="dark"]{
  --paper:#14111E; --surface:#1C1828; --sunk:#221D30; --raise:#241F33;
  --band:#191524; --band-warm:#1E1922; --edge:#2C2638;
  --ink:#F1EEF6; --body:#C9C4D6; --muted:#968FA8;
  --rule:#302A42; --rule-soft:#282236;
  --brand:#9B8CF5; --brand-ink:#B4A8FF; --brand-soft:#9b8cf51f; --brand-line:#9b8cf544;
  --manual:#5FCB9C; --manual-soft:#5fcb9c1f;
  --mfr:#9B8CF5; --mfr-soft:#9b8cf51f;
  --retail:#DCAA4E; --retail-soft:#dcaa4e1f;
  --unk:#968FA8; --unk-soft:#968fa81f;
  --conflict:#E38A63; --conflict-soft:#e38a631f;
  --warm:#E0A075; --warm-soft:#e0a07521; --sand:#C9A184;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.011em}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.08}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.18}
h3{font-size:1.05rem;font-weight:600;line-height:1.3}
h4{font-size:.9rem;font-weight:600}
p{margin:0}
a{color:var(--brand);text-decoration-color:var(--brand-line);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
strong{color:var(--ink);font-weight:600}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,3.5vw,2rem)}
.narrow{max-width:70ch}
.stack{display:flex;flex-direction:column;gap:1rem}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- masthead ---------- */
header.site{border-bottom:1px solid var(--rule);background:var(--surface);position:sticky;top:0;z-index:40}
.mast{display:flex;align-items:center;gap:1.25rem;height:60px}
.logo{display:flex;align-items:baseline;gap:.12rem;text-decoration:none;flex:0 0 auto}
.logo .a{font-family:var(--serif);font-weight:700;font-size:1.32rem;color:var(--ink);letter-spacing:-.02em}
.logo .b{font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--brand);letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:.08rem}
nav.main{display:flex;gap:.2rem;margin-left:auto;flex-wrap:wrap}
nav.main a{font-size:.87rem;color:var(--body);text-decoration:none;padding:.42rem .6rem;border-radius:7px;white-space:nowrap}
nav.main a:hover{background:var(--sunk);color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--brand);background:var(--brand-soft);font-weight:600}
@media(max-width:860px){
  .mast{height:auto;padding:.65rem 0;flex-wrap:wrap;gap:.5rem}
  nav.main{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.15rem}
}

/* ---------- breadcrumbs / footer ---------- */
.crumbs{font-size:.79rem;color:var(--muted);padding:.9rem 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs span{padding:0 .35rem;opacity:.5}
footer.site{margin-top:4rem;border-top:1px solid var(--rule);background:var(--surface);padding:2.2rem 0 3rem;font-size:.85rem}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:1.6rem}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:.55rem}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.32rem}
footer.site a{color:var(--body);text-decoration:none}
footer.site a:hover{color:var(--brand);text-decoration:underline}
.disclosure{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--rule-soft);color:var(--muted);
  font-size:.8rem;line-height:1.6;max-width:78ch}

/* ---------- sections ---------- */
section{padding-top:2.6rem}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin-bottom:1.3rem}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
.lede{font-family:var(--serif);font-size:clamp(1.02rem,2vw,1.22rem);line-height:1.5;color:var(--body);max-width:62ch}

/* ---------- evidence chips ---------- */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.14rem .4rem;border-radius:5px;
  border:1px solid currentColor;white-space:nowrap;font-weight:500}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chip.manual{color:var(--manual);background:var(--manual-soft)}
.chip.manufacturer{color:var(--mfr);background:var(--mfr-soft)}
.chip.retailer{color:var(--retail);background:var(--retail-soft)}
.chip.not-stated{color:var(--unk);background:var(--unk-soft)}
.chip.conflict{color:var(--conflict);background:var(--conflict-soft)}
.chip.withheld{color:var(--conflict);background:transparent;border-style:dashed}
.chip.tier{color:var(--muted);background:transparent}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow)}
.card svg{max-width:100%}
/* Wide schematic diagrams must not stretch: a sparse diagram scaled to 1100px leaves a
   dead zone the reader scrolls past. Declared AFTER .card svg deliberately — the two
   selectors have equal specificity, so order decides. */
.card.diagram svg{display:block;width:100%;max-width:740px;height:auto;margin:0 auto}
/* charts genuinely benefit from the full column */
.card.diagram.wide svg{max-width:100%}
.grid{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* min() so the track can fall back to the container width. A bare minmax(380px,1fr)
   cannot shrink below its minimum, so on a 375 or 360 px phone every card in this
   grid is laid out wider than the page and the whole document scrolls sideways.
   Above 380 px the computed track is identical to before. */
.g2{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
.pcard{display:flex;flex-direction:column;overflow:hidden;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.pcard .art{background:var(--sunk);border-bottom:1px solid var(--rule-soft);padding:.9rem;display:flex;
  align-items:center;justify-content:center;min-height:158px}
.pcard .art svg{width:100%;height:auto;max-height:150px}
.pcard .art{position:relative}
.mechtag{position:absolute;bottom:.45rem;left:.6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--rule);
  padding:.1rem .34rem;border-radius:4px}
.pcard .bd{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard .bd .brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.pcard .bd h3 a{color:var(--ink);text-decoration:none}
.pcard .bd h3 a:hover{color:var(--brand)}
.pcard .meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.5rem}
.pcard .facts{font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.15rem .75rem}
.pcard .facts b{color:var(--body);font-weight:500}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.875rem}
caption{caption-side:bottom;text-align:left;padding:.7rem .85rem;font-size:.78rem;color:var(--muted);line-height:1.55}
th,td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:500;background:var(--sunk);border-bottom:1px solid var(--rule)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--sunk)}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- litter matrix cells ---------- */
.lc{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;padding:.16rem .42rem;border-radius:5px;
  font-family:var(--mono);font-size:.66rem;font-weight:500;border:1px solid currentColor}
.lc.ok{color:var(--manual);background:var(--manual-soft)}
.lc.cond{color:var(--retail);background:var(--retail-soft)}
.lc.nrec{color:var(--conflict);background:var(--conflict-soft)}
.lc.no{color:var(--conflict);background:var(--conflict-soft);opacity:.92}
.lc.unk{color:var(--unk);background:transparent;border-style:dashed}

/* ---------- spec rows ---------- */
.spec{display:grid;grid-template-columns:minmax(11rem,15rem) 1fr auto;gap:.6rem 1rem;padding:.6rem 0;
  border-bottom:1px solid var(--rule-soft);align-items:baseline}
.spec:last-child{border-bottom:0}
.spec dt{color:var(--muted);font-size:.86rem}
.spec dd{margin:0;color:var(--ink);font-weight:500}
.spec.unset dd{color:var(--muted);font-weight:400;font-style:italic}
.spec .ev{justify-self:end}
@media(max-width:640px){
  .spec{grid-template-columns:1fr auto;gap:.15rem .6rem}
  .spec dt{grid-column:1/-1;font-size:.78rem}
}
details.ev-detail{margin-top:.4rem;grid-column:1/-1}
details.ev-detail summary{cursor:pointer;font-size:.76rem;color:var(--muted);list-style:none;display:inline-flex;
  align-items:center;gap:.3rem;padding:.15rem .4rem;border-radius:5px}
details.ev-detail summary::-webkit-details-marker{display:none}
details.ev-detail summary::before{content:"▸";font-size:.6rem;transition:transform .15s}
details[open].ev-detail summary::before{transform:rotate(90deg)}
details.ev-detail summary:hover{background:var(--sunk);color:var(--brand)}
.ev-body{margin-top:.4rem;padding:.7rem .85rem;background:var(--sunk);border-radius:8px;font-size:.8rem;
  line-height:1.55;border-left:2px solid var(--brand-line)}
.ev-body dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin:0}
.ev-body dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* G-1: the citation source is an unbroken URL. Left with the default
   overflow-wrap it has no break opportunity, so its min-content width — up to
   553px — escapes the card and drags the whole document wider than the phone.
   `anywhere` also shrinks min-content, which is what stops it forcing a grid
   track; break-word first for browsers that do not know `anywhere`. */
.ev-body .mono{overflow-wrap:break-word;overflow-wrap:anywhere}
.ev-body dd{margin:0;word-break:break-word}
.ev-body q{font-style:italic;color:var(--ink)}

/* ---------- controls ---------- */
.controls{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;padding:.85rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);margin-bottom:1.1rem}
/* G-1: a flex item's automatic minimum is its content, so a <select> sized by its
   longest option (464px) pushed this group to 519px inside a 328px row. Both the
   control and its group must be allowed to shrink; nothing else about them changes. */
.fgroup{display:flex;align-items:center;gap:.4rem;min-width:0}
.fgroup label{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
select,input[type=search]{max-width:100%;min-width:0;font-family:var(--sans);font-size:.85rem;padding:.36rem .55rem;border:1px solid var(--rule);
  border-radius:7px;background:var(--surface);color:var(--ink);min-height:34px}
input[type=search]{min-width:190px}
.count{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-left:auto}
.btn{font-family:var(--sans);font-size:.85rem;font-weight:500;padding:.45rem .8rem;border-radius:8px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;min-height:36px}
.btn:hover{border-color:var(--brand-line);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink);color:#fff}
.cmp-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--muted);cursor:pointer}

/* compare tray */
#tray{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--rule);
  box-shadow:0 -4px 20px rgba(25,22,39,.09);padding:.7rem 0;z-index:50;transform:translateY(110%);
  transition:transform .2s}
#tray.on{transform:none}
#tray .in{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
#tray .items{display:flex;gap:.4rem;flex-wrap:wrap;flex:1}
#tray .it{font-size:.76rem;background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:.2rem .45rem;
  display:inline-flex;gap:.35rem;align-items:center}
#tray .it button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.9rem;line-height:1;padding:0}
#traycount{display:none;font-size:.82rem;color:var(--muted)}
/* On a phone the tray must stay a thin bar: naming every selection pushed it to a
   third of the viewport and buried the results behind it. */
@media(max-width:680px){
  #tray .items{display:none}
  #traycount{display:inline}
  #tray .in{flex-wrap:nowrap;gap:.5rem}
  #tray #gocompare{margin-left:auto;white-space:nowrap}
}

/* ---------- bars & viz ---------- */
.bar{position:relative;height:7px;background:var(--sunk);border-radius:99px;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--brand);border-radius:99px}
.bar i.manual{background:var(--manual)}
.legend{display:flex;flex-wrap:wrap;gap:.45rem .9rem;font-size:.76rem;color:var(--muted);margin-top:.6rem}
.legend span{display:inline-flex;align-items:center;gap:.32rem}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;border:1px solid currentColor}

.callout{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:var(--r);padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.5rem}
.callout .eyebrow{color:var(--brand)}
.note{border:1px solid var(--rule);background:var(--sunk);border-radius:var(--r);padding:1rem 1.1rem;font-size:.87rem}
.warnbox{border:1px solid var(--conflict);background:var(--conflict-soft);border-radius:var(--r);padding:1rem 1.1rem;font-size:.87rem}

/* hero */
.hero{padding:clamp(2.2rem,5vw,3.4rem) 0 .5rem;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,3rem);align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2rem,5vw,3.15rem)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:0;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface);overflow:hidden;margin-top:1.4rem}
.statrow div{padding:.8rem .9rem;border-right:1px solid var(--rule)}
.statrow div:last-child{border-right:0}
.statrow b{display:block;font-family:var(--mono);font-size:1.28rem;color:var(--ink);font-weight:600;line-height:1.1}
.statrow span{font-size:.73rem;color:var(--muted);line-height:1.35;display:block;margin-top:.2rem}
@media(max-width:640px){.statrow div{border-right:0;border-bottom:1px solid var(--rule)}
 .statrow div:last-child{border-bottom:0}}

.qlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem;margin-top:1.2rem}
.ql{display:flex;flex-direction:column;gap:.28rem;padding:1rem 1.1rem;text-decoration:none;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);transition:border-color .15s,transform .15s}
.ql:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.ql b{color:var(--ink);font-size:.97rem}
.ql span{color:var(--muted);font-size:.83rem;line-height:1.45}

ul.clean{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
ul.bul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem}
ul.bul li::marker{color:var(--brand)}

/* compare table -> mobile cards */
@media(max-width:720px){
  table.cmp thead{display:none}
  table.cmp tr{display:block;border-bottom:1px solid var(--rule);padding:.5rem 0}
  table.cmp td{display:grid;grid-template-columns:9rem 1fr;gap:.5rem;border:0;padding:.3rem .7rem}
  table.cmp td::before{content:attr(data-l);font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);align-self:center}
  table.cmp td>.lc,table.cmp td>.chip{justify-self:start}
  table.cmp td{align-items:center}
  table.cmp td.rowh{background:var(--sunk);font-weight:600;grid-template-columns:1fr}
  table.cmp td.rowh::before{content:""}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{header.site,footer.site,#tray,.controls{display:none}}


/* ============================ COMMERCIAL DECISION LAYER (RC v2) ============================ */
/* Section rhythm: alternating grounds give the page breathing room without new colour. */
section.band{background:var(--band);border-block:1px solid var(--rule-soft);
  margin-block:2.4rem;padding-block:2.2rem 2.4rem;
  padding-inline:clamp(1rem,3.5vw,2rem);margin-inline:calc(-1*clamp(1rem,3.5vw,2rem));border-radius:var(--r)}
section{padding-top:2.6rem}
.narrow{max-width:66ch}
.small{font-size:.84rem}
.pad{padding:1.15rem 1.25rem}
.pad-s{padding:.8rem}

/* hero */
.hero{display:grid;gap:clamp(1.4rem,4vw,2.6rem);align-items:center;padding:2.6rem 0 1.4rem}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr}}
.herocard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem;box-shadow:var(--shadow)}
.herocard .pvis{margin:0}
.herocta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.btn-p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn-ghost{background:transparent}
.btn.is-inert{opacity:.55;cursor:not-allowed;border-style:dashed}

/* shortlist routes */
.routes{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:640px){.routes{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.routes{grid-template-columns:1fr 1fr 1fr 1fr}}
.route{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem .6rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:.85rem .95rem;text-decoration:none;color:var(--ink);transition:border-color .14s,transform .14s}
.route:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.route .rl{grid-column:1;grid-row:1;font-weight:600;font-size:.95rem;line-height:1.3}
.route .rs{grid-column:1;grid-row:2;color:var(--muted);font-size:.79rem;line-height:1.4}
.route .rn{grid-column:2;grid-row:1/3;font-family:var(--mono);font-size:1.5rem;color:var(--brand);
  font-variant-numeric:tabular-nums;align-self:center;font-weight:600}

/* product cards */
.pcard{display:flex;flex-direction:column;overflow:hidden;transition:border-color .14s,transform .14s}
.pcard:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.pcard .art{display:block;position:relative;background:var(--band-warm);
  border-bottom:1px solid var(--rule-soft);padding:.55rem}
/* The base .mechtag rule anchors to the BOTTOM of its box. This card variant anchors to
   the top, so without resetting `bottom` both offsets resolve at once and the absolutely
   positioned span stretches the full height of the art area — an empty bordered box over
   a third of every card image. It must size to its own text. */
.pcard .art .mechtag{position:absolute;left:.7rem;top:.6rem;bottom:auto;right:auto;height:auto;width:auto;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1px solid var(--rule-soft);
  padding:.16rem .4rem;border-radius:3px}
.pcard .bd{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pcard .brand{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pcard h3{font-size:1.02rem;line-height:1.25;margin:-.15rem 0 0}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard h3 a:hover{color:var(--brand)}
.cardprice{font-family:var(--mono);font-size:.86rem;color:var(--ink);font-weight:600}
/* The visual box holds the same aspect ratio in State A and State B, so swapping a
   drawing for a photograph causes no reflow and no layout shift. */
.pvis{margin:0;aspect-ratio:var(--ar,420/230);display:flex;align-items:center;justify-content:center}
.pvis svg{display:block;width:100%;height:auto}
.pvis-b{position:relative}
.pvis-b img{display:block;width:100%;height:100%;object-fit:contain;border-radius:calc(var(--r) - 4px)}
.imgcredit{position:absolute;right:.4rem;bottom:.3rem;font-size:.64rem;color:var(--muted);
  background:var(--surface);border-radius:3px;padding:.1rem .3rem;opacity:.9}
/* PURRINDEX-originated editorial assets. .pvis is display:flex, so a STATIC figcaption
   becomes a flex sibling and squeezes the image to half width on a narrow screen. Stack
   the figure instead. The chip stays absolute and needs no stacking, but sharing one rule
   keeps the two forms from drifting apart. */
.pvis-ai{position:relative;background:none;flex-direction:column;justify-content:center}
.pvis-ai img{flex:0 1 auto;min-height:0}
/* The mandated disclosure is not body copy. The rule above it is what tells a reader
   where the required statement ends and site opinion begins; without it the two render as
   one undifferentiated grey block. Restored from the pilot-approved presentation. */
.aicap-long{position:static;display:block;width:100%;flex:0 0 auto;
  margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--rule-soft);
  font-size:.74rem;line-height:1.45;color:var(--muted);white-space:normal}
@media(max-width:560px){.aicap-long{font-size:.72rem}}
/* Bottom-RIGHT, and above the card furniture. In a product card .mechtag is an opaque
   absolutely-positioned box that stretches the full height of the art area at z-index 2,
   so a chip at bottom-left sits behind it and the disclosure is not shown at all. The
   right edge is clear, and is where .imgcredit already puts the equivalent third-party
   credit. */
.aicap-chip{position:absolute;right:.4rem;bottom:.35rem;z-index:3;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface);
  border:1px solid var(--rule-soft);border-radius:3px;padding:.12rem .32rem;line-height:1.2}
.cmpshot{display:block;width:100%;max-width:120px;height:auto;margin:0 0 .4rem;border-radius:6px}
/* The comparison tool's image slot. The disclosure is a STATIC caption under the
   thumbnail, not the absolutely-positioned card chip: a table header is not a positioned
   box, and a caption that can be read by everyone is preferable to one that overlaps the
   image. */
.cmpfig{margin:0 0 .35rem;max-width:120px}
.cmpfig .cmpshot{margin:0 0 .25rem}
.cmpai,.cmpcredit{font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:400;line-height:1.25}
.cmpcredit{font-family:inherit;font-size:.6rem;letter-spacing:0;text-transform:none}
.cmpbuy{display:inline-block;margin-top:.35rem;font-size:.72rem;font-weight:600}

/* decision signals on a card */
ul.sigs{list-style:none;margin:.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.32rem}
ul.sigs li{position:relative;padding-left:1.05rem;font-size:.845rem;line-height:1.4;color:var(--body)}
ul.sigs li::before{position:absolute;left:0;top:.03rem;font-family:var(--mono);font-size:.8rem}
ul.sigs li.sig-fit::before{content:"✓";color:var(--manual)}
ul.sigs li.sig-con::before{content:"·";color:var(--muted);font-weight:700}
.cardwarn{font-size:.8rem;line-height:1.4;color:var(--conflict);background:var(--conflict-soft);
  border-radius:6px;padding:.42rem .55rem;margin:.1rem 0 0}
.pcard .meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-top:auto;padding-top:.3rem}
.docpip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.docpip i{display:block;width:34px;height:4px;border-radius:2px;background:var(--rule);position:relative}
.docpip i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--brand);border-radius:2px}
.chip.mfr-lite{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.cardact{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  border-top:1px solid var(--rule-soft);margin-top:.55rem;padding-top:.7rem}
.cardact .btn{padding:.4rem .75rem;font-size:.82rem}
.cmp-check{font-size:.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem;cursor:pointer}

/* product page head */
.phead{display:grid;gap:clamp(1.2rem,3.5vw,2.2rem);align-items:start;padding-top:1.6rem}
@media(min-width:900px){.phead{grid-template-columns:1.1fr .9fr}}
.phead h1{margin:.35rem 0 .5rem}
.pheadart{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.9rem;
  box-shadow:var(--shadow)}
.pbadges{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:.9rem 0 0}
.pband{font-family:var(--mono);font-size:.9rem;font-weight:600;color:var(--ink);
  background:var(--warm-soft);border:1px solid var(--edge);border-radius:6px;padding:.2rem .5rem}
.decsum{background:var(--band);border:1px solid var(--rule-soft);border-left:3px solid var(--brand);
  border-radius:var(--r);padding:1rem 1.15rem;margin-top:1.2rem}
.decsum h2{font-size:.72rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.45rem}
.decsum p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink)}

/* decision lists */
ul.declist{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
ul.declist li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.5}
ul.declist li::before{position:absolute;left:0;top:.06rem;width:1.05rem;text-align:center;
  font-family:var(--mono);font-size:.85rem}
ul.declist.fit li::before{content:"✓";color:var(--manual)}
ul.declist.exc li::before{content:"✕";color:var(--conflict)}
ul.declist.con li::before{content:"→";color:var(--brand)}
ul.declist.res li::before{content:"!";color:var(--retail);font-weight:700}
ul.declist.sil li::before{content:"?";color:var(--muted)}
.fitgrid .card{height:100%}
.fith{font-size:1rem;margin-bottom:.5rem}
.fith-x{color:var(--conflict)}
.specgroup{font-size:1.05rem;margin-bottom:.45rem}

/* tiles */
.diffgrid .tile{display:block;text-decoration:none;color:var(--body);transition:border-color .14s,transform .14s}
.diffgrid .tile:hover{border-color:var(--brand-line);transform:translateY(-1px)}
.diffgrid .tile h3{font-size:1.05rem;margin-bottom:.4rem}
.diffgrid .tile p{font-size:.88rem;line-height:1.55;margin:0 0 .6rem}
.diffgrid .more{font-size:.83rem;color:var(--brand);font-weight:600}

/* trust row */
.trustrow{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin-top:1.4rem}
@media(min-width:820px){.trustrow{grid-template-columns:repeat(4,1fr)}}
.trustrow div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.85rem .95rem}
.trustrow b{display:block;font-family:var(--mono);font-size:1.3rem;color:var(--ink)}
.trustrow span{font-size:.78rem;color:var(--muted);line-height:1.35;display:block;margin-top:.15rem}

/* buying options */
.buybox{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.15rem 1.25rem}
.buybox h3{font-size:1.05rem;margin-bottom:.35rem}
ul.offers{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0 0}
.offer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--band);border:1px solid var(--rule-soft);border-radius:8px;padding:.65rem .8rem}
.offer .ol{display:flex;flex-direction:column;gap:.12rem}
.offer .ol .muted{font-size:.78rem}
.inertnote{margin-top:.9rem;padding-top:.75rem;border-top:1px dashed var(--rule)}

/* compare verdict */
.verdict{background:var(--band);border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:1.2rem 1.3rem;margin:1.4rem 0}
.verdict .vhead h2{font-size:1.15rem;margin-bottom:.3rem}
.vcols{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:760px){.vcols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.vcol{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:.9rem 1rem}
.vcol h3{font-size:.95rem;margin-bottom:.45rem}
.vcol h3 a{color:var(--ink)}
.vnone{margin-top:1rem;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:.9rem 1rem}
.vnone h3{font-size:.95rem;margin-bottom:.45rem}

/* shortlist page */
.critbox{background:var(--band);border:1px solid var(--rule-soft);border-radius:var(--r);
  padding:1.05rem 1.2rem;margin-top:1.1rem}
.critbox h2{font-size:.72rem;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.4rem}
.critbox p{margin:0 0 .5rem;font-size:.92rem;line-height:1.55}

/* litter routes */
.litroutes{display:grid;gap:.6rem;grid-template-columns:1fr;margin:1.1rem 0 1.2rem}
@media(min-width:700px){.litroutes{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.litroutes{grid-template-columns:1fr 1fr 1fr}}
.lroute{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .85rem}
.lrname{font-weight:600;font-size:.92rem;color:var(--ink);text-decoration:none;display:block}
a.lrname:hover{color:var(--brand)}
.lrstats{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.35rem}
.lrstat{font-size:.76rem;color:var(--body)}
.lrstat b{font-family:var(--mono);color:var(--ink)}
.lrnone{font-size:.78rem;color:var(--muted);font-style:italic}
.spread{background:var(--warm-soft);border:1px solid var(--edge);border-radius:8px;
  padding:.7rem .85rem;font-size:.9rem;line-height:1.55;margin:.9rem 0 0}

@media(max-width:560px){
  .pad{padding:1rem .95rem}
  ul.declist li{padding-left:1.3rem;font-size:.9rem}
  ul.declist li::before{width:.95rem}
  section.band{padding-inline:1rem;margin-inline:-1rem}
  .decsum{padding:.9rem 1rem}
  .offer{align-items:flex-start;flex-direction:column;gap:.55rem}
  .offer .btn{width:100%;text-align:center}
  .cardact{flex-wrap:wrap;gap:.5rem}
}