/* ─────────────────────────────────────────────────────────────────────────────
   Header, HD-1 of "BuiltOS Header, Rebuilt" (approved 2026-11-03); HD-3 split each product item into its
   name (a link to /handyman, /clickpad, /scope3d) and a ▾ button for its menu. HD-4 (v6): Scope3D's four
   steps are links.
   Home · Handyman.ai ▾ · Clickpad ▾ · Scope3D ▾ · About ▾        theme · search · Book a call
   The markup is written into every page by react-app/scripts/header-hd1.mjs and driven by
   header.js. Loaded after mobile-fix.css. The site is dark at bare :root and light under
   :root[data-color-scheme="light"]; every colour here is a token so both themes are one rule.
   ───────────────────────────────────────────────────────────────────────────── */

#nav-bar{
  --bo-paper:#1c1c1c; --bo-panel:#252525; --bo-ink:#fff; --bo-sub:#a6a6a6; --bo-faint:#7d7d7d;
  --bo-line:rgba(255,255,255,.125); --bo-line2:rgba(255,255,255,.07);
  --bo-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35);
  --bo-green:#00ff85; --bo-green-ink:#00ff85; --bo-on-green:#08120c;
  --bo-hm:#ff6a5e; --bo-cp:#8d82ff; --bo-cp-wash:rgba(141,130,255,.12);
  --bo-s3:#5b9bff; --bo-s3-wash:rgba(91,155,255,.09); --bo-s3-grid:rgba(91,155,255,.28);
}
:root[data-color-scheme="light"] #nav-bar{
  --bo-paper:#fff; --bo-panel:#f5f5f7; --bo-ink:#1a1a1f; --bo-sub:#62626a; --bo-faint:#8b8b92;
  --bo-line:rgba(153,153,153,.2); --bo-line2:rgba(0,0,0,.06);
  --bo-shadow:0 24px 60px rgba(20,22,26,.14),0 2px 6px rgba(20,22,26,.06);
  --bo-green:#007a40; --bo-green-ink:#00703f; --bo-on-green:#fff;
  --bo-hm:#d8433a; --bo-cp:#5b4cf0; --bo-cp-wash:rgba(91,76,240,.08);
  --bo-s3:#0156ee; --bo-s3-wash:rgba(1,86,238,.06); --bo-s3-grid:rgba(1,86,238,.2);
}
#nav-bar .bo-on-dark{display:block!important}
#nav-bar .bo-on-light{display:none!important}
:root[data-color-scheme="light"] #nav-bar .bo-on-dark{display:none!important}
:root[data-color-scheme="light"] #nav-bar .bo-on-light{display:block!important}

/* ── fitting the bar ──────────────────────────────────────────────────────────
   English is the only language and its chip opens an empty list, so it goes. Five items fit
   the pill above 1024 (where the theme folds its own right end); at 1024 and below the bar folds into the theme's menu button. */
#nav-bar .nav-cta .shortcode-wrp{display:none!important}
@media (min-width:1025px){
  #nav-bar .nav-links{display:flex!important}
  #nav-bar .menu-toggle{display:none!important}
}
@media (max-width:1024px){
  #nav-bar .nav-links{display:none!important}
  #nav-bar .menu-toggle{display:flex!important}
  #nav-bar .nav-inner{padding-right:0!important}
  #nav-bar .nav-search{margin-right:0!important;min-width:50px;width:50px}
  #nav-bar .bo-mega{display:none!important}
}

/* ── the five items ── */
#nav-bar .nav-links .nav-menu > li.bo-top > a{display:inline-flex;align-items:center;border-radius:10px;
  transition:background-color .15s}
#nav-bar .nav-links .nav-menu > li.bo-top > a .menu-inner{display:inline-flex;align-items:center;gap:7px}
#nav-bar .nav-links .nav-menu > li.bo-top > a:hover,
#nav-bar .nav-links .nav-menu > li.bo-open > a{background:var(--bo-panel)}
#nav-bar .nav-links .nav-menu > li.bo-top > a:focus-visible{outline:2px solid var(--bo-green);outline-offset:2px}
/* HD-3: a product item is two controls, the name (a link to its page) and the ▾ (a button for its menu).
   The item, not each half, takes the hover and open background, so the two read as one pill. */
#nav-bar .nav-links .nav-menu > li.bo-split{align-items:stretch;border-radius:10px;transition:background-color .15s}
#nav-bar .nav-links .nav-menu > li.bo-split:hover,
#nav-bar .nav-links .nav-menu > li.bo-split.bo-open{background:var(--bo-panel)}
#nav-bar .nav-links .nav-menu > li.bo-split > a,
#nav-bar .nav-links .nav-menu > li.bo-split > a:hover,
#nav-bar .nav-links .nav-menu > li.bo-split.bo-open > a{background:transparent;padding-right:3px!important}
#nav-bar .nav-links .nav-menu > li.bo-split > a:hover .menu-text{text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:6px;text-decoration-color:currentColor}
#nav-bar .bo-chevbtn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  align-self:stretch;width:24px;padding:0 9px 0 4px;margin:0;cursor:pointer;color:var(--jkd-heading,var(--bo-ink));border-radius:0 10px 10px 0}
#nav-bar .bo-chevbtn:hover .bo-chev{opacity:1}
#nav-bar .bo-chevbtn:focus-visible{outline:2px solid var(--bo-green);outline-offset:-2px;border-radius:8px}
#nav-bar .bo-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;display:inline-block}
#nav-bar .bo-top--hm .bo-dot,#nav-bar .bo-dr--hm .bo-dot{background:var(--bo-hm)}
#nav-bar .bo-top--cp .bo-dot,#nav-bar .bo-dr--cp .bo-dot{background:var(--bo-cp)}
#nav-bar .bo-top--s3 .bo-dot,#nav-bar .bo-dr--s3 .bo-dot{background:var(--bo-s3)}
#nav-bar .bo-chev{width:9px;height:9px;flex:0 0 9px;opacity:.7;transition:transform .2s}
#nav-bar .bo-open .bo-chev{transform:rotate(180deg)}
#nav-bar .nav-links .nav-menu > li.bo-current > a .menu-text{text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:6px;text-decoration-color:var(--bo-line)}

/* ── the panel: one card under the bar, the bar's own width ──
   Display none until the first open (header.js adds .is-live), so its pictures do not load
   with the page. All four menus share one grid cell, so the card keeps one height and swapping
   menus never resizes it. The 12px of padding above the card is a bridge: the pointer can
   travel from the bar to the card without leaving either. */
