/* best-ai-for-construction.com — a trade-magazine look: black masthead,
   safety yellow, condensed caps headlines, a faint blueprint grid. */
:root {
  --bg: #f2f1eb;
  --surface: #e9e7df;
  --ink: #141414;
  --muted: #55534c;
  --line: #d4d1c6;
  --accent: #f2b705;
  --accent-ink: #141414;
  --accent-soft: #fbefc4;
  --good: #1c6b3c;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --radius: 0px;
}
body {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(20, 20, 20, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 20, 20, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
a:hover { text-decoration-thickness: 3px; color: #000; background: var(--accent-soft); }
.edition { background: #141414; color: #9b988f; border-bottom: 0; }
.top { background: #141414; border-bottom: 6px solid var(--accent); }
.top .brand, .top .mainnav a { color: #fff; }
.top .mainnav a:hover { color: var(--accent); background: none; }
.brand { font-weight: 800; text-transform: uppercase; font-size: 26px; letter-spacing: 0.01em; }
.brand span { color: var(--accent); }
.cta { font-family: var(--head); text-transform: uppercase; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; }
.cta:hover { background: #fff; color: #141414; filter: none; }
h1, h2, h3 { text-transform: uppercase; letter-spacing: 0; }
h1 { font-weight: 800; font-size: clamp(40px, 6vw, 68px); line-height: 0.98; }
h2 { font-weight: 700; font-size: clamp(28px, 3vw, 36px); border-top: 3px solid var(--ink); padding-top: 14px; }
h3 { font-weight: 700; font-size: 22px; }
.kicker { display: inline-block; background: var(--ink); color: var(--accent); padding: 3px 10px; font-family: var(--head); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.answer { background: #fff; border-left: 8px solid var(--ink); padding: 18px 22px; box-shadow: 4px 4px 0 var(--ink); }
.answer-label { font-family: var(--head); font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.answer-text { font-size: 19px; font-weight: 500; }
.ranked li { border-bottom: 2px solid var(--line); }
.ranked .rank { display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: var(--accent); font-weight: 800; font-size: 22px; padding: 0; }
.ranked li.pick { background: var(--accent); }
.ranked li.pick .rank { background: var(--ink); color: var(--accent); }
.ranked li.pick p, .ranked li.pick h3 a { color: var(--ink); }
.badge { background: var(--ink); color: var(--accent); border-radius: 0; text-transform: uppercase; font-family: var(--head); font-size: 13px; letter-spacing: 0.05em; }
.table-wrap { border: 2px solid var(--ink); }
thead th { background: var(--ink); color: #fff; font-family: var(--head); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; }
caption { background: #fff; color: var(--ink); font-family: var(--head); text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; }
.bench .bar { border-radius: 0; height: 12px; }
.bench td.lead span:last-child { color: var(--ink); }
.pickcard { background: #141414; color: #e8e6df; border: 0; box-shadow: 6px 6px 0 var(--accent); }
.pick-label { color: var(--accent); font-family: var(--head); text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; }
.pick-name { color: #fff; text-transform: uppercase; font-size: 34px; }
.pickcard ul { color: #b9b6ad; }
.pickcard .button:hover { background: #fff; color: #141414; filter: none; }
.next .paths a { background: #fff; border: 2px solid var(--ink); }
.next .paths a:hover { background: var(--accent); }
.next .paths span { font-family: var(--head); text-transform: uppercase; font-size: 18px; }
.faq summary { font-family: var(--head); text-transform: uppercase; font-size: 19px; letter-spacing: 0.01em; }
.toc { border-color: var(--ink); }
.foot { background: #141414; color: #b9b6ad; border-top: 6px solid var(--accent); }
.foot .brand { color: #fff; }
.foot-nav a, .foot-network a { color: #e8e6df; }
.foot-brand p, .disclosure, .foot .side-label { color: #8f8c84; }
.disclosure { border-top-color: #2e2d2a; }
@media (max-width: 600px) {
  .ranked .rank { width: 34px; height: 34px; font-size: 18px; }
  .brand { font-size: 21px; }
  .answer { box-shadow: 3px 3px 0 var(--ink); }
}