/* builtcorrect.com's homepage, redesigned for a skeptical estimator or contractor owner (Scott, Homepage Build Room message
   6705: "Keep the current visual style ... but rework the message and structure"), and the Privacy, Terms and Compare pages
   in the same look. It comes after suite.css, which the Electrical, Steel and Build Room pages share and which this file
   leaves as it is: everything here is the homepage's own (the bar with Sign in and Book a demo, the opening's badges, the
   proof bar, the trade cards, the pictures full size, the phone, before and after, how we compare, the testimonials, the
   smaller Build Room, the foot's app badges, the full-size view and the films), the legal pages' text, or /compare/'s
   tables. */

/* the placeholders (home.js): hidden on builtcorrect.com until filled in; on the test copy each {{NAME}} is marked in lime */
html:not(.preview) .todo{display:none!important}
.ph{padding:0 .3em;border:1px dashed rgba(214,246,129,.55);border-radius:6px 1px 6px 1px;background:rgba(214,246,129,.08);font-family:var(--mono);font-weight:500;font-size:.8em;letter-spacing:0;color:var(--lime);overflow-wrap:anywhere}
.preview .todo[data-note]::before{content:attr(data-note);display:block;margin:0 0 14px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}

.skip{position:absolute;left:12px;top:-80px;z-index:60;padding:12px 16px;border-radius:10px 2px 10px 2px;background:var(--lime);color:#111a12;font-weight:700}
.skip:focus{top:12px}

/* the bar (message 6705): the logo, Steel, Electrical, Coming soon, Build Room, Compare (message 7932), Sign in, Sign up
   (message 6827, each tool's sign-up with no demo) and Book a demo; under 1080 px the links fold into a menu beside Book a
   demo, so the button stays in reach on a phone, and up to 1179 px they sit a little closer so Sign up fits. Coming soon is
   one menu of the trades on the way, Plumbing and Mechanical (message 6841) and Carpentry with its framing and drywall
   (messages 7480: "add to coming soon", and 7495: "The trade is Carpentry which includes drywall & framing"), each to its
   waitlist on the homepage, since a link for each no longer fits the bar; on the phone's menu they are one row. Compare
   (Scott, message 7932: "I don't see the how we compare ... in the breadcrumbs or the navigation on the on mobile") opens
   how we compare on the homepage, in the bar and as one line of the phone's menu after Build Room, not a link for each
   company (message 7958: "The nav bar shouldn't separate the companies"). The menu scrolls in itself when it is taller
   than the screen, since the bar stays put. */
.top--home .pick>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.signin>summary,.nav .soon>summary{display:inline-flex;align-items:center;gap:6px;padding:8px 12px 8px 14px;border:1px solid transparent;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:background .15s,color .15s}
.signin>summary:hover,.signin[open]>summary,.nav .soon>summary:hover,.nav .soon[open]>summary{background:rgba(255,255,255,.06);color:var(--text)}
.signin>summary svg,.nav .soon>summary svg{width:16px;height:16px;transition:transform .2s}
.top--home .pick-menu{left:auto;right:0;width:300px}
.top--home .nav .pick-menu{left:0;right:auto;width:320px;font-weight:400}
.nav .pick-menu a{white-space:normal}
.pick-menu .menu-row--soon a{border-style:dashed;color:var(--text-2)}
.top--home .pick-menu .mark{width:36px;height:36px}
.top--home .pick-menu .mark svg{width:18px;height:18px}
.pick-menu .pick-room .mark,.pick-menu .pick-vs .mark{--accent:var(--lime);--accent-soft:rgba(214,246,129,.1);--accent-edge:rgba(214,246,129,.3)}
.pick-menu .pick-soon .mark{--accent:var(--muted);--accent-soft:none;--accent-edge:var(--line-2);border-style:dashed}
.menu{display:none}
.menu>summary{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;color:var(--text)}
.menu[open]>summary{background:rgba(255,255,255,.06)}
.menu>summary svg{width:22px;height:22px}
.menu-h{margin:10px 12px 4px!important;padding-top:0!important;border-top:0!important;font:500 10.5px/1.3 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)!important}
.menu-row{display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 6px}
.pick-menu .menu-row a{padding:10px 14px;border:1px solid var(--line-2);font-size:14.5px;font-weight:600}
.menu .pick-menu{max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1179px){
  .top--home .top-in{gap:14px}
  .top--home .nav>a{padding-right:8px;padding-left:8px}
  .top--home .nav .soon>summary,.top--home .signin>summary{padding-right:8px;padding-left:10px}
}
@media (max-width:1079px){
  .top--home .nav,.top--home .signin{display:none}
  .menu{display:block}
  .top--home .top-cta{margin-left:auto}
}
@media (max-width:719px){
  .top--home{position:sticky;background:rgba(12,17,14,.94)}
  .top--home .top-in{flex-wrap:nowrap;gap:10px;min-height:64px;padding-top:10px;padding-bottom:10px}
  .top--home .pick{width:auto}
  .top--home .pick-menu{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:min(330px,calc(100vw - 28px));margin-top:0}
  .top--home .top-cta{min-height:44px}
}

/* the opening: the headline, the free demo takeoff and the films, then the apps' badges and Co-founded by a service-disabled
   veteran (.vet, suite.css), which takes the next row where they don't fit in one, beside a clouded sheet for each trade, Steel's
   first (the bar's order). On a phone the doors come before the sheets. */