#nav-bar .bo-mega{display:none;position:absolute;left:-1px;right:-1px;top:100%;padding-top:12px;z-index:150;
  pointer-events:none;color:var(--bo-ink);font-size:15px;line-height:1.5;text-align:left}
#nav-bar .bo-mega.is-live{display:block}
#nav-bar .bo-mega.is-open{pointer-events:auto}
#nav-bar .bo-mega-card{display:grid;background:var(--bo-paper);border:1px solid var(--bo-line);border-radius:18px;
  box-shadow:var(--bo-shadow);overflow:hidden auto;max-height:calc(100vh - 120px);overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .22s ease}
#nav-bar .bo-mega.is-open .bo-mega-card{opacity:1;transform:none}
#nav-bar .bo-panel{grid-area:1/1;display:flex;flex-direction:column;min-width:0;visibility:hidden;opacity:0;
  transition:opacity .14s ease,visibility 0s linear .14s}
#nav-bar .bo-panel.is-on{visibility:visible;opacity:1;transition:opacity .14s ease}
#nav-bar .bo-grid{display:grid;flex:1 0 auto}
#nav-bar .bo-panel--hm .bo-grid{grid-template-columns:1.05fr 1.05fr 1fr}
#nav-bar .bo-panel--cp .bo-grid{grid-template-columns:.95fr 1fr 1.25fr}
#nav-bar .bo-panel--s3 .bo-grid{grid-template-columns:1fr 1.25fr .9fr}
#nav-bar .bo-panel--ab .bo-grid{grid-template-columns:1fr 1.15fr 1fr}
#nav-bar .bo-col{padding:22px 22px 20px;display:flex;flex-direction:column;gap:4px;min-width:0}
#nav-bar .bo-col + .bo-col{border-left:1px solid var(--bo-line2)}
#nav-bar .bo-col--between{justify-content:space-between}
#nav-bar .bo-mega a{color:inherit;text-decoration:none}
#nav-bar .bo-mega a:focus-visible,#nav-bar .nav-overlay .bo-acc-body a:focus-visible,
#nav-bar .nav-overlay .bo-dr-chev:focus-visible{outline:2px solid var(--bo-green);outline-offset:2px;border-radius:10px}
#nav-bar .bo-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bo-faint);margin:0 0 8px 10px;line-height:1.4}
/* the theme sets every img to width:100% / object-fit:cover; each picture here says its own size */
#nav-bar .bo-mega img{max-width:none;max-height:none}
#nav-bar .bo-wm{display:block;width:auto!important;max-width:calc(100% - 10px)!important;object-fit:contain!important;
  object-position:left center;align-self:flex-start;margin:0 0 10px 10px}
#nav-bar .bo-wm--hm{height:46px!important}
#nav-bar .bo-wm--cp{height:26px!important}
#nav-bar .bo-wm--s3{height:34px!important}
#nav-bar .bo-blurb{font-size:13px;color:var(--bo-sub);margin:0 10px 10px;max-width:40ch;line-height:1.45}
#nav-bar .bo-wm-link{display:block;align-self:flex-start}
#nav-bar .bo-wm-link .bo-wm{margin-bottom:10px}
#nav-bar .bo-mega a.bo-overview{align-self:flex-start;margin:-4px 10px 12px}

/* rows: an icon tile, a bold line, a quiet line */
#nav-bar .bo-row{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;padding:9px 10px;
  border-radius:12px;transition:background-color .12s}
#nav-bar .bo-row:hover{background:var(--bo-panel)}
#nav-bar .bo-ic{grid-row:span 2;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--bo-panel);border:1px solid var(--bo-line2);color:var(--bo-ink)}
#nav-bar .bo-row:hover .bo-ic{background:var(--bo-paper)}
#nav-bar .bo-ic svg{width:15px;height:15px}
/* the theme fills every svg in the bar; these icons are line drawings */
#nav-bar .bo-ic svg,#nav-bar .bo-ic svg *,#nav-bar .bo-layerchip svg,#nav-bar .bo-layerchip svg *,
#nav-bar .bo-chev,#nav-bar .bo-chev *,#nav-bar .bo-dr-cta svg,#nav-bar .bo-dr-cta svg *{fill:none!important}
#nav-bar .bo-ic img.bo-ic-img{width:20px!important;height:20px!important;border-radius:5px;object-fit:contain!important}
#nav-bar .bo-row b{font-weight:600;font-size:14px;line-height:1.3;color:var(--bo-ink)}
#nav-bar .bo-row > span:last-child{font-size:12.5px;color:var(--bo-sub);line-height:1.35}

/* the strip that ends both product menus: the layer they sit on */
#nav-bar .bo-foot{display:flex;align-items:center;gap:14px;padding:12px 22px;background:var(--bo-panel);
  border-top:1px solid var(--bo-line2);font-size:13px;color:var(--bo-sub)}
#nav-bar .bo-foot a{margin-left:auto;font-weight:600;color:var(--bo-ink);white-space:nowrap}
#nav-bar .bo-foot a:hover{color:var(--bo-s3)}
#nav-bar .bo-layerchip{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--bo-s3);white-space:nowrap}
#nav-bar .bo-layerchip svg{width:18px;height:18px}

#nav-bar .bo-feature{border-radius:14px;overflow:hidden;background:var(--bo-panel);border:1px solid var(--bo-line2);
  display:flex;flex-direction:column}
#nav-bar .bo-feature img{width:100%!important;height:auto!important;display:block;aspect-ratio:16/9;object-fit:cover!important}
#nav-bar .bo-feature--revit{margin-top:10px}
#nav-bar .bo-feature--revit img{aspect-ratio:520/200}
#nav-bar .bo-fx{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
#nav-bar .bo-fx b{font-size:14px;font-weight:600}
#nav-bar .bo-fx span{font-size:12.5px;color:var(--bo-sub);line-height:1.4}
#nav-bar .bo-go,#nav-bar .bo-mega a.bo-go{font-size:13px;font-weight:600;color:var(--bo-green-ink)}
#nav-bar a.bo-go:hover{text-decoration:underline;text-underline-offset:3px}
#nav-bar .bo-go--after{margin:10px 0 0 4px}

/* Click: only here, inside Clickpad */
#nav-bar .bo-click{background:var(--bo-cp-wash);border:1px solid color-mix(in srgb,var(--bo-cp) 22%,transparent);
  border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;height:100%;transition:border-color .15s}
