/* Car-site additions on top of the shared system: only parts the Fine Print system lacks. */
.vin { margin-top: var(--s4); border-top: 2px solid var(--ink); padding-top: var(--s2); max-width: 66ch; }
.vin label { display: block; font-size: 17px; color: var(--ink2); }
.vin-row { display: flex; gap: var(--s1); margin-top: 12px; }
.vin input { flex: 1; min-width: 0; font: 600 17px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 12px; border: 1px solid var(--ink); border-radius: 3px; background: #F4F5F2; color: var(--ink); }
.vin input::placeholder { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.vin .btn { padding: 10px 16px; font-size: 16px; border: 0; cursor: pointer; }
.vin-o { margin-top: 12px; font-size: 17px; color: var(--ink2); min-height: 1px; }
.vin-o:empty { display: none; }
ol.checks { padding-left: 1.3em; }
ol.checks li + li { margin-top: 10px; }
@media (max-width: 560px) { .vin-row { flex-direction: column; } .vin .btn { width: 100%; } }
/* Hero on a dark photo: light wash behind the callout column (desktop only), amber leader lines readable on light and dark. */
@media (min-width: 561px) {
  .hero-fig .hf-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 46% 48% at 0% 0%, rgba(231,232,228,.95) 0%, rgba(231,232,228,.88) 55%, rgba(231,232,228,0) 100%); }
  .hero-fig .hf-call { z-index: 2; }
  .hero-fig .hf-lines { z-index: 1; }
}
.hf-lines polyline { stroke: var(--signal); opacity: 1; }
.hf-lines circle { fill: var(--signal); stroke: #fff; }
/* Claims table on phones: two compact lines per product (name + price; then amps · rating · source), no stacked labels. */
@media (max-width: 700px) {
  #claims .ledger tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  #claims .ledger td { display: inline; padding: 0; border: 0; font-size: 15px; }
  #claims .ledger td[data-l]::before { content: none; display: none; }
  #claims .ledger td.p { display: block; margin-bottom: 4px; }
  #claims .ledger td[data-l="Engine rating"]::after, #claims .ledger td[data-l="Box says"]::after { content: " · "; color: var(--muted); }
  #claims .ledger thead { display: none; }
}
/* One chart, two drawings: the wide one on desktop, a narrow one on phones (text stays ~12px). */
.ch-narrow { display: none; }
@media (max-width: 560px) { .ch-wide { display: none; } .ch-narrow { display: block; } }
/* Hero two-part rec: one row per pick (tile, who/name/rating/price, button). */
.hpicks { margin-top: var(--s3); border-top: 2px solid var(--ink); max-width: 46ch; }
.hpick { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.35; }
.hpick b { color: var(--ink); font-size: 17px; }
.hp-who { display: block; font-size: 13px; color: var(--muted); }
.h-tile { display: block; width: 64px; height: 64px; background: var(--taupe); border-radius: 4px; overflow: hidden; }
.h-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6px; }
.hpick .btn { white-space: nowrap; }
.hnote { margin-top: 12px; font-size: 15px; color: var(--ink2); max-width: 46ch; }
/* Engine picker: radio buttons styled as a row of choices; one product card shows at a time (no JS needed). */
.eng-pick > input { position: absolute; opacity: 0; pointer-events: none; }
.eng-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s2) 0 var(--s3); }
.eng-opts label { border: 1px solid var(--ink); border-radius: 3px; padding: 8px 14px; cursor: pointer; font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.2; }
.eng-opts label span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.eng-pick > input:focus-visible + * { outline: none; }
.eng-card { display: none; max-width: 760px; }
.eng-card p { font-size: 16px; margin-top: 8px; max-width: 52ch; }
.eng-card .kicker { margin: 0 0 6px; font-size: 15px; }
.eng-price { font-size: 17px; }
.eng-card .btn.wide, .vin-o .btn.wide { margin-top: 14px; max-width: 360px; }
.vin-o .verdict2 { margin-top: 14px; }
@media (max-width: 560px) {
  .hpick { grid-template-columns: 56px 1fr; } .hpick .btn { grid-column: 1 / -1; text-align: center; }
  .eng-opts label { flex: 1 1 45%; }
}
/* Our picks: three cards, Wirecutter-style (photo, role, benefit, name, rating, price, button). */
.picks3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s2); }
.pk { border-top: 2px solid var(--ink); padding-top: var(--s2); display: flex; flex-direction: column; }
.pk-tile { display: block; background: var(--taupe); border-radius: 4px; aspect-ratio: 4 / 3; overflow: hidden; }
.pk-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 18px; }
.pk-role { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--signal-text); }
.pk h3 { font-size: 20px; line-height: 1.2; margin-top: 4px; }
.pk-name { margin-top: 8px; font-size: 15px; color: var(--ink); }
.pk-meta { margin-top: 2px; font-size: 14px; color: var(--muted); }
.pk-price { margin-top: 10px; font-size: 17px; }
.pk .btn.wide { margin-top: auto; }
.pk-price + .btn { margin-top: 12px; }
/* One section per pick: NOCO photo, who/why/flaws, buy line. */
.dive h2 { margin-bottom: var(--s2); }
.dive-fig { margin: 0 0 var(--s3); max-width: 640px; }
.dive-fig img { width: 100%; height: auto; border-radius: 4px; }
.dive-fig figcaption, .howto-fig figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.dive .read p + p { margin-top: 14px; }
.dive-buy { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule); max-width: 66ch; flex-wrap: wrap; }
.dive-buy b { font-size: 20px; color: var(--ink); }
/* How-to: our diagram beside NOCO's four steps. */
.howto { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.howto-fig { margin: 0; }
.jdiag { width: 100%; height: auto; background: var(--taupe); border-radius: 4px; }
.jd-bat { fill: var(--ink2); } .jd-post { fill: #9aa0a6; } .jd-sign { fill: #fff; font: 800 34px "Archivo", sans-serif; }
.jd-lab { fill: var(--ink); font: 600 13px "Archivo", sans-serif; } .jd-bat + .jd-post { }
.jd-bolt { fill: #9aa0a6; stroke: var(--ink2); stroke-width: 3; }
.jd-red { fill: none; stroke: #C8102E; stroke-width: 7; stroke-linecap: round; } .jd-redc { fill: #C8102E; }
.jd-blk { fill: none; stroke: #111; stroke-width: 7; stroke-linecap: round; } .jd-blkc { fill: #111; }
text.jd-lab[x="140"] { fill: #fff; }
@media (max-width: 860px) { .picks3 { grid-template-columns: 1fr; } .howto { grid-template-columns: 1fr; } }
/* Width: the picks row, how-to and each pick's photo+text row use the full column, not the 66ch reading cap. */
.layout .block > :is(.picks3, .howto, .dive-row) { max-width: none; }
.dive-row { display: grid; grid-template-columns: 320px minmax(0, 66ch); gap: var(--s4); align-items: start; }
.dive-row .dive-fig { margin: 0; max-width: none; }
.dive-row .dive-buy { margin-top: var(--s3); }
@media (max-width: 860px) { .dive-row { grid-template-columns: 1fr; } .dive-row .dive-fig { max-width: 360px; } }
/* Comparison hero: real product photos side by side on one taupe panel, a 2-level callout under each. */
.ph { margin: 0; background: var(--taupe); border-radius: 4px; padding: var(--s3) var(--s3) var(--s2); }
.hero .ph { order: 2; }
.ph-row { display: grid; gap: var(--s3); }
.ph-1 { max-width: 400px; margin: 0 auto; } .ph-2 { grid-template-columns: 1fr 1fr; } .ph-3 { grid-template-columns: 1fr 1fr 1fr; }
.ph-img { display: block; aspect-ratio: 1; }
.ph-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ph-k { margin-top: 10px; font-size: 13px; color: var(--ink2); }
.ph-v { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.ph-v.bad { color: var(--signal-text); }
@media (max-width: 860px) { .hero .ph { order: 0; } }
@media (max-width: 560px) { .ph { padding: var(--s2); } .ph-v { font-size: 16px; } .ph-3 { gap: 10px; } }
/* Related guides: plain list of sibling pages. */
ul.related { list-style: none; border-top: 2px solid var(--ink); max-width: 66ch; }
ul.related li { border-bottom: 1px solid var(--rule); padding: 12px 0; font-size: 17px; }
/* Comparison hero sits in the same 12-column hero grid slot as the photo hero. */
.hero .ph { grid-column: 6 / 13; grid-row: 1; order: 0; }
@media (max-width: 900px) { .hero .ph { grid-column: 1; grid-row: auto; order: 2; } }
.picks3.two { grid-template-columns: 1fr 1fr; max-width: 760px; }
.pk > .pk-role:first-child { margin-top: 0; }
@media (max-width: 860px) { .picks3.two { grid-template-columns: 1fr; } }
/* Trust pages + home index. */
.trust { max-width: 66ch; padding: var(--s4) 0 var(--s5); }
.trust h1 { margin-bottom: var(--s2); }
.trust h2 { margin-top: var(--s4); }
.trust-lede { font-size: 20px; line-height: 1.45; color: var(--ink2); }
ul.plain { padding-left: 1.2em; } ul.plain li + li { margin-top: 10px; }
.home-hero { padding: var(--s5) 0 var(--s3); max-width: 760px; }
.home-hero h1 { font-size: 52px; }
.home-hero .answer { max-width: 60ch; }
ul.guides { list-style: none; border-top: 2px solid var(--ink); max-width: 900px; }
ul.guides li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--s3); }
ul.guides a { color: var(--ink); } ul.guides span { color: var(--ink2); font-size: 16px; }
@media (max-width: 700px) { ul.guides li { grid-template-columns: 1fr; gap: 4px; } .home-hero h1 { font-size: 38px; } }
/* O-pages */
.swarm rect.ok { fill: var(--ink); }
.layout .block > table.ledger.codes { max-width: 420px; }
/* O-pages: compact tables on phones (name on its own line, then the cells inline with their labels). */
@media (max-width: 700px) {
  .ledger.oc tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ledger.oc tr.group { padding: 16px 0 6px; }
  .ledger.oc td { display: inline; padding: 0; border: 0; font-size: 15px; }
  .ledger.oc td.p { display: block; margin-bottom: 4px; font-size: 16px; }
  .ledger.oc td[data-l]::before { content: attr(data-l) ": "; display: inline; margin: 0; color: var(--muted); font-size: 13px; }
  .ledger.oc td[data-l]:not(:last-child)::after { content: " · "; color: var(--muted); }
  .ledger.oc.stack td[data-l] { display: block; margin-top: 2px; }
  .ledger.oc.stack td[data-l]::after { content: none; }
}
@media (max-width: 560px) { .mk-pick .verdict2 { grid-template-columns: minmax(0, 1fr); } .mk-pick .verdict2 > div { display: block; } .mk-pick .verdict2 .v-tile { display: none; } .mk-pick .verdict2 .btn { margin-top: 14px; } }

/* product pages: fit cards line up as a grid */
.fit > p { margin: 0; }
.hero-text .dive-buy { margin: var(--s2) 0; }