.hero--home{grid-template-areas:". shot" "eyebrow shot" "h1 shot" "lede shot" "acts shot" "badges shot" ". shot";grid-template-rows:1fr auto auto auto auto auto 1fr}
.hero--home h1{font-size:clamp(38px,4.1vw,58px);line-height:1.02}
/* "AI" set a little apart, so its capital I does not read as an l in DM Sans at this tracking */
.hero--home h1 .ai{letter-spacing:.02em;margin-right:.04em}
.badges{grid-area:badges;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:28px}
.store{display:block;border-radius:8px;line-height:0}
.store img{display:block;width:120px;height:40px}
.store--play img{width:155px;height:60px;margin:-10px}
.badges .vet{margin:0}
.zoom{position:relative;display:block;cursor:zoom-in;border-radius:18px 4px 18px 4px}
.zoom-tag{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 9px;border:1px solid var(--line-2);border-radius:10px 2px 10px 2px;
  background:rgba(12,17,14,.84);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);transition:border-color .15s,color .15s}
.zoom-tag svg{width:16px;height:16px}
.zoom:hover .zoom-tag{border-color:var(--accent-edge);color:var(--lime)}
@media (max-width:899px){
  .hero--home{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "h1" "lede" "acts" "badges" "shot";grid-template-rows:none}
}
@media (max-width:719px){
  .hero--home{padding-top:30px}
  .hero--home h1{font-size:clamp(31px,8.9vw,40px);line-height:1.04}
  .hero--home .lede{font-size:16.5px}
  .hero--home .acts{margin-top:24px}
  .badges{margin-top:22px}
  .sheets{margin-top:32px}
}
/* the trades coming soon share one tab (message 7480), their marks over "Three more trades", so the tabs take one row on a
   computer; on a phone Steel and Electrical share a row and Coming soon has the next */
.soon-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media (min-width:900px) and (max-width:1199px){
  .hero--home .sheet-tabs{display:flex}
}
@media (max-width:719px){
  .hero--home .sheet-tab:last-child:nth-child(odd){grid-column:1/-1}
}