#nav-bar .bo-click:hover{border-color:color-mix(in srgb,var(--bo-cp) 50%,transparent)}
#nav-bar .bo-who{display:flex;align-items:center;gap:10px}
#nav-bar .bo-who img{width:34px!important;height:34px!important;border-radius:10px;object-fit:contain!important}
#nav-bar .bo-who b{font-size:16px;font-weight:600;display:block;line-height:1.2}
#nav-bar .bo-who em{font-style:normal;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bo-cp)}
#nav-bar .bo-click-p{font-size:13px;color:var(--bo-sub);line-height:1.45}
#nav-bar .bo-sms{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#nav-bar .bo-sms span{max-width:88%;font-size:12.5px;line-height:1.35;padding:7px 10px;border-radius:14px}
#nav-bar .bo-sms .bo-me{align-self:flex-end;background:var(--bo-cp);color:#fff;border-bottom-right-radius:4px}
#nav-bar .bo-sms .bo-it{background:var(--bo-paper);border:1px solid var(--bo-line2);border-bottom-left-radius:4px}
#nav-bar .bo-click .bo-go{color:var(--bo-cp);margin-top:auto}

#nav-bar .bo-bld{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#nav-bar .bo-bld--2{grid-template-columns:1fr 1fr}
#nav-bar .bo-bld a{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--bo-sub);min-width:0}
#nav-bar .bo-bld img{width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:cover!important;
  border-radius:9px;border:1px solid var(--bo-line2);display:block}
#nav-bar .bo-bld a:hover{color:var(--bo-ink)}
#nav-bar .bo-bld a:hover img{outline:2px solid var(--bo-green);outline-offset:-1px}

/* Scope3D: the layer, drawn — both products standing on one measured plate */
#nav-bar .bo-iso{position:relative;width:100%;max-width:320px;height:210px;margin:0 auto}
#nav-bar .bo-iso-world{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;
  transform:rotateX(58deg) rotateZ(-45deg);transform-style:preserve-3d}
#nav-bar .bo-plate{position:absolute;border-radius:14px;display:flex;align-items:flex-end;padding:10px 12px;
  font-size:12px;font-weight:600;line-height:1.2}
#nav-bar .bo-plate--base{inset:0;color:var(--bo-s3);border:1.5px solid var(--bo-s3);
  background:linear-gradient(var(--bo-s3-grid) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,var(--bo-s3-grid) 1px,transparent 1px) 0 0/20px 20px,var(--bo-s3-wash);
  box-shadow:0 30px 40px -20px rgba(1,86,238,.35)}
#nav-bar .bo-plate--top{width:80px;height:80px;transform:translateZ(44px);background:var(--bo-paper);
  border:1px solid var(--bo-line);box-shadow:0 18px 22px -10px rgba(0,0,0,.28);flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:2px;color:var(--bo-ink)}
#nav-bar .bo-plate--top i{font-style:normal;font-weight:500;font-size:10px;color:var(--bo-sub)}
#nav-bar .bo-plate--a{left:18px;top:18px;border-top:3px solid var(--bo-hm)}
#nav-bar .bo-plate--b{left:104px;top:104px;border-top:3px solid var(--bo-cp)}
#nav-bar .bo-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#nav-bar .bo-step{display:flex;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--bo-line2);background:var(--bo-panel)}
/* HD-4: each step is a link to its section on /scope3d */
#nav-bar a.bo-step{color:var(--bo-ink);text-decoration:none;transition:border-color .12s,background-color .12s}
#nav-bar a.bo-step:hover,#nav-bar a.bo-step:focus-visible{border-color:var(--bo-s3);background:var(--bo-paper)}
#nav-bar .bo-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--bo-s3);padding-top:1px}
#nav-bar .bo-step b{display:block;font-size:13px;font-weight:600;line-height:1.3}
#nav-bar .bo-step span:not(.bo-n){font-size:12px;color:var(--bo-sub);line-height:1.35}

/* About */
#nav-bar .bo-film{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--bo-line2)}
#nav-bar .bo-film img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;transition:transform .4s ease}
#nav-bar .bo-film:hover img{transform:scale(1.03)}
#nav-bar .bo-play{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;
  background:var(--bo-paper);color:var(--bo-ink);font-weight:600;font-size:13px;padding:8px 12px;border-radius:999px}
#nav-bar .bo-play svg{width:12px;height:12px}
#nav-bar .bo-contact{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--bo-sub);padding:0 10px;line-height:1.45}
#nav-bar .bo-contact b{color:var(--bo-ink);font-weight:600}
#nav-bar .bo-contact a:not(.bo-cta):hover{color:var(--bo-ink)}
#nav-bar .bo-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:6px;
  height:38px;padding:0 16px;border-radius:10px;background:var(--bo-green);color:var(--bo-on-green)!important;
  font-weight:600;font-size:14px;transition:filter .15s}
#nav-bar .bo-cta:hover{filter:brightness(1.08)}

/* narrower laptops: same three columns, tighter */
@media (max-width:1279px){
  #nav-bar .bo-col{padding:18px 16px 16px}
  #nav-bar .bo-foot{padding:11px 16px}
  #nav-bar .bo-row{padding:8px}
  #nav-bar .bo-row > span:last-child{font-size:12px}
  #nav-bar .bo-iso{transform:scale(.86);transform-origin:50% 60%;height:190px}
}

/* ── the phone drawer: the same five rows, each product unfolding in place ── */
#nav-bar .nav-overlay .nav-overlay-inner{height:100%}
#nav-bar .nav-overlay .nav-overlay-menu{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:block;margin:12px 0}
#nav-bar .nav-overlay .nav-overlay-bottom{flex:none}
#nav-bar #menu-primary-menu-1{display:block;width:100%;margin:0;padding:0}
#nav-bar #menu-primary-menu-1 > li.bo-dr{display:block;width:100%;margin:0;padding:0;
  border-bottom:1px solid var(--bo-line2);color:var(--bo-ink)}
#nav-bar #menu-primary-menu-1 > li.bo-dr > a,
#nav-bar #menu-primary-menu-1 .bo-dr-title,
#nav-bar #menu-primary-menu-1 .bo-dr-whole{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 4px;
  font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--bo-ink);cursor:pointer;list-style:none}
#nav-bar #menu-primary-menu-1 > li.bo-dr > a .menu-text,
#nav-bar #menu-primary-menu-1 .bo-dr-title .menu-text,
#nav-bar #menu-primary-menu-1 .bo-dr-whole .menu-text{font-size:inherit;font-weight:inherit;line-height:inherit}
/* HD-3: a product row is its name (a link to the page) and a 56px chevron button that unfolds the menu;
   About, with no page, is one full-width button */
