/* 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%; }
}