/* the proof bar: our accuracy log's numbers, Scott's to fill in (placeholders until then) */
.proofbar{list-style:none;margin:0 0 clamp(40px,7vh,72px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.proofbar li{min-width:0;padding:18px 24px}
.proofbar li:first-child{padding-left:0}
.proofbar li+li{border-left:1px solid var(--line)}
.proofbar b{display:block;font-size:clamp(26px,2.7vw,36px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.proofbar li>span{display:block;margin-top:8px;font:500 11.5px/1.45 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proofbar .ph{font-size:.62em;letter-spacing:0;text-transform:none}
.proofbar b .ph{font-size:.5em;vertical-align:middle}
@media (max-width:719px){
  .proofbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proofbar li{padding:16px 12px 16px 0}
  .proofbar li+li{border-left:0}
  .proofbar li:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .proofbar li:nth-child(n+3){border-top:1px solid var(--line)}
  .proofbar b{font-size:26px}
  .proofbar li>span{font-size:10.5px;letter-spacing:.07em}
}

/* Steel's showpiece (Scott, messages 6777 and 6779): the east stair of the public bid set followed through its sheets, as Steel
   took it off. On a computer the five steps take turns beside their tabs (home.js), and play through once by themselves while
   on screen, the active tab's line running out before the next; on a phone they take turns at a tap, and without the script
   they stack. Each box frames the words Steel read on the sheet, numbered as the list beside it; step 5 is the stair drawn
   from its flights. */
.stair-facts{margin-bottom:28px}
.stair-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:16px}
.stair-tab{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:0 12px;overflow:hidden;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;
  background:none;-webkit-tap-highlight-color:transparent;color:var(--text-2);font:600 15px/1.2 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.stair-tab span{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-2);border-radius:8px 2px 8px 2px;font:500 12px/1 var(--mono);color:var(--muted)}
.stair-tab:hover{background:rgba(255,255,255,.05);color:var(--text)}
.stair-tab[aria-selected=true]{border-color:rgba(217,167,126,.55);background:rgba(217,167,126,.12);color:var(--text)}
.stair-tab[aria-selected=true] span{border-color:var(--copper);background:var(--copper);color:#111a12}
.stair-tab:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.stair-tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left}
.stair.is-playing .stair-tab[aria-selected=true]::after{animation:stair-tick 7s linear forwards}
.stair.is-playing:hover .stair-tab[aria-selected=true]::after,.stair.is-playing.is-away .stair-tab[aria-selected=true]::after{animation-play-state:paused}
@keyframes stair-tick{to{transform:scaleX(1)}}
.stair-stops{display:grid;gap:56px}
.stair-stop{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;min-width:0}
.stair-pic{position:relative;margin:0;min-width:0}
.stair-pic img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:18px 4px 18px 4px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.stair-pic figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.stair-pic figcaption span{margin-right:10px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.hits{position:absolute;inset:0;pointer-events:none}
.hit{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid #4d7a00;border-radius:4px 1px 4px 1px;background:rgba(214,246,129,.32);
  box-shadow:0 0 0 3px rgba(214,246,129,.28);transition:background .15s,box-shadow .15s}
.hit:not(.hit--more)::before{content:attr(data-n);position:absolute;left:0;top:0;transform:translate(calc(-100% + 5px),calc(-100% + 5px));display:grid;place-items:center;width:22px;height:22px;
  border-radius:7px 2px 7px 2px;background:#111a12;box-shadow:0 0 0 2px var(--lime);color:var(--lime);font:500 12px/1 var(--mono)}
/* the number beside its words rather than on them: to the left or right, or above */
.hit--l::before{top:50%!important;transform:translate(calc(-100% - 6px),-50%)!important}
.hit--r::before{left:100%!important;top:50%!important;transform:translate(6px,-50%)!important}
.hit--t::before{transform:translate(-2px,calc(-100% - 5px))!important}
.hit.is-hot{background:rgba(214,246,129,.6);box-shadow:0 0 0 6px rgba(214,246,129,.4)}
.part{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:8px 2px 8px 2px;background:rgba(12,17,14,.86);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.part--low{top:calc(50.2% + 10px)}
.stair-pic .zoom-tag--top{top:12px;bottom:auto}
.stair-read{min-width:0}
.stair-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.stair-kick span{color:var(--muted)}
.stair-read h3{margin:0;font-size:clamp(24px,2.3vw,31px);line-height:1.1;letter-spacing:-.035em;font-weight:740;color:var(--text);text-wrap:balance}
.stair-read>p:not(.stair-kick){margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.finds{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.finds li{position:relative;padding:11px 14px 12px 48px;border:1px solid var(--line);border-radius:12px 2px 12px 2px;background:var(--panel);transition:border-color .15s,background .15s}
.finds li::before{content:attr(data-n);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px 2px 7px 2px;background:#111a12;box-shadow:0 0 0 2px var(--lime);color:var(--lime);font:500 12px/1 var(--mono)}
.finds li.is-hot{border-color:rgba(214,246,129,.45);background:var(--panel-2)}
.finds p{margin:0;font-size:14.5px;line-height:1.45;color:var(--text);text-wrap:pretty}
.finds .q{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.finds code{padding:2px 7px;border:1px dashed rgba(214,246,129,.42);border-radius:6px 1px 6px 1px;background:rgba(214,246,129,.06);font:500 12.5px/1.5 var(--mono);color:var(--lime);overflow-wrap:anywhere}
.flags{margin-top:20px;padding:16px 18px;border:1px dashed rgba(217,167,126,.5);border-radius:12px 2px 12px 2px;background:rgba(217,167,126,.06)}
.flags-h{margin:0 0 8px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.flags ul{margin:0;padding-left:18px;display:grid;gap:6px}
.flags li{font-size:14.5px;line-height:1.5;color:var(--text-2)}
.flags li::marker{color:var(--copper)}
/* step 5: the stair drawn from its takeoff, on the drawing grid, with its risers and pounds counted up as it draws */
.draw{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-2);border-radius:18px 4px 18px 4px;box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:linear-gradient(rgba(214,246,129,.045) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(214,246,129,.045) 1px,transparent 1px) 0 0/28px 28px,var(--bg-2)}
.draw svg{display:block;width:100%;height:100%}
.stair-count{position:absolute;right:16px;top:14px;margin:0;display:flex;gap:20px;font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stair-count span{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.stair-count b{font:760 clamp(22px,2.3vw,32px)/1 var(--sans);letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums}
.sd-lvl{stroke:#3a473f;stroke-width:2;stroke-dasharray:10 8}
.sd-lvl-n{font:600 28px var(--sans);letter-spacing:.06em;fill:var(--text-2)}
.sd-lvl-e{font:500 26px var(--mono);fill:var(--muted)}
.sd-slab{fill:#1a221c;stroke:#3a473f;stroke-width:2}
.sd-land{fill:#232d26;stroke:var(--text-2);stroke-width:2}
.sd-hdr{fill:var(--copper)}
.sd-str{fill:rgba(217,167,126,.2);stroke:var(--copper);stroke-width:3;stroke-linejoin:round}
.sd-step{fill:none;stroke:var(--text);stroke-width:3;stroke-linejoin:round}
.sd-rail{fill:none;stroke:var(--lime);stroke-width:4;stroke-linecap:round}
.sd-post{stroke:var(--lime);stroke-width:4}
.sd-lead{stroke:#3a473f;stroke-width:2}
.sd-fl-t{font:700 30px var(--sans);fill:var(--text)}
.sd-fl-r{font-weight:500;fill:var(--text-2)}
.sd-fl-s{font:500 23px var(--mono);fill:var(--copper)}
/* the boxes and the list come in one by one, and the stair draws flight by flight, each time a step shows */
.js .stair-stop:not(.is-on) .hit,.js .stair-stop:not(.is-on) .sd-fl{opacity:0}
.js .stair-stop.is-on .hit{animation:stair-hit .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(.3s + var(--d,0) * .5s)}
.js .stair-stop.is-on .finds li{animation:stair-find .5s ease both;animation-delay:calc(.3s + var(--d,0) * .5s)}
.hit[data-n="2"],.finds li[data-n="2"]{--d:1}
.hit[data-n="3"],.finds li[data-n="3"]{--d:2}
.hit[data-n="4"],.finds li[data-n="4"]{--d:3}
.js .stair-stop.is-on .sd-fl{animation:stair-find .4s ease both;animation-delay:calc(.2s + var(--i) * .45s)}
.js .stair-stop.is-on .sd-step,.js .stair-stop.is-on .sd-str{stroke-dasharray:1;animation:stair-draw 1s ease both;animation-delay:calc(.2s + var(--i) * .45s)}
@keyframes stair-hit{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
@keyframes stair-find{from{opacity:.25}to{opacity:1}}
@keyframes stair-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* the takeoff, line by line, each line's source opening its step above */
.stair-list{margin-top:clamp(48px,7vh,72px);padding:clamp(20px,2.6vw,32px);border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.stair-list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.stair-list-head h3{margin:0;font-size:clamp(21px,2vw,26px);line-height:1.15;letter-spacing:-.03em;font-weight:720;color:var(--text)}
.stair-total{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stair-total b{font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.045em;font-weight:780;color:var(--lime)}
.stair-total span{font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.takeoff{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.takeoff th,.takeoff td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.takeoff thead th{padding-top:14px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.takeoff td:first-child{width:64px;padding-left:0;font:500 15px/1.45 var(--mono);color:var(--lime);white-space:nowrap}
.takeoff tbody th{font-weight:600;color:var(--text)}
.takeoff td{color:var(--text-2)}
.takeoff .size{font:500 13px/1.6 var(--mono);white-space:nowrap}
.takeoff em{margin-left:8px;padding:1px 6px;border:1px solid rgba(217,167,126,.5);border-radius:6px 1px 6px 1px;font:500 10px/1.4 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--copper)}
.takeoff tr:last-child>*{border-bottom:0}
.takeoff-open th,.takeoff-open td{color:var(--muted)!important}
.cite{margin:0;padding:3px 9px;border:1px solid var(--line-2);border-radius:8px 2px 8px 2px;background:none;color:var(--text-2);font:500 12.5px/1.45 var(--mono);text-align:left;cursor:pointer;transition:border-color .15s,color .15s}
.cite:hover{border-color:rgba(214,246,129,.5);color:var(--lime)}
.cite:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.stair-note{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.stair-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:28px}
.stair-end p{max-width:620px;margin:0;font-size:16px;color:var(--text-2);text-wrap:pretty}
.stair-end b{color:var(--text);font-weight:650}
.stair-end .acts{margin-top:0;align-items:center;gap:12px 22px}
.stair-end .go::after{display:none}
.stair-end .go:hover svg{transform:translateX(3px)}
html:not(.js) .stair-stop[hidden]{display:grid}
.stair-next,.stair-more{display:none}
/* on a computer the steps take turns in one place, as tall as the tallest */
@media (min-width:900px){
  .js .stair-stops{gap:0}
  .js .stair-stop{grid-area:1/1}
  .js .stair-stop[hidden]{display:grid;visibility:hidden}
}
/* on a phone each step reads top to bottom: its title, the sheet, then what Steel read there, and Next. They take turns too,
   rather than stack five screens deep (Scott, message 6844: "push back if we are adding too much to the site"), and the tabs
   stay under the bar while the walk is on screen. The sheet spans the screen, so the section clips its boxes at the screen's
   edges while they grow in (stair-hit), rather than let the page slide sideways */
@media (max-width:899px){
  #stair,#service{overflow-x:clip}
  .stair-tabs{display:none}
  .js .stair-tabs{top:69px;z-index:5;display:grid;gap:4px;margin:0 -40px 14px;padding:8px 40px;background:rgba(12,17,14,.94);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .stair-tab{flex-direction:column;justify-content:center;gap:5px;min-height:56px;padding:6px 2px;font-size:12.5px;letter-spacing:0;text-align:center}
  .stair-tab span{width:22px;height:22px;font-size:11px}
  .js .stair-stop[hidden]{display:none}
  .stair-stop{grid-template-columns:minmax(0,1fr);gap:0}
  .stair-read{display:contents}
  .stair-kick{order:-3}
  .stair-read h3{order:-2}
  .stair-read>p:not(.stair-kick){order:-1;margin:10px 0 18px}
  .finds,.flags{order:1}
  .js .stair-next{order:2;display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:16px 0 0;padding:0 18px;border:1px solid rgba(217,167,126,.55);
    border-radius:12px 2px 12px 2px;background:rgba(217,167,126,.1);-webkit-tap-highlight-color:transparent;color:var(--text);font:600 16px/1.2 var(--sans);text-align:left;cursor:pointer}
  .stair-next span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
  .stair-next b{flex:1;font-weight:650}
  .stair-next svg{color:var(--copper)}
  .stair-next:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
}
/* the tabs stay under the bar unless the screen is too short to spare them the room (a phone held sideways) */
@media (max-width:899px) and (min-height:560px){
  .js .stair-tabs{position:sticky}
}
@media (max-width:719px){
  .stair-facts{margin-bottom:24px}
  .js .stair-tabs{top:65px;margin:0 -20px 12px;padding:8px 20px}
  .stair-tab{font-size:clamp(10.5px,3.3vw,12.5px)}
  .stair-stops{gap:44px}
  .stair-pic img,.draw{border-radius:12px 3px 12px 3px}
  .hit:not(.hit--more)::before{width:18px;height:18px;font-size:10.5px}
  .part{left:8px;top:8px;padding:4px 7px;font-size:9.5px}
  .part--low{top:calc(50.2% + 6px)}
  .stair-pic .zoom-tag--top{top:8px}
  .finds li{padding:10px 12px 11px 42px}
  .finds li::before{left:11px;top:11px}
  .stair-count{right:10px;top:9px;gap:12px}
  .stair-count b{font-size:20px}
  .sd-lvl-n{font-size:44px}
  .sd-lvl-e{font-size:40px}
  .sd-fl-t{font-size:46px}
  .sd-fl-r,.sd-fl-s{display:none}
  .stair-list{padding:18px 16px}
  .stair-total{align-items:flex-start}
  .takeoff thead{display:none}
  .takeoff,.takeoff tbody{display:block}
  .takeoff tr{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
  .takeoff tr:last-child{border-bottom:0}
  .takeoff th,.takeoff td{padding:0;border:0}
  .takeoff td:first-child{grid-row:1/4;width:auto}
  .takeoff .size{margin-top:4px;white-space:normal}
  .takeoff td:last-child{margin-top:8px}
  /* the takeoff under a walk shows its first six lines, and the rest on a tap (home.js) */
  .js .takeoff.is-folded tbody tr:nth-child(n+7){display:none}
  .js .stair-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:8px 0 0;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;
    background:none;-webkit-tap-highlight-color:transparent;color:var(--text);font:600 15px/1.2 var(--sans);cursor:pointer}
  .stair-more svg{width:18px;height:18px;color:var(--lime)}
  .stair-more:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
  .stair-end .acts{width:100%}
  .stair-end .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .js .stair-stop .hit,.js .stair-stop .finds li,.js .stair-stop .sd-fl,.js .stair-stop .sd-step,.js .stair-stop .sd-str{opacity:1;animation:none!important}
  .js .stair-stop .rt,.js .stair-stop .rt-tag,.js .stair-stop .reveal-top{animation:none!important}
  .reveal::after{display:none}
}

/* Electrical's showpiece (Scott, messages 6839 and 6841): the service of the public bid set in the opening, followed through
   its sheets in the stair's parts (home.js runs both). Its own: step 2's feeders drawn on the plan in the app's colors where
   Electrical measured them, run after run, the three the steps talk about tagged with their length; and step 5's clouded
   one-line wiped in over the plain one behind a lime edge, while its counts run up. */
.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rt{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.rt-tags{position:absolute;inset:0;pointer-events:none}
.rt-tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:4px 7px;border:2px solid var(--c);border-radius:8px 2px 8px 2px;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3);color:var(--c);font:700 12px/1 var(--sans);white-space:nowrap}
.reveal{position:relative;display:block}
.stair-pic .reveal-top{position:absolute;inset:0;height:100%;box-shadow:none}
.reveal::after{content:'';position:absolute;top:1px;bottom:1px;left:0;width:3px;background:var(--lime);box-shadow:0 0 18px 3px rgba(214,246,129,.7);opacity:0;pointer-events:none}
.stair-count.service-count{left:12px;right:auto;top:12px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;background:rgba(12,17,14,.88)}
.stair-count.service-count span{align-items:flex-start}
.js .stair-stop:not(.is-on) .rt,.js .stair-stop:not(.is-on) .rt-tag{opacity:0}
.js .stair-stop:not(.is-on) .reveal-top{clip-path:inset(0 100% 0 0)}
.js .stair-stop.is-on .rt{stroke-dasharray:1;animation:stair-draw .9s ease both;animation-delay:calc(.2s + var(--i) * .16s)}
.js .stair-stop.is-on .rt-tag{animation:service-tag .4s ease both;animation-delay:calc(.8s + var(--i) * .16s)}
.js .stair-stop.is-on .reveal-top{animation:service-wipe 2.2s cubic-bezier(.55,0,.35,1) .35s both}
.js .stair-stop.is-on .reveal::after{animation:service-edge 2.2s cubic-bezier(.55,0,.35,1) .35s both}
@keyframes service-tag{from{opacity:0}to{opacity:1}}
@keyframes service-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes service-edge{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
@media (max-width:719px){
  .rt{stroke-width:10}
  .rt-tag{padding:3px 5px;border-width:1.5px;font-size:10px}
  .stair-count.service-count{left:8px;top:8px;padding:7px 10px}
}

/* a card for each trade: what it takes off, its free demo takeoff and its page; beside them one card for the trades coming
   soon, Plumbing and Mechanical (message 6841: "You can also say mechanical soon as well") and Carpentry with its framing
   and drywall (messages 7480 and 7495), a row for each that emails its waitlist. The bar's Coming soon lands on a row
   (:target lights it). */
.trades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trade--soon .name{font-size:21px;line-height:1.1;font-weight:720}
.soon-list{list-style:none;margin:0;padding:0}
.soon-list li{border-top:1px solid var(--line)}
.soon-list a{display:flex;align-items:center;gap:12px;margin:0 -8px;padding:10px 8px;border-radius:10px 2px 10px 2px;color:var(--text);transition:background .15s,box-shadow .15s}
.soon-list a:hover{background:rgba(255,255,255,.05)}
.soon-list li:target a{background:rgba(214,246,129,.07);box-shadow:inset 0 0 0 1px rgba(214,246,129,.4)}
.soon-list .mark{width:36px;height:36px;border-radius:10px 2px 10px 2px}
.soon-list .mark svg{width:18px;height:18px}
.soon-list b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.soon-list small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.soon-list .mail{width:18px;height:18px;margin-left:auto;color:var(--lime)}
.trade{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px 26px 22px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.trade::before{content:'';position:absolute;top:-1px;left:26px;width:44px;height:2px;background:var(--accent)}
.trade--soon{--accent:var(--muted);--accent-soft:none;--accent-edge:var(--line-2);border-style:dashed;background:none}
.trade--soon .mark{border-style:dashed}
.trade--soon .name small{color:var(--lime)}
.trade h3{margin:0;font-size:23px;line-height:1.18;letter-spacing:-.03em;font-weight:700;color:var(--text);text-wrap:balance}
.trade>p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--text-2)}
.ticks svg{width:18px;height:18px;margin-top:2px;color:var(--accent)}
.trade-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.trade-foot .btn{width:auto}
.trade .go::after,.room-band .go::after{display:none}
.trade .go:hover svg,.room-band .go:hover svg{transform:translateX(3px)}
.crew-line{max-width:780px;margin:22px 0 0;font-size:15.5px;color:var(--text-2);text-wrap:pretty}
@media (max-width:1099px){
  .trades{grid-template-columns:1fr 1fr}
  .trade--more{grid-column:1/-1}
  .soon-list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
}
@media (max-width:719px){
  .trades{grid-template-columns:1fr;gap:12px}
  .soon-list{grid-template-columns:1fr}
  .trade{padding:22px 20px 20px}
  .trade h3{font-size:21px}
}

/* the product's pictures, large, each opening full size (home.js) */
.screen{margin:0 0 36px;min-width:0}
.screen .zoom{border-radius:18px 4px 18px 4px}
.screen img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:18px 4px 18px 4px;background:#1d221e;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.screen figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.screen figcaption span{display:block;margin-bottom:4px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.screens-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
.screens-2 .screen{margin:0}
.screens-2+.aside{margin-top:32px}
@media (max-width:719px){
  .screens-2{grid-template-columns:1fr;gap:28px}
  .screen{margin-bottom:28px}
  .screen img,.screen .zoom{border-radius:12px 3px 12px 3px}
  .zoom-tag{right:8px;bottom:8px}
}

/* in the field too: the Built Correct app for iPhone and Android, on a phone */
.field{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center;overflow:hidden;
  padding:clamp(28px,4.5vw,60px);border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.field::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(214,246,129,.045) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(214,246,129,.045) 1px,transparent 1px) 0 0/40px 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);mask-image:linear-gradient(90deg,transparent 35%,#000)}
.field>*{position:relative}
.field .ticks{margin-top:24px}
.field .ticks svg{color:var(--lime)}
.field .badges{margin-top:28px}
.phone{justify-self:center;width:min(280px,100%);margin:0}
.phone-body{padding:9px;border:1px solid #3c4a41;border-radius:44px;background:#050806;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 2px #151c17}
.phone-body img{display:block;width:100%;height:auto;border-radius:35px;background:#fff}
.phone figcaption{margin-top:14px;text-align:center;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (max-width:899px){
  .field{grid-template-columns:1fr}
}
@media (max-width:719px){
  .field{padding:28px 20px}
  .phone{width:min(250px,80%)}
}

/* before and after: the time on two real sets and one real bid, by hand and with Built Correct */
.ba{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ba-card{min-width:0;padding:24px 26px 28px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.ba-what{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.ba-what svg{width:18px;height:18px}
.ba-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:14px}
.ba-pair p{margin:0;min-width:0}
.ba-pair span{display:block;margin-bottom:10px;font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ba-pair b{display:block;font-size:clamp(28px,3.1vw,44px);line-height:1.02;letter-spacing:-.04em;font-weight:760;color:var(--text-2)}
.ba-now b{color:var(--lime)}
.ba-pair small{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--text-2)}
.ba-to{width:26px;height:26px;margin-top:30px;color:var(--muted)}
.ba+.say{margin-top:22px}
/* three across on a computer: each card reads top to bottom, and the pairs line up under a label that wraps */
@media (min-width:900px){
  .ba{row-gap:0}
  .ba-card{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .ba-pair{grid-template-columns:minmax(0,1fr);align-content:start;gap:10px}
  .ba-to{margin:0;transform:rotate(90deg);width:22px;height:22px}
  .ba-pair b{font-size:clamp(30px,2.9vw,42px)}
}
@media (max-width:899px){
  .ba{grid-template-columns:1fr}
}
@media (max-width:719px){
  .ba-card{padding:20px 20px 24px}
  .ba-pair b{font-size:30px}
}

/* how we compare (Vincent, Homepage Build Room message 7921) on /compare/: four points, then a section for each tool, a table
   of Built Correct beside it, its column headed in solid lime and each of its answers checked, as on the homepage (Scott,
   message 7958: "More contrast and colors"). On a phone each row of a table is its label over the two answers, side by side.
   The homepage's own, one tool at a time, follows. */
.why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.why li{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:22px 24px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.why svg{width:20px;height:20px;margin-top:3px;color:var(--lime)}
.why p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.why b{display:block;margin-bottom:6px;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.vs-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.vs-jump a{display:inline-flex;align-items:baseline;gap:6px;padding:10px 14px;border:1px solid var(--line-2);border-radius:10px 2px 10px 2px;font-size:14.5px;font-weight:650;line-height:1.2;color:var(--text);transition:background .15s,border-color .15s}
.vs-jump a:hover{border-color:var(--accent-edge);background:var(--accent-soft)}
.vs-jump small{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero--compare h1{font-size:clamp(40px,5.4vw,74px)}
.vs-list{padding-top:clamp(40px,6vh,72px)}
.vs{margin:0 0 20px;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.vs:target{border-color:rgba(214,246,129,.4)}
.vs h2{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:740;color:var(--text);text-wrap:balance}
.vs>p{max-width:860px;margin:12px 0 0;font-size:16px;line-height:1.6;color:var(--text-2);text-wrap:pretty}
.vs-table{width:100%;margin-top:22px;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.5}
.vs-table th,.vs-table td{padding:13px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.vs-table thead th,.vs-table thead td{border-top:0}
.vs-table thead td{width:18%}
.vs-table thead th{padding-top:11px;padding-bottom:11px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#1d261f}
.vs-table thead .us{color:#0c110e;background:var(--lime)}
.vs-table tbody th{padding-left:0;font:500 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vs-table td{color:#a9b4a5}
.vs-table td.us{position:relative;padding-left:46px;font-weight:600;color:#fff;background:rgba(214,246,129,.09);box-shadow:inset 2px 0 0 var(--lime),inset -2px 0 0 var(--lime)}
.vs-table tbody tr:last-child td.us{box-shadow:inset 2px 0 0 var(--lime),inset -2px 0 0 var(--lime),inset 0 -2px 0 var(--lime)}
.vs-table td.us::before{content:'';position:absolute;left:16px;top:15px;width:20px;height:20px;border-radius:50%;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230c110e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.vs-note{max-width:900px;margin:28px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.vs-note a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
@media (max-width:719px){
  .why{grid-template-columns:1fr;gap:12px}
  .why li{gap:12px;padding:16px 16px 18px}
  .why b{font-size:17px}
  .why p{font-size:15px}
  .vs-jump{gap:6px}
  .vs-jump a{padding:9px 12px;font-size:14px}
  .vs{padding:20px 16px 18px}
  .vs-table,.vs-table thead,.vs-table tbody{display:block}
  .vs-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs-table thead td{display:none}
  .vs-table thead th{padding:10px 12px}
  .vs-table tbody th{grid-column:1/-1;width:auto;padding:12px 0 6px;border-top:1px solid var(--line)}
  .vs-table td{padding:8px 12px 12px;border-top:0;font-size:14.5px}
  .vs-table td.us,.vs-table tbody tr:last-child td.us{padding-left:38px;box-shadow:inset 3px 0 0 var(--lime)}
  .vs-table td.us::before{left:12px;top:10px;width:18px;height:18px;background-size:11px}
}

/* how we compare on the homepage (#compare): one tool at a time (Scott, message 7958: "they should be shown on the main page
   with the ability to toggle between ... More contrast and colors and ours needs to sound and be better in every area to a
   novice person"). The row of tools picks one, lit in lime; it wraps on a computer and scrolls sideways on a phone. The card sets
   Built Correct, its column solid lime at the top and outlined in lime down its rows, beside the tool picked: a lime check on
   our side, a coral cross on theirs, and a copper mark for each row. On a phone a row is its label over the two answers, side
   by side. home.js makes the tools tabs and plays a tool's rows in as it comes up; without it the card shows Togal.AI. */
.duel-pick{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:3px 2px 6px}
.duel-pick a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:10px 2px 10px 2px;background:var(--bg-2);
  font-size:15px;font-weight:650;line-height:1;letter-spacing:-.01em;color:var(--text-2);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.duel-pick a:hover{border-color:rgba(214,246,129,.55);color:var(--text)}
.duel-pick a[aria-current],.duel-pick a[aria-selected=true]{border-color:var(--lime);background:var(--lime);color:#0c110e;box-shadow:0 8px 26px rgba(214,246,129,.26)}
.duel-pick a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.duel-card{overflow:hidden;border:1px solid var(--line-2);border-radius:20px 4px 20px 4px;background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.duel table{width:100%;border-collapse:collapse;table-layout:fixed}
.duel th,.duel td{padding:22px 26px;text-align:left;vertical-align:middle}
.duel thead td{width:31%;background:var(--bg-2)}
.duel thead th{padding-top:18px;padding-bottom:18px;font-size:19px;line-height:1.2;font-weight:760;letter-spacing:-.02em}
.duel thead .duel-us{background:var(--lime);color:#0c110e}
.duel thead .duel-us svg{display:inline-block;width:24px;height:27px;margin:-3px 11px 0 0;vertical-align:middle}
.duel thead .duel-them{position:relative;padding-left:46px;background:#1d261f;color:#fff}
.duel-vs{position:absolute;left:0;top:50%;z-index:1;display:grid;place-items:center;width:40px;height:40px;transform:translate(-50%,-50%);border:2px solid var(--lime);border-radius:50%;
  background:var(--bg);box-shadow:0 0 0 4px rgba(12,17,14,.55),0 0 22px rgba(214,246,129,.3);font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.duel tbody tr>*{border-top:1px solid var(--line)}
.duel tbody th{position:relative;padding-left:76px;font-size:16.5px;line-height:1.3;font-weight:680;letter-spacing:-.015em;color:var(--text)}
.duel tbody th svg{position:absolute;left:26px;top:50%;width:36px;height:36px;margin-top:-18px;padding:8px;border:1px solid rgba(217,167,126,.4);border-radius:10px 2px 10px 2px;
  background:rgba(217,167,126,.13);color:var(--copper)}
.duel tbody .duel-us{background:rgba(214,246,129,.09);box-shadow:inset 2px 0 0 var(--lime),inset -2px 0 0 var(--lime)}
.duel tbody tr:last-child .duel-us{box-shadow:inset 2px 0 0 var(--lime),inset -2px 0 0 var(--lime),inset 0 -2px 0 var(--lime)}
.duel td b{display:flex;align-items:flex-start;gap:12px;min-width:0}
/* a mark sits on its answer's first line, as the answer may wrap */
.duel td b svg{width:26px;height:26px;padding:5px;border-radius:50%}
.duel-us b{font-size:clamp(19px,1.8vw,23px);line-height:1.2;letter-spacing:-.025em;font-weight:760;color:#fff}
.duel-us b svg{margin-top:calc(.6em - 13px);background:var(--lime);color:#0c110e;box-shadow:0 0 0 4px rgba(214,246,129,.15)}
.duel-us small{display:block;margin:7px 0 0 38px;font-size:13.5px;line-height:1.35;color:var(--text-2)}
.duel-them b{font-size:clamp(16px,1.4vw,18px);line-height:1.3;letter-spacing:-.01em;font-weight:600;color:#a9b4a5}
.duel-them b svg{margin-top:calc(.65em - 13px);background:rgba(255,122,102,.14);color:#ff7a66;box-shadow:inset 0 0 0 1px rgba(255,122,102,.45)}
.duel-panel.is-in thead .duel-them{animation:duel-name .45s cubic-bezier(.2,.8,.2,1) both}
.duel-panel.is-in tbody tr>*{animation:duel-row .5s cubic-bezier(.2,.8,.2,1) both}
.duel-panel.is-in tbody tr:nth-child(2)>*{animation-delay:.07s}
.duel-panel.is-in tbody tr:nth-child(3)>*{animation-delay:.14s}
.duel-panel.is-in .duel-us b svg{animation:duel-pop .5s cubic-bezier(.3,1.5,.5,1) .2s both}
.duel-panel.is-in tbody tr:nth-child(2) .duel-us b svg{animation-delay:.27s}
.duel-panel.is-in tbody tr:nth-child(3) .duel-us b svg{animation-delay:.34s}
.duel.is-away thead .duel-them,.duel.is-away tbody tr>*{opacity:0}
@keyframes duel-name{from{opacity:0;transform:translateY(8px)}}
@keyframes duel-row{from{opacity:0;transform:translateX(14px)}}
@keyframes duel-pop{from{opacity:0;transform:scale(.35)}}
.duel-end{margin-top:22px}
.duel-end .go:hover svg{transform:translateX(3px)}
.duel-end p{max-width:760px;margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
@media (max-width:1179px){
  .duel-pick a{padding:0 14px}
}
@media (max-width:719px){
  .duel-pick{flex-wrap:nowrap;gap:6px;margin:0 -20px 14px;padding:3px 20px 6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding:0 20px}
  .duel-pick::-webkit-scrollbar{display:none}
  .duel-pick a{min-height:42px;padding:0 14px;font-size:14.5px}
  .duel table,.duel thead,.duel tbody{display:block}
  .duel tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duel thead td{display:none}
  .duel thead th{padding:14px;font-size:16px}
  .duel thead .duel-us svg{width:19px;height:22px;margin-right:8px}
  .duel thead .duel-them{padding-left:24px}
  .duel-vs{width:32px;height:32px;font-size:10.5px}
  .duel tbody tr>*{border-top:0}
  .duel tbody th{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-top:1px solid var(--line);font-size:14.5px}
  .duel tbody tr:first-child th{border-top:0}
  .duel tbody th svg{position:static;width:28px;height:28px;margin:0;padding:6px}
  .duel tbody td{padding:4px 14px 16px}
  .duel tbody .duel-us,.duel tbody tr:last-child .duel-us{box-shadow:inset 3px 0 0 var(--lime)}
  .duel tbody .duel-us{padding-top:10px;padding-left:16px}
  .duel tbody .duel-them{padding-top:10px}
  .duel td b{gap:8px}
  .duel td b svg{width:22px;height:22px;padding:4px}
  .duel-us b{font-size:17px;line-height:1.25}
  .duel-us b svg{margin-top:calc(.625em - 11px)}
  .duel-them b{font-size:15px}
  .duel-them b svg{margin-top:calc(.65em - 11px)}
  .duel-us small{margin:6px 0 0 30px;font-size:12.5px}
}
@media (max-width:379px){
  .duel thead th{font-size:15px}
  .duel thead .duel-us{padding-left:12px}
  .duel thead .duel-us svg{width:17px;height:19px;margin-right:7px}
  .duel-us b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .duel-panel.is-in *{animation:none!important}
  .duel-pick a{transition:none}
}

/* testimonials: hidden until each estimator approves his; no logo row until there are real logos (message 6735) */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quote{margin:0;padding:26px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:clamp(18px,1.7vw,22px);line-height:1.4;letter-spacing:-.015em;color:var(--text)}
.quote figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:18px;font-size:14px;color:var(--muted)}
.quote figcaption b{font-weight:650;color:var(--text)}
@media (max-width:719px){
  .quotes{grid-template-columns:1fr;gap:12px}
}

/* the Build Room, smaller and lower down (message 6705) */
#build-room{padding-top:clamp(48px,8vh,88px)}
.room-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 26px;padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--bg-2)}
.room-band h2{font-size:clamp(23px,2.4vw,30px);line-height:1.12;letter-spacing:-.035em}
.room-text p{max-width:660px;margin:8px 0 0;font-size:15.5px;color:var(--text-2);text-wrap:pretty}
.room-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.room-acts .btn{width:auto}
@media (max-width:899px){
  .room-band{grid-template-columns:auto minmax(0,1fr)}
  .room-acts{grid-column:1/-1}
}
@media (max-width:719px){
  .room-band{grid-template-columns:1fr;padding:22px 20px}
  .room-acts .btn{width:100%}
}

/* the end: Book a demo and the free demo takeoff, then our number and email */
#demo .end{margin-top:clamp(56px,9vh,96px)}
@media (min-width:720px){
  #demo .call .acts{flex-direction:column;align-items:flex-start}
}

/* the foot: the app badges beside the links */
.foot-apps{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-apps .store--play{margin-top:2px}

/* the pictures full size and the films (home.js), in the page's own dialogs */
html:has(dialog.lb[open]){overflow:hidden}
.lb{width:min(1440px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:1px solid var(--line-2);border-radius:18px 4px 18px 4px;background:var(--bg-2);color:var(--text);overflow:hidden}
.lb[open]{display:flex;flex-direction:column}
.lb::backdrop{background:rgba(4,7,5,.84)}
.lb-bar{display:flex;align-items:center;gap:10px 14px;padding:8px 8px 8px 18px;border-bottom:1px solid var(--line)}
.lb-cap{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.4;color:var(--text-2)}
.lb-x{flex:none;width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;background:none;color:var(--text);cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.06)}
.lb-x:focus-visible,.lb-tabs button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lb-view{flex:1;min-height:0;display:grid;place-items:center;overflow:auto;padding:12px;background:#080b09}
.lb-view img{display:block;max-width:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);width:auto;height:auto;cursor:zoom-in}
.lb.is-full .lb-view{place-items:start}
.lb.is-full .lb-view img{max-width:none;max-height:none;cursor:zoom-out}
.lb-hint{margin:0;padding:8px 18px;border-top:1px solid var(--line);font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lb--video{width:min(1200px,calc(100vw - 32px))}
.lb--video .lb-view{padding:0;background:#000}
.lb--video video{display:block;width:100%;height:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);background:#000}
.lb-tabs{display:flex;gap:6px}
.lb-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0;padding:0 12px;border:1px solid var(--line-2);border-radius:10px 2px 10px 2px;background:none;
  color:var(--text-2);font:600 14px/1 var(--sans);cursor:pointer}
.lb-tabs button svg{width:16px;height:16px;color:var(--copper)}
.lb-tabs button[aria-pressed=true]{border-color:rgba(217,167,126,.55);background:rgba(217,167,126,.12);color:var(--text)}
@media (max-width:719px){
  .lb{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .lb-bar{padding-left:14px}
  .lb--video .lb-cap{display:none}
  .lb--video .lb-tabs{flex:1}
  .lb-hint{display:none}
}

/* Privacy and Terms (privacy.html, terms.html), in the homepage's look; their words are unchanged */
.legal{padding-top:clamp(40px,7vh,80px);padding-bottom:clamp(64px,10vh,104px)}
.legal-in{max-width:820px}
.legal h1{font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.045em}
.legal .updated{margin:16px 0 36px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.legal h2{margin:44px 0 12px;font-size:clamp(19px,1.9vw,23px);line-height:1.25;letter-spacing:-.02em;font-weight:720}
.legal p,.legal li{font-size:16.5px;line-height:1.65;color:var(--text-2)}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal ul ul{margin:6px 0 0}
.legal li{margin:6px 0}
.legal li::marker{color:var(--lime)}
.legal strong{font-weight:650;color:var(--text)}
.legal a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal .caps{font-size:14.5px;text-transform:uppercase}
.legal ul.small li{font-size:15px}
.legal .ack{margin-top:30px;font-weight:600;color:var(--text)}