#nav-bar #menu-primary-menu-1 .bo-dr-head{display:flex;align-items:stretch;min-height:56px}
#nav-bar #menu-primary-menu-1 .bo-dr-title{flex:1 1 auto;min-width:0}
#nav-bar #menu-primary-menu-1 .bo-dr-chev{all:unset;box-sizing:border-box;flex:0 0 56px;min-height:56px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--bo-ink);border-radius:12px}
#nav-bar #menu-primary-menu-1 .bo-dr-chev.bo-dr-whole{flex:1 1 auto;justify-content:flex-start;padding:0 4px}
#nav-bar #menu-primary-menu-1 .bo-dr-chev:focus-visible,#nav-bar #menu-primary-menu-1 .bo-dr-title:focus-visible{outline:2px solid var(--bo-green);outline-offset:-2px;border-radius:10px}
#nav-bar #menu-primary-menu-1 .bo-dot{width:8px;height:8px;flex-basis:8px}
#nav-bar #menu-primary-menu-1 .bo-chev{width:12px;height:12px;flex-basis:12px}
#nav-bar #menu-primary-menu-1 .bo-dr-whole .bo-chev{margin-left:auto;margin-right:18px}
/* The theme orders .menu-text first, and keeps the drawer's rows at pointer-events:none until it is
   open. Only while it is open (aria-hidden="false") do the rows take the pointer: switched on for good,
   the closed drawer, an invisible full-screen layer, caught the pointer under the bar and closed every
   megamenu the moment the pointer moved down into it. */
#nav-bar #menu-primary-menu-1 .bo-dot{order:0}
#nav-bar .nav-overlay[aria-hidden="false"] #menu-primary-menu-1 > li.bo-dr{pointer-events:auto}
#nav-bar #menu-primary-menu-1 .bo-acc-open .bo-chev{transform:rotate(180deg)}
#nav-bar #menu-primary-menu-1 .bo-acc-body{padding:0 0 12px;display:flex;flex-direction:column;gap:2px}
#nav-bar #menu-primary-menu-1 .bo-acc-body[hidden]{display:none}
#nav-bar #menu-primary-menu-1 .bo-acc-open .bo-acc-body{animation:bo-unfold .2s ease}
@keyframes bo-unfold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#nav-bar #menu-primary-menu-1 .bo-row{display:grid!important;grid-template-columns:auto 1fr;align-content:center;
  min-height:56px;padding:9px 8px;font-size:15px}
#nav-bar #menu-primary-menu-1 .bo-row b{font-size:15px}
#nav-bar #menu-primary-menu-1 .bo-row > span:last-child{font-size:13px}
#nav-bar #menu-primary-menu-1 .bo-row > b,#nav-bar #menu-primary-menu-1 .bo-row > span:last-child{grid-column:2}
#nav-bar #menu-primary-menu-1 .bo-row--click{background:var(--bo-cp-wash);border:1px solid color-mix(in srgb,var(--bo-cp) 22%,transparent)}
#nav-bar #menu-primary-menu-1 .bo-row--click b{color:var(--bo-cp)}
#nav-bar #menu-primary-menu-1 .bo-acc-more{display:flex;gap:8px;padding:6px 8px 0}
#nav-bar #menu-primary-menu-1 .bo-acc-more a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--bo-line);border-radius:12px;font-size:14px;font-weight:500;color:var(--bo-ink)}
#nav-bar #menu-primary-menu-1 a{text-decoration:none}
#nav-bar .nav-overlay .bo-dr-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;border-radius:12px;background:var(--bo-green);color:var(--bo-on-green);font-size:16px;font-weight:600;
  text-decoration:none;margin:0 0 14px}
#nav-bar .nav-overlay .bo-dr-cta svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){
  #nav-bar .bo-mega-card,#nav-bar .bo-panel,#nav-bar .bo-chev{transition:none}
  #nav-bar #menu-primary-menu-1 .bo-acc-open .bo-acc-body{animation:none}
}

/* BuiltOS unification (lane S): a wordmark drawn twice, one per theme (BuiltOS for Home). The site is dark at bare
   :root and light under [data-color-scheme="light"]; the hidden twin goes, the shown one keeps its own display. */
:root:not([data-color-scheme="light"]) .bo-tw-lt{display:none!important}
:root[data-color-scheme="light"] .bo-tw-dk{display:none!important}

/* ── BuiltOS unification (lane S, v8): Platform ▾ · BuiltOS for Home ▾ · Agents ▾ · Pricing · About ▾ ──
   Written by react-app/scripts/header-unify.mjs. Accents: Studio blue, Ops green, for Home red; Repaired.ai its own
   blue to violet. The Clickpad violet left with Clickpad. */
#nav-bar{--bo-st:#5b9bff;--bo-op:#00ff85;--bo-rp:#7d8bff;--bo-rp-wash:rgba(125,139,255,.12)}
:root[data-color-scheme="light"] #nav-bar{--bo-st:#0156ee;--bo-op:#00874a;--bo-rp:#5560f0;--bo-rp-wash:rgba(85,96,240,.07)}
#nav-bar .bo-panel--pf .bo-grid{grid-template-columns:1fr 1fr 1.1fr}
#nav-bar .bo-panel--ag .bo-grid{grid-template-columns:1fr 1fr .9fr}
#nav-bar .bo-wm--st,#nav-bar .bo-wm--op,#nav-bar .bo-wm--home{height:26px!important}
#nav-bar .bo-panel--pf .bo-col:first-child .bo-overview{color:var(--bo-st)}
#nav-bar .bo-panel--hm .bo-overview{color:var(--bo-hm)}
#nav-bar .bo-later{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:12px 14px;
  border-radius:12px;border:1px dashed var(--bo-line);font-size:12.5px;color:var(--bo-sub);line-height:1.35}
