/* ═══════════════════════════════════════════════════════════════
   CARFAILURE design system.
   Identity: workshop manual meets road signage. Paper white,
   graphite ink, service-lamp amber. Barlow Condensed for display
   (highway-sign DNA), IBM Plex Sans for body, Plex Mono for data.
   Signature: the stamped verdict plate answering "safe to drive?"
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#FBFAF6;
  --paper2:#F3F1E9;
  --ink:#16181B;
  --ink2:#4A4F57;
  --line:#E2DFD5;
  --line2:#CFCBBD;
  --amber:#E8930C;
  --amber-deep:#8A5200;   /* link colour — passes contrast on paper */
  --red:#C0392B;
  --red-deep:#8E2A20;
  --green:#1E7F4F;
  --panel:#14161A;        /* instrument inset */
  --panel2:#1D2127;
  --panel-line:#333A45;
  --docket:#F7F0D8;
  --docket-rule:#EBE1BE;
  --docket-ink:#23201A;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',Roboto,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1080px;
  --maxr:720px;           /* reading measure */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--amber-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.hazard{height:5px;background:repeating-linear-gradient(115deg,var(--amber) 0 12px,var(--ink) 12px 24px)}

/* ── header ─────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .in{
  max-width:var(--maxw);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.brand{
  font-family:var(--display);font-weight:700;font-size:24px;
  letter-spacing:.1em;color:var(--ink);text-decoration:none;white-space:nowrap;
}
.brand b{color:var(--amber);font-weight:700}
.site-nav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.site-nav a{
  font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);text-decoration:none;
}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink)}
.site-nav .cta{
  background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:6px;letter-spacing:.1em;
}
.site-nav .cta:hover{background:var(--amber);color:var(--ink)}

/* ── layout ─────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.read{max-width:var(--maxr)}
main{padding:34px 0 56px}
.crumbs{
  font-family:var(--mono);font-size:12.5px;color:var(--ink2);
  margin:0 0 22px;letter-spacing:.02em;
}
.crumbs a{color:var(--ink2)}
.crumbs a:hover{color:var(--ink)}
.eyebrow{
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 6px;
}
h1{
  font-family:var(--display);font-weight:700;line-height:1.04;
  font-size:clamp(34px,5.6vw,54px);letter-spacing:.01em;margin:0 0 14px;
  text-wrap:balance;
}
.lede{font-size:19px;color:var(--ink2);margin:0 0 8px;max-width:62ch}
h2{
  font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,31px);
  letter-spacing:.02em;margin:44px 0 14px;line-height:1.1;
}
h3{font-family:var(--body);font-weight:600;font-size:18px;margin:26px 0 8px}
p{margin:0 0 16px;max-width:70ch}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:68ch}
li{margin-bottom:8px}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.small{font-size:14px;color:var(--ink2)}
.mono{font-family:var(--mono)}

/* ── verdict plate — the signature ──────────────────────────── */
.plate{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--panel-line);border-radius:12px;
  color:#E9ECF0;display:flex;gap:18px;align-items:center;
  padding:18px 20px;margin:26px 0 30px;max-width:var(--maxr);
  box-shadow:0 12px 28px rgba(22,24,27,.14);
  position:relative;overflow:hidden;
}
.plate::before{ /* rivet corners */
  content:"";position:absolute;inset:7px;pointer-events:none;border-radius:8px;
  background:
    radial-gradient(circle 3px at 4px 4px,#3d434d 98%,transparent) top left/8px 8px no-repeat,
    radial-gradient(circle 3px at 4px 4px,#3d434d 98%,transparent) top right/8px 8px no-repeat,
    radial-gradient(circle 3px at 4px 4px,#3d434d 98%,transparent) bottom left/8px 8px no-repeat,
    radial-gradient(circle 3px at 4px 4px,#3d434d 98%,transparent) bottom right/8px 8px no-repeat;
}
.plate .lamp{
  flex:0 0 auto;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0E1013;border:2px solid var(--panel-line);
}
.plate .lamp svg{width:32px;height:32px}
.plate .gl{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plate.stop .lamp{border-color:var(--red);box-shadow:0 0 18px rgba(192,57,43,.5)}
.plate.stop .gl{stroke:#F0655A}
.plate.soon .lamp{border-color:var(--amber);box-shadow:0 0 18px rgba(232,147,12,.45)}
.plate.soon .gl{stroke:var(--amber)}
.plate.ok .lamp{border-color:var(--green);box-shadow:0 0 16px rgba(30,127,79,.4)}
.plate.ok .gl{stroke:#4FCE8E}
.plate .word{
  font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.1;margin:0 0 2px;
}
.plate.stop .word{color:#F0655A}
.plate.soon .word{color:var(--amber)}
.plate.ok .word{color:#4FCE8E}
.plate .why{margin:0;color:#C7CCD4;font-size:15.5px;line-height:1.5;max-width:56ch}
.plate .tag{
  position:absolute;top:0;right:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:#6E7683;padding:6px 12px;text-transform:uppercase;
}

/* ── cause table ────────────────────────────────────────────── */
.causes{border-top:2px solid var(--ink);max-width:var(--maxr)}
.causes .row{
  display:grid;grid-template-columns:1fr auto;gap:4px 18px;
  padding:16px 2px;border-bottom:1px solid var(--line);
}
.causes .n{font-weight:600;font-size:17px}
.causes .n .lk{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border:1px solid var(--line2);border-radius:99px;color:var(--ink2);
  margin-left:8px;vertical-align:2px;white-space:nowrap;
}
.causes .row.high .lk{border-color:var(--amber);color:var(--amber-deep)}
.causes .d{grid-column:1;color:var(--ink2);font-size:15.5px;line-height:1.55;max-width:58ch}
.causes .c{
  grid-row:1 / span 2;align-self:start;font-family:var(--mono);
  font-size:14.5px;color:var(--amber-deep);white-space:nowrap;padding-top:2px;
}
@media(max-width:560px){
  .causes .row{grid-template-columns:1fr}
  .causes .c{grid-row:auto}
}

/* ── info boxes ─────────────────────────────────────────────── */
.box{
  border:1px solid var(--line);border-left:4px solid var(--line2);
  background:#fff;border-radius:8px;padding:16px 18px;margin:20px 0;max-width:var(--maxr);
}
.box.warn{border-left-color:var(--amber);background:#FCF6E9}
.box.stop{border-left-color:var(--red);background:#FBEFED}
.box strong{display:block;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;font-size:15px;margin-bottom:4px}
.box p:last-child{margin-bottom:0}

/* ── docket (kept from the tool — the shop-notes artifact) ──── */
.docket{
  background:var(--docket);color:var(--docket-ink);border-radius:4px;
  padding:18px 20px 22px;font-family:var(--mono);font-size:14px;line-height:1.62;
  box-shadow:0 10px 26px rgba(22,24,27,.18);max-width:var(--maxr);
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,var(--docket-rule) 27px 28px);
  background-position:0 44px;
}
.docket .stamp{
  font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#8A8368;border-bottom:1px solid var(--docket-rule);
  padding-bottom:8px;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.docket ul{margin:0;padding-left:18px}
.docket li{margin-bottom:9px}
.docket li::marker{color:#9A9270}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:var(--maxr);border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 2px;
  font-weight:600;font-size:17px;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:12px;
  font-family:var(--display);font-size:24px;color:var(--amber-deep);
}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 2px 18px;color:var(--ink2);max-width:62ch}
.faq .a p:last-child{margin-bottom:0}

/* ── cards & grids (hubs, homepage) ─────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:18px 0 6px}
.tile{
  display:block;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:16px 16px 14px;text-decoration:none;color:var(--ink);
  transition:border-color .15s ease, transform .15s ease;
}
.tile:hover{border-color:var(--amber);transform:translateY(-1px);color:var(--ink)}
.tile .t{font-weight:600;font-size:16.5px;line-height:1.35;display:block;margin-bottom:5px}
.tile .s{font-size:14px;color:var(--ink2);line-height:1.5;display:block}
.tile .code{
  font-family:var(--mono);font-weight:600;font-size:19px;color:var(--amber-deep);
  display:block;margin-bottom:3px;letter-spacing:.05em;
}
.tile .sev{
  float:right;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;border:1px solid;
}
.sev.stop{color:var(--red-deep);border-color:#E5B3AD;background:#FBEFED}
.sev.soon{color:var(--amber-deep);border-color:#EDD3A4;background:#FCF6E9}
.groups h2{margin-top:38px}
.linkline{margin:10px 0 0}
.linkline a{font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px;text-decoration:none}
.linkline a::after{content:" →"}

/* related strip */
.related{margin-top:44px;padding-top:8px}
.related h2{font-size:22px}
.related .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* ── buttons ────────────────────────────────────────────────── */
.btn-a{
  display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:var(--ink);
  font-family:var(--display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:17px;text-decoration:none;padding:14px 26px;border-radius:8px;border:none;cursor:pointer;
}
.btn-a:hover{background:var(--ink);color:var(--paper)}
.btn-b{
  display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);
  border:1px solid var(--line2);border-radius:8px;padding:12px 20px;
  font-family:var(--body);font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;
}
.btn-b:hover{border-color:var(--ink)}

/* ── homepage hero ──────────────────────────────────────────── */
.hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(70% 120% at 85% -10%,rgba(232,147,12,.10),transparent 60%),
    var(--paper);
}
.hero .in{max-width:var(--maxw);margin:0 auto;padding:56px 20px 50px;display:grid;gap:36px;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);align-items:center}
@media(max-width:820px){.hero .in{grid-template-columns:1fr;padding:42px 20px 38px}}
.hero h1{font-size:clamp(40px,6.4vw,66px);margin-bottom:16px}
.hero .lede{font-size:20px;margin-bottom:26px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--panel-line);border-radius:14px;padding:24px 22px;
  color:#C7CCD4;box-shadow:0 18px 40px rgba(22,24,27,.22);
}
.hero-panel .hp-title{
  font-family:var(--display);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  font-size:13px;color:#8A93A1;margin:0 0 14px;
}
.hero-panel .lamps{display:flex;gap:16px;margin-bottom:16px}
.hero-panel .lampr{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hero-panel .lampc{
  width:54px;height:54px;border-radius:50%;background:#0E1013;
  border:2px solid var(--panel-line);display:flex;align-items:center;justify-content:center;
}
.hero-panel .lampc svg{width:30px;height:30px}
.hero-panel .gl{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-panel .lampr span{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.hero-panel .r{border-color:var(--red);box-shadow:0 0 14px rgba(192,57,43,.45)}.hero-panel .r .gl{stroke:#F0655A}
.hero-panel .am{border-color:var(--amber);box-shadow:0 0 14px rgba(232,147,12,.4)}.hero-panel .am .gl{stroke:var(--amber)}
.hero-panel .g{border-color:var(--green);box-shadow:0 0 12px rgba(30,127,79,.35)}.hero-panel .g .gl{stroke:#4FCE8E}
.hero-panel p{color:#9AA2AE;font-size:14px;line-height:1.55;margin:0}

.section{padding:8px 0 4px}
.section .wrap>.eyebrow{margin-top:34px}

/* method strip */
.method{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:20px 0 10px}
.method .m{border-top:2px solid var(--ink);padding-top:12px}
.method .m b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.03em;display:block;margin-bottom:6px}
.method .m p{font-size:15px;color:var(--ink2);margin:0}

/* ── footer ─────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);background:var(--paper2);margin-top:30px}
.site-foot .in{
  max-width:var(--maxw);margin:0 auto;padding:34px 20px 30px;
  display:grid;gap:28px;grid-template-columns:1.4fr 1fr 1fr;
}
@media(max-width:720px){.site-foot .in{grid-template-columns:1fr}}
.site-foot h4{
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 10px;
}
.site-foot p{font-size:14px;color:var(--ink2);max-width:48ch}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:7px}
.site-foot a{font-size:14.5px;color:var(--ink2);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .legal{
  grid-column:1 / -1;border-top:1px solid var(--line);padding-top:16px;
  font-size:12.5px;color:var(--ink2);
}

/* ═══════════════════════════════════════════════════════════════
   v2 additions: brand, article layout, images, ads, products,
   recalls, mobile nav, scroll-to-top, full responsive pass.
   ═══════════════════════════════════════════════════════════════ */

/* accessibility */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
html{scroll-padding-top:84px}

/* header/brand */
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand svg.logo{height:38px;width:auto;display:block}
.brand-foot svg.logo-foot{height:56px;width:auto;display:block;color:var(--ink)}
.site-head .in{gap:16px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:8px;width:44px;height:40px;cursor:pointer;padding:0;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.navtoggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s ease,opacity .18s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* article furniture */
.byline{font-family:var(--mono);font-size:13px;color:var(--ink2);display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.cover{margin:0 0 26px}
.cover img{width:100%;height:auto;border-radius:12px;display:block;background:var(--panel)}
.fig{margin:26px 0;max-width:var(--maxr)}
.fig img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block;background:#fff}
.fig figcaption{font-size:14px;color:var(--ink2);margin-top:8px;font-style:italic}
.takeaways{background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:10px;padding:18px 20px;margin:0 0 26px;max-width:var(--maxr)}
.takeaways h2{font-size:19px;margin:0 0 10px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--display)}
.takeaways ul{margin:0;padding-left:20px}
.takeaways li{margin-bottom:7px;font-size:16px}
.toc{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:26px 0;max-width:var(--maxr)}
.toc .toch{font-family:var(--display);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:6px}
.toc a{color:var(--amber-deep);text-decoration:none}
.toc a:hover{text-decoration:underline;color:var(--ink)}
.readmore{list-style:none;padding:0;margin:0}
.readmore li{margin-bottom:9px}
.readmore a{font-weight:600}
h2[id],h3[id]{scroll-margin-top:88px}
.cathead{font-family:var(--display);font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);margin:26px 0 10px}
.cathead a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--amber)}
.cathead a:hover{color:var(--amber-deep)}

/* guide tiles */
.guidegrid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.gtile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .15s ease}
.gtile:hover{border-color:var(--amber);transform:translateY(-2px);color:var(--ink)}
.gtile img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;background:var(--panel)}
.gtile .gt{font-weight:600;font-size:17px;line-height:1.35;padding:14px 16px 6px}
.gtile .gs{font-size:14.5px;color:var(--ink2);line-height:1.5;padding:0 16px 10px}
.gtile .gm{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);padding:0 16px 14px;margin-top:auto}

/* advertising */
.adwrap{margin:30px auto;max-width:var(--maxr);min-height:100px;text-align:center;overflow:hidden}
.adwrap.ad-foot{margin-top:44px}
.adlabel{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#A9A395;margin-bottom:6px}
.adsbygoogle{display:block;min-height:90px}

/* affiliate products */
.prodblock{margin:42px 0 10px;max-width:var(--maxr)}
.prodblock h2{margin-top:0}
.afdisc{font-size:13.5px;color:var(--ink2);background:var(--paper2);border-radius:8px;padding:9px 12px;margin:0 0 16px}
.prodgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prod{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;display:flex;flex-direction:column}
.pmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pcat{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);border-radius:99px;padding:2px 8px}
.pprice{font-family:var(--mono);font-size:15px;color:var(--amber-deep);font-weight:600}
.pname{font-size:17px;margin:0 0 8px;line-height:1.3}
.pwhy{font-size:14.8px;color:var(--ink2);line-height:1.55;margin:0 0 10px}
.pbest{font-size:14px;color:var(--ink2);margin:0 0 14px}
.pbtn{margin-top:auto;display:block;text-align:center;background:var(--amber);color:var(--ink);font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:16px;text-decoration:none;padding:12px 16px;border-radius:8px}
.pbtn:hover{background:var(--ink);color:var(--paper)}

/* recalls tool */
.recall-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin:0 0 20px;max-width:var(--maxr)}
.rrow{display:grid;gap:12px;grid-template-columns:110px 1fr 1fr}
.recall-form .fld{display:flex;flex-direction:column;gap:5px}
.recall-form .fld span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.recall-form input{padding:12px 13px;border:1px solid var(--line2);border-radius:8px;font:inherit;font-size:16px;background:var(--paper);min-width:0}
.recall-form input:focus{outline:2px solid var(--amber);outline-offset:1px}
.rbtns{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap}
.rnote{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.recall-out{max-width:var(--maxr)}
.rcard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:15px 17px;margin:0 0 13px}
.rcard.ok{border-left-color:var(--green)}
.rcard.cmp{border-left-color:var(--amber)}
.rcard h3{margin:0 0 6px;font-size:16.5px}
.rcard .rmeta{font-family:var(--mono);font-size:12px;color:var(--ink2);margin:0 0 8px}
.rcard p{font-size:15px;margin:0 0 8px;color:var(--ink2)}
.rsum{font-family:var(--display);font-size:22px;letter-spacing:.04em;text-transform:uppercase;margin:22px 0 12px}
.rspin{font-family:var(--mono);font-size:14px;color:var(--ink2);padding:14px 0}

/* legal pages read a bit tighter */
.legalpage h2{font-size:24px;margin-top:34px}
.legalpage p{font-size:16.5px}

/* footer */
.site-foot .in{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.fcol h4{margin-bottom:12px}
.fbrand p{font-size:14.5px;line-height:1.6}
.fmail a{font-family:var(--mono);font-size:14px;color:var(--amber-deep)}
.legal p{margin-bottom:10px}
.legal .copy{font-family:var(--mono);font-size:12px}

/* scroll to top */
.totop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:none;cursor:pointer;display:flex;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease,background .15s ease;z-index:90;
  box-shadow:0 6px 18px rgba(22,24,27,.28)}
.totop.show{opacity:1;visibility:visible}
.totop:hover{background:var(--amber);color:var(--ink)}
.totop svg{width:22px;height:22px}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width:900px){
  .site-foot .in{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1 / -1}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .site-head .in{padding:12px 16px;flex-wrap:wrap}
  .navtoggle{display:flex}
  .site-nav{display:none;flex-basis:100%;flex-direction:column;gap:0;margin:10px 0 2px;align-items:stretch}
  .site-nav.open{display:flex}
  .site-nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:17px}
  .site-nav a:last-child{border-bottom:none}
  .site-nav .cta{text-align:center;margin-top:10px;padding:13px 18px}
  .wrap{padding:0 16px}
  h1{font-size:clamp(28px,7.4vw,38px)}
  h2{font-size:clamp(22px,5.6vw,27px)}
  .lede{font-size:17.5px}
  p,ul,ol{max-width:none}
  .plate{flex-direction:column;text-align:center;gap:12px;padding:18px 16px}
  .plate .why{max-width:none}
  .hero .in{padding:32px 16px 30px;gap:26px}
  .hero h1{font-size:clamp(32px,8.6vw,42px)}
  .rrow{grid-template-columns:1fr 1fr;gap:10px}
  .rrow .fld:first-child{grid-column:1 / -1}
  .prodgrid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .guidegrid{grid-template-columns:1fr}
  .site-foot .in{grid-template-columns:1fr;padding:28px 16px 26px}
  .toc,.takeaways,.recall-form{padding:14px 16px}
  .totop{right:12px;bottom:12px;width:42px;height:42px}
  .causes .row{grid-template-columns:1fr}
  .method{grid-template-columns:1fr}
  .adwrap{margin:24px auto}
  .brand svg.logo{height:32px}
  .byline{font-size:12px}
}
@media (max-width:380px){
  .wrap{padding:0 13px}
  h1{font-size:26px}
  .brand svg.logo{height:29px}
  .btn-a{font-size:15px;padding:12px 18px}
}
@media print{
  .site-head,.site-nav,.totop,.adwrap,.prodblock,.toc{display:none!important}
  body{background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* ── mobile fixes found in audit ───────────────────────────────── */
/* grid children default to min-width:auto, which stops them shrinking
   and blew the recall form past the viewport on phones */
.recall-form .fld{min-width:0}
.recall-form input{width:100%}

/* tap targets: list links need real height on touch screens */
@media (max-width:760px){
  .site-foot li a,.toc li a,.readmore a{display:inline-block;padding:7px 0;line-height:1.4}
  .crumbs a{display:inline-block;padding:5px 0}
  .site-foot li{margin-bottom:2px}
  .toc li{margin-bottom:2px}
}
/* category headings are primary navigation on mobile — give them tap area */
.cathead a{display:inline-block;padding:6px 0}

/* ── v3: header presence, cover sizing, denser typography ─────────
   The header logo read as too small and the full-bleed 2:1 covers
   dominated symptom and code pages, pushing real content below the
   fold. Bigger brand, shorter covers on reference pages, articles
   keep the full banner. */
.brand svg.logo{height:46px}
.site-head .in{padding-top:14px;padding-bottom:14px}
.site-nav a{font-size:13.5px}

/* reference pages: slim banner, content stays above the fold */
.cover.slim img{aspect-ratio:auto;max-height:200px;object-fit:cover;object-position:center 42%}
.cover img{border:1px solid rgba(0,0,0,.06)}

@media (max-width:760px){
  .brand svg.logo{height:36px}
  .cover.slim img{max-height:132px}
  .site-head .in{padding-top:10px;padding-bottom:10px}
}
@media (max-width:380px){
  .brand svg.logo{height:32px}
}

/* ═══════════════════════════════════════════════════════════════
   v4 — TYPE FLOOR AND CONTRAST
   A measured sweep found every muted label sitting at 10–12.5px,
   and .adlabel failing contrast at 2.41:1. Small mono caps looked
   refined in isolation and read as unusably small in situ,
   especially on phones. Nothing here goes below 13px, and every
   muted colour now clears WCAG AA against the paper background.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --muted:#645E52;   /* was #A9A395 / #8A8474 — now ~5.5:1 on paper */
  --muted2:#4A4F57;
}

/* severity + likelihood + category chips */
.sev{font-size:13px!important;letter-spacing:.1em;padding:3px 9px}
.tag{font-size:13px!important;letter-spacing:.09em}
.lk{font-size:13px!important;letter-spacing:.07em}
.pcat{font-size:13px;letter-spacing:.08em;padding:3px 9px}
.gm{font-size:13px!important;letter-spacing:.08em}

/* breadcrumbs, bylines, notes, copyright */
.crumbs,.crumbs a,.crumbs span{font-size:14px}
.byline,.byline span{font-size:14px;color:var(--muted2)}
.legal .copy{font-size:13.5px;color:var(--muted2)}
.rnote{font-size:13.5px;color:var(--muted2)}
.recall-form .fld span{font-size:13px;color:var(--muted2)}
.toc .toch{font-size:13.5px}
.fig figcaption{font-size:15px;color:var(--muted2)}
.small,.afdisc{font-size:14.5px;color:var(--muted2)}
.pbest{font-size:14.5px}
.adlabel{font-size:12.5px;color:var(--muted);letter-spacing:.14em}
.fmail a{font-size:15px}
.stamp span{font-size:13px}

/* footer link text was fine but the headings were shouty and small */
.site-foot h4{font-size:14.5px;letter-spacing:.14em}
.site-foot li a,.site-foot p{font-size:15px}
.fbrand p{font-size:15px}

/* mobile: nothing under 14px for anything a person has to read */
@media (max-width:760px){
  .crumbs,.crumbs a,.crumbs span{font-size:14px}
  .byline,.byline span{font-size:14px}
  .sev,.tag,.lk,.pcat,.gm{font-size:13.5px!important}
  .site-foot li a,.site-foot p,.fbrand p{font-size:15.5px}
  .legal p{font-size:14.5px}
  .adlabel{font-size:12.5px}
  .pwhy{font-size:15.5px}
  .gtile .gs{font-size:15px}
  .gtile .gt{font-size:17.5px}
}

/* v4b — genuine contrast failures on light backgrounds.
   (Light text inside .plate / .lamp is on a dark gradient and is fine;
   these three sit on paper or on the docket's cream and were failing.) */
.hp-title{color:#4E535B}                 /* was #8A93A1 — 2.97:1 */
.tag{color:#565E6B}                      /* was #6E7683 — 4.39:1 at 13px */
.docket .stamp,.docket .stamp span{color:#6A6448}  /* was #8A8368 — 3.33:1 */
.adlabel{font-size:13px}