/* CheckFreightClass — industrial theme: charcoal + safety orange.
   One stylesheet, system fonts, no external assets. */
:root{
  --ink:#22262b; --ink2:#3a3f46; --mut:#5c636c; --faint:#8a9097;
  --bg:#f2f1ed; --panel:#ffffff; --line:#d9d6cf;
  --orange:#e8590c; --orange-d:#c24e02; --orange-t:#fff1e6;
  --dark:#1d2024; --dark2:#26292e;
  --good:#2b7a3d;
  --radius:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.55;
}
a{color:var(--orange-d); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--orange)}
h1{font-size:2rem; line-height:1.15; margin:.2em 0 .35em}
h2{font-size:1.45rem; line-height:1.25; margin:1.6em 0 .5em}
h3{font-size:1.12rem; margin:1.1em 0 .4em}
p{margin:.55em 0}
small,.fineprint{font-size:.82rem; color:var(--mut)}
.wrap{max-width:1020px; margin:0 auto; padding:0 16px 48px}

/* ---------- brand bar ---------- */
.brandbar{background:var(--dark); color:#f5f3ee}
.brandbar-in{max-width:1020px; margin:0 auto; padding:0 12px; min-height:52px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; font-weight:700; font-size:1.06rem; letter-spacing:.2px; white-space:nowrap}
.brand:hover{color:#fff}
.brand .mark{width:26px; height:26px; flex:0 0 26px}
.brandbar nav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap}
.brandbar nav a{color:#d8d5cd; text-decoration:none; font-size:.92rem; padding:10px 9px; border-radius:6px; white-space:nowrap}
.brandbar nav a:hover{color:#fff; background:var(--dark2)}
.brandbar nav a[aria-current]{color:#fff; box-shadow:inset 0 -3px 0 var(--orange)}
.short-label{display:none}
@media (max-width:560px){
  .brand{font-size:.98rem}
  .brandbar nav a{font-size:.82rem; padding:10px 6px}
  .long-label{display:none} .short-label{display:inline}
}
@media (max-width:420px){
  .brand .mark{display:none}
  .brandbar-in{padding:0 8px; gap:8px}
  .brandbar nav a{padding:10px 5px}
}

/* ---------- hero / trust strip ---------- */
.hero{padding:22px 0 4px}
.lede{font-size:1.13rem; color:var(--ink2); max-width:44em}
.truststrip{display:flex; flex-wrap:wrap; gap:6px 0; margin:14px 0 18px;
  background:var(--dark); color:#e9e6de; border-radius:8px; padding:9px 14px; font-size:.9rem}
.truststrip span{white-space:nowrap}
.truststrip span+span::before{content:"·"; margin:0 10px; color:var(--orange); font-weight:700}
.truststrip b{color:#fff}

/* ---------- calculator ---------- */
.calc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:0 1px 3px rgba(30,30,30,.06)}
.calc-units{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-end; margin-bottom:12px}
.calc-units label{font-size:.85rem; font-weight:600; color:var(--ink2); display:flex; flex-direction:column; gap:4px}
select,input[type=number]{font-size:16px; padding:10px; border:1.5px solid #b9b4aa; border-radius:8px; background:#fff; color:var(--ink); min-height:44px}
select:focus,input:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange)}
.prow{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px; align-items:end;
  border:1px solid var(--line); border-radius:8px; padding:12px; margin:10px 0; background:#fbfaf8}
.prow-tag{grid-column:1/-1; font-weight:700; font-size:.9rem; color:var(--ink2); text-transform:uppercase; letter-spacing:.06em}
.prow label{font-size:.82rem; font-weight:600; color:var(--ink2); display:flex; flex-direction:column; gap:4px}
.prow input{width:100%}
.prow-btns{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}
button{font:inherit; cursor:pointer; border-radius:8px; min-height:44px}
.btn{background:var(--orange); border:1.5px solid var(--orange-d); color:#fff; font-weight:700; padding:10px 18px}
.btn:hover{background:var(--orange-d)}
.btn.secondary{background:#fff; color:var(--orange-d)}
.btn.secondary:hover{background:var(--orange-t)}
.mini{background:#fff; border:1.5px solid #b9b4aa; color:var(--ink2); font-size:.88rem; font-weight:600; padding:8px 14px}
.mini:hover{border-color:var(--orange); color:var(--orange-d)}
.mini:disabled{opacity:.4; cursor:default}
.mini.ghost{border-color:transparent; color:var(--mut)}
.calc-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.calc-note{font-size:.92rem; color:var(--mut); margin-top:10px}
#copyMsg{font-size:.9rem; color:var(--good); font-weight:600}

/* results */
#results{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin-top:18px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.result-card h3{margin-top:0; font-size:1rem; color:var(--ink2)}
.class-badge{display:flex; align-items:baseline; gap:12px; margin:6px 0 10px}
.class-badge span{font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--mut)}
.class-badge strong{font-size:4.2rem; line-height:1; color:var(--orange); font-weight:800}
.density-big{font-size:3.4rem; line-height:1.05; font-weight:800; color:var(--ink); margin:4px 0}
.density-big small{font-size:1.2rem; color:var(--mut); font-weight:600}
.density-sub{color:var(--mut); margin:2px 0 10px}
.class-chip{display:inline-block; background:var(--orange-t); border:1px solid #f3c9a8; border-radius:999px; padding:6px 14px; font-size:.95rem}
.class-chip strong{color:var(--orange-d); font-size:1.15rem}
.kv{list-style:none; margin:8px 0; padding:0}
.kv li{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line)}
.kv li:last-child{border-bottom:0}
.kv span{color:var(--mut)} .kv b{font-variant-numeric:tabular-nums}
.edge-warn{background:#fdf3e3; border:1.5px solid #e8a13c; border-left:6px solid #e8a13c; border-radius:6px; padding:10px 12px; font-size:.94rem}
.hint{background:#eef6ee; border-left:6px solid var(--good); border-radius:6px; padding:10px 12px; font-size:.94rem}
.placeholder{color:var(--mut); border:1.5px dashed #c9c4b9; border-radius:8px; padding:14px; grid-column:1/-1}
#summary{background:var(--dark); color:#eceadf; border-radius:var(--radius); padding:16px 18px; margin-top:16px}
#summary h3{margin-top:0; color:#fff}
#summary .kv li{border-color:#3c4046}
#summary .kv span{color:#b9b4a8}
.sum-note{color:#c9c4b8; font-size:.93rem; margin-bottom:0}

/* density scale */
.scale-wrap{margin:10px 0 4px}
.scale{display:flex; height:40px; border-radius:6px; overflow:hidden; border:1px solid #b9b4aa}
.seg{background:#e6e2d9; border-right:1px solid #c9c4b9; display:flex; align-items:center; justify-content:center; min-width:0}
.seg:nth-child(even){background:#d8d3c8}
.seg span{font-size:.72rem; font-weight:700; color:var(--ink2); white-space:nowrap}
.scale-marks{position:relative; height:30px}
.smark{position:absolute; top:0; transform:translateX(-50%); text-align:center}
.smark i{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:var(--orange); color:#fff; font-style:normal; font-weight:700; font-size:.8rem; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35)}
.scale-cap{font-size:.85rem; color:var(--mut); display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 12px}

/* tables */
table.bands{width:100%; border-collapse:collapse; background:var(--panel); font-size:.98rem; margin:12px 0}
table.bands th{background:var(--dark); color:#f0eee8; text-align:left; padding:10px 12px; font-size:.9rem}
table.bands td{padding:9px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
table.bands tr.hit td{background:var(--orange-t); font-weight:600}
table.bands tr.hit td:first-child{box-shadow:inset 5px 0 0 var(--orange)}
table.bands td.cls{font-weight:800; font-size:1.08rem}
.tbl-scroll{overflow-x:auto}
@media (max-width:560px){ table.bands{font-size:.9rem} table.bands th,table.bands td{padding:8px} }

/* recent */
.recent-item{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:8px 0; background:#fbfaf8}
.recent-item small{display:block; color:var(--faint); font-size:.8rem}

/* content blocks */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px}
.steps{counter-reset:step; list-style:none; padding:0}
.steps li{counter-increment:step; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px 14px 58px; position:relative; margin:10px 0}
.steps li::before{content:counter(step); position:absolute; left:14px; top:12px; width:32px; height:32px; border-radius:50%;
  background:var(--orange); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center}
.callout{background:var(--orange-t); border:1.5px solid #f3c9a8; border-radius:var(--radius); padding:14px 18px; margin:16px 0}
.warnbox{background:#fdf3e3; border:1.5px solid #e8a13c; border-radius:var(--radius); padding:14px 18px; margin:16px 0}
.casegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:12px 0}
.case-card h3{margin-top:0}
.case-card .expect{font-size:1.05rem}
.case-card .expect b{color:var(--orange-d); font-size:1.25rem}
.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:6px 18px 12px; margin:10px 0}
.faq-item h3{margin-bottom:.2em}
.cta{background:var(--dark); color:#eceadf; border-radius:var(--radius); padding:20px; margin:22px 0; text-align:center}
.cta h2{color:#fff; margin-top:0}
.cta .btn{display:inline-block; text-decoration:none; margin-top:6px}
footer{background:var(--dark); color:#b9b4a8; margin-top:40px}
footer .wrap{padding-top:22px}
footer a{color:#e8c39a}
footer .foot-nav{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:10px}
footer .foot-nav a{text-decoration:none; font-weight:600}
.sig{font-size:.85rem; color:#8f8a7f; border-top:1px solid #33373d; padding-top:12px; margin-top:14px}

/* 404 */
.big404{font-size:5rem; font-weight:800; color:var(--orange); line-height:1; margin:.3em 0 .1em}

/* print: the chart page becomes a clean one-pager */
@media print{
  .brandbar, footer, .noprint, .cta{display:none !important}
  body{background:#fff; font-size:12.5px}
  .wrap{max-width:none; padding:0}
  table.bands{font-size:11.5px}
  table.bands th{background:#22262b !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{color:inherit; text-decoration:none}
}