#nav-bar .bo-later b{color:var(--bo-ink);font-weight:600;font-size:13px}
#nav-bar .bo-later span{grid-column:1}
#nav-bar .bo-later em{grid-column:2;grid-row:1/span 2;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--bo-faint);border:1px solid var(--bo-line);border-radius:999px;padding:4px 8px}
#nav-bar .bo-click--rp{background:var(--bo-rp-wash);border-color:color-mix(in srgb,var(--bo-rp) 24%,transparent)}
#nav-bar .bo-click--rp:hover{border-color:color-mix(in srgb,var(--bo-rp) 55%,transparent)}
#nav-bar .bo-click--rp .bo-sms .bo-me{background:var(--bo-rp)}
#nav-bar .bo-click--rp .bo-go{color:var(--bo-rp)}
#nav-bar .bo-click--hm{background:color-mix(in srgb,var(--bo-hm) 8%,transparent);border-color:color-mix(in srgb,var(--bo-hm) 22%,transparent)}
#nav-bar .bo-click--hm:hover{border-color:color-mix(in srgb,var(--bo-hm) 50%,transparent)}
#nav-bar .bo-click--hm .bo-sms .bo-me{background:var(--bo-hm)}
#nav-bar .bo-click--hm .bo-go{color:var(--bo-hm)}
#nav-bar .bo-num{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--bo-ink)!important;margin-bottom:2px}
#nav-bar #menu-primary-menu-1 .bo-row--st b{color:var(--bo-st)}
#nav-bar #menu-primary-menu-1 .bo-row--op b{color:var(--bo-op)}
#nav-bar #menu-primary-menu-1 .bo-later{margin:6px 10px 4px}
/* the drawer's whole-row menus (Platform, Agents, About): label left, chevron right, the same type as the other rows.
   .bo-dr-chev's all:unset wiped the row's type, and the theme's ordering put the label after the chevron. */
#nav-bar #menu-primary-menu-1 .bo-dr-chev.bo-dr-whole{flex-direction:row!important;font-size:20px;font-weight:500;letter-spacing:-.01em;
  line-height:1.2;color:var(--bo-ink);text-align:left}
#nav-bar #menu-primary-menu-1 .bo-dr-whole .menu-text{order:1!important;margin:0!important;font-size:20px!important;font-weight:500!important}
#nav-bar #menu-primary-menu-1 .bo-dr-whole .bo-chev{order:2!important;margin-left:auto!important}
#nav-bar #menu-primary-menu-1 > li.bo-dr--pr > a .menu-text{font-size:20px!important;font-weight:500!important}
#nav-bar .bo-click--rp .bo-who em{color:var(--bo-rp)}
#nav-bar .bo-click--hm .bo-who em{color:var(--bo-hm)}

/* ── Agents ▾, alive (v9): each card plays one real conversation when the panel opens — the report, the agent
   reading the record, the fix, a Booked chip — and the third column is the one number as a call card.
   Repaired.ai is blue→violet (#1f6bff → #7b3cff), Handyman.ai is #D8433A. Bubbles stagger by --i. ── */
#nav-bar{--bo-rpa:#1f6bff;--bo-rpb:#7b3cff;--bo-hma:#d8433a;--bo-ok:#22c55e;--bo-ok-ink:#4ade80}
:root[data-color-scheme="light"] #nav-bar{--bo-ok-ink:#15803d}
#nav-bar .bo-panel--ag .bo-grid{grid-template-columns:1fr 1fr .86fr}
#nav-bar .bo-panel--ag .bo-col{padding:18px 18px 18px}
#nav-bar .bo-panel--ag .bo-click{position:relative;overflow:hidden;gap:12px;padding:16px 16px 14px;border-radius:18px;isolation:isolate}
#nav-bar .bo-panel--ag .bo-click::before{content:"";position:absolute;inset:auto -30% 55% 30%;height:220px;z-index:-1;pointer-events:none;
  border-radius:50%;filter:blur(40px);opacity:.55;transition:opacity .3s}
#nav-bar .bo-panel--ag .bo-click:hover::before{opacity:.85}
#nav-bar .bo-click--rp{background:linear-gradient(160deg,color-mix(in srgb,var(--bo-rpa) 9%,var(--bo-paper)),color-mix(in srgb,var(--bo-rpb) 7%,var(--bo-paper)))}
#nav-bar .bo-click--rp::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--bo-rpb) 40%,transparent),transparent)}
#nav-bar .bo-click--hm{background:linear-gradient(160deg,color-mix(in srgb,var(--bo-hma) 9%,var(--bo-paper)),color-mix(in srgb,var(--bo-hma) 4%,var(--bo-paper)))}
#nav-bar .bo-click--hm::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--bo-hma) 32%,transparent),transparent)}
#nav-bar .bo-panel--ag .bo-click:hover{transform:translateY(-1px);box-shadow:0 14px 34px -18px color-mix(in srgb,var(--bo-ink) 40%,transparent)}
#nav-bar .bo-panel--ag .bo-click{transition:border-color .15s,transform .2s,box-shadow .2s}
/* the face: bigger, framed, with a live dot */
#nav-bar .bo-face{position:relative;flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--bo-paper);border:1px solid var(--bo-line);box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
#nav-bar .bo-click--rp .bo-face{border-color:color-mix(in srgb,var(--bo-rpa) 35%,transparent)}
#nav-bar .bo-click--hm .bo-face{border-color:color-mix(in srgb,var(--bo-hma) 35%,transparent)}
#nav-bar .bo-who{gap:12px}
#nav-bar .bo-who .bo-face img{width:40px!important;height:40px!important;border-radius:10px}
#nav-bar .bo-live{position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--bo-ok);
  border:2px solid var(--bo-paper)}
#nav-bar .bo-live::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--bo-ok);opacity:0;
  animation:bo-ping 2.4s ease-out infinite}
@keyframes bo-ping{0%{transform:scale(.8);opacity:.7}70%,100%{transform:scale(2);opacity:0}}
#nav-bar .bo-panel--ag .bo-who b{font-size:17px;letter-spacing:-.01em}
#nav-bar .bo-click--rp .bo-who em{background:linear-gradient(90deg,var(--bo-rpa),var(--bo-rpb));-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not([data-color-scheme="light"]) #nav-bar .bo-click--rp .bo-who em{background-image:linear-gradient(90deg,#6f9dff,#a98bff)}
/* capability chips */
#nav-bar .bo-chips{display:flex;flex-wrap:wrap;gap:5px}
#nav-bar .bo-chips span{font-size:11px;font-weight:600;line-height:1;padding:5px 8px;border-radius:999px;color:var(--bo-sub);
  background:color-mix(in srgb,var(--bo-paper) 70%,transparent);border:1px solid var(--bo-line2)}
/* the conversation */
#nav-bar .bo-panel--ag .bo-sms{gap:5px;margin:0}
#nav-bar .bo-panel--ag .bo-sms > span{max-width:90%;font-size:12.5px;line-height:1.38;padding:7px 11px;border-radius:15px}
#nav-bar .bo-panel--ag .bo-sms .bo-me{color:#fff;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
#nav-bar .bo-click--rp .bo-sms .bo-me{background:linear-gradient(135deg,var(--bo-rpa),var(--bo-rpb))}
#nav-bar .bo-click--hm .bo-sms .bo-me{background:var(--bo-hma)}
#nav-bar .bo-sms .bo-it{position:relative;align-self:flex-start;background:var(--bo-paper);border:1px solid var(--bo-line);
  color:var(--bo-ink);border-bottom-left-radius:4px;box-shadow:0 2px 8px -4px rgba(0,0,0,.18)}
