:root{
  --ink:#1E2328; --text:#1E2328; --soft:#3A424A; --steel:#5B6670; --chalk:#2F5D8A; --chalk-hover:#244A6F;
  --safety:#F2B705; --safety-hover:#D9A400; --paper:#F6F7F7; --surface:#FFFFFF; --line:#D5D9DD;
  --bar:#E9ECEE; --note-bg:#FFF7D6; --note-line:#C9A100; --head:#1E2328; --head-link:#C9D1D8;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --ui:"Barlow",Arial,Helvetica,sans-serif;
  --ill-line:#1E2328; --ill-body:#3D4650; --ill-grip:#1E2328; --ill-metal:#AEB7BF; --ill-accent:#2F5D8A; --ill-pop:#F2B705; --ill-blade:#D5DBE0;
  --peg:#DDE2E6; --peg-hole:#BCC4CB;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --text:#E4E8EB; --soft:#BCC4CB; --steel:#97A2AC; --chalk:#7FB0E0; --chalk-hover:#A3C7EA;
    --paper:#14181C; --surface:#1C2228; --line:#313A42; --bar:#1A1F24;
    --note-bg:#2E2810; --note-line:#8F7300; --head:#0E1114;
    --ill-line:#0B0E10; --ill-body:#56616C; --ill-grip:#2A3036; --ill-metal:#9AA4AD; --ill-accent:#5C8DBE; --ill-blade:#C3CBD2;
    --peg:#232A31; --peg-hole:#14181C;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
body{margin:0;background:var(--paper);color:var(--text);font:1.075rem/1.7 var(--body);
  padding-bottom:env(safe-area-inset-bottom,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--head)}
img{max-width:100%;height:auto}
a{color:var(--chalk);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.read{max-width:68ch}
.skip{position:absolute;left:-999px;top:0;background:var(--safety);color:#1E2328;padding:.5rem 1rem;font:600 1rem var(--ui);z-index:40}
.skip:focus{left:1rem}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.site-head{background:var(--head);color:#fff;padding-top:env(safe-area-inset-top,0px);margin-top:calc(-1 * env(safe-area-inset-top,0px))}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:.8rem}
.logo{font:700 1.6rem/1 var(--display);color:#fff;text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.logo span{display:inline-block;background:var(--safety);color:#1E2328;padding:.1em .35em;margin-left:.25em}
nav{display:flex;gap:1.4rem;flex-wrap:wrap}
nav a{font:500 1rem var(--ui);color:var(--head-link);text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
nav a:hover{color:#fff}
nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--safety)}
.tape{height:14px;background:
  repeating-linear-gradient(90deg,#1E2328 0 2px,transparent 2px 64px),
  repeating-linear-gradient(90deg,#1E2328 0 1px,transparent 1px 16px) 0 0/100% 7px no-repeat,
  var(--safety)}
.disclose-bar{background:var(--bar);border-bottom:1px solid var(--line);font:.85rem/1.4 var(--ui);color:var(--steel)}
.disclose-bar .wrap{padding-block:.5rem}

/* hero */
.hero{padding:3.5rem 0 3rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem;align-items:center}
.hero h1{font:700 clamp(2.7rem,6.5vw,5.2rem)/.92 var(--display);margin:0 0 1.25rem;max-width:13ch;letter-spacing:-.01em}
.hero p{font-size:1.2rem;max-width:50ch;color:var(--soft);margin:0 0 1.75rem}
.hero .actions{display:flex;gap:.75rem;flex-wrap:wrap}
.proof{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:2rem 0 0;padding:0;list-style:none;font:500 .95rem var(--ui);color:var(--steel)}
.proof li{display:flex;align-items:center;gap:.45rem}
.proof li::before{content:"";width:.6rem;height:.6rem;background:var(--safety);display:inline-block}

/* quick calc card (the one loud element) */
.calc-card{background:var(--surface);border:2px solid var(--text);box-shadow:8px 8px 0 var(--safety);position:relative}
.calc-card .tape{height:12px}
.calc-card .inner{padding:1.4rem 1.5rem 1.5rem}
.calc-card h2{margin:0 0 .25rem;font-size:1.8rem}
.calc-card .sub{margin:0 0 1rem;font:.95rem/1.45 var(--ui);color:var(--steel)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem}
label{display:block;font:600 .9rem/1.3 var(--ui);color:var(--soft)}
label small{font-weight:400;color:var(--steel)}
input,select{display:block;width:100%;margin-top:.3rem;font:500 1.15rem var(--ui);color:var(--text);background:var(--paper);
  border:1px solid var(--line);border-bottom:2px solid var(--steel);padding:.55rem .65rem;border-radius:2px}
input:focus,select:focus{border-bottom-color:var(--safety)}
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:1.25rem 0 1rem}
.readout div{background:var(--paper);padding:.75rem .9rem}
.readout b{display:block;font:700 2.2rem/1 var(--display);color:var(--text)}
.readout span{font:.85rem/1.3 var(--ui);color:var(--steel)}
.calc-card .more{font:600 1rem var(--ui)}

/* buttons */
.btn{display:inline-block;font:600 1.05rem var(--ui);background:var(--chalk);color:#fff;border:0;cursor:pointer;
  padding:.75rem 1.25rem;text-decoration:none;border-radius:3px}
@media (prefers-color-scheme:dark){.btn{background:#2F5D8A}.btn:hover{background:#3B6FA2}}
.btn:hover{background:var(--chalk-hover)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.btn.ghost:hover{background:var(--text);color:var(--paper)}
.btn.buy{background:var(--safety);color:#1E2328}
.btn.buy:hover{background:var(--safety-hover)}

h2{font:700 2.1rem/1.1 var(--display);margin:3rem 0 1rem}
h3{font:600 1.45rem/1.2 var(--display);margin:2rem 0 .5rem}
.section{padding:1rem 0 3rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--text);margin-bottom:0}
.section-head h2{margin-bottom:.6rem}
.section-head a{font:600 1rem var(--ui)}

/* guide list */
.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 2rem}
.guide-list.ruled{border-top:2px solid var(--text)}
.guide-list a,.guide-list .soon{display:block;padding:1.25rem 0 1.4rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.guide-list strong{display:block;font:600 1.4rem/1.2 var(--display);margin-bottom:.3rem}
.guide-list .kind{display:inline-block;font:600 .8rem var(--ui);color:var(--steel);margin-bottom:.35rem}
.guide-list span.desc{color:var(--steel);font-size:.98rem}
.guide-list a:hover strong{color:var(--chalk)}
.guide-list .soon{color:var(--steel)}
.guide-list .soon strong{color:var(--steel)}

/* tool tiles */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1.5rem}
.tool-tile{display:flex;flex-direction:column;gap:.4rem;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--safety);
  padding:1.2rem 1.25rem 1.3rem;text-decoration:none;color:var(--text)}
.tool-tile svg{width:42px;height:42px;color:var(--chalk)}
.tool-tile strong{font:600 1.45rem/1.15 var(--display)}
.tool-tile span{font:.95rem/1.45 var(--ui);color:var(--steel)}
.tool-tile:hover{border-color:var(--text);border-top-color:var(--safety)}
.tool-tile:hover strong{color:var(--chalk)}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.how h3{margin-top:0}
.how p{margin:.25rem 0 0;color:var(--soft)}

/* articles */
.crumbs{font:.9rem var(--ui);color:var(--steel);padding-top:1.5rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--line)}
.crumbs a{color:var(--steel)}
.article-head{padding:1.25rem 0 1.5rem}
.article-head h1{font:700 clamp(2.2rem,5.5vw,3.6rem)/1 var(--display);margin:0 0 1rem}
.byline{font:.95rem var(--ui);color:var(--steel)}
.verdict{background:var(--surface);border:1px solid var(--line);margin:2rem 0;overflow:hidden}
.verdict .body{padding:1.25rem 1.5rem 1.5rem}
.verdict h3{margin-top:0}
.verdict dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;font:1rem var(--ui);margin:1rem 0 1.25rem}
.verdict dt{color:var(--steel)}
.verdict dd{margin:0}
.pick{border-left:4px solid var(--chalk);padding:.25rem 0 .25rem 1.25rem;margin:2.5rem 0}
.pick h3{margin-top:0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;font:1rem/1.5 var(--ui)}
.proscons ul{padding-left:1.1rem;margin:.25rem 0}
.note{background:var(--note-bg);border:1px dashed var(--note-line);padding:.75rem 1rem;font:.95rem/1.5 var(--ui)}
.table-wrap{overflow-x:auto;margin:1.5rem 0}
table{border-collapse:collapse;width:100%;min-width:560px;font:.98rem var(--ui)}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line)}
th{background:#1E2328;color:#fff;font-weight:600}
.related{margin-top:3rem;padding-top:1rem;border-top:2px solid var(--text)}
.related h2{margin-top:.5rem;font-size:1.7rem}
.related ul{padding-left:1.1rem;font:1.05rem/1.7 var(--ui)}

/* tool pages */
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.tool-layout .calc-card{position:sticky;top:96px}
.results-list{font:1rem/1.6 var(--ui);margin:.25rem 0 0;padding-left:1.1rem;color:var(--soft)}
.warn{font:600 .95rem/1.45 var(--ui);color:#9A2B1E;margin:.5rem 0 0}
@media (prefers-color-scheme:dark){.warn{color:#F0907F}}
.gear{background:var(--surface);border:1px solid var(--line);padding:1rem 1.25rem;margin:2rem 0}
.gear h2{font-size:1.5rem;margin:0 0 .5rem}
.gear ul{margin:0;padding-left:1.1rem;font:1rem/1.8 var(--ui)}
.gear p{font:.85rem/1.4 var(--ui);color:var(--steel);margin:.5rem 0 0}
.faq h3{font-size:1.3rem}

.site-foot{background:var(--head);color:#AEB7BF;font:.9rem/1.6 var(--ui);margin-top:4rem}
.site-foot .wrap{padding-block:2rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.site-foot a{color:#DDE3E8}
.site-foot h2{font-size:1.2rem;color:#fff;margin:0 0 .5rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot .fine{grid-column:1/-1;margin:0;border-top:1px solid #313A42;padding-top:1rem}

@media (max-width:860px){
  .hero .wrap,.tool-layout{grid-template-columns:1fr}
  .tool-layout .calc-card{position:static}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .site-foot .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .proscons{grid-template-columns:1fr}
  .hero{padding-top:2.25rem}
  nav{gap:1rem}
  .calc-card{box-shadow:5px 5px 0 var(--safety)}
  .top{position:static}
  .readout b{font-size:1.8rem}
  .readout div{padding:.6rem .6rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* illustrations and photos */
.ill{display:block;width:100%;height:auto}
.art{background-color:var(--peg);background-image:radial-gradient(circle,var(--peg-hole) 2px,transparent 2.6px);background-size:20px 20px;background-position:10px 10px;
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.art .ill{width:82%}
.art img{width:100%;height:100%;object-fit:cover}

/* truck shelf: the visual band on the home page */
.shelf-band{background:var(--surface);border-block:1px solid var(--line);padding:1rem 0 3rem;margin:1rem 0 2rem}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}
.shelf-item{display:block;text-decoration:none;color:var(--text)}
.shelf-item .art{border:1px solid var(--line)}
.shelf-item strong{display:block;font:600 1.3rem/1.2 var(--display);padding:.6rem 0 0}
.shelf-item:hover .art{border-color:var(--text)}
.shelf-item:hover strong{color:var(--chalk)}

/* feature guides */
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;margin-top:1.5rem}
.feature{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line)}
.feature .art{border-bottom:5px solid var(--safety)}
.feature .txt{padding:1rem 1.15rem 1.3rem}
.feature .kind{display:inline-block;font:600 .8rem var(--ui);color:var(--steel);margin-bottom:.3rem}
.feature strong{display:block;font:600 1.5rem/1.15 var(--display);margin-bottom:.4rem}
.feature .desc{font:.98rem/1.5 var(--ui);color:var(--steel)}
.feature:hover{border-color:var(--text)}
.feature:hover strong{color:var(--chalk)}

/* truck page picks with art */
.pick.has-art .pick-art{max-width:320px;margin:0 0 1rem}
.pick.has-art .pick-art .art{border:1px solid var(--line)}
@media (min-width:900px){.pick.has-art{display:grid;grid-template-columns:1fr 260px;column-gap:1.5rem}
  .pick.has-art .pick-art{grid-column:2;grid-row:1 / span 4;margin:0}
  .pick.has-art>*:not(.pick-art){grid-column:1}}
@media (max-width:860px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}}
.read.wide{max-width:920px}
.read.wide>p,.read.wide>ul,.read.wide .pick p{max-width:68ch}

/* holiday band on home */
.holiday{background:#1E2328;color:#fff;margin-top:1rem}
.holiday .wrap{display:grid;grid-template-columns:140px 1fr auto;gap:1.5rem;align-items:center;padding-block:1.25rem}
.holiday h2{color:#fff;margin:0 0 .25rem;font-size:1.9rem}
.holiday p{margin:0;color:#C9D1D8;font:1.02rem/1.5 var(--ui)}
.holiday-art .ill{width:140px}
.holiday-art{--ill-body:#4A5560;--ill-grip:#2A3036;--ill-line:#0B0E10}

/* gift guide */
.gift-hero{padding:2rem 0 1rem}
.gift-hero .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.gift-hero h1{font:700 clamp(2.4rem,5.5vw,4rem)/.95 var(--display);margin:0 0 1rem}
.gift-hero p{max-width:58ch;color:var(--soft)}
.gift-art .ill{width:100%;max-width:360px;margin:auto}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.chips a{font:600 .95rem var(--ui);text-decoration:none;color:var(--text);border:2px solid var(--text);padding:.35rem .8rem;border-radius:999px}
.chips a:hover{background:var(--safety);border-color:var(--safety);color:#1E2328}
.gift-sec{padding-top:1rem}
.gift-sec h2{border-bottom:2px solid var(--text);padding-bottom:.5rem;margin-bottom:.25rem}
.gift-sec .sub{font:1rem var(--ui);color:var(--steel);margin:.5rem 0 1.25rem}
.gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.gift{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--chalk);padding:1.1rem 1.2rem 1.25rem}
.gift h3{margin:0 0 .4rem;font-size:1.4rem}
.gift p{font:.98rem/1.5 var(--ui);color:var(--soft);margin:0 0 .75rem}
.gift p.looks{flex:1;font-size:.92rem;color:var(--steel);border-top:1px dashed var(--line);padding-top:.6rem;margin-bottom:1rem}
.gift p.looks strong{color:var(--text)}
.gift .btn{align-self:flex-start;font-size:.95rem;padding:.6rem 1rem}
.gift .badge{align-self:flex-start;font:600 .78rem var(--ui);background:var(--safety);color:#1E2328;padding:.15rem .5rem;margin-bottom:.5rem}
.gift-tip{background:var(--note-bg);border:1px dashed var(--note-line);padding:1rem 1.25rem;margin:2.5rem 0 1rem}
.gift-tip h2{margin:0 0 .5rem;font-size:1.5rem}
.gift-tip p{margin:0;font:1rem/1.6 var(--ui)}
@media (max-width:860px){.gift-hero .wrap{grid-template-columns:1fr}.gift-art{display:none}
  .holiday .wrap{grid-template-columns:1fr}.holiday-art{display:none}}

.embed-box{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--safety);padding:1.1rem 1.25rem 1.3rem}
.embed-box h2{margin:0 0 .5rem;font-size:1.6rem}
.embed-box p{font:1rem/1.55 var(--ui);color:var(--soft)}
.embed-box textarea{width:100%;font:.85rem/1.4 ui-monospace,Consolas,monospace;color:var(--text);background:var(--paper);border:1px solid var(--line);padding:.6rem;margin:.25rem 0 .75rem;resize:vertical}