/* builtcorrect.com's homepage, the Built Correct suite (index.html), and each tool's landing page in the same flow: the
   Build Room's (business-apps/index.html), Electrical's (electrical/index.html) and Steel's (steel/index.html; Vincent, Homepage
   Build Room message 6365: "Make electrical and build room follow the same flow so it is all uniformed"). The brand
   direction (Vincent, Homepage Build Room message 6358: "professional credible, modern and tech driven with industrial precise
   feel ... darker colors strong typography ... a single brand with three distinct tools room for expansion"): the brand's
   green-black, lime for the brand and the Build Room, the estimating apps' copper for Electrical and Steel, heavy DM Sans
   with DM Mono for labels and numbers, hairlines, and the logo's corners (rounded top left and bottom right). The suite leads
   with the takeoffs (message 6380: "Lead with the takeoff engine, not Build Room"). The Build Room itself keeps its own page
   and styles (build-room/index.html, style.css and room.css). */
@font-face{font-family:DM Sans;src:url(fonts/dm-sans.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:DM Mono;src:url(fonts/dm-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{--sans:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;
  --bg:#0c110e;--bg-2:#101612;--panel:#141b16;--panel-2:#18211b;--line:#232d26;--line-2:#34413a;
  --text:#eef2ea;--text-2:#b2bdae;--muted:#8a9686;--lime:#d6f681;--lime-2:#e6fba8;--copper:#d9a77e;
  --accent:var(--lime);--accent-soft:rgba(214,246,129,.1);--accent-edge:rgba(214,246,129,.3)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;color-scheme:dark}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font:16px/1.55 var(--sans);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
svg{width:20px;height:20px;display:block;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
@media (min-width:720px){.wrap{padding:0 40px}}

/* the bar: the tools, takeoffs first (message 6380), Compare (message 7932), then Pricing and FAQ on a computer, and Book a
   call. Under 900 px the links sit a little closer, and on a phone they share one row under the logo. */
.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(12,17,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top-in{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:18px;letter-spacing:-.025em;color:var(--text);white-space:nowrap}
.brand svg{width:26px;height:29px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.nav a{padding:8px 14px;border:1px solid transparent;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--text)}
/* the page you're on lights up in lime (Scott, Homepage Build Room message 6199) */
.nav a[aria-current=page]{background:var(--lime);border-color:var(--lime);color:#111a12}

/* the opening: a drawing grid, the headline, and on the suite the proof beside it */
main{flex:1}
.hero-band{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(214,246,129,.055) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(214,246,129,.055) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 72% 40%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 70% 85% at 72% 40%,#000 25%,transparent 80%)}
.hero-band::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 76% 44%,rgba(214,246,129,.07),transparent 42%)}
.hero{position:relative;padding-top:clamp(52px,9vh,112px);padding-bottom:clamp(52px,9vh,104px)}
.hero:not(.hero--suite)>*{max-width:1100px}
.hero:not(.hero--suite) h1 em{display:block}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 24px;font:500 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.eyebrow::before{content:'';width:28px;height:1px;flex:none;background:currentColor}
.eyebrow svg{width:22px;height:22px;color:var(--copper)}
.eyebrow:has(svg)::before{display:none}
h1{margin:0;font-size:clamp(44px,6.9vw,92px);line-height:.98;letter-spacing:-.05em;font-weight:780;color:var(--text);text-wrap:balance}
h1 em{font-style:normal;color:var(--lime)}
.lede{max-width:600px;margin:28px 0 0;font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--text-2);text-wrap:pretty}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid var(--lime);border-radius:12px 2px 12px 2px;
  background:var(--lime);color:#111a12;font-size:15.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--lime-2);border-color:var(--lime-2)}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(2px)}
.btn--line{background:none;border-color:var(--line-2);color:var(--text)}
.btn--line:hover{background:rgba(255,255,255,.05);border-color:#56665b}
.btn--sm{min-height:40px;padding:0 16px;border-radius:10px 2px 10px 2px;font-size:14px}
.top-cta{flex:none}

/* the suite's opening (message 6380): the outcome in the headline, a clouded sheet beside it, and one real set's numbers for
   each app under it. On a phone the sheets come straight after the headline, before the doors. */
.hero--suite{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:clamp(28px,4vw,60px);
  grid-template-areas:". shot" "eyebrow shot" "h1 shot" "lede shot" "acts shot" ". shot";grid-template-rows:1fr auto auto auto auto 1fr;
  padding-top:clamp(40px,6vh,80px);padding-bottom:clamp(32px,5vh,52px)}
.hero--suite .eyebrow{grid-area:eyebrow}
.hero--suite h1{grid-area:h1;font-size:clamp(40px,4.7vw,66px);line-height:1.01}
.hero--suite h1 em{display:block}
.hero--suite .lede{grid-area:lede;margin-top:22px;font-size:clamp(17px,1.3vw,18.5px)}
.hero--suite .acts{grid-area:acts;margin-top:32px}
/* a clouded sheet for each trade under its own tab (Vincent, message 6394: "add a steel drawing sheet with an example just like
   electrical. Set this up to be able to accomodate 2 to 4 more"): Electrical's first, then Steel's, and a Coming soon sheet for
   each trade still to come until its own picture takes its place. suite.js switches them. The panels share one cell, so the
   opening keeps its height whichever is shown. The tabs take one row where they fit, and two to a row where they don't. */
.sheets{grid-area:shot;align-self:center;min-width:0}
.sheet-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sheet-tab{display:inline-flex;align-items:center;gap:6px;min-height:38px;margin:0;padding:0 11px;border:1px solid var(--line-2);border-radius:10px 2px 10px 2px;
  background:none;-webkit-tap-highlight-color:transparent;color:var(--text-2);font:600 13.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sheet-tab svg{width:16px;height:16px;color:var(--copper)}
.sheet-tab:hover{background:rgba(255,255,255,.05);color:var(--text)}
.sheet-tab[aria-selected=true]{border-color:rgba(217,167,126,.55);background:rgba(217,167,126,.12);color:var(--text)}
.sheet-tab--soon{border-style:dashed;color:var(--muted)}
.sheet-tab--soon svg{color:var(--muted)}
.sheet-tab small{margin-left:2px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.sheet-tab:focus-visible,.sheet:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.sheet-panels{display:grid}
.sheet{grid-area:1/1;min-width:0;border-radius:18px 4px 18px 4px}
.sheet[hidden]{display:block;visibility:hidden}
.hero-shot{margin:0}
.hero-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line-2);border-radius:18px 4px 18px 4px;background:#1d221e;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-shot figcaption,.sheet-note{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.hero-shot figcaption span,.sheet-note span{margin-right:10px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.sheet-soon{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;border:1px dashed var(--line-2);
  border-radius:18px 4px 18px 4px;text-align:center;
  background:linear-gradient(rgba(214,246,129,.04) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(214,246,129,.04) 1px,transparent 1px) 0 0/28px 28px,var(--panel)}
.sheet-soon .mark{--accent:var(--muted);width:64px;height:64px;border-style:dashed;border-color:var(--line-2);border-radius:18px 3px 18px 3px;background:var(--bg-2)}
.sheet-soon .mark svg{width:30px;height:30px}
.sheet-soon p{margin:0}
.sheet-soon b{display:block;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.sheet-soon p span{display:block;margin-top:10px;font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.proof{margin-bottom:clamp(40px,7vh,72px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.proof-row{display:grid;grid-template-columns:170px repeat(3,minmax(0,1fr));align-items:center}
.proof-row+.proof-row{border-top:1px solid var(--line)}
.proof-row p{margin:0;padding:14px 24px}
.proof-row p+p{border-left:1px solid var(--line)}
.proof-row .proof-tool{display:flex;align-items:center;gap:10px;padding-left:0;font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.proof-tool svg{width:18px;height:18px}
.proof b{display:block;font-size:clamp(26px,2.7vw,36px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.proof p:nth-child(3) b{color:var(--lime)}
.proof span{display:block;margin-top:6px;font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* a door that asks which trade: the free demo takeoff and the sample open each app's own page */
.pick{position:relative}
.pick>summary{list-style:none}
.pick>summary::-webkit-details-marker{display:none}
.pick>summary:hover svg{transform:none}
.pick[open]>summary svg{transform:rotate(180deg)}
.pick-menu{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:max(100%,340px);padding:8px;border:1px solid var(--line-2);border-radius:14px 3px 14px 3px;
  background:var(--panel-2);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.pick--up .pick-menu{top:auto;bottom:calc(100% + 8px)}
.pick-menu a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:10px 2px 10px 2px;color:var(--text);transition:background .15s}
.pick-menu a:hover{background:rgba(255,255,255,.05)}
.pick-menu .mark,.price-links .tool--copper .mark{--accent:var(--copper);--accent-soft:rgba(217,167,126,.1);--accent-edge:rgba(217,167,126,.32)}
.pick-menu .mark{width:40px;height:40px}
.pick-menu .mark svg{width:20px;height:20px}
.pick-menu b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.pick-menu small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.pick-menu p{margin:6px 12px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-2)}

/* sections */
.sec{padding-top:clamp(64px,10vh,112px)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,4vh,44px)}
.label{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:500 12.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.label::before{content:'';width:28px;height:1px;background:currentColor}
h2{margin:0;font-size:clamp(32px,4.2vw,54px);line-height:1.02;letter-spacing:-.045em;font-weight:760;color:var(--text);text-wrap:balance}
.sec-lede{max-width:640px;margin:18px 0 0;font-size:clamp(16px,1.4vw,18px);color:var(--text-2);text-wrap:pretty}

/* the suite: a card for each tool, the whole card a link, then the open bay for the next one */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool{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);
  transition:border-color .2s,background .2s,transform .2s}
.tool::before{content:'';position:absolute;top:-1px;left:26px;width:44px;height:2px;background:var(--accent);transition:width .25s}
.tool--copper{--accent:var(--copper);--accent-soft:rgba(217,167,126,.1);--accent-edge:rgba(217,167,126,.32)}
.tool-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mark{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid var(--accent-edge);border-radius:14px 2px 14px 2px;background:var(--accent-soft);color:var(--accent)}
.mark svg{width:24px;height:24px}
.name{margin:0;font-size:21px;line-height:1.1;font-weight:720;letter-spacing:-.03em;color:var(--text)}
.name small{display:block;margin-top:5px;font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.no{margin-left:auto;align-self:flex-start;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.tool h3{margin:0;font-size:23px;line-height:1.18;letter-spacing:-.03em;font-weight:700;color:var(--text);text-wrap:balance}
.tool>p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.tool-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.fact{font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.go{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--accent)}
.go::after{content:'';position:absolute;inset:0;border-radius:18px 4px 18px 4px}
.go svg{width:18px;height:18px;transition:transform .2s}
@media (hover:hover){
  .tool:hover{border-color:var(--accent-edge);background:var(--panel-2);transform:translateY(-3px)}
  .tool:hover::before{width:88px}
  .tool:hover .go svg{transform:translateX(3px)}
}
.next{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 22px;border:1px dashed var(--line-2);border-radius:18px 4px 18px 4px;color:var(--text-2)}
.next .mark{--accent:var(--muted);width:40px;height:40px;border-style:dashed;border-color:var(--line-2);background:none}
.next .mark svg{width:20px;height:20px}
.next p{margin:0;font-size:15.5px}
.next b{color:var(--text);font-weight:650}
.next .no{align-self:center}

/* what comes back: the two estimating apps' own pictures, side by side at one height, then their finished samples */
.frames{display:grid;grid-template-columns:minmax(0,2.105fr) minmax(0,1.6fr);gap:16px}
.frame{margin:0;min-width:0}
.frame img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:14px 3px 14px 3px;background:#1d221e;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.frame figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.frame figcaption span{display:block;margin-bottom:4px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.frames+.aside{margin-top:28px}

/* built by contractors (message 6380): who the takeoffs' rules come from */
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.who{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:0;padding:26px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel)}
.who--copper{--accent:var(--copper);--accent-soft:rgba(217,167,126,.1);--accent-edge:rgba(217,167,126,.32)}
.who b{margin-top:6px;font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.who p{margin:0;font-size:16px;line-height:1.55;color:var(--text-2)}

/* pricing: the free demo first, then each tool's own pricing page, which shows the prices Companies sets */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,48px);
  border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.price h2{font-size:clamp(28px,3.4vw,44px)}
.price h2+p{max-width:560px;margin:16px 0 0;color:var(--text-2);text-wrap:pretty}
.price-links{display:grid;gap:10px}
.price-links a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px 3px 14px 3px;background:var(--bg-2);transition:border-color .15s,background .15s}
.price-links a:hover{border-color:var(--accent-edge);background:var(--panel-2)}
.price-links .mark{width:40px;height:40px}
.price-links .mark svg{width:20px;height:20px}
.price-links b{display:block;font-weight:700;color:var(--text)}
.price-links small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.price-links a>svg{margin-left:auto;color:var(--muted)}

/* questions an evaluator asks (message 6380): file types, how counts are checked, exports, confidentiality */
.faq{max-width:900px;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;
  font-size:clamp(17px,1.6vw,20px);font-weight:650;letter-spacing:-.02em;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{color:var(--lime);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{max-width:780px;margin:-4px 0 22px;color:var(--text-2);text-wrap:pretty}
.faq a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* the end of the suite: the free demo takeoff, and Book a call, both on HQ's demo calendar, beside our number to call
   (Scott, Homepage Build Room message 6447) */
.end{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;margin:clamp(64px,10vh,104px) 0;
  padding:clamp(28px,4.5vw,56px);border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.end::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  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,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.end>*{position:relative}
.end h2{font-size:clamp(30px,3.6vw,46px)}
.end h2+p{max-width:520px;margin:16px 0 0;font-size:clamp(16px,1.4vw,18px);color:var(--text-2)}
.call{padding:24px;border:1px solid var(--line);border-radius:16px 3px 16px 3px;background:var(--bg-2)}
.call h3{margin:0 0 8px;font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.call p{margin:0 0 20px;color:var(--text-2)}
.call .acts{margin-top:0}
.btn--tel:hover svg{transform:none}

/* The tools' landing pages (Steel's first, Scott, Homepage Build Room message 6194; then the Build Room's and Electrical's,
   message 6365): the bar, opening and foot above, then two doors into the tool, its numbers, how it works, its pictures, and a
   closing band. Electrical's four steps take a row of four; the Build Room's marks are lime, the estimating apps' copper. */
.aside{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:20px 0 0;font-size:14px;color:var(--muted)}
.aside a{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--lime)}
.aside a:hover{text-decoration:underline;text-underline-offset:4px}
.aside svg{width:16px;height:16px}
/* Rather skip the demo? under the demo buttons: each tool's own sign-up, with no demo booked (Scott, Homepage Build Room messages
   6767 and 6827: "for people that want to skip the demo process you'll be able to just sign up") */
.skip-demo{margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.acts>.skip-demo{flex-basis:100%;margin-top:2px}
.skip-demo a{font-weight:650;color:var(--lime);text-decoration:underline;text-decoration-color:rgba(214,246,129,.4);text-underline-offset:4px;transition:text-decoration-color .15s}
.skip-demo a:hover{text-decoration-color:currentColor}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.stat{margin:0;padding:22px 24px 22px 0}
.stat+.stat{padding-left:24px;border-left:1px solid var(--line)}
.stat b{display:block;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.04em;font-weight:760;color:var(--text)}
.stat:nth-child(2) b{color:var(--lime)}
.stat span{display:block;margin-top:8px;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.say{max-width:660px;margin:20px 0 0;color:var(--text-2);text-wrap:pretty}
.steps,.shots{padding-top:clamp(64px,10vh,104px)}
.steps h2,.shots h2{margin-bottom:28px}
/* the steps, on the tools' pages and the suite's How it works (ol.flow) */
.steps ol,ol.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:step}
.steps li,.flow li{padding:24px 26px 26px;border:1px solid var(--line);border-radius:18px 4px 18px 4px;background:var(--panel);font-size:15.5px;color:var(--text-2);counter-increment:step}
.steps li::before,.flow li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);font:500 13px/1 var(--mono);letter-spacing:.12em;color:var(--copper)}
.steps li b,.flow li b{display:block;margin-bottom:6px;font-size:18px;line-height:1.3;letter-spacing:-.02em;color:var(--text)}
.steps ol.steps--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-room .eyebrow svg,.page-room .steps li::before{color:var(--lime)}
/* Steel's pictures: a wide one under the opening and What comes back, two to a row (one on a phone) */
.shot{margin:0;min-width:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:14px 3px 14px 3px;background:#1d221e;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.shot figcaption{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.shot figcaption b{color:var(--text)}
.shot--wide{margin:clamp(40px,6vh,64px) 0}
.shot--wide img{border-radius:18px 4px 18px 4px}
.shots-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.close{position:relative;overflow:hidden;margin:clamp(64px,10vh,104px) 0 clamp(64px,10vh,104px);padding:clamp(30px,4.5vw,56px);border:1px solid var(--line-2);border-radius:22px 4px 22px 4px;background:var(--panel)}
.close::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 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000)}
.close>*{position:relative}
.close h2+p{max-width:620px;margin:14px 0 0;font-size:clamp(16px,1.4vw,18px);color:var(--text-2)}

/* the foot: the brand with its line (Scott, message 6189) and the veteran badge (message 6191), once, at the foot (message 6380) */
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 56px;padding-top:40px;padding-bottom:max(30px,env(safe-area-inset-bottom));font-size:14px;color:var(--muted)}
.foot .brand{font-size:16px}
.foot .brand svg{width:22px;height:25px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-right:auto}
.foot-motto{margin:0;font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.foot-motto em{font-style:normal;color:var(--lime)}
/* the veteran badge, "Co-founded by a service-disabled veteran" (Scott, message 7594, where it said Veteran owned): a small line
   over a title, like the store badges beside it and at their 40 px, so the longer words still fit a phone */
.vet{margin:0}
.vet>span{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:4px 14px 4px 12px;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;color:var(--text)}
.vet span span{display:flex;flex-direction:column;gap:3px}
.vet small{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.vet b{font-size:14.5px;line-height:1.05;font-weight:700;letter-spacing:-.01em}
.vet svg{width:16px;height:16px;color:var(--lime)}
.foot nav{display:flex;flex-direction:column;gap:10px;min-width:120px}
.foot-h{margin:0 0 2px;font:500 11.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.foot nav a:hover{color:var(--text)}
/* its base line: the copyright, and Built Correct's Facebook, X and LinkedIn as tiles cut like the logo (Vincent, Homepage
   Build Room message 6377), on a phone above the copyright */
.foot-base{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:16px;border-top:1px solid var(--line)}
.foot .copy{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.social{display:flex;gap:8px}
.social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:12px 2px 12px 2px;color:var(--text-2);
  transition:background .15s,border-color .15s,color .15s}
.social a:hover{border-color:var(--accent-edge);background:var(--accent-soft);color:var(--lime)}
.social svg{width:18px;height:18px}

@media (max-width:1099px){
  .tools{grid-template-columns:1fr 1fr}
  .tools .tool:last-child{grid-column:1/-1}
  .steps ol.steps--four{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .nav-more{display:none}
  .nav a{padding-right:10px;padding-left:10px}
  .hero--suite{grid-template-columns:minmax(0,1fr);grid-template-areas:"eyebrow" "h1" "lede" "acts" "shot";grid-template-rows:none}
  .sheets{margin-top:40px}
  .frames{grid-template-columns:1fr;gap:28px}
  .crew,.price,.end{grid-template-columns:1fr}
  .who{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 18px}
  .who .mark{grid-row:span 2}
  .who b{margin-top:0}
}
@media (max-width:719px){
  .top{position:static;background:var(--bg)}
  .top-in{flex-wrap:wrap;gap:10px 16px;padding-top:14px;padding-bottom:12px}
  .top-cta{margin-left:auto}
  .nav{order:3;flex-wrap:wrap;justify-content:space-between;gap:0;margin-left:0;width:100%}
  .nav a{padding-right:8px;padding-left:8px}
  .hero{padding-top:44px;padding-bottom:52px}
  .hero--suite{grid-template-areas:"eyebrow" "h1" "shot" "acts" "lede";padding-top:32px;padding-bottom:36px}
  .hero--suite h1{font-size:clamp(34px,10vw,44px)}
  .sheets{margin-top:24px}
  .sheet-tabs{margin-bottom:12px}
  .sheet-tab{min-height:42px;padding:0 12px;gap:8px;font-size:14px}
  .sheet-soon{gap:12px}
  .sheet-soon .mark{width:52px;height:52px}
  .sheet-soon .mark svg{width:26px;height:26px}
  .hero-shot figcaption,.sheet-note{font-size:13px}
  .hero--suite .acts{margin-top:22px}
  .eyebrow{margin-bottom:20px;font-size:11.5px;letter-spacing:.1em}
  .eyebrow::before{display:none}
  .lede{margin-top:20px}
  .acts{margin-top:28px}
  .btn{width:100%}
  .top-cta{width:auto}
  .pick{width:100%}
  .pick-menu,.pick--up .pick-menu{position:static;width:100%;margin-top:8px}
  .proof-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof-row .proof-tool{grid-column:1/-1;padding:16px 0 2px}
  .proof-row p{padding:8px 8px 16px 0}
  .proof-row p+p{border-left:0}
  .proof-row p+p+p{padding-left:12px;border-left:1px solid var(--line)}
  .proof b{font-size:23px}
  .proof span{font-size:10px;letter-spacing:.08em}
  .tools{grid-template-columns:1fr;gap:12px}
  .tool{padding:22px 20px 20px}
  .tool h3{font-size:21px}
  .next{padding:14px 16px;gap:14px}
  .next .no{display:none}
  .stats{grid-template-columns:1fr}
  .stat,.stat+.stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px 0;border-left:0}
  .stat+.stat{border-top:1px solid var(--line)}
  .stat b{font-size:30px}
  .stat span{margin-top:0}
  .steps ol,.steps ol.steps--four,ol.flow{grid-template-columns:1fr;gap:12px}
  .shots-grid{grid-template-columns:1fr;gap:28px}
  .shot img,.shot--wide img,.frame img{border-radius:12px 3px 12px 3px}
  .steps li,.flow li{padding:20px}
  .who{padding:20px}
  .price{padding:24px 20px}
  .close{padding:28px 20px}
  .end{padding:28px 20px}
  .call{padding:20px 16px}
  .foot-brand{width:100%}
  .foot-base{flex-direction:column-reverse;align-items:flex-start}
}
/* the opening's tabs two to a row where one row doesn't fit: a narrower computer screen, and a phone */
@media (min-width:900px) and (max-width:1199px),(max-width:719px){
  .sheet-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}