#nav-bar .bo-sms .bo-it + .bo-it{border-top-left-radius:6px}
#nav-bar .bo-sms .bo-it > span{display:inline;padding:0;max-width:none;border-radius:0;font-size:inherit}
#nav-bar .bo-dots{position:absolute;left:11px;top:50%;display:flex;gap:3px;transform:translateY(-50%);opacity:0}
#nav-bar .bo-dots i{width:5px;height:5px;border-radius:50%;background:var(--bo-faint);animation:bo-dot 1s infinite}
#nav-bar .bo-dots i:nth-child(2){animation-delay:.15s}
#nav-bar .bo-dots i:nth-child(3){animation-delay:.3s}
@keyframes bo-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-2px);opacity:1}}
#nav-bar .bo-done{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:2px;font-size:12px;line-height:1;
  padding:6px 10px 6px 7px;border-radius:999px;background:color-mix(in srgb,var(--bo-ok) 14%,var(--bo-paper));
  border:1px solid color-mix(in srgb,var(--bo-ok) 40%,transparent);color:var(--bo-ink)}
#nav-bar .bo-done svg{width:15px;height:15px;padding:2px;border-radius:50%;background:var(--bo-ok);color:#fff;fill:none!important}
#nav-bar .bo-done svg *{fill:none!important}
#nav-bar .bo-done b{font-weight:700;color:var(--bo-ok-ink)}
#nav-bar .bo-done em{font-style:normal;color:var(--bo-sub);font-variant-numeric:tabular-nums}
#nav-bar .bo-panel--ag .bo-click .bo-go{margin-top:auto;padding-top:2px;display:inline-flex;align-items:center;gap:4px}
#nav-bar .bo-click--rp .bo-go{color:var(--bo-rpa)}
:root:not([data-color-scheme="light"]) #nav-bar .bo-click--rp .bo-go{color:#8fb0ff}
#nav-bar .bo-click--hm .bo-go{color:var(--bo-hma)}
:root:not([data-color-scheme="light"]) #nav-bar .bo-click--hm .bo-go{color:#ff7a70}
/* the play: on every open, the bubbles arrive in order; an agent's bubble types first */
#nav-bar .bo-panel--ag.is-on .bo-sms > span{animation:bo-pop .32s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 300ms + 80ms)}
#nav-bar .bo-panel--ag.is-on .bo-sms .bo-it > span{animation:bo-fadein .2s ease both;animation-delay:calc(var(--i) * 300ms + 320ms)}
#nav-bar .bo-panel--ag.is-on .bo-sms .bo-dots{animation:bo-typing .26s linear both;animation-delay:calc(var(--i) * 300ms + 80ms)}
@keyframes bo-pop{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
@keyframes bo-fadein{from{opacity:0}to{opacity:1}}
@keyframes bo-typing{0%,90%{opacity:1}100%{opacity:0}}
#nav-bar .bo-panel--ag .bo-me{transform-origin:100% 100%}
#nav-bar .bo-panel--ag .bo-it,#nav-bar .bo-panel--ag .bo-done{transform-origin:0 100%}
/* the one number */
#nav-bar .bo-call{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:3px;padding:18px 16px 16px;
  border-radius:18px;background:#0e0f13;color:#fff!important;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6);transition:transform .2s,box-shadow .2s}
#nav-bar .bo-call::before{content:"";position:absolute;inset:-40% -30% auto auto;width:240px;height:240px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 200deg,var(--bo-rpa),var(--bo-rpb),var(--bo-hma),var(--bo-rpa));filter:blur(48px);opacity:.55;
  transition:opacity .3s}
#nav-bar .bo-call::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:18px 18px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
#nav-bar .bo-call:hover{transform:translateY(-1px);box-shadow:0 22px 46px -22px rgba(0,0,0,.75)}
#nav-bar .bo-call:hover::before{opacity:.8}
:root:not([data-color-scheme="light"]) #nav-bar .bo-call{background:#15161b;border-color:rgba(255,255,255,.14)}
#nav-bar .bo-call-ring{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;
  background:var(--bo-ok);color:#06210f}
#nav-bar .bo-call-ring svg{width:18px;height:18px}
#nav-bar .bo-call-ring svg,#nav-bar .bo-call-ring svg *{fill:none!important}
#nav-bar .bo-call-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--bo-ok);animation:bo-ring 2.2s ease-out infinite}
@keyframes bo-ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.55);opacity:0}}
#nav-bar .bo-call-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#nav-bar .bo-call .bo-num{font-size:27px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#fff!important;margin:0}
#nav-bar .bo-call-digits{font-size:12.5px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
#nav-bar .bo-call-who{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.82)}
#nav-bar .bo-call-who > span{display:flex;align-items:center;gap:8px}
#nav-bar .bo-call-who img{width:18px!important;height:18px!important;border-radius:5px;object-fit:contain!important;background:#fff}
#nav-bar .bo-model{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:8px;padding:9px 12px 9px 9px;
  border-radius:14px;border:1px solid var(--bo-line);background:var(--bo-panel);transition:border-color .15s,background-color .15s}
#nav-bar .bo-model:hover{border-color:color-mix(in srgb,var(--bo-st) 55%,transparent)}
#nav-bar .bo-model .bo-ic{grid-row:auto;color:var(--bo-st);background:color-mix(in srgb,var(--bo-st) 12%,var(--bo-paper));border-color:color-mix(in srgb,var(--bo-st) 25%,transparent)}
#nav-bar .bo-model b{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--bo-ink)}
#nav-bar .bo-model > span:nth-child(2) > span{display:block;font-size:11.5px;color:var(--bo-sub);line-height:1.3}
#nav-bar .bo-model-go{color:var(--bo-st);font-weight:600;transition:transform .15s}
#nav-bar .bo-model:hover .bo-model-go{transform:translateX(2px)}

/* the phone drawer's Agents: the same two agents as compact cards, then the number */
#nav-bar #menu-primary-menu-1 .bo-acc-body .bo-mini{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:10px 12px;
  align-items:center;padding:12px;border-radius:16px;margin:2px 0 6px;color:var(--bo-ink);border:1px solid var(--bo-line)}
#nav-bar #menu-primary-menu-1 .bo-mini--rp{background:linear-gradient(150deg,color-mix(in srgb,var(--bo-rpa) 11%,var(--bo-paper)),color-mix(in srgb,var(--bo-rpb) 9%,var(--bo-paper)));
  border-color:color-mix(in srgb,var(--bo-rpa) 28%,transparent)}
