/* 10-4 Hauler guide pages (search landing pages). Loaded after /help/help.css, which sets the
   colors, fonts, header and footer, so these pages look like the rest of the site. */
.guide{margin-top:16px}
.guide .lead{font-size:1.12rem}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.ctas a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid var(--line);background:var(--panel2)}
.ctas a.primary{background:var(--accent);border-color:var(--accent);color:#22272D}
.price{color:var(--muted);font-size:.95rem;margin:6px 0 0}
.endcta{background:var(--asphalt);color:#F1F3F5;border-radius:12px;padding:20px 22px;margin-top:26px}
.endcta h2{border:0!important;margin:0 0 6px!important;padding:0!important;color:#fff}
.endcta p{color:#DDE2E7;margin:0}
.endcta .ctas a{border-color:#57606A;background:transparent;color:#F1F3F5}
.endcta .ctas a.primary{background:var(--accent);border-color:var(--accent);color:#22272D}
.endcta .price{color:#B9C1C9}
.faq h3{font-size:1.2rem;margin:18px 0 4px}
.faq p{margin:0}

/* cost per mile calculator */
.calc{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}
.calc h2{margin-top:0!important}
.calc .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.calc label{display:block;font-weight:700;font-size:.95rem;margin-bottom:4px}
.calc label small{display:block;font-weight:500;color:var(--muted)}
.calc .in{display:flex;align-items:center;border:1px solid var(--muted);border-radius:8px;background:var(--panel);overflow:hidden}
.calc .in span{padding:0 10px;color:var(--muted);font-weight:600}
.calc input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:10px 10px;min-height:46px;font-variant-numeric:tabular-nums}
.calc input:focus{outline:none}
.calc .in:focus-within{outline:3px solid var(--accent);outline-offset:1px}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:16px}
.results div{background:var(--panel);padding:12px 14px}
.results div.lead{background:var(--accent);color:#22272D}
.results b{display:block;font-family:"Barlow Condensed","Arial Narrow",Barlow,sans-serif;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.results span{font-size:.9rem;color:var(--muted)}
.results div.lead span{color:#22272D;opacity:.85}
.results .neg{color:#B0362A}
.calc .note{font-size:.9rem;color:var(--muted);margin:10px 0 0}

/* "Guides" group in the site footer */
footer .guides a{white-space:nowrap}