#nav-bar #menu-primary-menu-1 .bo-mini--hm{background:linear-gradient(150deg,color-mix(in srgb,var(--bo-hma) 11%,var(--bo-paper)),color-mix(in srgb,var(--bo-hma) 4%,var(--bo-paper)));
  border-color:color-mix(in srgb,var(--bo-hma) 28%,transparent)}
#nav-bar #menu-primary-menu-1 .bo-mini .bo-face{width:44px;height:44px;border-radius:13px}
#nav-bar #menu-primary-menu-1 .bo-mini .bo-face img{width:36px!important;height:36px!important;border-radius:9px;object-fit:contain!important;max-width:none}
#nav-bar #menu-primary-menu-1 .bo-mini-t b{display:block;font-size:16px;font-weight:600;line-height:1.2}
#nav-bar #menu-primary-menu-1 .bo-mini-t em{display:block;font-style:normal;font-size:12.5px;color:var(--bo-sub);line-height:1.3}
#nav-bar #menu-primary-menu-1 .bo-mini-sms{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
#nav-bar #menu-primary-menu-1 .bo-mini-sms .bo-me{font-size:13px;line-height:1.3;padding:7px 11px;border-radius:15px;border-bottom-right-radius:4px;color:#fff;align-self:flex-end;max-width:85%}
#nav-bar #menu-primary-menu-1 .bo-mini--rp .bo-me{background:linear-gradient(135deg,var(--bo-rpa),var(--bo-rpb))}
#nav-bar #menu-primary-menu-1 .bo-mini--hm .bo-me{background:var(--bo-hma)}
#nav-bar #menu-primary-menu-1 .bo-mini-sms .bo-done{align-self:flex-start;margin:0}
#nav-bar #menu-primary-menu-1 .bo-mini-call{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;border-radius:16px;
  background:#0e0f13;color:#fff;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;isolation:isolate}
#nav-bar #menu-primary-menu-1 .bo-mini-call::before{content:"";position:absolute;right:-40px;top:-60px;width:160px;height:160px;z-index:-1;border-radius:50%;
  background:conic-gradient(from 200deg,var(--bo-rpa),var(--bo-rpb),var(--bo-hma),var(--bo-rpa));filter:blur(36px);opacity:.55}
#nav-bar #menu-primary-menu-1 .bo-mini-call .bo-call-ring{margin:0;flex:none}
#nav-bar #menu-primary-menu-1 .bo-mini-call b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
#nav-bar #menu-primary-menu-1 .bo-mini-call em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.65)}
#nav-bar #menu-primary-menu-1 .bo-acc-open .bo-mini-sms > span{animation:bo-pop .32s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 260ms + 120ms)}
#nav-bar #menu-primary-menu-1 .bo-mini-sms .bo-dots{display:none}

@media (max-width:1279px){
  #nav-bar .bo-panel--ag .bo-col{padding:16px 14px}
  #nav-bar .bo-call .bo-num{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  #nav-bar .bo-panel--ag .bo-sms > span,#nav-bar .bo-panel--ag .bo-sms .bo-it > span,#nav-bar #menu-primary-menu-1 .bo-mini-sms > span{animation:none!important}
  #nav-bar .bo-panel--ag .bo-dots,#nav-bar .bo-live::after,#nav-bar .bo-call-ring::after{animation:none!important;opacity:0}
  #nav-bar .bo-panel--ag .bo-click,#nav-bar .bo-call{transition:none;transform:none!important}
}
/* S3 (2026-11-08): Scope3D, photorealistic 3D for buildings, a live product. Its card in Platform (under the nine
   buildings) and its row in the phone drawer, where the dashed "coming later" box was. */
#nav-bar{--bo-s3:#7dd955}
:root[data-color-scheme="light"] #nav-bar{--bo-s3:#2f8f1c}
#nav-bar .bo-s3{margin-top:14px;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:8px 12px 8px 8px;
  border-radius:14px;background:var(--bo-panel);border:1px solid var(--bo-line2);text-decoration:none!important;color:var(--bo-sub);
  font-size:12.5px;line-height:1.35;transition:border-color .2s}
#nav-bar .bo-s3:hover{border-color:color-mix(in srgb,var(--bo-s3) 55%,transparent)}
#nav-bar .bo-s3 .bo-s3-pic{width:96px!important;height:64px!important;object-fit:cover!important;border-radius:9px;display:block}
#nav-bar .bo-s3-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
#nav-bar .bo-s3 .bo-s3-wm{height:22px!important;width:auto!important;max-width:none!important;margin:0 0 1px -1px}
#nav-bar .bo-s3 b{color:var(--bo-s3);font-weight:600;font-size:12.5px}
#nav-bar #menu-primary-menu-1 .bo-row--s3 b{color:var(--bo-s3)}
/* M2 of the BuiltOS UX rebuild (2026-11-10): Platform becomes Commercial. Its first column names the product in
   words (there is no separate wordmark: it is BuiltOS), with its overview link and one customer's building; the
   third lists the seven industries. */
#nav-bar .bo-panel--cm .bo-grid{grid-template-columns:1fr 1.05fr .9fr}
#nav-bar .bo-panel--cm .bo-col:first-child .bo-overview{color:var(--bo-op)}
#nav-bar .bo-cm-name{display:block;margin:2px 10px 8px;font-size:21px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--bo-ink);text-decoration:none!important}
#nav-bar .bo-cm-name span{display:block;font-weight:500;color:var(--bo-op)}
#nav-bar .bo-cm-pic{display:block;margin:12px 10px 0;border-radius:12px;overflow:hidden;border:1px solid var(--bo-line2)}
#nav-bar .bo-cm-pic img{width:100%!important;height:auto!important;display:block;aspect-ratio:16/9;object-fit:cover!important}
#nav-bar .bo-cm-ind{list-style:none;margin:0;padding:0 0 4px}
#nav-bar .bo-cm-ind a{display:flex;align-items:center;min-height:34px;padding:0 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--bo-ink);text-decoration:none!important}
#nav-bar .bo-cm-ind a:hover,#nav-bar .bo-cm-ind a:focus-visible{background:var(--bo-panel)}
#nav-bar .bo-top--pf .bo-dot,#nav-bar .bo-dr--pf .bo-dot{background:var(--bo-op)}
/* BO-RES (2026-11-11): Commercial (for your business) and Residential (for your home). The bar keeps one word
   per item; the panel heads, the drawer rows and the footer's Commercial column carry the plain line under it.
   Written by react-app/scripts/names-residential.mjs. */
#nav-bar .bo-cm-name .bo-pl{display:block;margin-top:5px;font-size:13px;font-weight:500;font-style:normal;letter-spacing:0;line-height:1.3;color:var(--bo-sub)}
#nav-bar .bo-panel--hm p.bo-pl{margin:-2px 10px 10px;font-size:13px;line-height:1.3;color:var(--bo-sub)}
#nav-bar .bo-panel--hm p.bo-pl b{font-size:15px;font-weight:600;color:var(--bo-hm);margin-right:4px}
#nav-bar #menu-primary-menu-1 .bo-dr-txt{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
#nav-bar #menu-primary-menu-1 .bo-dr-for{order:2;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.2;color:var(--bo-sub)}
#nav-bar #menu-primary-menu-1 .bo-dr-head,#nav-bar #menu-primary-menu-1 .bo-dr-head .bo-dr-title{min-height:64px}
#site-footer .ft-label .ft-for{display:block;margin-top:3px;text-transform:none;letter-spacing:0}

/* ── BO-LOCK (2026-11-11): one lockup for the two products ─────────────────────────────────────────────────────
   The founder: "unify the builtos residential and builtos commercial everywhere to be more like first hero section
   with just the icon and the text". The home hero's two links are the model: the green BuiltOS building icon, the
   word in bold in its colour (Commercial green, Residential red), a small grey line under it ("for your business" /
   "for your home"), and a round arrow only where the lockup is itself a link.
     <span class="bo-lk bo-lk--cm|hm [size]"><img class="bo-lk__ic" …BuiltOS_icon.svg><span class="bo-lk__txt">
       <span class="bo-lk__w">Commercial</span><span class="bo-lk__for">for your business</span></span>[<span class="bo-lk__go">→</span>]</span>
   One number sets the size (--lk-s, the word's px); the icon, gaps and the line follow it in the hero's own ratios
   (21 / 24 / 9 / 12.5 px). Sizes: --xl page heroes · --lg cards and product rows · (21) section heads, as the hero ·
   --md menu panel heads · --sm the product bar · --xs the footer. The drawer keeps its 20 px row.
   Written into every page by react-app/scripts/lockups.mjs. Running text ("BuiltOS Residential runs…") stays text. */
.bo-lk{--lk-c:#01ff85;--lk-s:21px;display:inline-flex;align-items:center;gap:calc(var(--lk-s) * .43);max-width:100%;
  font-family:GeneralSans,system-ui,sans-serif;line-height:1;color:var(--lk-c);text-decoration:none!important;vertical-align:middle}
.bo-lk--hm{--lk-c:#fe6a5f}
:root[data-color-scheme="light"] .bo-lk--cm{--lk-c:#008749}
:root[data-color-scheme="light"] .bo-lk--hm{--lk-c:#d8433a}
.bo-lk .bo-lk__ic{display:block!important;flex:none;width:calc(var(--lk-s) * 1.143)!important;height:calc(var(--lk-s) * 1.143)!important;
  max-width:none!important;margin:0!important;object-fit:contain!important;border-radius:0!important}
.bo-lk .bo-lk__txt{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--lk-s) * .19);min-width:0}
.bo-lk .bo-lk__w{font-size:var(--lk-s);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--lk-c);white-space:nowrap}
.bo-lk .bo-lk__for{font-size:max(12px,calc(var(--lk-s) * .595));font-weight:500;font-style:normal;letter-spacing:0;line-height:1;
  text-transform:none;color:rgba(255,255,255,.66);white-space:nowrap}
:root[data-color-scheme="light"] .bo-lk .bo-lk__for{color:rgba(20,22,26,.64)}
.bo-lk .bo-lk__go{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-left:2px;border-radius:50%;color:var(--lk-c);
  background:color-mix(in srgb,var(--lk-c) 14%,transparent);transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s}
.bo-lk .bo-lk__go svg{width:12px;height:12px}
@media(hover:hover){a.bo-lk:hover .bo-lk__go{transform:translateX(3px);background:color-mix(in srgb,var(--lk-c) 24%,transparent)}}
a.bo-lk:focus-visible{outline:2px solid var(--lk-c);outline-offset:3px;border-radius:8px}
.bo-lk--xl{--lk-s:clamp(26px,2.6vw,32px)}
.bo-lk--lg{--lk-s:26px}
.bo-lk--md{--lk-s:20px}
.bo-lk--sm{--lk-s:16px}
.bo-lk--xs{--lk-s:15px}
@media(max-width:480px){.bo-lk--lg{--lk-s:23px}}
/* the menu panels' heads (both the same now: the lockup, as a link, with its arrow) */
#nav-bar .bo-panel .bo-lk--head{display:inline-flex;align-self:flex-start;margin:2px 10px 12px;padding:0;color:var(--lk-c)}
/* the drawer's two product rows: the icon where the dot was, the word in its colour, the line under it */
#nav-bar #menu-primary-menu-1 .bo-dr-title.bo-lk{--lk-s:20px;gap:11px;color:var(--lk-c);max-width:none}
#nav-bar #menu-primary-menu-1 .bo-dr-title.bo-lk .bo-lk__ic{order:0;width:24px!important;height:24px!important}
#nav-bar #menu-primary-menu-1 .bo-dr-title.bo-lk .bo-dr-txt{order:1;gap:5px}
#nav-bar #menu-primary-menu-1 .bo-dr-title.bo-lk .menu-text{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--lk-c)}
#nav-bar #menu-primary-menu-1 .bo-dr-title.bo-lk .bo-dr-for{font-size:13px;font-weight:500;line-height:1;color:var(--bo-sub)}
/* the footer: the Products list's first two rows and the Commercial column's head */
#site-footer .ft-nav a.bo-lk{display:inline-flex;padding:2px 0;color:var(--lk-c)}
#site-footer .ft-nav li:has(> a.bo-lk){margin-bottom:6px}
#site-footer .ft-label.ft-label--lk{display:block;font-family:GeneralSans,system-ui,sans-serif;text-transform:none;letter-spacing:0}
/* the commercial pages' product bar: the lockup where "Commercial" (desktop) and the BUILT wordmark (phone) were */
.bo-pbar .bo-pbar__mark--name.bo-lk{gap:7px;flex:none}
.bo-pbar .bo-pbar__mark--name.bo-lk .bo-lk__ic{display:block!important;height:18px!important;width:18px!important}
.bo-pbar .bo-pbar__mark--name.bo-lk .bo-lk__txt{gap:3px}