/* Wide screens (1280px and up) render at 80%, so the layout breathes without browser zoom. Breakpoints still read the real window
   width, so the zoom starts where the zoomed page is always in the full desktop layout (1600px of room); narrower windows keep their
   own responsive layouts at full size. Viewport heights are written as calc(Nvh / var(--z)) so
   full-height panels still fill the window, and scripts that place things by screen position divide by the zoom. */
:root{--z:1}
@media (min-width:1280px){html{zoom:.8}:root{--z:.8}}
:root{--bg:#E4E7EA;--panel:#F7F8F9;--ink:#1E2328;--mute:#5A646E;--line:#C9CFD5;--brass:#9C6C26;--brassSoft:#F1E4CC;--blue:#2B5A86;--view:#D3D8DD;--ok:#2E7D4F;--warn:#A86A00;--bad:#B3261E;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#171B1F;--panel:#20262B;--ink:#E8EBEE;--mute:#9AA4AD;--line:#343C44;--brass:#D6A55A;--brassSoft:#3A2F1E;--blue:#8DB3D8;--view:#12161A;--ok:#6CC08F;--warn:#E0A84A;--bad:#F08A80}}
:root[data-theme="dark"]{--bg:#171B1F;--panel:#20262B;--ink:#E8EBEE;--mute:#9AA4AD;--line:#343C44;--brass:#D6A55A;--brassSoft:#3A2F1E;--blue:#8DB3D8;--view:#12161A;--ok:#6CC08F;--warn:#E0A84A;--bad:#F08A80}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "Geist",system-ui,sans-serif}
h1,h2,h3{font-family:"Geist",system-ui,sans-serif;font-weight:700;line-height:1.05;margin:0}
.byline{margin:12px 0 0;font-size:12.5px;color:var(--mute)}
.bylinefoot{margin:0;padding:10px 16px 18px;text-align:center;font-size:12px}
/* /industries hero: one fitting shown in four materials, then a strip of industry photos that jump to each section. */
.ihhero :is(h1),.ihind h2{font-family:"Geist",system-ui,sans-serif;font-weight:600;letter-spacing:-.03em}
.ihhero{background:linear-gradient(180deg,#F6F7F9,#ECEEF1);padding:40px 0 34px}
.ihgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px 36px;align-items:center}
.ihhero h1{font-size:clamp(32px,3.9vw,54px);line-height:1.05;margin:12px 0 16px;color:#0B0D10}.ihhero h1 span{display:block}
.ihhero .lead{max-width:46ch;margin:0 0 24px;color:#4A5561;font-size:17px;line-height:1.5}
.ihcta{display:flex;flex-wrap:wrap;gap:12px;margin:0}.ihcta .btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;font-size:16px}.ihprimary{background:var(--accent)!important;color:#fff!important}.ihprimary:hover{filter:brightness(1.08)}.ihcta .ghost{background:#fff;color:#101418;border:1px solid #D5DAE0}
.ihmats{margin:0;min-width:0}.ihmats img{width:100%;height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 90%,transparent);mask-composite:intersect}
.ihmats ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:center;font-size:11.5px;line-height:1.35;color:#5B6570}.ihmats b{display:block;color:#101418;font-weight:600;font-size:13.5px;margin-bottom:3px}
.ihind{background:var(--panel);padding:30px 0;border-bottom:1px solid var(--line)}
.ihindgrid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:20px 32px;align-items:center}.ihind h2{font-size:clamp(24px,2.5vw,32px);line-height:1.12;margin-top:6px}
.ihmore{margin:10px 0 0;font-size:13px;color:var(--mute)}.ihmore a{color:var(--accent)}
.ihtiles .ihname{font-size:11px;letter-spacing:-.01em;white-space:nowrap}
.ihtiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;border:0;background:none;box-shadow:none;position:static;padding:0;z-index:auto}
.ihtile{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-weight:500;font-size:12px;min-width:0}.ihpic{display:block;aspect-ratio:142/132;border-radius:6px;overflow:hidden;background:var(--bg)}.ihpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}.ihtile:hover .ihpic img{transform:scale(1.05)}.ihtile:hover{color:var(--accent)}.ihname{padding:0 2px}
@media (max-width:1100px){.ihindgrid{grid-template-columns:1fr}.ihhero h1{font-size:clamp(28px,4.2vw,42px)}.ihhero .lead{font-size:16px}}
@media (max-width:820px){.ihgrid{grid-template-columns:1fr;gap:0}.ihcopy{display:contents}.ihcopy .eyebrow{order:1}.ihhero h1{order:2}.ihmats{order:3;margin:0 0 18px}.ihcopy .lead{order:4}.ihcta{order:5}.ihtiles{grid-template-columns:repeat(5,minmax(0,1fr))}.ihtile{font-size:13px}.ihhero{padding:22px 0 28px}}
@media (max-width:520px){.ihmats ul{font-size:10.5px;gap:6px}.ihmats b{font-size:12px}.ihtiles{grid-template-columns:repeat(3,minmax(0,1fr))}.ihcta .btn{flex:1 1 auto;justify-content:center}}
/* /about: a test of a cleaner home page. Wide sans headings, a product photo beside the copy, a row of photo tiles, three numbered steps. */
.page[data-page="home"] :is(h1,h2,h3){font-family:"Geist",system-ui,sans-serif;font-weight:600;letter-spacing:-.03em}
.abhero{background:#F4F5F7;padding:36px 0 34px;border-bottom:1px solid var(--line)}
.abgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:16px 32px;align-items:center}.abcopy{min-width:0}
.abhero h1{font-size:clamp(30px,3.5vw,50px);line-height:1.08;margin:12px 0 16px;color:#0B0D10}.abhero h1 span,.abhero h1 em{display:block;white-space:nowrap}.abhero h1 em{font-style:normal;color:var(--accent)}
.abhero .eyebrow{color:var(--accent)}.abhero .lead{max-width:46ch;margin:0 0 24px;color:#4A5561;font-size:17px;line-height:1.5}
.abcta{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0 0 24px}.abcta .btn{display:inline-flex;align-items:center;gap:8px;padding:0 24px;min-height:52px;font-size:16px}.abprimary{background:var(--accent)!important;color:#fff!important}.abprimary:hover{filter:brightness(1.08)}
.abupload{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 18px 0 14px;border-radius:6px;background:#fff;border:1px solid #DDE2E8;color:#101418;text-decoration:none;font-size:12.5px;line-height:1.3}.abupload span{color:#5B6570}.abupload b{display:block;font-size:15px;font-weight:600;color:#101418}.abupload:hover{border-color:var(--accent)}
.abtrust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:#3E4853;font-size:13.5px;white-space:nowrap}.abtrust li{display:flex;align-items:center;gap:7px}.abtrust svg{width:16px;height:16px}.abtrust svg{flex:none;color:var(--accent)}
.abphoto{min-width:0;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%),linear-gradient(180deg,#000 72%,transparent 97%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%),linear-gradient(180deg,#000 72%,transparent 97%);mask-composite:intersect}.abphoto img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media(min-width:761px){.abphotoin{transform:scale(1.08);transform-origin:50% 35%}}
.abphotoin{position:relative}
/* The Specport mark, laid over the block face as a laser etch: grey, no colour, tilted to the face. */
.abetch{position:absolute;left:50.15%;top:49.3%;width:7.6%;height:auto;fill:rgba(58,62,68,.6);transform:skewY(-3.9deg);filter:drop-shadow(0 .6px 0 rgba(255,255,255,.6)) drop-shadow(0 -.4px 0 rgba(0,0,0,.18));pointer-events:none}
.abcta .abghost{background:#fff;border-color:#DDE2E8;color:#101418}
.wrap.abtiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px}
.abtile{display:flex;flex-direction:column;background:#fff;border:1px solid transparent;border-radius:10px;text-decoration:none;color:#101418;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s,box-shadow .15s,transform .15s}
.cftiles .wrap.abtiles{margin-top:0}.cftiles .abtile{border-color:var(--line)}
.abtile:hover{border-color:var(--accent);box-shadow:0 14px 26px -18px rgba(16,24,40,.4);transform:translateY(-2px)}
.abpic{display:block;aspect-ratio:4/3;background:#fff}.abpic img{width:100%;height:100%;object-fit:contain;display:block}
/* The generated photos have slightly off-white grounds; lifting them a little makes every one read as the same white. */
.page[data-page="home"] img[src^="/img/photos/"]{filter:brightness(1.085) contrast(1.04)}
.abname{display:block;text-align:center;padding:0 10px 13px;margin-top:-6px;position:relative;font-weight:500;font-size:14px;letter-spacing:-.005em}
.abhow{background:var(--panel);padding:40px 0;border-bottom:1px solid var(--line)}
.abhowgrid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:24px 44px;align-items:center}.abhowhd{border-right:1px solid var(--line);padding-right:28px}.abhow h2{font-size:clamp(24px,2.5vw,31px);line-height:1.12;margin-top:6px}
.absteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.absteps li{display:flex;flex-direction:column;align-items:stretch;gap:12px}.abstephd{display:flex;align-items:center;gap:14px}.abn{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accentSoft);color:var(--accent);font-weight:600;font-size:14px}.abstephd svg{flex:none;width:30px;height:30px;stroke-width:1.4;color:var(--ink)}.abstephd i{flex:1;height:1px;background:var(--line2);margin-left:6px}.absteps li:last-child .abstephd i{display:none}
.absteps h3{font-size:17px;margin:0 0 6px}
.absteps p{margin:0;color:var(--mute);font-size:14px;line-height:1.45}.absteps li>div{flex:1;min-width:0}
.page[data-page="home"] .band.alt{padding:22px 0;background:var(--panel);border:0;border-bottom:1px solid var(--line)}
.abind{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}.abind .eyebrow{margin:0}.abchips{display:flex;flex-wrap:wrap;gap:8px}
.abwlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--ink)}.abwlist li{white-space:nowrap}.abwlist li:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--line2,#C9CED6);margin:0 11px;vertical-align:middle}
.abchips a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font-size:13.5px}.abchips a:hover{border-color:var(--accent);color:var(--accent)}
/* Narrower windows keep the same picture: copy beside the photo and six tiles in a row down to tablets, then one column with the copy first. */
@media (max-width:1100px){.abgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px 20px}.abhero h1{font-size:clamp(28px,4.1vw,42px)}.abhero h1 span,.abhero h1 em{white-space:normal}.abhero .lead{font-size:16px;margin-bottom:20px}
 .wrap.abtiles{gap:10px}.abname{font-size:12.5px;padding:0 6px 10px}.abtrust{gap:6px 14px;font-size:12.5px}.abtrust svg{width:15px;height:15px}
 .abhowgrid{grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:20px 28px}.abhowhd{padding-right:20px}.abhow h2{font-size:clamp(20px,2.5vw,26px)}.absteps{gap:18px}.absteps h3{font-size:16px}.absteps p{font-size:13.5px}}
@media (max-width:760px){.abhero{padding:26px 0 26px}.abgrid{grid-template-columns:1fr;gap:6px}.abhero h1{font-size:clamp(28px,7.2vw,40px)}.abphoto{order:-1;max-width:420px;width:100%;margin:-10px auto 0}
 .wrap.abtiles{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px}.abcta .btn,.abupload{flex:1 1 auto;justify-content:center}.abupload{justify-content:flex-start}
 .abhow{padding:30px 0}.abhowgrid{grid-template-columns:1fr;gap:20px}.abhowhd{border-right:0;padding-right:0}.abhow h2{max-width:none;font-size:26px}.absteps{gap:14px}.absteps h3{font-size:15px;line-height:1.25}.absteps p{font-size:12.5px;line-height:1.4}.abstephd svg{width:26px;height:26px}.page[data-page="home"] .cta .btn{margin:6px 4px 0!important}}
@media (max-width:420px){.wrap.abtiles{gap:8px}.abname{font-size:12px;padding:0 4px 9px}.abtrust{font-size:13px;white-space:normal}}
/* /about, the rest of the page: thread chips, why us, industries, what you can build. */
.abworks{background:var(--panel);padding:18px 0;border-bottom:1px solid var(--line)}.abworksrow{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.abworksin{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}.abworksrow .eyebrow{margin:0;flex:none}.abworks .abchips a{border-radius:6px;padding:6px 11px;font-size:13px}
.abwhy{background:#F4F5F7;padding:52px 0;border-bottom:1px solid var(--line)}.abwhygrid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px 48px;align-items:center}
.abwhy h2,.abbuild h2{font-size:clamp(26px,2.9vw,38px);line-height:1.1;margin:8px 0 14px;color:#0B0D10}.abwhy .lead{margin:0;color:#4A5561;font-size:16.5px;line-height:1.55;max-width:46ch}
.abfeats{list-style:none;margin:0;padding:0;display:grid;gap:12px}.abfeats li{display:flex;gap:18px;align-items:flex-start;padding:6px 0}.abic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:#fff;border:1px solid #E3E7EC;color:var(--accent)}.abic svg{width:22px;height:22px}.abfeats h3{font-size:16.5px;margin:0 0 4px}.abfeats p{margin:0;color:#5B6570;font-size:14px;line-height:1.5}
.abused{background:var(--panel);padding:36px 0;border-bottom:1px solid var(--line)}.abusedrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:12px}
.abu{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-decoration:none;color:var(--mute);font-size:12px;line-height:1.4;transition:border-color .15s,transform .15s}.abu:hover{border-color:var(--accent);transform:translateY(-2px)}.abu b{color:var(--ink);font-weight:600;font-size:13px}
.abupic{display:block;aspect-ratio:76/54;background:#F7F8FA;border-radius:5px;overflow:hidden;margin-bottom:4px}.abupic{display:grid;place-items:center}.abupic img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.abupic img[src*="/industries/tile"],.abupic img[src*="/industries/apps/"]{object-fit:cover;mix-blend-mode:normal}
.abbuild{background:var(--panel);padding:44px 0 48px;border-bottom:1px solid var(--line)}.abcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.abcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--mute);background:var(--panel);transition:border-color .15s,box-shadow .15s,transform .15s}.abcard:hover{border-color:var(--accent);box-shadow:0 14px 26px -18px rgba(16,24,40,.4);transform:translateY(-2px)}
.abcpic{display:grid;place-items:center;aspect-ratio:2/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}.abcpic{position:relative}.abcpic img.hi{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);max-width:none;object-fit:contain;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}.abcpic img{width:264px;max-width:100%;height:auto;display:block;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.abctxt{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;font-size:14px;line-height:1.45}.abctxt b{color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.01em}.abctxt em{font-style:normal;font-weight:600;color:var(--accent);font-size:13.5px;margin-top:4px}
@media (max-width:1100px){.abusedrow{grid-template-columns:repeat(4,minmax(0,1fr))}.abwhygrid{gap:24px 28px}}
@media (max-width:860px){.abwhygrid{grid-template-columns:1fr}.abwhy{padding:36px 0}.abcards{grid-template-columns:repeat(2,minmax(0,1fr))}.abusedrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.abcards{grid-template-columns:1fr}.abfeats li{padding:4px 0;gap:12px}.abworksrow{align-items:flex-start}}
/* For a heading a tool page needs for search and screen readers but has no room to show. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--accent)}
.wrap{max-width:1360px;margin:0 auto;padding:0 20px}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--panel);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;height:58px}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-family:"Montserrat",system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:.08em;line-height:1}
.lgimg{display:block;height:17px;width:auto}.lgdark{display:none}
/* Signed in, the header shows the bracket mark in place of the wordmark. */
.lgmark{display:none;height:26px;width:auto;color:var(--ink)}
body.signed nav .logo .lgimg{display:none!important}body.signed nav .logo .lgmark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lglight{display:none}:root:not([data-theme="light"]) .lgdark{display:block}}
:root[data-theme="dark"] .lglight{display:none}:root[data-theme="dark"] .lgdark{display:block}
.wm{display:inline-flex;align-items:center}
.wm i{display:block;width:1.62em;height:.58em;margin:0 .1em .05em;border-radius:999px;background:#0054FC}
nav .links{display:flex;gap:18px;flex:1}
nav .links a{color:var(--mute);text-decoration:none;font-weight:500}
nav .links a:hover{color:var(--ink)}
.btn{border:0;border-radius:6px;padding:10px 18px;font-weight:600;background:var(--brass);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:13px}
.cartbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;flex:none}
.cartbtn:hover{background:var(--bg)}.cartbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cartbtn svg{width:24px;height:24px}
.cartbtn b{position:absolute;top:-6px;right:-6px;background:var(--blue);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px}
.hero{padding:26px 0 6px;display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.hero h1{font-size:clamp(34px,5vw,56px);max-width:18ch}
.hero p{color:var(--mute);max-width:60ch;margin:8px 0 0}
.perks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--mute);font-size:14px}
.perks span::before{content:"";display:inline-block;width:8px;height:8px;background:var(--brass);border-radius:50%;margin-right:8px}
.preset{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)}
.preset select{padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--panel);min-width:260px}
.cfg{display:grid;grid-template-columns:300px 1fr 300px;gap:14px;margin:18px 0 14px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:12px;max-height:760px;overflow-x:hidden;overflow-y:auto;min-width:0}
.side h3{font-size:26px;display:flex;justify-content:space-between;align-items:baseline}
.side h3 small{font:500 13px "Geist",system-ui,sans-serif;color:var(--mute)}
.side h4{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--mute)}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{flex:1;border:0;background:transparent;padding:7px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:auto;max-height:230px}
.list button{border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;padding:7px 10px;display:flex;justify-content:space-between;gap:8px;font-size:14px}
.list button:last-child{border-bottom:0}
.list button small{color:var(--mute)}
.list button[aria-pressed="true"]{background:var(--brassSoft);box-shadow:inset 3px 0 0 var(--brass)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:transparent;border-radius:4px;padding:4px 9px;font-size:13px}
.chips button[aria-pressed="true"]{border-color:var(--brass);background:var(--brassSoft)}
.thcat{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border-radius:10px;background:var(--wash);border:1px solid var(--washLine)}
.thcat>h4{margin:0;color:var(--washInk)}
.thfields{display:flex;flex-direction:column;gap:8px}
.thfields label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-width:0;width:100%;text-align:left}
.thfields .dimv{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.thfields input{width:88px;flex:none;min-width:0;padding:5px 7px;text-align:right}
.thfields>label>span:first-child{flex:none;text-align:left}
/* Part name, save and reset are for signed-in customers. */
body:not(.signed) #hexBar .hxr,body:not(.signed) #asmBar .hxr{display:none!important}
.hxg{display:flex;align-items:center;justify-content:flex-start;padding:4px 4px 4px 0;min-width:0}.hxg[hidden],html.presigned .hxg{display:none}html.presigned [data-guest]{display:none!important}
.hxg p{flex:1;display:flex;align-items:center;gap:10px;margin:0;font-size:12.5px;line-height:1.35;text-align:left;color:rgba(232,235,238,.78);padding:6px 12px 6px 10px;border-radius:8px;border:0;background:none}.hxg a{flex:none;padding:6px 11px;border-radius:6px;background:var(--hi,#F5A300);color:var(--hiInk,#2B1B00);font-weight:600;text-decoration:none;white-space:nowrap}.hxg a:hover{filter:brightness(1.06)}
@media (max-width:1100px){.hxg{padding:4px 12px 10px}}
/* Type is a dropdown at every width; the chips stay in the page, hidden, as its click target. */
.tycard .chips,.tycard .tyhd select{display:none!important}
.tycard .tysel{display:block;width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
/* Size: a dropdown of standard sizes, or a custom fraction stepper. The old long list stays in the page, hidden, as the dropdown's click target. */
.szcard .list{display:none!important}
.szcard .szsel{display:block;width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
.szhd{display:flex;align-items:center;justify-content:space-between;gap:8px}.szhd h4{margin:0}.szck{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--washInk,var(--mute));cursor:pointer}.szck input{width:15px;height:15px;accent-color:var(--accent)}
.szfr{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:6px;align-items:stretch}.szfr button{border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font-size:18px;line-height:1;padding:0;cursor:pointer}.szfr button:hover{border-color:var(--accent)}
.szfv{display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel)}.szfv input{flex:1;min-width:0;width:100%;border:0;background:none;color:var(--ink);font:600 15px/1 var(--mono);padding:8px 0;text-align:center;outline:0}.szfv:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft)}.szfv span{font-size:12px;color:var(--mute)}
.szbase{margin:0!important;font-size:11.5px}
.sronly{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Phones and touch tablets in the one-column layout get the 2D drawing only, on Build a part and Create an assembly. */
@media (max-width:640px), (pointer:coarse) and (max-width:1100px){#v3d,#v2d,.asmtog{display:none!important}}
@media (max-width:640px){
 .szcard .szsel{display:block;width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
 .szcard .list{display:none!important}

 #asmBar .hexstyles.asmtube{flex-wrap:wrap!important;gap:8px;margin:0 8px}
 #asmBar .asmtube .fw{flex:1 1 40%;min-width:0}#asmBar .asmtube .fw label{width:100%}
 #asmBar .asmtube select{width:100%!important}#asmBar #f_tshape{border-right:0;padding-right:0}
 .side .odid input,.side .xlrow input,.side .thfields input{width:52px!important;padding:4px 5px!important;font-size:13px}
 .side .odid .dimv,.side .xlrow .dimv,.side .thfields .dimv{gap:3px;font-size:12px}
 .side .odid label,.side .xlrow,.side .thfields label{gap:4px;font-size:12.5px}
 .side .odid label>span:first-child,.side .xlrow>span:first-child,.side .thfields label>span:first-child{flex:1 1 auto;min-width:0;line-height:1.2}
 .side .odcard,.side .thcat{padding:8px}
 /* Shoulder row: the checkbox on its own line, then Dia, Width and A/B together on one line. */
 #colBar{gap:8px;padding:10px 12px}
 #colBar .colf{flex:1 0 100%;gap:8px;flex-wrap:nowrap;font-size:12.5px}
 #colBar .colf label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
 #colBar input[type=number]{width:52px!important;padding:4px 5px!important;font-size:13px}
 #colBar .colpos .lbl{display:none}#colBar .colpos{margin-left:auto}
 #colS button{padding:4px 9px!important}
 /* Type is a dropdown on phones; the filter and chips are desktop only. */
 .tycard .chips,.tycard .tyhd select{display:none!important}
 .tycard .tysel{display:block;width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
 #vLbl,#aLbl{display:none!important}
 /* The blue shape card keeps one row: dropdowns share the width, labels and icons shrink. */
 #hexBar .hexstyles.hexstyles{flex-wrap:nowrap!important;gap:6px;padding:4px 8px;margin:0 8px}
 #hexBar .hexstyles #f_shape,#hexBar .hexstyles #f_mat,#hexBar .hexstyles #f_fin,#hexBar .hexstyles #f_colors{flex:1 1 0;min-width:0!important}
 #hexBar .hexstyles #f_shape{padding-right:6px;margin-right:0}
 #hexBar .hexstyles label{font-size:11px;min-width:0;width:100%}
 #hexBar .hexstyles select{width:100%!important;min-width:0!important;max-width:none!important;font-size:12px;padding:0 4px!important}
 #hexBar .hexstyles .bodysel{flex:none;padding-left:6px;margin-left:0}
 #hexBar .hexstyles .bodysel .lbl{font-size:11px}
 #hexBar .bodyic{gap:0}#hexBar .bodyic button{width:26px}#hexBar .bodyic svg{width:22px;height:22px}
}
.bnote{margin:8px 0 0;font-size:12.5px;color:var(--mute);line-height:1.45}
.side select{width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.dims{width:100%;font-size:13px;border-collapse:collapse}
.dims td{padding:4px 0;border-bottom:1px solid var(--line)}
.dims td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.call{font-weight:600;font-size:14px}
.rate{font-size:13px;padding:8px 10px;border-radius:6px;background:var(--bg)}
.rate b{font-size:15px}
.center{display:flex;flex-direction:column;background:var(--view);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-height:560px}
.styles{display:flex;gap:8px;padding:10px;justify-content:flex-start;flex-wrap:wrap;background:var(--panel);border-bottom:1px solid var(--line);align-items:center}
.styles button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:6px 16px;font-family:"Geist",system-ui,sans-serif;font-size:19px;font-weight:600}
.styles button[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#fff}
.stygrp{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.stygrp>span{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);padding:0 2px 0 8px;white-space:nowrap}
.stygrp:first-child>span{padding-left:0}
.tgrp{margin:0 0 8px}.tgrp>small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 4px}
#stage{flex:1;position:relative;min-height:400px}
#stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
#drawing{position:absolute;inset:0;display:none;background:var(--panel);padding:18px}
#drawing svg{width:100%;height:100%;overflow:visible}
.viewtog{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px;align-items:stretch}
.lbltog{display:grid;place-items:center;width:34px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);color:var(--ink);padding:0}.lbltog .off{display:none}
.gkrow{display:flex;gap:3px;flex-wrap:wrap;align-items:center}.gkrow button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);padding:3px;display:grid;place-items:center}.gkrow button i{pointer-events:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}.gkrow button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft)}.gkrow .gknone{width:auto;border-radius:999px;padding:2px 8px;font-size:12px;color:var(--ink)}.gkn{display:block;margin-top:5px;font-size:11.5px;color:var(--mute)}
.orck{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer}.orck input{width:16px;height:16px;margin:0;accent-color:var(--accent)}.orck:has(input:disabled){cursor:default}
.orsub{display:grid;gap:10px;margin-top:10px}
.orhd{display:flex;align-items:center;gap:8px}
/* Section cards stay white. Inside, the fitting group sits on a quiet grey card and the flow path group on a light blue tint, so the two halves of a section read apart at a glance. */
.rungrp{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.runghd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}.runghd h4{margin:0;font:600 11px/1 "Geist",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.runtube .runghd h4{color:color-mix(in srgb,var(--brass) 70%,var(--ink))}
.runghd select{width:auto;max-width:60%;padding:4px 8px;font-size:12.5px}.runghd .asmck{font-size:12.5px;color:var(--mute)}
#asmBar .asmtube select:disabled{opacity:.45;cursor:not-allowed}
.rungrp>h4{margin:0;font:600 11px/1 "Geist",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rungrp.runtube{background:color-mix(in srgb,var(--accentSoft) 65%,var(--panel));border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.rungrp select,.rungrp input[type=number]{background:var(--panel)}
.rungrp .row2{gap:8px}.rungrp .row2>*{min-width:0}.rungrp .runseg.runsm{width:100%}.rungrp .runseg.runsm button{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}.rungrp .runlen{min-width:0}
.runrot,.runsec label.runrot{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--mute);text-align:left}.runrot span{display:inline-flex;align-items:center;gap:4px}.runrot input{width:64px}.runrot i{font-style:normal}
.runpn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:12.5px}.runpn b{font-family:var(--mono);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runchips{display:flex;flex-wrap:wrap;gap:4px}.runchips button{padding:4px 8px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);cursor:pointer}.runchips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.runor{display:grid;gap:8px;padding-top:4px}.runclamps{display:grid;gap:8px;padding-top:4px}.runclamps .asmck{font-weight:600;color:var(--ink)}.runor label.orck{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;font-size:13px;color:var(--ink)}.runor .gkrow{padding-top:2px}
.info{position:relative;display:inline-grid;place-items:center;flex:none;width:15px;height:15px;margin-left:6px;border-radius:50%;border:1px solid var(--line2);color:var(--mute);font:italic 600 10px/1 Georgia,serif;text-transform:none;letter-spacing:0;vertical-align:middle;cursor:help}
.info:hover,.info:focus-visible{color:var(--accent);border-color:var(--accent);outline:0}
.info::after{content:none}
.info:hover::after,.info:focus::after,.info:focus-visible::after{content:attr(data-tip);position:absolute;z-index:40;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(240px,calc(100vw - 32px));padding:7px 9px;border-radius:6px;background:var(--ink);color:var(--panel);font:400 12px/1.4 "Geist",system-ui,sans-serif;text-align:left;white-space:normal;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);pointer-events:none}
.side .info:hover::after,.side .info:focus::after,.side .info:focus-visible::after{top:calc(100% + 7px);bottom:auto;left:0;transform:none;max-width:min(210px,100%)}
.thead{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:none;text-align:left}.thead h4{margin:0!important}.thead b{font-size:13px;font-weight:600}.thead span{margin-left:auto;font-size:12px;color:var(--accent)}
.bsum{display:grid;grid-template-columns:minmax(228px,268px) minmax(0,1fr) minmax(228px,268px);background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:0 0 12px}
.bsc{min-width:0;overflow:hidden;padding:12px 14px}.bsc+.bsc{border-left:1px solid var(--line)}.bsc>h4{margin:0 0 8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.bnotes .dfm{border:0;padding:0;background:none}
@media (max-width:1100px){.bsum{grid-template-columns:1fr 1fr}.bnotes{grid-column:1/-1;order:3;border-left:0!important;border-top:1px solid var(--line)}}
@media (max-width:640px){.bsum{grid-template-columns:1fr}.bsc+.bsc{border-left:0;border-top:1px solid var(--line)}}.orsub h4{margin:0 0 6px}.ormat{display:block}
#colBar .colf{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#colBar.off .colf{display:none}#colBar input[type=number]{width:78px;padding:5px 7px}#colS button{padding:5px 10px}
#extBar .extf{display:flex;gap:12px;align-items:center;flex-wrap:wrap}#extBar.off .extf{display:none}#extBar input[type=number]{width:78px;padding:5px 7px}
#extBar .blrow,#extBar .extrow,#extBar .optrow{flex:1 0 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Row 2: the options, all off by default; each opens its own fields when checked. */
#extBar .optrow{gap:8px 16px}#extBar .optrow:not(:has(> :not([hidden]))){display:none}
#extBar .colck{display:inline-flex;align-items:center;gap:6px}#extBar .colck[hidden]{display:none}
/* The shoulder row: its checkbox first, then the fields once checked, spaced like the options row above. */
#colBar{align-items:center;gap:8px 16px;font-size:13px}#colBar .colck{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}#colBar .colck input{margin:0}
#extBar .optrow label,#colBar .colck{font-size:13px}
#extBar .optrow label{display:inline-flex;align-items:center;gap:6px}#extBar .optrow input[type=checkbox],#colBar .colck input[type=checkbox]{margin:0;width:14px;height:14px}
#extBar .blf{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
/* Body ID, body OD and extra body length share one line; each row only wraps under the others when the column is too narrow. */
#extBar .blrow{flex:0 0 auto;flex-wrap:nowrap}#extBar .optrow{flex:1 1 250px;min-width:0;flex-wrap:wrap;gap:8px 12px}#extBar .boreid .uL{display:none}#extBar{gap:8px 10px}#extBar #blCtrls{flex:1 1 240px;min-width:0;flex-wrap:nowrap}#extBar .blf{flex:1 1 auto;min-width:0}#extBar .blf label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}#extBar .blf label:first-child{flex:0 1 auto;min-width:0}#extBar .blf input[type=range]{flex:0 1 90px;min-width:44px;width:90px}/* Reducer sits in the blue bar beside the body icons, since it changes the body like they do. */
#hexBar .redck{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:none;padding:0 0 0 12px;margin-left:2px;border-left:1px solid rgba(255,255,255,.18);cursor:pointer}#hexBar .redck .lbl{font-size:12px;font-weight:500;color:var(--navyMute)}#hexBar .redck .redbx{display:flex;align-items:center;height:32px}
#hexBar .redck input{margin:0;width:18px;height:18px;accent-color:var(--pickHi);cursor:pointer}#hexBar .redck.dis{opacity:.45;cursor:not-allowed}
/* Phones: the blue bar takes two rows. Shape, material, finish and color share the first; body and reducer sit on the second. */
@media (max-width:700px){#hexBar .hexstyles.hexstyles{flex-wrap:wrap!important;gap:8px 8px;padding:8px 10px}
 #hexBar .hexstyles #f_shape,#hexBar .hexstyles #f_mat,#hexBar .hexstyles #f_fin,#hexBar .hexstyles #f_colors{flex:1 1 28%!important;min-width:86px!important}
 #hexBar .hexstyles #f_shape{border-right:0;padding-right:0;margin-right:0}
 #hexBar .hexstyles select,#hexBar #colors{width:100%!important;min-width:0!important;max-width:none!important}
 #hexBar .hexstyles .bodysel{border-left:0;padding-left:0;margin-left:0;flex:0 0 auto!important;width:auto!important}#hexBar .hexstyles .redck{flex:0 0 auto;align-self:flex-start;width:auto!important;min-width:0}}
#extBar .boreid input[type=number],#extBar .extn input{width:60px;padding:5px 6px;text-align:right}#extBar .boreid{padding-right:10px;margin-right:0}
#extBar .redck{margin-left:4px;display:inline-flex;align-items:center;gap:6px}
#extBar .redck.dis,#extBar .boreid.dis{opacity:.45}
#extBar .redck[hidden],#extBar .boreid[hidden]{display:none}
#extBar .boreid{display:flex;align-items:center;padding-right:12px;margin-right:4px;border-right:1px solid var(--line)}
#extBar .boreid label{display:flex;align-items:center;gap:6px;font-size:13px}
#extBar .boreid input[type=range]{width:88px;flex:none}
#extBar .boreid b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;min-width:3.2em}
#extBar #blCtrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.odid .xlrow{margin-top:0}
.odid{display:flex;flex-direction:column;gap:8px;margin-top:8px}
/* A subtle card behind the OD and ID pair, quieter than the thread card below it. */
.odcard{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.odid label,.xlrow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-width:0;width:100%;text-align:left}
.odid .dimv,.xlrow .dimv{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.odid input,.xlrow input{width:88px;flex:none;min-width:0;padding:5px 7px;text-align:right}
.odid>label>span:first-child,.xlrow>span:first-child{color:inherit;flex:none;text-align:left}
.dimv>span{color:var(--mute);font-size:12px;flex:none}
.hud{position:absolute;left:12px;bottom:10px;font-size:13px;color:var(--mute);pointer-events:none;z-index:2}
.hud b{color:var(--ink)}
.custom{display:none;padding:10px 14px;gap:16px;align-items:center;flex-wrap:wrap;background:var(--panel);border-top:1px solid var(--line);font-size:14px}
.custom.on{display:flex}
.ptabs{margin-bottom:2px}
.proto{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.proto>button{width:100%}#protoPanel .row{display:flex;gap:10px;align-items:center}#protoPanel .pnote{font-size:12.5px;margin:0;line-height:1.45}#protoPanel{display:flex;flex-direction:column;gap:8px;margin-top:10px}#protoPanel[hidden]{display:none}
.pprice{font-family:var(--head);font-size:26px;font-weight:600}.disc{font-size:12px;line-height:1.45;background:#FFF7E6;border:1px solid #F0D9A8;color:#5C4200;border-radius:6px;padding:8px 10px;margin:0}
.ack{display:flex;gap:8px;align-items:flex-start;font-size:12.5px}.ack input{margin-top:3px}
.menubtn{display:none;padding:6px 10px}
nav .links a[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
nav .links a{padding:18px 0}
@media (max-width:640px){.menubtn{display:block}nav .links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--panel);flex-direction:column;gap:0;padding:6px 20px 12px;border-bottom:1px solid var(--line);box-shadow:var(--sh);z-index:30}nav .links.open{display:flex}nav .links a{padding:10px 0;border-bottom:1px solid var(--line)}nav .wrap{position:relative}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .disc{background:#2A2210;border-color:#4A3A16;color:#F0D9A8}}
.olist{max-height:260px}.olist button{flex-direction:column;align-items:flex-start;gap:0}.olist button.cust{box-shadow:inset 3px 0 0 var(--blue)}.olist button[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--brass)}
.mfctl{display:flex;gap:16px;flex-wrap:wrap}.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden}.stepper button{border:0;background:transparent;width:36px;height:34px;font-size:18px}.stepper b{min-width:34px;text-align:center}.stepper button:disabled{opacity:.35}
.facesec{display:flex;flex-direction:column;gap:6px}
.endtag.add{padding:3px 12px;font-size:18px;font-weight:600;line-height:1.1}
.endtag:disabled{opacity:.35;cursor:default}
.f2ck{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--mute);cursor:pointer}
.f2ck input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.side .row{gap:14px;justify-content:flex-start}
h3.sub{font-size:22px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
#stage canvas{cursor:pointer}
.stkgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.stkin,.stkout{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.stkrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.stkrow b{width:100%;font-size:13px;color:var(--mute);font-weight:600}
.stkrow select,.tradeform input,.tradeform select,.asmjoin select,.asmname{padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.asmbanner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:12px 0 0;padding:10px 14px;background:var(--accentSoft);border:1px solid var(--line);border-radius:8px}
.asmbanner[hidden]{display:none!important}.asmbanner p{margin:0;font-size:14px}.asmbanner .row{display:flex;gap:8px;align-items:center}
.asmboard{display:grid;grid-template-columns:repeat(8,minmax(240px,1fr));gap:10px;overflow-x:auto;align-items:stretch;padding-bottom:8px}
.asmcol{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:520px;min-width:240px}
.asmcol>header{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.asmcol>header h3{font-size:16px;margin:0;line-height:1.2}
.asmcol>header p{margin:0;font-size:12.5px;color:var(--mute);line-height:1.35}
.asmcol .abody{flex:1;display:flex;flex-direction:column;gap:8px}
.asmdesk.open .asmboard{grid-template-columns:minmax(330px,1.5fr) repeat(6,minmax(220px,1fr))}
 .runsec{display:flex;flex-direction:column;gap:7px;padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.asmleft{display:flex;flex-direction:column;gap:10px}
.runsec h4{color:var(--mute);text-transform:uppercase;font-size:10.5px;font-weight:600;letter-spacing:.07em}
.runsec .runn{background:var(--pick);color:#fff;width:19px;height:19px;font-size:11px;letter-spacing:0}
.runsec label,.runsec .runlbl{color:var(--mute)}
.runsec .runchev,.runsec .info{color:var(--mute)}



.runpart{background:var(--panel)!important;border-color:var(--line)}
.asmq{padding:10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);margin-bottom:10px}
.asmq .asmitems{border-top-color:var(--line)}.asmq .asmitem{border-bottom-color:var(--line)}.asmq .asmitem:last-child{border-bottom:0}

.asmq.csum{padding:8px 12px!important}
.runsec h4{display:flex;align-items:center;gap:8px;margin:0;font-size:14.5px}
.runhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font:inherit}
.runchev{width:16px;height:16px;flex:none;color:var(--mute);transition:transform .18s}
.runsec.shut .runchev{transform:rotate(180deg)}
.runbody{display:flex;flex-direction:column;gap:7px}
.runsec.shut .runbody{display:none}
.runsec.shut{padding-bottom:10px}
.runsec>.spec{margin:0;font-size:12.5px}
.runn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.runsec label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--mute)}
.runsec label.asmck{flex-direction:row;align-items:center;color:var(--ink)}
.runsec select,.runsec input[type=number]{width:100%;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
.runsec .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.runseg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.runseg button{flex:1;padding:6px 4px;font-size:12px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--ink);cursor:pointer}
.runseg button:last-child{border-right:0}
.runseg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.runu{font-size:12px;color:var(--mute)}.rungrp.runtube .runu{color:var(--navyMute)}.runsec{position:relative}.asmck.runtop{position:absolute;top:10px;right:38px;height:34px;font-size:12.5px}.runlen{display:grid;grid-template-columns:minmax(0,1fr) 52px auto;gap:6px;align-items:center}.runlen input[type=number]{padding:0 4px 0 6px;min-width:0;align-self:stretch;height:auto;min-height:0}
.runfld{display:flex;flex-direction:column;gap:3px}.runhint{font-size:11.5px;margin:2px 0 0}.runlbl{font-size:12.5px;color:var(--mute)}
.rununit{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.rununit button{padding:5px 7px;font-size:11.5px;background:var(--panel);border:0;color:var(--mute);cursor:pointer}
.rununit button+button{border-left:1px solid var(--line)}
.rununit button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.runlen input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:18px;background:transparent;border:0;outline-offset:3px;padding:0}
.runlen input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:999px;background:linear-gradient(90deg,#1F75FE,#8EC2FF)}
.runlen input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#fff;border:2px solid #1F75FE;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}
.runlen input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:linear-gradient(90deg,#1F75FE,#8EC2FF)}
.runlen input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #1F75FE;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}
.runlen input[type=number]{-moz-appearance:textfield;appearance:textfield}.runlen input[type=number]::-webkit-inner-spin-button,.runlen input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.runcol{display:flex;flex-wrap:wrap;gap:6px}
.runsm button{padding:5px 4px;font-size:11.5px}
.runhead .info{margin-left:8px}
.runhead .info:hover::after,.runhead .info:focus::after,.runhead .info:focus-visible::after{text-transform:none!important;letter-spacing:normal!important;font-style:normal!important;font-weight:400!important;font-size:12px!important;line-height:1.35!important;white-space:normal!important;width:170px!important;max-width:none!important;left:-50px!important;right:auto!important;top:auto!important;bottom:calc(100% + 7px)!important;transform:none!important;text-align:left!important}
.runsrc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.runfb{padding-bottom:7px;white-space:nowrap;font-size:12.5px}
.asmleftcol{display:flex;flex-direction:column;gap:10px;min-width:0}
/* The assembler column has no card of its own: Branch, Flow Path and Junction cards sit straight on the page. */
#asmLeft.side.asmleft{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
/* With no wrapper to give it room, a selected card draws its second outline line inside its own edge, so the scrolling column cannot clip it. */
#asmLeft .runsec.sel{box-shadow:inset 0 0 0 1px var(--pick)}#asmLeft .runsec.runjct.sel{box-shadow:inset 0 0 0 1px var(--hi)}#asmLeft .runsec.runflow.sel{box-shadow:inset 0 0 0 1px var(--pickHi)}
/* One card in each end column is the selected one: the last card clicked there, outlined in black. */
#endA .cardsel,#endB .cardsel{border-color:var(--ink)!important}
/* The part builder's end columns drop their wrapper the same way. The number cards turn white so they still stand off the page. */
.cfg>aside.side{background:none;border:0;box-shadow:none;padding:0;border-radius:0;--endcard:var(--panel);--endline:var(--line)}
#endA>.sblock:not(:has(.szcard)),#endB>.sblock:not(:has(.szcard)){padding:12px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.asmthin{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);padding:9px 12px}
.asmthin .spec{margin:4px 0 0;font-size:11.5px}
.asmthinrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:var(--ink)}
.asmthinrow select{flex:1;max-width:200px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-weight:400;font-size:13px}
.asmthinrow.asmck{justify-content:flex-start}
.runsaved{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto}
.runtile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;color:var(--ink);min-width:0}
.runtile img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--view);border-radius:5px}
.runtile span{font-size:10.5px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.runtile em{font-style:normal;font-size:10px;color:#a3541a}
.runtile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.runnone{margin:0;padding:10px;border:1px dashed var(--line);border-radius:8px;text-align:center;font-size:12.5px;color:var(--mute)}
.runfix{font-size:12.5px;color:var(--ink);padding:5px 0}
.runpart{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.runpart .ath{width:44px;height:44px;border-radius:6px;background:var(--view);object-fit:contain}
.runpart b{display:block;font-size:12.5px;overflow-wrap:anywhere}.runpart span{display:block;font-size:11.5px;color:var(--mute);line-height:1.35}.runpart .link{font-size:11.5px;padding:0}
.asmbarin .asmindsel{min-width:0!important;max-width:148px;padding:6px 8px;font-size:12.5px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);min-width:180px}
.runwarn{margin:0;padding:7px 9px;border-radius:6px;background:#FFF4E0;color:#7A4B00;font-size:12px;line-height:1.35}
.runshape{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.runshape button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:10.5px;line-height:1.1;cursor:pointer}
.runshape button svg{width:22px;height:22px}
.runshape button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--accent)}
.runshape button:disabled{opacity:.35;cursor:not-allowed}
.runcol button{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font-size:12px;cursor:pointer}
.runcol button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.runcol i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);display:inline-block}
.asmcard{display:grid;grid-template-columns:64px 1fr;gap:8px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px}
.asmcard .ath,.athsvg{width:64px;height:64px;border-radius:6px;background:var(--view);border:1px solid var(--line);object-fit:contain}
.athsvg{display:grid;place-items:center;padding:5px;box-sizing:border-box}
.athsvg svg{width:100%;height:100%;display:block}
.asmcardb{min-width:0;display:flex;flex-direction:column;gap:6px}
.asmcardb b{font-size:13px;line-height:1.25}
.asmcardb select,.asmcardb input[type=text]{width:100%;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
.asmcard .spec{margin:0;font-size:12.5px}
.asmcard .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.asmcard label,.asmline label{font-size:12.5px;color:var(--mute)}.asmcard input[type=number],.asmline input[type=number]{width:56px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.asmjoin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0 8px;font-size:12px;color:var(--mute)}
.asmjoin.ok{color:var(--ok)}.asmjoin.bad{color:var(--bad)}
.asmbadge{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--bg);color:inherit}
.asmempty{border:1px dashed var(--line);border-radius:8px;padding:14px 10px;text-align:center;color:var(--mute);font-size:13px}
.asmempty p{margin:0 0 6px;color:var(--ink)}.asmadd{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.asmextra{margin-top:4px}.asmextra .item{padding:8px 0;border-bottom:1px solid var(--line)}
.asmline{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg)}
.asmline .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.asmline select,.asmline input[type=text],.asmcol textarea,.asmname{width:100%;padding:7px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
.asmcol textarea{min-height:72px;resize:vertical}
.asmck{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.asmck input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.asmsub{display:flex;flex-direction:column;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px;margin:0 0 4px}
.asmrail{padding:10px 0 0;border-top:1px solid var(--line);margin-top:8px}
.asmrail h4{margin:0 0 6px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.asmrail ol,.asmrail p{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.4}
.asmrail p{padding:0}
.asmrail li{margin:0 0 4px}
.asmnext{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.asmnext .btn{width:100%}
.asmfoot{margin-top:18px;display:grid;grid-template-columns:1fr minmax(260px,.4fr);gap:16px;align-items:start}
.asmdesk{position:relative;padding:12px 0 48px;min-height:calc(calc(100dvh / var(--z,1)) - 58px)}
.asmveil{display:flex;flex-direction:column;gap:12px}
.asmdesk:not(.open) .asmveil{filter:blur(2.2px);opacity:.96;pointer-events:none;user-select:none}
.asmdesk.open .asmveil{filter:none;opacity:1;pointer-events:auto;user-select:auto}
html.asmlock,body.asmlock{overflow:hidden}
.asmmodal{position:fixed;top:calc(58px + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--bg) 22%,transparent)}
.asmdesk.open .asmmodal,.asmmodal[hidden]{display:none}
.asmmodalcard{width:min(540px,100%);text-align:center;padding:32px 28px 26px;box-shadow:0 28px 64px -24px rgba(16,24,40,.55)}
.asmmodalcard .eyebrow{margin:0 0 8px}
.asmmodalcard h1{font-size:clamp(24px,3.2vw,32px);margin:0 auto 12px;letter-spacing:-.02em;max-width:18ch;line-height:1.15}
.asmmodalcard .lead{margin:0 auto 12px;max-width:46ch;font-size:15.5px}
.asmmodalcard .ctas{justify-content:center;margin-top:18px}
.asmdesk.open .asmstudio{display:none}
/* Signed out or signed in, the page shows the real three-column builder; signed out it sits blurred behind the sign-in card. */
.asmdesk .asmstudio,.asmdesk .asmboard{display:none!important}
/* Same black strip as the builder bar: industry and fluid on the strip, the rest in the navy card. */
#asmBar.asmlivebar{background:var(--hexbar);border:0;box-shadow:none;border-radius:8px;margin:8px 0 0;overflow:visible}
#asmBar+#asmLive{margin-top:0}
#asmBar .asmbarin{display:flex;align-items:stretch;flex-wrap:wrap;padding:4px 4px 4px 8px;border:0;background:none}
#asmBar .asmbarin>.fw{display:flex;align-items:flex-end;padding:4px 10px 4px 4px}
#asmBar .hexstyles{margin-left:6px;min-width:0;flex:0 1 auto}
#asmBar .asmblue{width:240px;min-height:72px}
#asmBar .asmnamefw{display:flex;align-items:flex-end;padding:4px 8px 4px 12px}
#asmBar .asmacts{padding:0 6px 5px 0}
.asmbarin{display:flex;align-items:stretch;padding:0;background:none;color:var(--navyMute)}
.asmbarin .hexstyles{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;flex:1;padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,var(--navy0) 0%,var(--navy1) 100%);border:1px solid var(--navyLine)}
.asmbarin .asmacts{margin-left:0;align-self:flex-end}
.asmbarin .asmnamefw{margin-left:auto}
.asmbarin .asmmedia{min-width:120px}
.asmbarin .asmname{width:220px}
.asmacts{margin-left:auto;display:flex;align-items:center;gap:6px;align-self:center;flex:none}
.asmacts button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;cursor:pointer}
.asmacts button:hover{background:rgba(255,255,255,.12)}
.asmacts button:focus-visible{outline:2px solid var(--pickHi);outline-offset:2px}
.asmacts svg{width:18px;height:18px}
.asmopen{position:fixed;z-index:60;width:280px;max-height:min(360px,calc(70vh / var(--z,1)));overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(16,24,40,.3);padding:6px}
.asmopen h4{margin:0;padding:8px 10px 6px;font:600 11px/1 "Geist",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.asmopen p{margin:0;padding:6px 10px 10px;font-size:13px;color:var(--mute)}
.asmopen button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}.asmopen button:hover,.asmopen button:focus-visible{background:var(--bg)}
.asmopen .oth{flex:none;width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;overflow:hidden}.asmopen .oth img{width:100%;height:100%;object-fit:contain;display:block}.asmopen .oth .athsvg{width:24px;height:24px}.asmopen .otx{min-width:0;flex:1}
.asmopen button b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asmopen .otx span{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asmbarin .fw{color:var(--navyMute)}
.asmbarin .fw label{display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.asmbarin .asmname{width:320px;max-width:100%;padding:6px 9px;font-size:13px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--ink)}
.asmlive{grid-template-columns:minmax(300px,340px) minmax(0,1fr) minmax(260px,300px);align-items:start}
.asmlive .asmcenter{position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);min-height:460px}
.asmlive .asmvis{min-height:0;height:100%}
.asmlive #asmCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.asmlive .asmright{position:sticky;top:72px}
.asmlive .asmright .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.asmlive .asmright label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--mute)}
.asmshot{aspect-ratio:4/3;border:1px solid var(--line);border-radius:8px;background:var(--view);overflow:hidden;margin:4px 0 10px;display:grid;place-items:center}
.asmshot img{width:100%;height:100%;object-fit:contain;display:block}
.asmunits{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-weight:600;font-size:13.5px}
.asmstep{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.asmstep button{width:32px;background:var(--panel);border:0;font-size:16px;color:var(--ink);cursor:pointer}
.asmstep input{width:64px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;padding:7px 4px;font:inherit;background:var(--panel);color:var(--ink)}
.asmitems{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-bottom:6px}
.asmitem{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.asmitem .ath,.asmitem .athsvg{width:36px;height:36px;border-radius:6px;background:var(--view);object-fit:contain}
.asmitem .athsvg svg{width:100%;height:100%}
.aib{display:flex;flex-direction:column;min-width:0}.aib b{font-size:12.5px}.aib span{font-size:11.5px;color:var(--mute);overflow-wrap:anywhere}
.asmeach{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--line)}.asmeach span{font-size:12.5px;line-height:1.25;color:var(--mute);max-width:74px}.asmeach b{font-size:26px;line-height:1;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.asmq.csum .asmunits{margin:0 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}.asmctas{display:flex;gap:8px}.asmctas .btn{flex:1}
.aiq{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px;white-space:nowrap}.aiq span{font-size:11.5px;color:var(--mute)}
.asmbom{margin:10px 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.asmbom div{display:flex;justify-content:space-between;gap:8px}.asmbom span{color:var(--mute)}
.asmmore{border-top:1px solid var(--line);padding-top:8px}
.asmmore>summary{cursor:pointer;font-weight:600;font-size:14px;padding:6px 0}
.asmmore h5{margin:12px 0 6px;font-size:13px}
@media (max-width:1100px){.asmlive{grid-template-columns:minmax(250px,290px) minmax(0,1fr) minmax(210px,250px)}}
@media (max-width:860px){.asmlive{grid-template-columns:1fr}.asmlive .asmcenter{position:relative;top:0;height:420px}.asmlive .asmright{position:static}}
.asmdesk:not(.open) .asmboard{overflow:hidden;grid-template-columns:repeat(4,minmax(180px,1fr));max-height:380px}
.asmcfg{margin-top:0}
.asmcfg .side{max-height:none;min-height:420px}
.asmstudio.mbar .custom{padding:10px 14px;gap:12px;flex-wrap:wrap}
.asmvis{flex:1;position:relative;min-height:380px;background:var(--view)}
.asmvis.flat{background:var(--panel)}
.asmvis.nogl .asmtog{display:none!important}
.asmdim,.asmedge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;color:var(--ink);overflow:visible}.asmvis.flat .asmdim,.asmvis.flat .asmedge{display:block}
.asmdim text{font:500 11px "Geist",system-ui,sans-serif;fill:var(--mute)}
.asmex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.asmex figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
.asmex .pic{aspect-ratio:16/9;background:#fff;position:relative;overflow:hidden}
.asmex img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;display:block}
.asmex figcaption{padding:12px 14px;border-top:1px solid var(--line)}
.asmex h3{font-size:17px;margin:0 0 4px}
.asmex p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.4}
.asmbadge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.asmshow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.asmtile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--sh);min-width:0}
.asmtile::before{content:"";display:block;height:3px;background:var(--accent);border-radius:2px;margin:0 0 12px}
.asmart{height:108px;border-radius:10px;background:var(--view);border:1px solid var(--line);display:grid;place-items:center;margin:0 0 12px;overflow:hidden}
.asmart svg{width:88%;height:84%;display:block}.asmart{color:var(--ink);background-image:linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px);background-size:12px 12px;background-position:center}
.asmtile h3{font-size:17px;margin:0 0 4px;line-height:1.15}
.asmtile p{margin:0;font-size:13px;color:var(--mute);line-height:1.4}
.page[data-page="assembly-service"] .asmshow,.page[data-page="kitting-service"] .asmshow{gap:14px}
.page[data-page="assembly-service"] .asmtile,.page[data-page="kitting-service"] .asmtile{padding:16px}
.page[data-page="assembly-service"] .asmart,.page[data-page="kitting-service"] .asmart{height:118px}
.page[data-page="assembly-service"] .asmtile p,.page[data-page="kitting-service"] .asmtile p{font-size:13.5px;line-height:1.45}
.kitex .pic{aspect-ratio:16/9;padding:12px;display:grid;place-items:center}
.kitex .pic svg{width:100%;height:100%;max-width:300px;display:block}.kitex .pic{padding:0;aspect-ratio:4/3}
@media (max-width:1100px){.asmshow{grid-template-columns:repeat(2,minmax(0,1fr))}.asmdesk:not(.open) .asmboard{grid-template-columns:repeat(2,minmax(160px,1fr))}}
/* Example galleries never stack as full-screen pictures: three across down to tablets, then compact rows with the picture beside its caption. */
@media (max-width:1100px){.asmex{gap:12px}.asmex h3{font-size:15.5px}.asmex p{font-size:13px}}
@media (max-width:760px){.asmex{grid-template-columns:1fr;gap:10px}.asmex figure{flex-direction:row;align-items:stretch}
 .asmex .pic,.kitex .pic{flex:0 0 34%;max-width:150px;aspect-ratio:auto;min-height:96px;padding:0}.kitex .pic{padding:8px}
 .asmex img{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px)}
 .asmex figcaption{flex:1 1 auto;min-width:0;border-top:0;border-left:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;justify-content:center}}
@media (max-width:720px){.asmshow{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.asmart{height:88px}}
@media (max-width:900px){.asmfoot{grid-template-columns:1fr}.asmjoin{padding-left:0}}
.kpis{display:flex;gap:18px;margin:12px 0}.kpis div{display:flex;flex-direction:column}.kpis b{font-family:"Geist",system-ui,sans-serif;font-size:30px;color:var(--brass);line-height:1}.kpis span{font-size:13px;color:var(--mute)}
.motogrid{display:flex;flex-wrap:wrap;gap:8px}
.tradeform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;position:relative}
.contactform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.contactform label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mute);min-width:0}
.contactform .full{grid-column:1/-1}
.contactform input,.contactform textarea{padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;width:100%;min-width:0;resize:vertical}
.contactform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contactform button{grid-column:1/-1;justify-self:start}
.contactform>p{grid-column:1/-1;margin:0}
@media(max-width:560px){.contactform{grid-template-columns:1fr}}
.tradeform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)}.tradeform label.chk{flex-direction:row;align-items:center;color:var(--ink)}.tradeform button{grid-column:1/-1;justify-self:start}
.spec code{font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 5px;word-break:break-all}
@media (max-width:900px){.stkgrid{grid-template-columns:1fr}.tradeform{grid-template-columns:1fr 1fr}}
.ptabs button{font-size:13px}
.custom input[type=range]{width:130px;vertical-align:middle;-webkit-appearance:none;appearance:none;height:18px;background:transparent;border:0}
.custom input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,#003EAD,#0054FC 52%,#8EC2FF)}
.custom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:linear-gradient(180deg,#4C97FF,#0054FC);border:2px solid #fff;box-shadow:0 0 0 1px #0054FC;cursor:pointer}
.custom input[type=range]::-moz-range-track{height:6px;border:0;border-radius:999px;background:linear-gradient(90deg,#003EAD,#0054FC 52%,#8EC2FF)}
.custom input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#0054FC;box-shadow:0 0 0 1px #0054FC;cursor:pointer}
.dfm{background:var(--panel);border-top:1px solid var(--line);padding:8px 14px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.dfm div::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--ok)}
.dfm .w::before{background:var(--warn)}.dfm .e::before{background:var(--bad)}
.dfm .e{color:var(--bad)}
.order{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;grid-template-columns:1fr 340px;gap:20px}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)}
.fields select,.fields input[type=number]{padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.opts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px}
.opts label{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.opts input{accent-color:var(--brass);width:16px;height:16px}
.price .big{font-family:"Geist",system-ui,sans-serif;font-size:40px;font-weight:700;line-height:1}
.price small{color:var(--mute);display:block}
.price details{margin-top:10px;font-size:13px}
.price summary{cursor:pointer;color:var(--blue)}
.bd{width:100%;border-collapse:collapse;margin-top:6px}
.bd td{padding:3px 0;border-bottom:1px solid var(--line)}
.bd td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.pb{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px;font-size:12px;text-align:center}
.pb button{border:1px solid var(--line);border-radius:4px;background:transparent;padding:4px 2px;line-height:1.3}
.pb button b{display:block;font-size:13px}
.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.spec{margin-top:8px;font-size:14px;color:var(--mute)}
section.band{padding:56px 0;border-top:1px solid var(--line)}
section.band h2{font-size:clamp(30px,4vw,44px);margin-bottom:8px}
section.band>.wrap>p:not(.eyebrow){color:var(--mute);max-width:66ch;margin:0 0 22px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps b{font-family:"Geist",system-ui,sans-serif;font-size:44px;color:var(--brass);display:block;line-height:1}
.steps h3{font-size:24px;margin:4px 0 6px}
.steps p{color:var(--mute);margin:0}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.t{border-collapse:collapse;width:100%;background:var(--panel);font-size:14px}
.t th,.t td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.t th{color:var(--mute);font-weight:600}
.t td.num{font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.idgrid{display:grid;grid-template-columns:320px 1fr;gap:20px}
.idform{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.idform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute)}
.idform input[type=number]{padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}
.match{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.match:first-child{border-radius:10px 10px 0 0}.match:last-child{border-bottom:0;border-radius:0 0 10px 10px}
.matches{border:1px solid var(--line);border-radius:10px}
details.q{border-bottom:1px solid var(--line);padding:14px 0}
details.q summary{cursor:pointer;font-weight:600}
details.q p{color:var(--mute);margin:8px 0 0;max-width:72ch}
footer{padding:30px 0;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--panel);border-left:1px solid var(--line);z-index:40;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));gap:10px}
.drawer:not(.open){visibility:hidden;box-shadow:none!important;transition:transform .25s,visibility 0s .25s,box-shadow 0s .25s}
.drawer.open{transform:none}
.drawer h2{font-size:30px}
.dhead{display:flex;justify-content:space-between;align-items:center}
.items{flex:1;overflow:auto}
.item{border-bottom:1px solid var(--line);padding:10px 0;font-size:14px;display:flex;flex-direction:column;gap:6px}
.item .row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.item input{width:80px;padding:5px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.link{border:0;background:none;color:var(--blue);padding:0;font-size:13px}
.rates{display:grid;grid-template-columns:1fr 110px;gap:6px 10px;font-size:13px;align-items:center}
.rates input{padding:5px;border:1px solid var(--line);border-radius:4px;background:var(--bg);width:100%}
.rates h4{grid-column:1/-1;margin:10px 0 0}
.loading{opacity:.45}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:6px;opacity:0;transition:opacity .2s;z-index:50;pointer-events:none}
.toast.on{opacity:1}
#sheet{display:none}
@media print{body>*:not(#sheet){display:none!important}#sheet{display:block;color:#000;font-size:12px}#sheet svg{width:100%;height:auto;max-height:420px}#sheet table{border-collapse:collapse;width:100%}#sheet td,#sheet th{border:1px solid #999;padding:4px;text-align:left}}
@media (max-width:860px){.cfg{grid-template-columns:1fr 1fr}.center{grid-column:1/-1;order:-1}.side{max-height:none}}
@media (max-width:1100px){.order{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.idgrid{grid-template-columns:1fr}}
@media (max-width:640px){.cfg{grid-template-columns:1fr}.fields{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}.pb{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.drawer,.toast{transition:none}}
/* ===== Design system v2: tighter, clinical, engineering grade ===== */
:root{--bg:#F5F6F8;--panel:#FFFFFF;--ink:#101418;--mute:#5B6570;--line:#E3E6EA;--line2:#CFD5DB;--accent:#0054FC;--accentText:#0058D8;--accentSoft:#E7F1FF;--brass:#A2702A;--brassSoft:#F4ECDD;--view:linear-gradient(180deg,#F3F5F7 0%,#E6EAEE 100%);--ok:#1E7B4B;--warn:#9A6100;--bad:#B3261E;
 --solid:#101418;--onSolid:#fff;--solidHover:#2A3139;
 --slate:linear-gradient(180deg,rgba(64,82,110,.10),rgba(64,82,110,.04));--slateLine:rgba(64,82,110,.18);--slateInk:#41536B;--slateMute:#66778C;--blue:#0054FC;--pick:#0054FC;--pickHi:#4C97FF;--pickGlow:#8EC2FF;--navy0:#0E3A7A;--navy1:#082A58;--navyLine:#0A3A80;--navyInk:#E8EBEE;--navyMute:rgba(232,235,238,.72);--wash:linear-gradient(180deg,rgba(0,84,252,.11),rgba(0,84,252,.045));--washLine:rgba(0,84,252,.16);--washInk:#2B5A8C;--washMute:#5B7390;--hexbar:#0B0D10;
 --head:"Geist",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:6px;--sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--slate:linear-gradient(180deg,rgba(140,160,190,.15),rgba(140,160,190,.05));--slateLine:rgba(140,160,190,.24);--slateInk:#AEBBCC;--slateMute:#8D9AAC;--bg:#15181C;--panel:#20252B;--ink:#E9EDF1;--mute:#98A2AD;--line:#313840;--line2:#414A54;--accent:#4C97FF;--accentText:#7DB4FF;--accentSoft:#10233F;--view:linear-gradient(180deg,#151A20 0%,#0E1115 100%);--brassSoft:#2E2618;--solid:#0054FC;--onSolid:#fff;--solidHover:#3D8BFF;--blue:#4C97FF;--pick:#4C97FF;--pickHi:#7EB4FF;--pickGlow:#A8D0FF;--navy0:#1A4A88;--navy1:#123A6C;--navyLine:#2A5A9A;--navyInk:#E8EBEE;--navyMute:rgba(232,235,238,.72);--wash:linear-gradient(180deg,rgba(76,151,255,.18),rgba(76,151,255,.07));--washLine:rgba(76,151,255,.24);--washInk:#9BB8DC;--washMute:#8AA0B8;--hexbar:#2A2F36}}
:root[data-theme="dark"]{--slate:linear-gradient(180deg,rgba(140,160,190,.15),rgba(140,160,190,.05));--slateLine:rgba(140,160,190,.24);--slateInk:#AEBBCC;--slateMute:#8D9AAC;--bg:#15181C;--panel:#20252B;--ink:#E9EDF1;--mute:#98A2AD;--line:#313840;--line2:#414A54;--accent:#4C97FF;--accentText:#7DB4FF;--accentSoft:#10233F;--view:linear-gradient(180deg,#151A20 0%,#0E1115 100%);--brassSoft:#2E2618;--solid:#0054FC;--onSolid:#fff;--solidHover:#3D8BFF;--blue:#4C97FF;--pick:#4C97FF;--pickHi:#7EB4FF;--pickGlow:#A8D0FF;--navy0:#1A4A88;--navy1:#123A6C;--navyLine:#2A5A9A;--navyInk:#E8EBEE;--navyMute:rgba(232,235,238,.72);--wash:linear-gradient(180deg,rgba(76,151,255,.18),rgba(76,151,255,.07));--washLine:rgba(76,151,255,.24);--washInk:#9BB8DC;--washMute:#8AA0B8;--hexbar:#2A2F36}
body{font:14px/1.55 "Geist",system-ui,sans-serif;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.01em}
.util{background:var(--ink);color:#C9D1D9;font-size:12px}.util .wrap{display:flex;gap:0;height:34px;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}.util span{display:inline-flex;align-items:center;gap:8px;padding:0 18px;line-height:1}.util span+span{border-left:1px solid rgba(255,255,255,.22)}.util svg{flex:none;color:#fff}
/* The bar stays centred and never clips: it drops its middle items one at a time as the window narrows. */
@media (max-width:1130px){.util span:nth-child(4){display:none}}@media (max-width:920px){.util span:nth-child(3){display:none}}@media (max-width:720px){.util span:nth-child(2){display:none}}.util b{color:#fff;font-weight:500}
nav{box-shadow:0 1px 0 var(--line)}nav .wrap{height:60px}
nav .links a{font-size:13.5px;font-weight:500}
.btn{border-radius:var(--r);background:var(--ink);color:#fff;font-weight:500;padding:9px 16px;transition:background .15s}.btn:hover{background:#2A3139}
a.btn{text-decoration:none;display:inline-block}.btn.ghost{background:var(--panel);border:1px solid var(--line2);color:var(--ink)}.btn.ghost:hover{background:var(--bg)}
#add{background:var(--accent)}#add:hover{background:#0052D6}
.hero{padding:34px 0 8px;align-items:flex-end}.hero h1{font-size:clamp(30px,3.6vw,44px);max-width:22ch}.hero p{font-size:15px}
.perks span::before{background:var(--accent);width:6px;height:6px}
.inds{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.inds a{font-size:12.5px;padding:5px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--panel)}.inds a:hover{border-color:var(--accent);color:var(--accent)}
.side,.center,.order,.card,.stkin,.stkout,.idform,.tradeform{border-radius:8px;box-shadow:var(--sh);border-color:var(--line)}
.side{padding:16px;gap:14px}.side h3{font-size:22px}.side h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.center{background:var(--view)}.styles{padding:8px;background:var(--panel)}
.styles button{font-family:"Geist",system-ui,sans-serif;font-size:13px;font-weight:500;padding:7px 13px;border-radius:var(--r)}
.styles button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.seg{border-radius:var(--r);border-color:var(--line2)}.seg button{font-size:13px}.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips button{border-radius:var(--r);border-color:var(--line2);font-size:12.5px}.chips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent)}
.list{border-color:var(--line2);border-radius:var(--r)}.list button{font-size:13px;padding:7px 10px}.list button[aria-pressed="true"]{background:var(--accentSoft);box-shadow:inset 3px 0 0 var(--accent)}
.olist button[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--accent)}.olist button.cust{box-shadow:inset 3px 0 0 var(--brass)}
.dims td{font-size:12.5px}.dims td:last-child,.bd td:last-child,.t td.num{font-family:var(--mono);font-size:12px}
.call{font-family:var(--mono);font-size:13px;font-weight:500}
.rate{background:var(--accentSoft);border:1px solid var(--line)}
.fields select,.fields input[type=number],.side select,.preset select{border-radius:var(--r);border-color:var(--line2);background:var(--panel)}
.fields label{font-size:12px;font-weight:500}
.price .big{font-family:var(--head);font-weight:600;font-size:38px;font-variant-numeric:tabular-nums}
.pb button{border-radius:var(--r);border-color:var(--line2);background:var(--panel)}.pb button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft)}.pb b{font-family:var(--mono);font-weight:500}
.hud{font-size:12px;background:color-mix(in srgb,var(--panel) 80%,transparent);padding:4px 8px;border-radius:var(--r);backdrop-filter:blur(4px)}
.viewtog .seg,.lbltog{box-shadow:none;background:transparent}.viewtog .seg button{background:transparent}.viewtog .seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}.lbltog[aria-pressed="true"]{background:#fff;color:#0B0D10}
.runsec.sel .runn{background:var(--accent)}.runsec.sel{border-color:var(--accent)}
/* Trial scheme: a high contrast navy Flow Path card, and an amber secondary highlight for finding your way down the column. */
:root{--hi:#F5A300;--hiInk:#2B1B00}
.rungrp.runtube{background:linear-gradient(180deg,var(--navy0) 0%,var(--navy1) 100%);border-color:transparent;color:#fff}
.rungrp.runtube select:focus,.rungrp.runtube input[type=number]:focus{outline:2px solid #3D8BFF;outline-offset:1px}
.rungrp.runtube .runghd h4{color:#fff}
.runsec .rungrp.runtube label,.runsec .rungrp.runtube .runlbl,.rungrp.runtube .asmck,.rungrp.runtube .spec{color:var(--navyMute)}
.rungrp.runtube select,.rungrp.runtube input[type=number]{background:#fff;color:#101418;border-color:transparent}
.rungrp.runtube input[type=range],.rungrp.runtube .asmck input{accent-color:#3D8BFF}
.rungrp.runtube .rununit{border-color:rgba(255,255,255,.28)}.rungrp.runtube .rununit button{background:transparent;color:#fff}.rungrp.runtube .rununit button+button{border-left-color:rgba(255,255,255,.28)}.rungrp.runtube .rununit button[aria-pressed="true"]{background:#1F75FE;color:#fff}
/* A single tube's Flow Path is one navy card: the header and the fields share it, with no card inside a card. */
.runsec.runflow,.runsec.runflow.sel{background:linear-gradient(180deg,var(--navy0) 0%,var(--navy1) 100%);border-color:var(--navyLine);color:#fff}
.runsec.runflow.sel{box-shadow:0 0 0 1px var(--pickHi)}
.runsec.runflow .rungrp.runtube{background:none;border:0;padding:0}
.runsec.runflow .runchev{color:#fff}
.runsec.runflow h4 .endtag,.runsec.runflow.sel h4 .endtag{background:#D6E6FF;border-color:#D6E6FF;color:var(--navy1)}
.runsec.runflow label.asmck.runtop{color:var(--navyMute)}.runsec.runflow .asmck.runtop input{accent-color:#3D8BFF}
/* Section titles use the builder's End A pill: a name with its letter in a dot, blue when that branch is selected. */
.runsec h4 .endtag{text-transform:none;letter-spacing:-.01em;cursor:pointer;color:var(--ink)}.endtag.nodot{padding:6px 12px}
.runsec h4 .enddot{background:#5B6570}.runsec.sel h4 .endtag{background:var(--accentSoft);border-color:var(--pick)}.runsec.sel h4 .enddot{background:var(--pick)}
.runsec.sel{border-color:var(--pick);box-shadow:0 0 0 1px var(--pick)}
/* The junction leads a Tee or Y. Selected, it is outlined in amber where a branch is outlined in blue; its pressed buttons are amber. */
.runsec.runjct.sel{border-color:var(--hi);box-shadow:0 0 0 1px var(--hi)}
.runsec.runjct.sel h4 .endtag{background:color-mix(in srgb,var(--hi) 16%,var(--panel));border-color:var(--hi)}.runsec.runjct.sel h4 .enddot{background:var(--hi);color:var(--hiInk)}
.runsec.runjct .runchips button[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:var(--hiInk)}
.runsec.runjct .runchips button:hover{border-color:var(--hi)}
/* The assembly pricing card: white in light mode, granite in dark mode. */
.asmright .asmq.csum{--pc:#fff;--pcInk:#101418;--pcMute:#5B6570;--pcLine:#E3E6EA;background:var(--pc);border-color:var(--pcLine);color:var(--pcInk);padding:12px 14px!important}
.asmright .asmq.csum .asmeach,.asmright .asmq.csum .asmunits,.asmright .asmq.csum .tot{border-color:var(--pcLine)}
.asmright .asmq.csum .asmeach span,.asmright .asmq.csum .row span{color:var(--pcMute)}.asmright .asmq.csum .asmunits span,.asmright .asmq.csum .tot span,.asmright .asmq.csum b{color:var(--pcInk)}
.asmright .asmq.csum .asmstep{border-color:var(--pcLine)}.asmright .asmq.csum .asmstep button,.asmright .asmq.csum .asmstep input{background:transparent;color:var(--pcInk);border-color:var(--pcLine)}.asmright .asmq.csum .asmstep button:hover{background:var(--pcLine)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .asmright .asmq.csum{--pc:#2A2F36;--pcInk:#E9EDF1;--pcMute:#A9B2BC;--pcLine:#414A54}
 /* Dark mode keeps to granite: fields in the navy Flow Path card are granite, not white. */
 :root:not([data-theme="light"]) .rungrp.runtube select,:root:not([data-theme="light"]) .rungrp.runtube input[type=number]{background:#2A2F36;color:#E9EDF1;border-color:#414A54}}
:root[data-theme="dark"] .asmright .asmq.csum{--pc:#2A2F36;--pcInk:#E9EDF1;--pcMute:#A9B2BC;--pcLine:#414A54}
:root[data-theme="dark"] .rungrp.runtube select,:root[data-theme="dark"] .rungrp.runtube input[type=number]{background:#2A2F36;color:#E9EDF1;border-color:#414A54}
.dfm{font-size:12.5px}
section.band{padding:64px 0}section.band h2{font-size:clamp(26px,3vw,34px)}
.steps b{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:500}.steps h3{font-size:20px}
.t th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:var(--bg)}
.spec code{font-family:var(--mono)}
.colorsel{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--mute);grid-column:span 2}
.swatches{display:flex;gap:6px;flex-wrap:wrap}.swatches button{display:flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--panel);border-radius:999px;padding:4px 10px 4px 5px;font-size:12.5px;color:var(--ink)}
.swatches i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}.swatches button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accentSoft)}.swatches button:disabled{opacity:.35;cursor:not-allowed}
.med{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.med div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:var(--sh)}.med h3{font-size:18px;margin-bottom:6px}.med ul{margin:0;padding-left:18px;color:var(--mute);font-size:13px}.med li{margin:3px 0}
.medcta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.fnote{font-size:12px;color:var(--mute);margin-top:10px}
footer{background:var(--panel)}footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px;padding:12px 0 18px}footer .fh{font-family:inherit;font-weight:600;margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}footer a{display:block;color:var(--mute);text-decoration:none;margin:4px 0}@media (max-width:640px){footer .cols a{margin:0;padding:13px 0}input[type=checkbox]{min-width:22px;min-height:22px}.hdots button{min-width:32px;min-height:32px}}footer .fnote a{display:inline;margin:0}footer a:hover{color:var(--accent)}
footer #theme{margin-top:12px}
@media (max-width:1100px){.med{grid-template-columns:1fr 1fr}footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.med{grid-template-columns:1fr}.colorsel{grid-column:1/-1}.util{display:none}}
/* ===== Pages and landing ===== */
.page[hidden]{display:none}
footer .wrap{display:block}
.eyebrow,section.band .eyebrow,header .eyebrow{font-family:"Geist",system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accentText);margin:0 0 10px}
.lead{font-size:16.5px;line-height:1.6;color:var(--mute);max-width:62ch;margin:0}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.btn.lg{padding:13px 22px;font-size:15px}.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:#EEF1F4}
.nbtn{padding:8px 14px;font-size:13px}
/* The glow behind the hero picture is a cool blue-grey: between the old light blue and the picture panel's own grey. */
.lhero{--stone:#E2E7EE;background:radial-gradient(1200px 500px at 75% 40%,var(--stone),transparent 60%),var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.lgrid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;min-height:min(calc(78vh / var(--z,1)),720px);padding-top:30px;padding-bottom:30px}
.lcopy h1{font-size:clamp(34px,4.6vw,58px);line-height:1.02;margin:0 0 18px;letter-spacing:-.02em}
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px}
.checks li{display:flex;gap:8px;align-items:center}.checks li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.lvis{position:relative;aspect-ratio:1/1;max-height:640px;border-radius:14px;background:var(--view);border:1px solid var(--line);box-shadow:0 14px 28px -20px rgba(16,24,40,.22)}
.lvis canvas,.lvis img.heroimg{width:100%;height:100%;display:block;border-radius:14px}
.lvis img.heroimg{object-fit:contain;padding:8%;box-sizing:border-box;transition:opacity .35s ease}
.lvis img.heroimg.photo{object-fit:cover;padding:0}
.hcap{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.hcap small{display:block;font-size:11px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}.hcap b{font-size:14px;font-weight:600}
.hdots{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:4px}
.hcap[hidden]{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lhero{--stone:#252A31}}
:root[data-theme="dark"] .lhero{--stone:#252A31}
/* Home hero: the slide tracker sits bottom centre. */
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hdots.hdots-b,.hdots.hdots-b{top:auto;right:auto;bottom:12px;left:50%;transform:translateX(-50%)}
.hdots{gap:0}.hdots button{width:24px;height:24px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.hdots button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line2)}
.hdots button[aria-current="true"]::before{background:var(--accent);width:14px;border-radius:3px}
.hdots button[aria-current="true"]{width:28px}
.marq{border-bottom:1px solid var(--line);background:var(--panel)}.marq .wrap{display:flex;gap:18px;align-items:center;padding-top:16px;padding-bottom:16px}.marq span{font-family:"Geist",system-ui,sans-serif;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;letter-spacing:.08em;text-transform:uppercase}
.mlist{display:flex;flex-wrap:wrap;gap:6px 16px}.mlist i{font-style:normal;font-family:"Geist",system-ui,sans-serif;font-size:14px;font-weight:500;color:var(--ink)}
.band.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band h2{margin-bottom:18px}
.hsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hsteps>div{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:var(--sh)}
.hsteps>div>b{position:absolute;top:18px;right:20px;font-family:var(--mono);color:var(--mute);font-weight:500}
.ic{display:inline-flex;width:44px;height:44px;border-radius:10px;background:var(--accentSoft);color:var(--accent);align-items:center;justify-content:center;margin-bottom:12px}.ic svg{width:28px;height:28px}.ic.wide{width:72px}.ic.wide svg{width:56px}
.hsteps h3,.why h3,.howto h3,.tl h3{font-size:19px;margin:0 0 6px}.hsteps p,.why p,.howto p,.tl p{color:var(--mute);margin:0}
.center-cta{text-align:center;margin-top:22px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.mcard:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(16,24,40,.25)}
.mimg{aspect-ratio:7/5;background:var(--view);border-bottom:1px solid var(--line)}.mimg img{width:100%;height:100%;object-fit:cover;display:block}
.mcard h3{font-size:19px;margin:14px 16px 4px}.mcard p{margin:0 16px;color:var(--mute);font-size:13.5px}.mcard .more{margin:12px 16px 16px;color:var(--accentText);font-weight:600;font-size:13px}.mcard .more::after{content:" →"}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.why.three{grid-template-columns:repeat(3,1fr)}.why>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--sh)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.split .lead{margin:6px 0 18px}
.swbig{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.swbig span{display:flex;align-items:flex-end;aspect-ratio:1/1;border-radius:14px;padding:12px;font-size:13px;font-weight:600;background:var(--c);border:1px solid var(--line);box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.25);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.swbig span.clear{background:linear-gradient(135deg,rgba(220,235,242,.9),rgba(255,255,255,.4));color:var(--ink);text-shadow:none}.swbig span:nth-child(2),.swbig span:nth-child(3),.swbig span:nth-child(5),.swbig span:nth-child(6){color:#1E2328;text-shadow:none}
.inds2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.inds2 a{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;color:var(--ink);box-shadow:var(--sh)}.inds2 a:hover{border-color:var(--accent)}.inds2 b{font-size:16px}.inds2 span{color:var(--mute);font-size:13.5px}
.protoart{aspect-ratio:4/3;border-radius:14px;background:var(--view);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh)}.protoart img{width:100%;height:100%;object-fit:cover;display:block}
.cta{background:var(--ink);color:#fff;text-align:center;padding:64px 0}.cta h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 8px}.cta p{color:#B9C2CC;margin:0 0 22px;font-size:16px}
.narrow{max-width:820px}
.crumbs{font-size:13px;color:var(--mute);margin:0 0 14px}.crumbs a{color:var(--mute)}.crumbs a:hover{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px;margin:22px 0 0;max-width:980px}.facts dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.facts dd{margin:4px 0 0}
#thread-data{scroll-margin-top:calc(76px + env(safe-area-inset-top,0px))}
#thread-data .facts{margin:14px 0 16px}
#thread-data .tscroll{margin-top:0}
.linkgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.linkgrid a{border:1px solid var(--line);border-radius:6px;padding:7px 12px;text-decoration:none;color:var(--ink);background:var(--panel)}.linkgrid a:hover{border-color:var(--accent);color:var(--accent)}
.linkcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px}.linkcols h3{font-size:20px;margin:0 0 8px}.linkcols a{display:block;padding:4px 0;color:var(--ink);text-decoration:none}.linkcols a:hover{color:var(--accent)}
.tcard{display:block;border:1px solid var(--line);border-radius:10px;padding:18px;background:var(--panel);text-decoration:none;color:var(--ink)}.tcard h3{font-size:22px}.tcard p{color:var(--mute);margin:6px 0}.tcard:hover{border-color:var(--accent)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
.phero{background:radial-gradient(900px 360px at 85% 0%,var(--accentSoft),transparent 60%),var(--panel);border-bottom:1px solid var(--line);padding:56px 0 44px}.phero h1{font-size:clamp(30px,3.8vw,46px);margin:0 0 12px;max-width:24ch}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:26px 0 4px}.bhead h1{font-size:34px;margin:2px 0 10px}
.crumb{font-size:12.5px;color:var(--mute);margin:0}.crumb a{color:var(--mute)}
.bsteps{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-size:13.5px;color:var(--mute)}.bsteps b{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;align-items:center;justify-content:center;margin-right:6px}
.bside{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.hlink{font-size:13px}
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}.tl>div{padding:0 16px 0 0;position:relative}.tl>div::before{content:"";display:block;height:3px;background:var(--accent);margin-bottom:14px;border-radius:2px}.tl b{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500}
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.howto>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--sh)}
.disc.big{font-size:15px;padding:18px 20px}
.dd{position:relative}.ddbtn{background:none;border:0;color:var(--mute);font-weight:500;font-size:13.5px;padding:18px 0}.ddbtn:hover,.ddbtn.cur{color:var(--ink)}
.ddm{display:none;position:absolute;top:100%;left:-12px;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -16px rgba(16,24,40,.3);padding:6px;z-index:40}.ddm.open{display:block}
.ddm a{display:block;padding:9px 12px!important;border-radius:6px;box-shadow:none!important;color:var(--ink)!important;font-size:13.5px;text-decoration:none}.ddm a:hover{background:var(--bg)}.ddm a[aria-current="true"]{background:var(--accentSoft);color:var(--accent)!important}
nav .links{align-items:center;gap:20px}
@media (max-width:1100px){.lgrid{grid-template-columns:1fr;min-height:0}.lvis{max-height:520px}.cards,.inds2{grid-template-columns:1fr 1fr}.why{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.tl{grid-template-columns:1fr 1fr;gap:18px}.hsteps,.howto,.why.three{grid-template-columns:1fr}
 .nbtn{display:none}}
@media (max-width:640px){.cards,.inds2,.why,.tl{grid-template-columns:1fr}.checks{grid-template-columns:1fr}.lcopy h1{font-size:34px}.bside{align-items:flex-start}
 .dd{width:100%}.ddbtn{padding:10px 0;width:100%;text-align:left}.ddm{position:static;box-shadow:none;border:0;padding:0 0 0 12px}}
/* ===== Build page v3: material bar on top, tight order panel ===== */
.bsel{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.bsel .preset select{min-width:220px}
.mbar{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);margin:14px 0 0;display:block;overflow:hidden}
#mbar{background:#0B0D10;border-color:#0B0D10}
.mrow{display:flex;gap:14px;align-items:flex-start;align-content:flex-start;padding:14px 16px;border-right:1px solid var(--line);flex-wrap:wrap}
.fw{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--mute)}.fw label{display:flex;flex-direction:column;gap:4px}
.fw select,.fw input[type=number],.fw input[type=text]{padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);font-size:13.5px;color:var(--ink);min-width:150px}
.fw .colorsel{grid-column:auto}
.consider{display:flex;border-radius:0;background:linear-gradient(0deg,var(--accentSoft),var(--accentSoft)) no-repeat;background-size:100% 100%}
.chead{display:flex;flex-direction:column;gap:2px}.chead b{font-size:13px;color:var(--ink)}.chead span{font-size:12.5px;color:var(--mute);max-width:80ch}
.cfields{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.fw.ck label{flex-direction:row;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);font-weight:400;padding-bottom:8px}.fw.ck input{width:15px;height:15px;accent-color:var(--accent)}
.cfields .fw select,.cfields .fw input[type=number]{min-width:130px}
.cfg{margin-top:14px}
.order{grid-template-columns:1fr 360px;gap:18px;padding:14px 16px;align-items:start}
.ordl{display:flex;flex-direction:column;gap:10px}.qrow{display:flex;gap:14px;flex-wrap:wrap}.qrow .fw input[type=number]{min-width:90px;width:110px}
#f_ship input{background:var(--bg);min-width:140px}
details.more{border:1px solid var(--line);border-radius:var(--r);padding:0 12px}details.more summary{cursor:pointer;padding:10px 0;font-size:13px;font-weight:500}details.more summary small{color:var(--accent);margin-left:6px}details.more .cfields{padding:0 0 12px}.moreChecks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:10px 0 12px;border-top:1px solid var(--line)}.moreChecks .fw.ck{min-width:0}
.order{grid-template-columns:minmax(0,1fr) minmax(520px,600px)}
.price{border-left:1px solid var(--line);padding-left:18px;display:grid;grid-template-columns:1fr 190px;column-gap:18px;align-items:start}
.price>*{grid-column:1}.price .actions{grid-column:2;grid-row:1/span 5;display:flex;flex-direction:column;gap:8px;margin:0}.price .actions .btn{width:100%}
.price .proto{grid-column:1/-1}.price small{font-size:12px}.price .big{font-size:34px}.pb{margin-top:8px;grid-template-columns:repeat(6,1fr)!important}.pb button{padding:4px 1px}.pb button b{font-size:12px}.extn input{width:70px;padding:5px;border:1px solid var(--line2);border-radius:6px}.actions{margin-top:10px}
.spec{font-size:12.5px}
@media (max-width:1100px){.mbar{grid-template-columns:1fr}.consider{border-radius:8px}.order{grid-template-columns:1fr}.price{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:12px}.bsel{justify-content:flex-start}}
/* industries and how it works heroes with an image */
.pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}.pvis{aspect-ratio:7/5;border-radius:14px;background:var(--view);border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(16,24,40,.16);overflow:hidden}.pvis-wide{aspect-ratio:1024/484}.pvis.pvis-sq{aspect-ratio:1;max-width:380px;width:100%;justify-self:end}.pgrid:has(>.pvis-sq){grid-template-columns:minmax(0,1fr) clamp(170px,32vw,380px)}.pgrid>.pvis.pvis-sq{order:0;justify-self:end;max-width:380px;max-height:none}@media(max-width:560px){.pgrid:has(>.pvis-sq){grid-template-columns:1fr}.pgrid>.pvis.pvis-sq{order:-1;max-width:280px;justify-self:start}}.pvis video{width:100%;height:100%;object-fit:cover;display:block}
/* Banner hero: the photo fills the header behind the copy, which keeps to the left where the photo is empty. The photo is a real
   img so it is indexed with its alt text. On phones it drops below the copy as its own strip. */
.phero.phbanner{position:relative;overflow:hidden;background:#F3F4F6;min-height:320px;display:flex;align-items:center;--ink:#101418;--mute:#5B6570;--panel:#fff;--line:#E3E6EA;color:#101418}
.phero.phbanner>.wrap{position:relative;z-index:2;width:100%}
.phbanner .phcopy{max-width:min(520px,44%)}
.phbanner .phbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0}
.phero.phbanner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#F3F4F6 0,rgba(243,244,246,.92) 30%,rgba(243,244,246,0) 52%);pointer-events:none}
/* Materials banner: a fixed height keeps the cover-fitted photo predictable, so each label can sit under its own elbow. */
.phero.phmats{--bh:clamp(340px,21vw,520px);height:var(--bh);min-height:0;padding-top:0;padding-bottom:0}
.phmats .phcopy{max-width:min(480px,36%)}
.phlabels{list-style:none;margin:0;padding:0;position:absolute;right:0;bottom:12px;height:46px;width:max(100%,calc(var(--bh)*3));z-index:2;pointer-events:none}
.phlabels li{position:absolute;top:0;width:11.4%;transform:translateX(-50%);text-align:center;text-wrap:balance;font-size:11px;line-height:1.35;color:#5B6570}
.phlabels b{display:block;color:#101418;font-weight:600;font-size:12.5px;margin-bottom:2px}
.phero.phcross{background:#E3E6EA}
.phero.phcross::before{background:linear-gradient(90deg,#E3E6EA 0,rgba(227,230,234,.95) 36%,rgba(227,230,234,0) 58%)}
.phcross .phbg{inset:auto;right:0;top:-37%;height:150%;width:auto;max-width:none;object-fit:contain}
/* Narrow screens: the photo stays behind the copy but anchors to the bottom of the banner, under the buttons. The materials photo
   is sized from --iw so its labels can sit just under the elbows at any width; the cross keeps the side layout down to 640px. */
@media(max-width:900px){.phero.phmats{--iw:min(165vw,940px);display:block;height:auto;min-height:0;padding-top:28px;padding-bottom:22px}.phmats .ctas{margin-top:calc(var(--iw)*.2 + 16px)}.phero.phmats::before{display:none}.phmats .phcopy{max-width:none}
.phmats .phbg{inset:auto;right:0;bottom:calc(70px - var(--iw)*.04);width:var(--iw);max-width:none;height:auto;object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 78%,transparent)}
.phlabels{display:none}}
@media(min-width:641px) and (max-width:900px){.phcross .phcopy{max-width:50%}.phcross .phbg{top:50%;right:-12%;width:95%;height:auto;transform:translateY(-58%);-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);mask-image:linear-gradient(180deg,#000 78%,transparent)}}
@media(max-width:640px){.phero.phcross{display:block;min-height:0;padding-bottom:58vw}.phero.phcross::before{display:none}.phcross .phcopy{max-width:none}
.phcross .phbg{inset:auto;right:-12%;bottom:0;width:130%;max-width:none;height:auto;object-fit:contain;-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 44%);mask-image:linear-gradient(180deg,transparent 30%,#000 44%)}}

.pvis.pvis-sm{width:100%;max-width:400px;justify-self:end;background:#fff}
.page[data-lp] .lvis:has(#lpmedCanvas){aspect-ratio:4/3!important;align-self:center}
/* Industry landing hero with the photo as a background: copy on the left over a light wash; on phones the wash covers the whole photo. */
.lhero.lpbghero{position:relative;background:#EEF1F5;--ink:#101418;--mute:#4A5460;--panel:#fff;--line:#DDE2E8;color:#101418}
.page[data-lp] .lpbghero .lgrid{position:relative;z-index:2;grid-template-columns:minmax(0,1fr)!important;min-height:380px}
.lpbghero .lcopy{max-width:min(600px,52%)}
.lpbghero .lpbgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0}
.page[data-lp] .lhero.lpbghero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;animation:none;background:linear-gradient(90deg,rgba(244,246,249,.97) 0,rgba(244,246,249,.93) 42%,rgba(244,246,249,0) 72%)}
@media(max-width:820px){.lpbghero .lgrid{min-height:0}.lpbghero .lcopy{max-width:none}.lpbghero .lpbgimg{object-position:72% center}.page[data-lp] .lhero.lpbghero::before{background:rgba(244,246,249,.87)}}
/* Custom fittings: the catalog-stack versus one-part bench. A control strip on a soft ground, then the two drawings side by
   side on drafting grid, at the same scale, with a centreline and an overall-length dimension under each. */
.fitbench{--bench:#F1F3F6;--gridl:rgba(16,20,24,.055);--pl:#101418;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:24px;
 box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 40px -28px rgba(16,24,40,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fitbench{--bench:#22282F;--gridl:rgba(255,255,255,.045);--pl:#0A0C0F}}
:root[data-theme="dark"] .fitbench{--bench:#22282F;--gridl:rgba(255,255,255,.045);--pl:#0A0C0F}
.fitbench .fbctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;padding:18px 22px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.fitbench .fbctl>div{display:flex;flex-direction:column;gap:10px;min-width:0}
.fitbench .fbctl>div>span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fbchips{display:flex;flex-wrap:wrap;gap:6px}
.fbchips button{font:500 13px/1 inherit;font-family:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:8px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
 box-shadow:0 1px 1px rgba(16,24,40,.04);transition:border-color .15s,background-color .15s,color .15s}
.fbchips button[hidden]{display:none}
.fbchips button:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.fbchips button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink);box-shadow:none}
.fbchips button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fbchips .sw{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,20,24,.25);flex:none}
.fbrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fbrow{padding:20px 22px 22px;min-width:0;display:flex;flex-direction:column;gap:12px}
.fbrow+.fbrow{border-left:1px solid var(--line)}
.fbrowhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fbrowhead>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fbrowhead b{font-family:var(--head);font-size:18px;display:flex;align-items:center;gap:8px;line-height:1.2}
.fbrowhead>div>span{font-size:13px;color:var(--mute)}
.fbtag{flex:none;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mute);white-space:nowrap}
.fbone .fbtag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.fitbench .fblogo{display:inline-flex}.fitbench .fblogo .lgimg{height:13px;width:auto}
.fbdraw{background-color:var(--bench);background-image:linear-gradient(var(--gridl) 1px,transparent 1px),linear-gradient(90deg,var(--gridl) 1px,transparent 1px);background-size:16px 16px;background-position:-1px -1px;border-radius:10px;border:1px solid var(--line)}
.fbone .fbdraw{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent)}
.fbdraw svg{display:block;width:100%;height:auto}.fbdraw svg g *{vector-effect:non-scaling-stroke}
.fbdraw svg text{font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.fbdraw svg.in{animation:fbIn .28s ease-out}
@keyframes fbIn{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fbdraw svg.in{animation:none}}
@media(max-width:760px){.fitbench .fbctl{grid-template-columns:1fr;padding:16px}.fbrows{grid-template-columns:1fr}.fbrow{padding:18px 16px}.fbrow+.fbrow{border-left:0;border-top:1px solid var(--line)}}
/* Landing page: When millimeters matter. */
.mmhero{background:radial-gradient(900px 360px at 85% 0%,var(--accentSoft),transparent 60%),var(--panel);border-bottom:1px solid var(--line);padding:48px 0}
.mmgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.mmcopy h1{font-size:clamp(36px,4.6vw,58px);line-height:1.02;margin:0 0 16px;letter-spacing:-.02em}
.mmcopy .lead{font-size:clamp(15px,1.3vw,17.5px);max-width:54ch;margin:0}
.mmcopy .ctas{margin-top:24px}
.mmtrust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--mute)}
.mmtrust li{display:flex;align-items:center;gap:8px}.mmtrust svg{color:var(--accent);flex:none}
.mmphoto,.mmphoto2{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(16,24,40,.16)}
.mmphoto{aspect-ratio:4/3}.mmphoto2{aspect-ratio:16/10}
.mmphoto img,.mmphoto2 img{width:100%;height:100%;object-fit:cover;display:block}
/* Closing banner on the industry pages: centred copy and buttons that read on the dark ground. */
.cta.band .lead{max-width:60ch;margin:12px auto 0!important;color:#D9DEE5!important}
.cta.band .eyebrow{color:#9DB8FF!important}
.cta.band .ctas{justify-content:center}
.cta.band .btn:not(.ghost){background:#fff;color:#101418;border-color:#fff}
.cta.band .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta.motocta{position:relative;overflow:hidden;background:#101418}
.motocta>.wrap{position:relative;z-index:2}
.motocta .ctabg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.motocta::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,20,24,.78),rgba(16,20,24,.84))}
.cta.motocta.howcta::before{background:linear-gradient(180deg,rgba(16,20,24,.5),rgba(16,20,24,.58))}
.motosplit{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.motosplit .mmphoto2{aspect-ratio:4/3;max-width:460px;justify-self:end;width:100%}
@media(max-width:900px){.motosplit{grid-template-columns:1fr}.motosplit .mmphoto2{order:-1;justify-self:start;max-width:420px}}
.mmsplit{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:44px;align-items:center}
.mmlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;font-size:14px;line-height:1.5;color:var(--mute)}
.mmlist li{padding-left:16px;border-left:2px solid var(--accent)}.mmlist b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.mminds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.mminds a{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-decoration:none;color:var(--ink)}
.mminds a:hover{border-color:var(--accent)}.mmth{flex:none;width:92px;aspect-ratio:1;border-radius:8px;background:#fff;border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}.mmth img{width:100%;height:100%;object-fit:contain;display:block;filter:brightness(1.085) contrast(1.04)}.mmtx{display:flex;flex-direction:column;gap:4px;min-width:0}.mminds b{font-size:16px}.mmtx>span{font-size:13.5px;line-height:1.45;color:var(--mute)}
@media(max-width:900px){.mmhero{padding:28px 0 32px}.mmgrid,.mmsplit{grid-template-columns:1fr;gap:20px}.mmphoto{order:-1;max-width:460px;max-height:260px}.mmphoto2{max-width:520px}.mminds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.mmphoto{max-width:none;max-height:none;aspect-ratio:16/9}.mminds{grid-template-columns:1fr}.mmcopy .ctas .btn{flex:1;text-align:center}}
/* Materials cards stay four across on tablets and go two across on phones, so the photos never blow up to half the page. */
.why.whymats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.why.whymats{gap:10px}.why.whymats>div{padding:12px}.why.whymats h3{font-size:15px}.why.whymats p{font-size:12.5px;line-height:1.45}}
@media(max-width:640px){.why.whymats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.whypic{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff;border-radius:8px;margin-bottom:12px;filter:brightness(1.085) contrast(1.04)}
@media(max-width:860px){.pvis.pvis-sm{justify-self:start;max-width:340px}}
/* Stacked split heroes: the picture goes above the copy and stays a modest size, so it never fills the screen. */
@media(max-width:900px){.pgrid{gap:20px}.pgrid>.pvis{order:-1;width:100%;max-width:420px;justify-self:start}.pgrid>.pvis.pvis-wide{max-width:520px}.pgrid>.pvis.pvis-sm{max-width:300px}}
@media(max-width:560px){.pgrid>.pvis{max-width:none;max-height:230px}.pgrid>.pvis.pvis-sm{max-width:260px;max-height:none}}.pvis img{width:100%;height:100%;object-fit:cover;display:block}
/* A wide render on a clear square canvas: fill the panel by width, with a margin each side, and let the empty top and bottom crop away. */
.pvis.pvis-fit img{object-fit:cover;padding:0 22px}
/* Kitting hero: a tray of six pockets, each with a real part render and the count that goes in the kit. */
.pvis.kitvis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.kpk{position:relative;min-height:0;background:#fff;border:1px dashed var(--line2);border-radius:10px;overflow:hidden}.pvis .kpk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px 8px 16px}
.kpk span{position:absolute;left:7px;bottom:7px;font:500 11px/1 var(--mono);background:#101418;color:#fff;border-radius:4px;padding:3px 6px}
.ichips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;position:static;background:none;border:0;box-shadow:none;z-index:auto}.ichips a{font-size:12.5px;padding:6px 11px;border:1px solid var(--line2);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--panel)}.ichips a:hover{border-color:var(--accent);color:var(--accent)}
.upl{cursor:pointer}.upbox[hidden]{display:none!important}
.upbox{margin-top:14px;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;max-width:460px;box-shadow:var(--sh)}.upbox label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);font-weight:500}.upbox input,.upbox textarea{padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r);font:inherit;background:var(--panel);color:var(--ink)}.upbox .row{display:flex;gap:8px}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}
.bsteps.hsteps2{margin:18px 0 0;gap:10px 16px}
.consider{justify-content:center}
.bhead{align-items:flex-end;padding:14px 0 0;gap:16px}.btitle h1{font-size:26px;margin:0}.btitle .crumb{margin:0 0 2px}
.bsel{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.bsel .preset{font-size:11.5px}.bsel .preset select{padding:7px 10px;font-size:13px;min-width:200px}.bsel .preset:nth-child(2) select{min-width:280px}
.reset{padding:7px 12px;font-size:13px;white-space:nowrap}
.mbar{margin-top:10px}.mrow{padding:10px 14px;gap:12px}.consider{padding:10px 14px}.fw select,.fw input[type=number],.fw input[type=text]{padding:6px 9px;font-size:13px}.swatches button{padding:3px 9px 3px 4px}.swatches i{width:16px;height:16px}
.cfg{margin-top:10px}
.anatwrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--sh);overflow-x:auto;margin-bottom:18px}.anat{width:100%;min-width:640px;height:auto;color:var(--ink)}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feat>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:var(--sh);display:flex;flex-direction:column}
.feat h3{font-size:19px;margin:12px 0 6px}.feat p{color:var(--mute);margin:0 0 10px;flex:1}.feat a{font-weight:600;font-size:13px;color:var(--accent);text-decoration:none}.feat a::after{content:" →"}
.fart{height:92px;border-radius:10px;background:var(--view);display:flex;align-items:center;justify-content:center;color:var(--ink);padding:8px}.fart svg{height:100%;max-width:100%}.fart svg.shapes{width:100%;height:auto}
.tchips{flex-wrap:wrap;gap:5px;align-content:center}.tchips i{font-style:normal;font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--line2);border-radius:4px;padding:2px 6px}
.fart.sw{gap:8px}.fart.sw span{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12)}.fart.sw .clr{background:linear-gradient(135deg,#fff 0 45%,#cfe0ea 45% 55%,#fff 55%)}
@media (max-width:1000px){.feat{grid-template-columns:1fr 1fr}}@media (max-width:640px){.feat{grid-template-columns:1fr}}
.price .proto{border-top:0;padding-top:0;margin-top:0}#protoBtn{white-space:normal;line-height:1.3}
.qsum{display:flex;flex-direction:column;gap:5px;font-size:13.5px}.qsum .ln{display:flex;justify-content:space-between;gap:10px;color:var(--mute)}.qsum .ln b{color:var(--ink);font-family:var(--mono);font-weight:500}
.qsum .ln[hidden]{display:none}.qsum .ln.tot{border-top:1px solid var(--line);padding-top:8px;margin-top:3px;color:var(--ink);font-weight:600;font-size:15px}.qsum .ln.tot b{font-family:var(--head);font-size:26px;font-weight:600}.qtax{color:var(--mute);font-size:11.5px}
.csum{display:flex;flex-direction:column;gap:4px;padding:8px 0;font-size:14px}.csum .row{display:flex;justify-content:space-between}.csum .row b{font-family:var(--mono);font-weight:500}.csum .tot{border-top:1px solid var(--line);padding-top:6px;font-weight:600}.csum .tot b{font-family:var(--head);font-size:20px}
.price .proto{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.price .proto>#protoBtn{width:100%}
/* ===== Order section v4: one clean system ===== */
.order{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0;padding:0;overflow:hidden;align-items:stretch!important}
.ordl{display:flex;flex-direction:column;gap:0;padding:4px 18px}
.osec{padding:14px 0;border-bottom:1px solid var(--line)}.osec:last-of-type{border-bottom:0}
.osec h4,.sumcard h4{margin:0 0 10px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.qrow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}.qrow .fw input[type=number]{width:110px;min-width:0}
.fw .lbl{font-size:12px;font-weight:500;color:var(--mute)}
#f_ship input{background:var(--bg);color:var(--ink);min-width:150px}
.pb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px;margin:0}
.pb button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px!important;border:1px solid var(--line2);border-radius:8px;background:var(--panel);cursor:pointer}
.pb button small{font-size:11.5px;color:var(--mute)}.pb button b{font-family:var(--mono);font-size:14px!important;font-weight:500;color:var(--ink)}.pb button i{font-style:normal;font-size:10.5px;color:var(--mute)}
.pb button[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);box-shadow:0 0 0 1px var(--accent) inset}
details.more{border:0;padding:0}details.more summary{padding:0;font-size:13px;font-weight:600;color:var(--ink)}details.more[open] summary{margin-bottom:10px}details.more .moreChecks{padding-top:10px}
.pro .phead{display:flex;justify-content:space-between;align-items:center;gap:12px}.pro .phead h4{margin:0 0 2px}.pro .phead small{color:var(--mute);font-size:12.5px}
#protoPanel{display:flex;flex-direction:column;gap:10px;margin-top:12px}#protoPanel[hidden]{display:none}#protoPanel .seg{width:auto}#protoPanel .seg button{padding:7px 12px;white-space:nowrap}
.pnote{font-size:12.5px;color:var(--mute);margin:0}
.price{display:block!important;border-left:1px solid var(--line)!important;padding:0!important;background:var(--bg)}
.sumcard{padding:18px;display:flex;flex-direction:column;gap:10px;height:100%}.sumcard[hidden]{display:none}
.bigp{display:flex;align-items:baseline;gap:6px}.bigp b{font-family:var(--head);font-size:40px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}.bigp span{color:var(--mute);font-size:14px}
.qsum{gap:6px}.qsum .ln.tot b{font-size:24px}
.sumcard .actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}.sumcard .actions .btn{width:100%;padding:11px 14px}
.okn{color:var(--ok);font-size:12px}.okn:empty,.qtax:empty{display:none}
@media (max-width:1100px){.order{grid-template-columns:1fr}.price{border-left:0!important;border-top:1px solid var(--line)}.pb{grid-template-columns:repeat(3,1fr)!important}}
.qsum .ln.dl{align-items:center;padding-bottom:4px}.qsum .ln.dl label{color:var(--mute)}.qsum .ln.dl select{padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font-size:13px;max-width:190px}
.qsum .ln.sep{border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.sumcard{height:auto}#protoSum{border-top:1px solid var(--line2);background:var(--panel)}
/* blue considerations bar: one row */
.mbar{grid-template-columns:minmax(0,1fr)}
.consider{flex-direction:row;align-items:flex-end;gap:12px;flex-wrap:nowrap;justify-content:flex-start!important;padding:10px 14px}
.consider .cfields{flex-wrap:nowrap;gap:10px}
.consider .fw select,.consider .fw input[type=number]{min-width:0!important;width:auto;max-width:170px;padding:6px 8px;font-size:12.5px}
.consider #req{width:84px;min-width:0;padding:6px 8px;font-size:12.5px}
.cchecks{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:2px 14px;align-self:center}.cchecks[hidden]{display:none}
.cchecks .fw.ck label{padding:0;font-size:12.5px;white-space:nowrap}
#f_industry select{max-width:200px!important}
@media (max-width:1100px){.consider,.consider .cfields{flex-wrap:wrap}}
/* black bar for industry/fluid; navy card for shape, material, color, body */
#hexBar{display:flex;align-items:stretch;flex-wrap:wrap;gap:0;padding:4px 4px 4px 8px;background:var(--hexbar);border-top:0;color:var(--navyMute)}
#hexBar>.fw{display:flex;align-items:flex-end;padding:4px 10px 4px 4px}
#hexBar .fw{min-width:0}
#hexBar .fw select{min-width:0;max-width:148px;padding:6px 8px;font-size:12.5px}
#hexBar .fw,#hexBar .bodysel .lbl,#hexBar .colorsel{color:var(--navyMute)}
#hexBar .fw[hidden],#hexBar .bodysel[hidden]{display:none}
#blCtrls[hidden],#extRow[hidden],#redL[hidden],#stepUpL[hidden]{display:none!important}
#hexBar .hexstyles{flex:0 1 auto}
#hexBar #f_pname{margin-left:auto;display:flex;align-items:flex-end;padding:4px 8px 4px 12px}
#hexBar #f_pname label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500}
#hexBar .pname{width:200px;max-width:100%;padding:6px 9px;font:inherit;font-size:12.5px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--ink)}
#hexBar #f_pname+.asmacts{margin-left:0;align-self:flex-end;padding:0 6px 5px 0}
#hexBar .hexstyles{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;flex:1;min-width:0;margin-left:6px;padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,var(--navy0) 0%,var(--navy1) 100%);border:1px solid var(--navyLine)}
#hexBar #f_shape{padding-right:12px;margin-right:2px;border-right:1px solid rgba(255,255,255,.22)}
#hexBar #f_shape label{color:var(--pickGlow)}
#hexBar #f_shape select{max-width:210px;background:var(--pick)!important;color:#fff!important;caret-color:#fff;border-color:var(--pickHi);font-weight:600}
#hexBar .bodysel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 0 1px 12px;margin-left:2px;border-left:1px solid rgba(255,255,255,.18)}
#hexBar .bodysel .lbl{font-size:12px;font-weight:500}
#hexBar .bodysel .seg button:disabled{opacity:.35;cursor:not-allowed}
#hexBar .swatches button{background:var(--panel);border-color:var(--line2)}
#hexBar .swatches button[aria-pressed="true"]{background:var(--panel);border-color:var(--accent);color:inherit}
/* Builder and assembly bars: three cells that line up with the page columns below; the navy section spans column 2.
   Every control sits on the same 32px line: cells pad 9px top and bottom, the navy card 8px plus its 1px border. */
#hexBar,#asmBar .asmbarin{display:grid!important;grid-template-columns:minmax(228px,268px) minmax(0,1fr) minmax(228px,268px);column-gap:12px;align-items:stretch;padding:0!important}

#hexBar .hxl,#hexBar .hxr,#asmBar .hxl,#asmBar .hxr{display:flex;align-items:flex-end;gap:10px;padding:9px 12px;min-width:0}
#hexBar .hxr,#asmBar .hxr{justify-content:flex-end;gap:8px}
#hexBar .hxl>.fw,#asmBar .hxl>.fw,#hexBar .hxr>.fw,#asmBar .hxr>.fw{padding:0!important;margin:0!important;display:flex;align-items:flex-end;min-width:0}
#hexBar .hexstyles.hexstyles{flex:none;margin:4px 0;padding:4px 12px;width:auto;min-width:0;align-items:flex-end}
/* Metals add a Finish dropdown; the dropdowns shrink to share the column instead of wrapping to a second row. */
#hexBar .hexstyles.hexstyles{flex-wrap:nowrap;gap:10px}
#hexBar .hexstyles #f_shape,#hexBar .hexstyles #f_mat,#hexBar .hexstyles #f_fin{flex:0 1 auto;min-width:80px}
#hexBar .hexstyles #f_shape label,#hexBar .hexstyles #f_mat label,#hexBar .hexstyles #f_fin label{width:100%}
#hexBar .hexstyles #sty,#hexBar .hexstyles #mat,#hexBar .hexstyles #fin{width:100%;min-width:0}
#hexBar .hexstyles #f_colors,#hexBar .hexstyles .bodysel{flex:none}
@media (max-width:1100px){#hexBar .hexstyles.hexstyles{flex-wrap:wrap}}
#hexBar .hxl label,#hexBar .hxr label,#asmBar label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;min-width:0}
#hexBar select,#hexBar .pname,#asmBar select,#asmBar .asmname{height:32px;box-sizing:border-box;padding-top:0!important;padding-bottom:0!important}
#hexBar .hxl select,#asmBar .hxl select{width:100%;max-width:none}
#hexBar .hxl>.fw,#asmBar .hxl>.fw{flex:1 1 0}
.ubar{display:flex;flex-direction:column;gap:4px;flex:none;font-size:12px;font-weight:500;color:var(--navyMute)}.ubar .rununit{height:32px;box-sizing:border-box;border-color:rgba(255,255,255,.28)}.ubar .rununit button{background:transparent;color:#fff;padding:0 8px;font-size:12.5px}.ubar .rununit button+button{border-left-color:rgba(255,255,255,.28)}.ubar .rununit button[aria-pressed="true"]{background:#fff;color:#0B0D10}
#hexBar .pname{width:100%;min-width:0}#hexBar #f_pname{flex:1 1 auto}
#asmBar .asmname{width:100%;min-width:0}#asmBar .asmnamefw{flex:1 1 auto}
#asmBar .hexstyles.asmtube{display:flex;flex:none;flex-wrap:nowrap;align-items:flex-end;gap:12px;margin:4px 0;padding:4px 12px;min-width:0;border-radius:8px;background:linear-gradient(180deg,var(--navy0) 0%,var(--navy1) 100%);border:1px solid var(--navyLine)}
#asmBar .asmtube .fw{display:flex;align-items:flex-end;min-width:0;flex:none}
#asmBar .asmtube select{font-size:12.5px;padding:0 8px;border-radius:6px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);width:118px!important;min-width:0!important;max-width:none}
#asmBar #f_tshape{padding-right:12px;border-right:1px solid rgba(255,255,255,.22)}
#asmBar #f_tshape label{color:var(--pickGlow)}
#asmBar #f_tshape select{background:var(--pick)!important;color:#fff!important;border-color:var(--pickHi);font-weight:600;width:100px!important}
#asmBar .asmtube .colorsel{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--navyMute)}
#asmBar .asmtube .swatches{height:32px;align-items:center;gap:3px;flex-wrap:nowrap}
#asmBar .asmtube .swatches button{background:var(--panel);border-color:var(--line2)}
#asmBar .asmtube .swatches button{padding:2px!important}#asmBar .asmtube .swatches button i{width:16px;height:16px}
#asmBar .asmtube .swatches button[aria-pressed="true"]{border-color:var(--accent)}
#hexBar .asmacts,#asmBar .asmacts{margin:0!important;padding:0!important;align-self:flex-end}
#hexBar .asmacts button,#asmBar .asmacts button{width:32px;height:32px;padding:0!important;display:grid;place-items:center}
#hexBar .bodysel{padding-bottom:0}
#hexBar .bodysel .seg{height:32px;box-sizing:border-box;align-items:stretch}#hexBar .bodysel .seg button{height:auto}
/* Body: outline icons, a hex and a round, each with its bore circle. The chosen one fills white; the other dims. */
#hexBar .bodyic{display:flex;gap:4px;height:32px;align-items:center}
#hexBar .bodyic button{position:relative;width:34px;height:32px;padding:0;display:grid;place-items:center;background:transparent;border:0;border-radius:6px;color:#fff;cursor:pointer;opacity:.45;transition:opacity .15s}
#hexBar .bodyic button:hover{opacity:.8}
#hexBar .bodyic button[aria-pressed="true"]{opacity:1}
#hexBar .bodyic button:disabled{opacity:.2;cursor:not-allowed}
#hexBar .bodyic button:focus-visible{outline:2px solid var(--pickHi);outline-offset:1px}
#hexBar .bodyic svg{width:28px;height:28px}
#hexBar .bodyic .bo{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#hexBar .bodyic .bi{fill:none;stroke:currentColor;stroke-width:1.8}
#hexBar .bodyic button[aria-pressed="true"] .bo{fill:#fff}
#hexBar .bodyic button[aria-pressed="true"] .bi{stroke:var(--navy1);fill:var(--navy1)}
#hexBar .bodyic button:hover::after,#hexBar .bodyic button:focus-visible::after{content:attr(data-tip);position:absolute;z-index:40;top:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--panel);font:400 12px/1.3 "Geist",system-ui,sans-serif;white-space:nowrap;pointer-events:none}
#hexBar #colors{width:100px}
@media (max-width:1100px){#hexBar{grid-template-columns:1fr!important}#asmBar .asmbarin{grid-template-columns:1fr!important}#hexBar .hexstyles.hexstyles{margin:0 8px}#hexBar .hxr,#asmBar .hxr{justify-content:flex-start}#hexBar .hxl>.fw,#hexBar .hxr>.fw,#asmBar .hxl>.fw,#asmBar .hxr>.fw{justify-content:flex-start!important;flex:1 1 0}#hexBar .hxl label,#hexBar .hxr label,#asmBar label{width:100%}#hexBar .hxl select,#asmBar .hxl select,#hexBar .pname,#asmBar .asmname{width:100%!important;max-width:none!important}}
@media (max-width:1100px){html:not(.presigned) body:not(.signed) #hexBar,html:not(.presigned) body:not(.signed) #asmBar .asmbarin{grid-template-columns:minmax(0,1fr) auto!important;column-gap:0}html:not(.presigned) body:not(.signed) #hexBar .hxl,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxl{grid-column:1/-1}html:not(.presigned) body:not(.signed) #hexBar .hexstyles.hexstyles,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hexstyles.hexstyles{margin-right:6px}html:not(.presigned) body:not(.signed) #hexBar .hxg,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxg{padding:0 8px 0 0}html:not(.presigned) body:not(.signed) #hexBar .hxg p,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxg p{max-width:210px;padding:4px 10px 4px 6px}}
/* On the three-column layout the blue section is a full-height band of the bar with square ends, not an inset pill. */
@media (min-width:1101px){#hexBar .hexstyles.hexstyles,#asmBar .hexstyles.asmtube{margin:0;border-radius:0;border-top:0;border-bottom:0;align-items:center;padding-top:8px;padding-bottom:8px}}
/* The blue tube section sits directly over the viewer; its fields share whatever width that column leaves. */
#asmBar .hexstyles.asmtube{gap:8px}#asmBar .asmtube .fw{flex:1 1 0;min-width:0}#asmBar .asmtube .fw label{width:100%;min-width:0}#asmBar .asmtube select{width:100%!important}
#hexBar .hxl,#asmBar .hxl{gap:5px;padding-left:8px;padding-right:8px}#hexBar .hxl select,#asmBar .hxl select{padding-left:6px!important;padding-right:2px!important;font-size:12.5px}#hexBar .hxl>.fw:first-child,#asmBar .hxl>.fw:first-child{flex:1.2 1 0!important}#hexBar .hxl>.fw+.fw,#asmBar .hxl>.fw+.fw{flex:1 1 0!important}.hxl .ubar .rununit button{padding:0 6px}
/* One corner radius for every selector on the builder and assembler. Toggle halves meet on a straight line; only the outer frame is rounded. */
.rununit button,.seg button{border-radius:0!important}
.rununit,.cfg .seg,#asmLive .seg,#hexBar select,#asmBar select,#hexBar .pname,#asmBar .asmname,.cfg .side select,.cfg .side input[type=number],.cfg .side input[type=text],#asmLive select,#asmLive input[type=number]{border-radius:4px!important}
/* Application and Fluid fill their share of the left section at every width, so the gaps between the three controls stay even. */
#hexBar .hxl>.fw,#asmBar .hxl>.fw{min-width:0!important}#hexBar .hxl>.fw>label,#asmBar .hxl>.fw>label{width:100%;min-width:0}#hexBar .hxl select,#asmBar .hxl select{width:100%!important;min-width:0!important;max-width:none!important;text-overflow:ellipsis}
@media (max-width:860px){html:not(.presigned) body:not(.signed) #hexBar .hxg p,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxg p{font-size:0;gap:0;padding:4px 6px}html:not(.presigned) body:not(.signed) #hexBar .hxg a,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxg a{font-size:12.5px}}
@media (max-width:640px){html:not(.presigned) body:not(.signed) #hexBar,html:not(.presigned) body:not(.signed) #asmBar .asmbarin{grid-template-columns:1fr!important}html:not(.presigned) body:not(.signed) #hexBar .hxg,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hxg{display:none}html:not(.presigned) body:not(.signed) #hexBar .hexstyles.hexstyles,html:not(.presigned) body:not(.signed) #asmBar .asmbarin .hexstyles.hexstyles{margin-right:8px}}

#moreFields:empty{display:none}
.swatches{align-items:center;gap:5px;flex-wrap:nowrap}.swatches button{position:relative;padding:3px!important;border-radius:50%;gap:0}.swatches button i{width:20px;height:20px}
.swatches button:hover::after,.swatches button:focus-visible::after{content:attr(data-tip);position:absolute;z-index:40;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);width:max-content;padding:5px 8px;border-radius:6px;background:var(--ink);color:var(--panel);font:400 12px/1.3 "Geist",system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);pointer-events:none}
.consider .cfields:empty{display:none}
.consider{gap:10px;padding:10px 12px}.consider .cfields{gap:8px}.consider .fw select,.consider .fw input[type=number]{max-width:140px}
#f_industry select{max-width:200px!important}
.cchecks{gap:1px 12px}.cchecks .fw.ck label{font-size:12px}
.fw{font-size:11.5px}
.grow2{display:flex;gap:8px;align-items:flex-start}.gcol{flex:1}.ucol .seg button{padding:7px 10px}
/* cart drawer: solid, elevated, with a scrim */
.drawer{background:#fff;background:var(--panel);box-shadow:-24px 0 60px -20px rgba(16,24,40,.45);border-left:1px solid var(--line);z-index:60;overscroll-behavior:contain}
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.42);z-index:55;backdrop-filter:blur(2px)}.scrim[hidden]{display:none}
body.lock{overflow:hidden}
.citem{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start}.cbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.cthumb{width:72px;height:72px;border-radius:10px;background:var(--view);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}.cthumb img{width:100%;height:100%;object-fit:cover}.cthumb img:not([src]){visibility:hidden}
.cthumb.pr{outline:2px dashed var(--line2);outline-offset:-4px}
.toast{z-index:70}
/* ===== Responsive pass ===== */
@media (max-width:1100px){.mbar{grid-template-columns:1fr!important}.consider{flex-wrap:wrap!important;border-radius:8px}.consider .cfields{flex-wrap:wrap!important}.bsel{width:100%}.bsel .preset{flex:1}.bsel .preset select{min-width:0!important;width:100%}.bhead{flex-direction:column;align-items:stretch}}
@media (max-width:640px){
 nav .nbtn{display:none!important}nav .wrap{gap:8px;padding:0 12px}.logo{font-size:15px}.lgimg{height:14px}.nbtn{display:none}.cartbtn{padding:7px 12px}
 .wrap{padding:0 14px}.t th,.t td{white-space:normal}
 .lcopy h1{font-size:32px}.lvis{aspect-ratio:1/1.05}.hcap{flex-direction:column;align-items:flex-start}.hcap .btn{width:100%}
 .phero{padding:36px 0 28px}.phero h1{font-size:30px}.ctas .btn{flex:1;text-align:center}
 .consider{flex-wrap:wrap}.consider{border-radius:8px}.cchecks{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-template-rows:none}
 .cfg{gap:10px}.center{min-height:420px}#stage{min-height:320px}.styles{justify-content:flex-start;overflow-x:auto;flex-wrap:wrap}.styles button{flex:none}
 .custom{gap:10px}.custom input[type=range]{width:110px}
 .ordl{padding:4px 14px}.pb{grid-template-columns:repeat(3,1fr)!important}.pro .phead{flex-direction:column;align-items:flex-start}
 .sumcard{padding:14px}.bigp b{font-size:34px}
 .drawer{width:100%}.citem{grid-template-columns:60px 1fr}.cthumb{width:60px;height:60px}
 .tl{grid-template-columns:1fr}.feat,.why,.why.three,.howto,.cards,.inds2{grid-template-columns:1fr}.swbig{grid-template-columns:repeat(3,1fr)}
 .util span{padding:0 12px}footer .cols{grid-template-columns:1fr 1fr}
}
/* ===== v5: contrast, tighter builder sides, spacing ===== */
.btn{background:var(--solid);color:var(--onSolid)}.btn:hover{background:var(--solidHover);color:var(--onSolid)}
.btn.ghost{background:var(--panel);color:var(--ink)}.btn.ghost:hover{background:var(--bg);color:var(--ink)}
.btn.light{background:#fff;color:#101418}.btn.light:hover{background:#EEF1F4;color:#101418}
#add{background:var(--solid);color:var(--onSolid)}#add:hover{background:var(--solidHover);color:var(--onSolid)}
.seg button[aria-pressed="true"],.styles button[aria-pressed="true"]{background:var(--solid);border-color:var(--solid);color:var(--onSolid)}
.bsteps b{background:var(--solid);color:var(--onSolid)}
.cta{background:#101418;color:#fff}.cta p{color:#B9C2CC}
.chips button[aria-pressed="true"]{border-color:var(--solid);background:var(--accentSoft);color:var(--accent)}
.pb button[aria-pressed="true"]{border-color:var(--solid);background:var(--accentSoft);box-shadow:0 0 0 1px var(--solid) inset}
.pb button[aria-pressed="true"] b{color:var(--ink)}.pb button[aria-pressed="true"] small,.pb button[aria-pressed="true"] i{color:var(--mute)}
.list button[aria-pressed="true"]{background:var(--accentSoft);box-shadow:inset 3px 0 0 var(--solid)}
section.band{padding:48px 0}section.band h2{margin-bottom:10px}
.phero{padding:40px 0 32px}
.wrap{padding:0 24px}
.cfg{grid-template-columns:minmax(228px,268px) minmax(0,1fr) minmax(228px,268px);gap:12px;margin:12px 0}
.side{padding:12px;gap:10px;max-height:780px;overflow-x:hidden;overflow-y:auto;min-width:0}
#endA,#endB{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%}
.ptabs{margin:0}
.shead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;min-width:0}
.shead h3,.side h3{font-size:17px;letter-spacing:-.015em;margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;min-width:0}
.shead small,.side h3 small{font:500 11px/1.3 "Geist",system-ui,sans-serif;color:var(--mute);letter-spacing:0;text-align:right;flex:1 1 auto;min-width:0}
.endtags{display:flex;flex-wrap:wrap;gap:6px}
.endtag{display:inline-flex;align-items:center;gap:8px;margin:0;padding:3px 3px 3px 10px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--ink);font:600 14px/1.1 "Geist",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;flex:none;-webkit-appearance:none;appearance:none}
.endtag:hover{border-color:var(--pick)}
.endtag[aria-pressed="true"]{background:var(--accentSoft);border-color:var(--pick)}
.enddot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#5B6570;color:#fff;font:700 11px/1 "Geist",system-ui,sans-serif;flex:none}
.endtag[aria-pressed="true"] .enddot,.olist .enddot.on{background:var(--pick)}
.olist button .orow{display:flex;align-items:center;gap:8px}
.olist .enddot{width:20px;height:20px;font-size:10px}
.side h4{font-size:10.5px;letter-spacing:.07em;margin:0 0 5px;color:var(--mute)}
.sblock{display:flex;flex-direction:column;gap:5px}
.szcard{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:var(--wash);border:1px solid var(--washLine)}
.szcard>h4,.side .thcat>h4{margin:0 0 2px;color:var(--washInk)}
.szcard .list{max-height:360px;background:color-mix(in srgb,var(--panel) 72%,transparent);border-color:var(--washLine)}
.szcard .list button .sz small,.szcard .list button .od{color:var(--washMute)}
.szcard .list button[aria-pressed="true"]{background:var(--pick);color:#fff;box-shadow:inset 3px 0 0 var(--pickGlow)}
.szcard .list button[aria-pressed="true"] .sz small,.szcard .list button[aria-pressed="true"] .od,.szcard .list button[aria-pressed="true"] small{color:rgba(255,255,255,.82)}
.szcard .xlrow{color:var(--washInk)}
.tycard{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.tycard h4,.tycard .tyhd{color:var(--mute)}
.tycard .chips button{border-color:var(--line);color:var(--ink);background:#fff}
.tycard .chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.tycard .info{color:var(--mute);border-color:var(--line)}
.grow2{gap:8px;padding:8px 0 0;border:0;background:none;border-top:1px solid var(--line);color:var(--ink);border-radius:0}.gcol,.ucol{min-width:0}
.grow2 h4{color:var(--mute)}
.grow2 .seg{border-color:var(--line);background:#F4F5F7}
.grow2 .seg button{color:var(--ink)}
.grow2 .seg button[aria-pressed="true"]{background:#0B0D10;border-color:#0B0D10;color:#fff;box-shadow:none}
.grow2 .seg button:disabled{opacity:.4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tycard{background:#1A1F26}
:root:not([data-theme="light"]) .tycard .chips button{background:#14181E;border-color:var(--line)}
:root:not([data-theme="light"]) .grow2 .seg{background:#14181E;border-color:var(--line)}}
:root[data-theme="dark"] .tycard{background:#1A1F26}
:root[data-theme="dark"] .tycard .chips button{background:#14181E;border-color:var(--line)}
:root[data-theme="dark"] .grow2 .seg{background:#14181E;border-color:var(--line)}
/* End panel: two tones on the white column. Blue for what the end is (Type), cool slate for its numbers (Size, Dimensions, Thread); fields stay white. */
.side .tycard,.side .szcard,.side .odcard,.side .thcat{padding:12px;gap:10px;border-radius:10px;background:var(--endcard,#F1F4F8);border:1px solid var(--endline,#DDE3EB);color:var(--ink)}
.side .tycard{background:var(--stone,linear-gradient(180deg,#EAEFF6,#E0E7F1));border-color:var(--stoneLine,#CFD8E5);box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 12px -10px rgba(16,24,40,.16)}
.side .thcat{margin-top:8px}
.side .tycard h4,.side .szcard h4,.side .odcard>h4,.side .thcat>h4{margin:0;color:var(--endhd,#55657C)}
.side .tycard h4,.side .tycard .tyhd{color:var(--endhd,#55657C)}

.side .shead{flex-wrap:wrap;gap:6px 6px}
.tyrow{display:flex;align-items:stretch;gap:6px;min-width:0}.tyrow .tysel{flex:1 1 auto;min-width:0;width:auto!important}.tyrow .seg{flex:none;background:var(--panel);border-color:var(--line2)}.side .tyrow .seg button{padding:0 7px!important;font-size:12.5px;color:var(--ink)}.side .tyrow .seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel);box-shadow:none}.tyrow .seg button:disabled{opacity:.4}
.endgu{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}
.endgu .seg{border-color:var(--line);background:var(--panel)}.side .endgu .seg button{padding:6px 6px!important;font-size:12.5px;color:var(--ink)}
.endgu .seg button[aria-pressed="true"]{background:var(--navy0);border-color:var(--navy0);color:#fff;box-shadow:none}.endgu .seg button:disabled{opacity:.4}
.side .szck{color:var(--endhd,#55657C)}.side .szcard .xlrow{color:var(--ink)}
.side .odid input,.side .xlrow input,.side .thfields input{height:32px;box-sizing:border-box;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink)}
.side .tycard .tysel,.side .szcard .szsel{height:36px;box-sizing:border-box;padding-top:0;padding-bottom:0}
.side .thcat .chips button:not([aria-pressed="true"]){background:var(--panel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--endcard:#171C22;--endline:#2C343D;--endhd:#93A1B5;--stone:linear-gradient(180deg,#283039,#222A33);--stoneLine:#37424F}}
:root[data-theme="dark"]{--endcard:#171C22;--endline:#2C343D;--endhd:#93A1B5;--stone:linear-gradient(180deg,#283039,#222A33);--stoneLine:#37424F}
.side .seg button{padding:6px 8px;font-size:12.5px}
.chips{gap:4px}.chips button{padding:3px 7px;font-size:12px}
.tgrps{display:flex;flex-wrap:wrap;gap:3px}
.tyhd{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.tyhd select{min-width:0;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.sblock:has(.chips){gap:3px}
.sblock:has(.tyhd){gap:6px}
.list{max-height:196px}.list button{padding:6px 8px;align-items:center}
.list button .sz{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
.list button .sz b{font-size:12.5px;font-weight:600}.list button .sz small{font-size:11px;color:var(--mute)}
.list button .od{font-family:var(--mono);font-size:11.5px;color:var(--mute);flex:none}
.side select{padding:6px 8px;font-size:13px}
.side .tyhd select{width:auto;max-width:7.6em;height:22px;padding:0 4px;font-size:11px;line-height:20px;border-radius:4px}
.smeta{display:flex;flex-direction:column;gap:6px;padding-top:2px;min-width:0}
.smeta .call{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.dims{table-layout:fixed}.dims td{padding:2px 0;font-size:12px;overflow-wrap:anywhere;word-break:break-word}.dims td:last-child{width:42%}
.thead{min-width:0}.thead b{min-width:0;overflow-wrap:anywhere}
.rate{padding:7px 8px;font-size:12px;line-height:1.4}.rate b{font-size:13px;font-family:var(--mono);font-weight:500}
.rate .rl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:1px}
.center{min-height:520px}
.bhead{padding:10px 0 0}.btitle h1{font-size:24px;margin:0}
.mbar{margin-top:8px}
.idpack{display:flex;flex-direction:column;gap:18px;margin-top:16px}
.idhow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.idhow li{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 13px;box-shadow:var(--sh)}
.idhow b{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500;line-height:1.2;margin-top:1px}
.idhow strong{display:block;font-size:13.5px;font-weight:600;margin:0 0 2px}
.idhow p{margin:0;font-size:13px;line-height:1.45;color:var(--mute)}
.idgrid{gap:16px}.idform{padding:14px;gap:8px}
h3.sub,.shead.sub{font-size:16px;margin-top:2px;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:1100px){.cfg{grid-template-columns:minmax(210px,250px) minmax(0,1fr) minmax(210px,250px);gap:10px}.idhow{grid-template-columns:1fr}.wrap{padding:0 18px}}
@media (max-width:860px){.cfg{grid-template-columns:1fr 1fr}}
.ostack{display:flex;flex-direction:column;gap:12px;margin:14px 0 32px}
.guestquote{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:420px}
.guestquote h2{margin:0}
.guestquote .spec{margin:0}
.guestquote .btn{margin-top:6px}
.asmright .guestquote{max-width:none;padding:16px}
/* Signed out, the assembly pricing card is one compact row: the pitch on the left, Sign in on the right. */
.asmright .guestquote{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:10px 12px}.asmright .guestquote h2{font-size:15px;line-height:1.2;letter-spacing:-.01em}.asmright .guestquote .spec{font-size:12px;grid-column:1}.asmright .guestquote .btn{grid-column:2;grid-row:1/3;margin:0;padding:7px 12px;font-size:13px}
body.signed .guestquote{display:none!important}
body.signed .util{display:none}
body.signed nav .ddm{left:auto;right:0}
body:not(.signed) .ostack>.order:not(.procard){display:none!important}
body:not(.signed) .asmq.csum,body:not(.signed) #asmNote,body:not(.signed) #asmCart,body:not(.signed) #asmBuy,body:not(.signed) .aiq span[id^="asmP_"]{display:none!important}
.procard .ordl{padding:4px 18px}.procard .osec{border-bottom:0}
.procard:not(.on){grid-template-columns:1fr}.procard:not(.on) .price{display:none}
.qcustom{margin-top:8px;max-width:220px}
#qtyOpts{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#qtyOpts[open] summary small{color:var(--accent)}
.qcustom .fw input{min-width:0;width:100%}
.pb{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.hsteps>div>b{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) select,:root:not([data-theme="light"]) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),:root:not([data-theme="light"]) textarea{color:#E9EDF1!important;background:#2A2F36!important;border-color:#414A54;caret-color:#E9EDF1;color-scheme:dark}}
:root[data-theme="dark"] select,:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),:root[data-theme="dark"] textarea{color:#E9EDF1!important;background:#2A2F36!important;border-color:#414A54;caret-color:#E9EDF1;color-scheme:dark}
@media (max-width:1100px){.pb{grid-template-columns:repeat(3,minmax(0,1fr))!important}.procard.on{grid-template-columns:1fr}.procard.on .price{border-left:0!important;border-top:1px solid var(--line)}}
@media (max-width:640px){
 section.band{padding:36px 0}.phero{padding:28px 0 22px}.wrap{padding:0 14px}
 .side{padding:12px;gap:10px}.cfg{gap:10px}
 .pb{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.styles{gap:6px;padding:6px 8px}.styles button{padding:4px 10px;font-size:12px;line-height:1.3}
.stygrp>span{font-size:9.5px;padding-left:6px}
.colpos{display:flex;flex-direction:row;align-items:center;gap:8px}.colpos .lbl{font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:0;color:inherit}
.views{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.vw{margin:0;min-width:0}.vwi{position:relative;aspect-ratio:240/170;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.vwi img,.vwi canvas,.vwi svg{position:absolute;inset:0;width:100%;height:100%}.vwi svg{color:var(--mute);font:500 12px var(--mono)}.vwi path{stroke:currentColor;stroke-width:1;fill:none}.vwi text{fill:var(--ink)}
.vw figcaption{margin-top:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);text-align:center}
.order:not(.procard){grid-template-columns:268px minmax(0,1fr) 360px}
.ordpart{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.ordpart img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.ordpart .opspec{margin:0;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--ink)}
.ordpart .markex{display:flex;flex-direction:column;gap:6px;margin-top:4px;align-items:flex-start}.ordpart .markex[hidden]{display:none}
.ordpart #markPn{font-size:12px;font-weight:500;color:var(--ink)}
#spec{display:none}
@media (max-width:1100px){.order:not(.procard){grid-template-columns:1fr}.ordpart{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:14px;border-right:0;border-bottom:1px solid var(--line)}.ordpart .opspec{grid-column:2}.ordpart .markex{grid-column:1/-1}}
@media (max-width:640px){.views{grid-template-columns:1fr 1fr}}
.styles{background:var(--hexbar);border-bottom-color:var(--hexbar)}.styles button{background:transparent;border-color:rgba(255,255,255,.18);color:var(--navyInk)}.styles button:hover{border-color:rgba(255,255,255,.4)}
.styles button[aria-pressed="true"]{background:var(--pick);border-color:var(--pick);color:#fff}
.asmbarin.styles{background:none;border-bottom:0;color:var(--navyMute)}
:root[data-theme="dark"] .center{background:linear-gradient(180deg,#252C35 0%,#1A2027 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .center{background:linear-gradient(180deg,#252C35 0%,#1A2027 100%)}}
/* ===== Home polish: one layout system ===== */
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lhero{--hvis:max(360px,min(560px,calc(calc(100vh / var(--z,1)) - 220px)))}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--hvis));gap:48px;align-items:center;min-height:0;padding-top:48px;padding-bottom:48px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy{min-width:0}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy h1{font-size:clamp(34px,4.1vw,52px);line-height:1.04;max-width:none;margin:0 0 16px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .lead{font-size:clamp(15px,1.3vw,17px);max-width:none;margin:0}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas{margin-top:22px;flex-wrap:wrap}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas .btn{flex:none}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;grid-template-columns:none}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lvis{width:100%;max-width:none;aspect-ratio:1;max-height:none;justify-self:stretch;align-self:center}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap{flex-direction:row;align-items:center;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:10px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap .btn{width:auto;flex:none;white-space:nowrap}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hdots{top:10px;right:10px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .marq .mgrid{display:block;padding-top:16px;padding-bottom:16px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcol{min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 16px;align-items:start}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whyused{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlab{margin:0;font-family:"Geist",system-ui,sans-serif;font-size:12px;font-weight:600;line-height:21px;letter-spacing:.08em;text-transform:uppercase;color:var(--accentText);white-space:nowrap}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlist{display:flex;flex-wrap:wrap;gap:4px 0;align-items:center}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist a{display:flex;flex-direction:column;gap:2px;min-width:0;text-decoration:none;color:var(--ink)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist b{font-family:var(--head);font-size:15px;font-weight:600;line-height:20px;letter-spacing:-.01em;transition:color .15s}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist small{font-size:12.5px;line-height:1.4;color:var(--mute)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist a:hover b{color:var(--accent)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlist i{font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:22px;color:var(--ink);white-space:nowrap}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlist i:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--line2);margin:0 12px;vertical-align:middle}:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band{padding:clamp(44px,5.5vw,72px) 0}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band .eyebrow{margin:0 0 8px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band h2{font-size:clamp(26px,2.8vw,34px);line-height:1.1;letter-spacing:-.015em;max-width:none;margin:0;text-wrap:pretty}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band .lead{font-size:15px;line-height:1.55;max-width:52ch;margin:12px 0 0}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band>.wrap>h2{margin:0 0 28px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .howhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 28px;flex-wrap:wrap;margin:0 0 28px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .howhead .btn{flex:none}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whygrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 48px;align-items:start}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps.whysteps{grid-template-columns:1fr}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whysteps>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 18px;background:var(--panel)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whysteps .ic{grid-row:span 2;margin:0;background:var(--bg)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whysteps h3,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whysteps p{grid-column:2}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps>div{height:100%;padding:20px;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps .ic{width:36px;height:36px;border-radius:8px;margin:0 0 14px;background:var(--panel);border:1px solid var(--line)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps .ic svg{width:22px;height:22px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps h3{font-size:16px;margin:0 0 4px;letter-spacing:-.015em}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps p{font-size:13.5px;line-height:1.45}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard{border-radius:10px;background:var(--bg);box-shadow:none;transition:border-color .15s,box-shadow .15s}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard:hover{transform:none;border-color:var(--line2);box-shadow:var(--sh)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard h3{font-size:16px;margin:16px 18px 4px;letter-spacing:-.015em}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard p{margin:0 18px;font-size:13.5px;line-height:1.45}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard .more{margin:12px 18px 18px;font-size:13px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard .more::after{content:none}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard:hover .more{text-decoration:underline;text-underline-offset:3px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .inds2{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split .lead{margin:12px 0 22px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .protoart{width:100%;max-width:520px;justify-self:end}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig{gap:10px}:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig span{border-radius:10px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .protoart{border-radius:10px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q{padding:0}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q:first-of-type{border-top:1px solid var(--line)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:15px;font-weight:600}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q summary::-webkit-details-marker{display:none}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q summary::after{content:"+";flex:none;font-family:var(--mono);font-size:18px;font-weight:400;line-height:1;color:var(--mute)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q[open] summary::after{content:"−"}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q summary:hover::after{color:var(--accent)}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) details.q p{margin:0 0 16px;font-size:14px;line-height:1.55;max-width:68ch}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .center-cta{text-align:left;margin-top:24px}
:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .cta{padding:clamp(48px,7vw,80px) 0}
@media (max-width:1100px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lgrid{grid-template-columns:minmax(0,1fr) minmax(0,min(var(--hvis),420px));gap:28px;padding-top:36px;padding-bottom:36px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lvis{max-width:none}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whygrid{gap:20px 28px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:32px}
}
@media (max-width:860px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;padding-top:28px;padding-bottom:28px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy h1{font-size:clamp(28px,4.4vw,36px)}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .lead{font-size:14.5px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas .btn.lg{padding:11px 16px;font-size:14px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap{flex-direction:column;align-items:stretch;gap:6px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap .btn{width:100%}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps>div{padding:18px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whysteps>div{padding:14px 16px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .cards,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .inds2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split .lead{font-size:14.5px;margin:10px 0 18px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig{gap:8px}:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig span{padding:10px;font-size:12px}
}
@media (max-width:720px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps{grid-template-columns:1fr}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps>div{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;padding:16px 18px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps .ic{grid-row:span 2;margin:0}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps h3,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hsteps p{grid-column:2}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .howhead{margin:0 0 22px}
}
@media (max-width:560px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band{padding:40px 0}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .band>.wrap>h2{margin:0 0 22px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas{width:100%}:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas .btn{flex:1;text-align:center}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .split{grid-template-columns:1fr;gap:22px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .swbig,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .protoart{max-width:360px;justify-self:start}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whyused{margin-top:24px;padding-top:20px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .cta{padding:44px 0}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcol{grid-template-columns:1fr;gap:8px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .whygrid{grid-template-columns:1fr;gap:20px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .howhead{flex-direction:column;align-items:flex-start}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lgrid{grid-template-columns:1fr}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lvis{max-width:440px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy h1{font-size:32px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap{flex-direction:row;align-items:center;gap:8px}:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .hcap .btn{width:auto;padding:6px 10px}
}
@media (max-width:480px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .cards,:is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .inds2{grid-template-columns:1fr;gap:10px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard .mimg{grid-row:1/-1;aspect-ratio:auto;height:100%;min-height:112px;border-bottom:0;border-right:1px solid var(--line)}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard h3{margin:14px 14px 2px 0}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard p{margin:0 14px 0 0;font-size:13px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mcard .more{margin:8px 14px 14px 0;align-self:end}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy h1{font-size:30px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlist i{font-size:12px}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .mlist i:not(:last-child)::after{margin:0 9px}
}
@media (max-width:360px){
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .ilist{grid-template-columns:1fr}
 :is(.page[data-page="home"],.page[data-page="landing"],.page[data-lp]) .lcopy .ctas{flex-direction:column}
}
/* ===== Account, legal and not found pages ===== */
.acctbtn{white-space:nowrap}
.acctbtn[hidden],.avm[hidden],[data-guest][hidden]{display:none!important}
/* Signed in: avatar with the account menu */
.avm{position:relative;flex:none}
.avbtn{display:block;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.avbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.02em;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.lg{width:40px;height:40px;font-size:15px}
.avbtn[aria-expanded="true"] .av{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.avmenu{display:none;position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(16,24,40,.3);padding:6px;z-index:40}
.avmenu.open{display:block}
.avhead{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.avhead div{min-width:0;display:flex;flex-direction:column}
.avhead b{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avhead small{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avmenu a,.avmenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;text-decoration:none;text-align:left;cursor:pointer}
.avmenu a:hover,.avmenu button:hover,.avmenu a:focus-visible,.avmenu button:focus-visible{background:var(--bg);outline:none}
.avmenu a[aria-current="true"]{background:var(--accentSoft);color:var(--accent)}
.avmenu svg{width:18px;height:18px;flex:none;color:var(--mute)}
.avmenu a[aria-current="true"] svg{color:var(--accent)}
.avmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
@media (max-width:560px){.avmenu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);left:12px;right:12px;width:auto}}
/* Account pages: nav in the first column, the view in the second */
.acshell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px 36px;align-items:start}
.acside{position:sticky;top:calc(76px + env(safe-area-inset-top,0px));min-width:0}
.acnav{display:flex;flex-direction:column;gap:2px;margin:0;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.acnav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--mute);text-decoration:none;font-weight:500;font-size:14px;line-height:1.25}
.acnav a:hover{color:var(--ink);background:var(--bg)}
.acnav a[aria-current="page"]{color:var(--accent);background:var(--accentSoft);font-weight:600}
.acnav svg{width:18px;height:18px;flex:none}
.acnav hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.acmain{min-width:0}
.acmain .acgate{margin:0}
.acmain form.acform,.acnarrow{max-width:720px}
@media (max-width:900px){
 .acshell{grid-template-columns:1fr;gap:16px}
 .acside{position:static}
 .acnav{flex-direction:row;overflow-x:auto}
 .acnav a{white-space:nowrap;padding:8px 12px}
 .acnav hr{width:1px;border:0;border-left:1px solid var(--line);margin:6px 2px;align-self:stretch}
}
.acbody .acard h2{font-size:20px;line-height:1.25;margin:0 0 4px;letter-spacing:-.01em}
.acinv td:first-child,.acinv .apill{white-space:nowrap}
.acsteps{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:6px 0 2px}
.acsteps i{height:4px;border-radius:2px;background:var(--line)}
.acsteps i.on{background:var(--accent)}
.acsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 24px}
.acsum>div{background:var(--panel);padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.acsum b{font-family:var(--head);font-size:22px;letter-spacing:-.01em}
.acsum span{font-size:13px;color:var(--mute)}
.acinv{width:100%;border-collapse:collapse;font-size:14px}
.acinv th{text-align:left;font-size:12px;font-weight:600;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.acinv td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.acinv tr:last-child td{border-bottom:0}
.acinv .num{text-align:right;white-space:nowrap}
.acinv .acts{display:flex;gap:14px;flex-wrap:wrap}
.apill.ok{background:rgba(22,163,74,.12);color:var(--ok)}.apill.bad{background:rgba(220,38,38,.1);color:var(--bad)}.apill.mute{background:var(--bg);color:var(--mute)}
@media (max-width:720px){.acsum{grid-template-columns:1fr}.acinv thead{display:none}.acinv tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}.acinv td{border:0;padding:0}.acinv tr:last-child{border-bottom:0}}
.acgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.acgrid.in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.acstack{display:grid;gap:24px;min-width:0}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;min-width:0}
/* Upload a STEP file */
.navup{padding:7px 12px;font-size:13px;white-space:nowrap}.navup[hidden]{display:none!important}
/* Remembered sign-in, before the script runs: no guest links or Sign in button flash on load. */
html.presigned body:not(.signed) nav [data-guest],html.presigned body:not(.signed) #acctBtn{visibility:hidden}
.upwrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.upform{display:grid;grid-template-columns:1fr 1fr;gap:12px}.upform .full{grid-column:1/-1}
.upform label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mute)}
.upform input,.upform select,.upform textarea{padding:8px 10px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
.updrop{grid-column:1/-1;display:grid;place-items:center;gap:6px;padding:28px 16px;border:1.5px dashed var(--line2);border-radius:10px;text-align:center;cursor:pointer;color:var(--mute);background:var(--bg)}
.updrop.over,.updrop:hover{border-color:var(--accent);color:var(--ink)}.updrop b{color:var(--ink);font-size:15px}.updrop input{display:none}
.uplist{display:grid;gap:8px}.uplist>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.uplist b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uplist .st{font-size:12px;color:var(--mute);text-align:right}
@media (max-width:900px){.upwrap{grid-template-columns:1fr}.upform{grid-template-columns:1fr}}
.acard h2{font-size:20px;margin:0 0 4px}
.acard .spec{margin:0 0 14px}
.acform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.acform label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mute);min-width:0}
.acform label.full,.acform .full{grid-column:1/-1}
.acform input,.acform select{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px;width:100%;min-width:0}
.acform button{justify-self:start}
.acmsg{font-size:13px;color:var(--mute);margin:0;min-height:1.4em}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;justify-self:stretch!important;padding:11px 16px;font-weight:600}
.gbtn svg{width:18px;height:18px;flex:none}
.acor{display:flex;align-items:center;gap:12px;margin:2px 0;font-size:12px;color:var(--mute)}
.acor::before,.acor::after{content:"";flex:1;height:1px;background:var(--line)}
.acmsg.ok{color:var(--ok)}.acmsg.bad{color:var(--bad)}
.acperks{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.acperks li{background:var(--panel);padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.acperks b{font-family:var(--head);font-size:15px;font-weight:600}
.acperks span{font-size:13.5px;color:var(--mute);line-height:1.45}
.acrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.aclist{display:grid}
.aclist>div{border-top:1px solid var(--line);padding:12px 0;display:grid;gap:4px;font-size:14px}
.aclist>div:first-child{border-top:0;padding-top:0}
.aclist ul{margin:2px 0 0;padding:0 0 0 18px;color:var(--mute);font-size:13px}
.aclist .acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px}
#roIn{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font-family:ui-monospace,monospace;font-size:12px;resize:vertical}
.apill{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accentSoft);color:var(--accent)}
.actop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;flex-wrap:wrap}
section.band>.wrap.legal>*{max-width:72ch}
section.band .legal h2{font-size:20px;line-height:1.25;margin:28px 0 8px}
section.band .legal h2:first-child{margin-top:0}
section.band>.wrap.legal>p,section.band .legal li{font-size:15px;line-height:1.6;color:var(--ink)}
section.band .legal ul{padding-left:20px;margin:0}
section.band .legal li+li{margin-top:6px}
section.band>.wrap.legal>p.fnote{margin-top:24px;font-size:13px;color:var(--mute)}
@media (max-width:860px){.acgrid,.acgrid.in{grid-template-columns:1fr}}
@media (max-width:480px){.acform{grid-template-columns:1fr}.acard{padding:16px}}
.page:is([data-page="sign-in"],[data-page="account"],[data-page="saved-parts"],[data-page="reorder-parts"],[data-page="orders"],[data-page="billing"],[data-page="oauth/consent"]) .acband{border-top:0;padding:40px 0 72px}
.page:is([data-page="sign-in"],[data-page="account"],[data-page="saved-parts"],[data-page="reorder-parts"],[data-page="orders"],[data-page="billing"],[data-page="oauth/consent"]) .acband:has(.acgate){background:radial-gradient(720px 320px at 50% 0%,var(--accentSoft),transparent 62%)}
.page:is([data-page="sign-in"],[data-page="account"],[data-page="saved-parts"],[data-page="reorder-parts"],[data-page="orders"],[data-page="billing"],[data-page="oauth/consent"]) .acband:has(.acgate):not(:has(.acshell)){min-height:calc(calc(100dvh / var(--z,1)) - 148px);display:flex;align-items:center}
.page:is([data-page="sign-in"],[data-page="account"],[data-page="saved-parts"],[data-page="reorder-parts"],[data-page="orders"],[data-page="billing"],[data-page="oauth/consent"]) .acband:has(.acgate)>.wrap{width:100%}
.acgate{width:min(440px,100%);margin:0 auto 28px}
.acgatecard{display:flex;flex-direction:column;gap:16px;padding:28px 28px 24px}
.acgatecard h1{font-size:clamp(26px,3.2vw,34px);margin:0;letter-spacing:-.02em;line-height:1.15}
.acgatecard>.spec{margin:0}
.acgate .acform{grid-template-columns:1fr;margin:4px 0 0}
.acgate .acform .btn{width:100%;justify-self:stretch}
.acgate .acperks{border:0;background:transparent;gap:12px;margin:4px 0 0;padding:16px 0 0;border-top:1px solid var(--line);border-radius:0}
.acgate .acperks li{background:transparent;padding:0;gap:1px}
.acgate .acperks b{font-size:14px}
.acgate .acperks span{font-size:13px}
/* ===== Motorsport landing ===== */
.page[data-lp] .lhero{position:relative;isolation:isolate}
.page[data-lp] .lhero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(900px 420px at 88% 18%,var(--lpa,rgba(179,38,30,.10)),transparent 58%),
 radial-gradient(700px 380px at 12% 80%,rgba(0,84,252,.08),transparent 55%),
 linear-gradient(180deg,transparent 70%,rgba(16,20,24,.03));
 z-index:0;animation:motoWash 12s ease-in-out infinite alternate}
.page[data-lp] .lhero .wrap{position:relative;z-index:1}
.page[data-lp] .anos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.page[data-lp] .anos span{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12.5px;font-weight:500;color:var(--mute)}
.page[data-lp] .anos i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.page[data-lp] .anos .anr{background:#B3261E}.page[data-lp] .anos .anb{background:#1E4F9C}.page[data-lp] .anos .ank{background:#2B2E33}
.page[data-lp] .fuelgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px 40px;align-items:start}
.page[data-lp] .motogrid{gap:10px;margin:0 0 8px}
.page[data-lp] .motogrid .btn{font-size:13px;padding:8px 12px;text-align:left}
.page[data-lp] .apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.page[data-lp] .apps a{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:border-color .15s,transform .15s}
.page[data-lp] .apps a:hover{border-color:var(--accent);transform:translateY(-2px)}
.page[data-lp] .apps b{font-family:var(--head);font-size:16px;letter-spacing:-.015em}
.page[data-lp] .apps small{color:var(--mute);font-size:13px;line-height:1.45}
.page[data-lp] .apps .tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.page[data-lp] .racebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:22px}
.page[data-lp] .racebar div{background:var(--panel);padding:16px 18px}
.page[data-lp] .racebar b{display:block;font-family:var(--head);font-size:22px;line-height:1;margin:0 0 4px}
.page[data-lp] .racebar span{font-size:13px;color:var(--mute)}

.page[data-lp] .lhero,.page[data-page="landing"] .lhero{--hvis:min(380px,40vw)}
.page[data-lp] .shotstrip{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px;margin-top:8px}
.page[data-lp] .shot{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--view);min-height:0;max-height:200px;box-shadow:var(--sh)}
.page[data-lp] .shot img{width:100%;height:200px;max-height:200px;object-fit:cover;display:block;aspect-ratio:auto;transition:transform .45s ease}
.page[data-lp] .shot:first-child img{aspect-ratio:auto;height:200px}
.page[data-lp] .shot:hover img{transform:scale(1.03)}
.page[data-lp] .shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(16,20,24,.78));color:#fff;font-size:12.5px;font-weight:500;line-height:1.35}
.page[data-lp] .shot figcaption b{display:block;font-family:var(--head);font-size:15px;letter-spacing:-.01em;margin-bottom:2px}
.page[data-lp] .partfeat{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px 40px;align-items:center}
.page[data-lp] .partfeat:not(:has(figure)){grid-template-columns:1fr}
.page[data-lp] .partshot{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--view);box-shadow:var(--sh)}
.page[data-lp] .partshot img{width:100%;height:100%;max-height:240px;object-fit:cover;display:block;aspect-ratio:16/9}
.page[data-lp] .apps a{padding:0;overflow:hidden}
.page[data-lp] .apps a:not(:has(.aimg)){padding:14px 16px}
.page[data-lp] .apps .aimg{aspect-ratio:16/10;background:var(--view);border-bottom:1px solid var(--line);overflow:hidden}
.page[data-lp] .apps .aimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.page[data-lp] .apps a:hover .aimg img{transform:scale(1.04)}
.page[data-lp] .apps .abody{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.page[data-lp] .whysplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px 40px;align-items:center;margin-top:28px}
.page[data-lp] .whysplit:not(:has(figure)){grid-template-columns:1fr}
.page[data-lp] .whysplit .partshot{margin:0}
.page[data-lp] .cred{margin:10px 0 0;font-size:11.5px;color:var(--mute)}
.page[data-lp] .cred a{color:inherit}
.page[data-lp] .mcol{grid-template-columns:max-content minmax(0,1fr)}
.page[data-lp] .shot,.page[data-lp] .partshot{margin:0}
@media (max-width:640px){.page[data-lp] .mcol{grid-template-columns:1fr}}
/* Example part cards: the image is rendered from the part's own 3D model when the page is shown */
.page[data-lp] .lpparts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.page[data-lp] .lpcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:border-color .15s,transform .15s}
.page[data-lp] .lpcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.page[data-lp] .lpimg{aspect-ratio:7/5;background:var(--view);border-bottom:1px solid var(--line)}
.page[data-lp] .lpimg img{width:100%;height:100%;object-fit:contain;display:block}
.page[data-lp] .lpimg img:not([src]){visibility:hidden}
.page[data-lp] .lpbody{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;flex:1}
.page[data-lp] .lpbody .tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.page[data-lp] .lpbody b{font-family:var(--head);font-size:16px;letter-spacing:-.015em;line-height:1.25}
.page[data-lp] .lpbody small{color:var(--mute);font-size:13px;line-height:1.45}
.page[data-lp] .lpbody .more{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--accent)}
.page[data-lp] .t .dim{color:var(--mute)}
.page[data-lp] .band .lead+.tscroll{margin-top:22px}
@media (max-width:900px){.page[data-lp] .lpparts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.page[data-lp] .lpparts{grid-template-columns:1fr}}
/* Industries: each industry gets a photo beside its intro, alternating sides */
.indrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 44px;align-items:center;margin:0 0 24px}
.indrow:not(:has(.indpic)){grid-template-columns:1fr;max-width:72ch}
/* A section without a photo puts its detail cards in the right-hand column, stacked. */
.indrow:has(>.indside){max-width:none}@media(min-width:901px){.indrow:has(>.indside){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.why.indside{grid-template-columns:1fr;gap:12px}.why.indside>div{padding:16px 18px}
/* Industries: each industry is one compact row of three columns: photo, introduction, and the key facts. */
.page[data-page="industries"] section[id^="ind-"]{padding:36px 0}
.ind3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1fr);gap:20px 36px;align-items:center}
.ind3pic{margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg);box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 28px -22px rgba(16,24,40,.3)}
.ind3pic img{width:100%;height:100%;object-fit:cover;display:block}
.ind3copy{min-width:0}.ind3copy h2{font-size:clamp(22px,2.3vw,28px);margin:2px 0 8px}
.ind3copy .lead{font-size:15px;margin:0}.ind3note{font-size:13.5px;color:var(--mute);margin:10px 0 0}.ind3note a{color:var(--accent)}.ind3copy .ctas{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ind3facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1px solid var(--line);padding-left:24px;min-width:0}
.ind3facts li{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--mute)}
.ind3facts li:first-child{border-top:0;padding-top:0}.ind3facts li:last-child{padding-bottom:0}
.ind3facts b{color:var(--ink);font-weight:600;font-size:13px}
@media(max-width:980px){.ind3{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.ind3facts{grid-column:1/-1;border-left:0;padding-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
 .ind3facts li:nth-child(2){border-top:0;padding-top:0}}
@media(max-width:640px){.ind3{grid-template-columns:1fr;gap:16px}.ind3pic{aspect-ratio:16/9}.ind3facts{grid-template-columns:1fr}.ind3facts li:nth-child(2){border-top:1px solid var(--line);padding-top:9px}}
/* Industries: the detail cards stay compact and three across until phone width. */
.page[data-page="industries"] .why.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.page[data-page="industries"] .why>div{padding:14px 16px;border-radius:10px}
.page[data-page="industries"] .why h3{font-size:15px;margin:0 0 4px}
.page[data-page="industries"] .why p{font-size:13.5px;line-height:1.5}
@media(max-width:700px){.page[data-page="industries"] .why.three{grid-template-columns:1fr}}
.indrow .lead{margin-bottom:0}
.indpic{margin:0;width:min(100%,440px);aspect-ratio:4/3;border-radius:14px;background:var(--view);border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(16,24,40,.16);overflow:hidden;justify-self:end}
.indpic img{width:100%;height:100%;object-fit:cover;display:block}
.band.alt .indrow .indpic{order:0;justify-self:end}
.page[data-page="industries"] .pvis{max-width:440px;max-height:280px;justify-self:end}
@media (max-width:900px){.indrow{grid-template-columns:1fr}.band.alt .indrow .indpic{order:0}.indpic{aspect-ratio:16/9}}
@media (max-width:900px){.page[data-lp] .shotstrip{grid-template-columns:1fr 1fr}.page[data-lp] .shot:first-child{grid-column:1/-1}.page[data-lp] .partfeat,.page[data-lp] .whysplit{grid-template-columns:1fr}}
@media (max-width:640px){.page[data-lp] .shotstrip{grid-template-columns:1fr}}
@keyframes motoWash{from{opacity:.85}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page[data-lp] .lhero::before{animation:none}}
@media (max-width:900px){.page[data-lp] .fuelgrid,.page[data-lp] .apps{grid-template-columns:1fr 1fr}.page[data-lp] .racebar{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.page[data-lp] .fuelgrid,.page[data-lp] .apps,.page[data-lp] .racebar{grid-template-columns:1fr}}


/* Build a part: End A and End B scroll on their own; the 3D view stays pinned. All three columns stop where the taller end
   column's cards end (--endsH, measured in script), and never grow past the window. */
@media (min-width:1101px){
 .page[data-page="build"] .cfg{align-items:start}
 .page[data-page="build"] .cfg>.side{
  position:sticky;top:72px;
  height:min(calc(calc(100dvh / var(--z,1)) - 96px),var(--endsH,calc(100dvh / var(--z,1))));max-height:calc(calc(100dvh / var(--z,1)) - 96px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;
 }
 .page[data-page="build"] .cfg>.center{position:sticky;top:72px;height:min(calc(calc(100dvh / var(--z,1)) - 96px),max(460px,var(--endsH,calc(100dvh / var(--z,1)))));min-height:460px}
}
.page[data-page="build"] .cfg>.side,.page[data-page="build"] .list,.asmlive .side{scrollbar-width:none}
.page[data-page="build"] .cfg>.side::-webkit-scrollbar,.page[data-page="build"] .list::-webkit-scrollbar,.asmlive .side::-webkit-scrollbar{display:none}
.page[data-page="build"] .szcard .list{-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}

/* Create an assembly: the same, so columns 1 and 3 scroll on their own beside the pinned 3D view, with no scroll bars.
   At the end of a column, the scroll carries on to the page (overscroll auto) so the footer is still reachable. */
@media (min-width:1101px){
 .asmlive{align-items:stretch}
 .asmlive>.asmleftcol,.asmlive>.asmright{position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);max-height:calc(calc(100dvh / var(--z,1)) - 96px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:none}
 .asmlive>.asmleftcol::-webkit-scrollbar,.asmlive>.asmright::-webkit-scrollbar{display:none}
 .asmlive>.asmleftcol>.asmleft{min-height:100%}
}
/* Create an assembly below desktop width: one column, 3D view first, then the fluid path (1-4), then the quote. */
@media (max-width:860px){
 .page[data-page="assembly"] .asmlive{grid-template-columns:minmax(0,1fr)!important}
 .page[data-page="assembly"] .asmlive>.asmcenter{order:1}
 .page[data-page="assembly"] .asmlive>.asmleftcol{order:2}
 .page[data-page="assembly"] .asmlive>.asmright{order:3}
}
/* Phones: a smaller logo, How it works and Industries stay in the bar, everything else (including the builders) sits under More. */
nav .ddm .mobonly{display:none}
/* The service pages sit in the nav beside How it works when the window has room: all three from 1200px, Custom Fittings and
   Assembly Service down to 940px. Whichever are not in the bar stay under More. */
@media (min-width:1200px){body:not(.signed) nav .ddm .svcdd{display:none}}
@media (min-width:940px){body:not(.signed) nav .ddm .svcdd:not([href="/kitting-service"]){display:none}}
@media (max-width:1199px){nav .links>a.svcnav[href="/kitting-service"]{display:none}}@media (max-width:939px){nav .links>a.svcnav{display:none}}
@media (min-width:1000px) and (max-width:1199px){body:not(.signed) nav .wrap{gap:14px}body:not(.signed) nav .links{gap:14px}body:not(.signed) nav .links>a,body:not(.signed) nav .ddbtn{font-size:13px}}
@media (min-width:940px) and (max-width:999px){body:not(.signed) nav .wrap{gap:10px}body:not(.signed) nav .links{gap:10px}body:not(.signed) nav .links>a,body:not(.signed) nav .ddbtn{font-size:12.5px}body:not(.signed) nav .lgimg{height:14px}}
@media (min-width:1200px) and (max-width:1279px){body:not(.signed) nav .wrap{gap:16px}body:not(.signed) nav .links{gap:16px}body:not(.signed) nav .links>a,body:not(.signed) nav .ddbtn{font-size:13px}}
/* Between phone and desktop the links must never wrap onto several lines: tighten them instead. */
nav .links>a,nav .ddbtn{white-space:nowrap}
/* The two tools are the nav's calls to action: buttons, set after More, where the reading links are plain text. */
@media (min-width:641px){body:not(.signed) nav .links .dd{order:1}nav .links>a.navcta{order:2}body:not(.signed) nav .links>a.navcta:not(.alt){margin-left:auto}
 nav .links>a.navcta{font-weight:700;color:var(--ink)}nav .links>a.navcta:hover{color:var(--accent)}
 nav .links>a.navcta[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--accent)}
 nav .acctbtn{padding:7px 12px;font-size:13.5px;line-height:1.2}}
@media (max-width:900px){nav .wrap{gap:10px}nav .links{gap:12px}nav .links>a,nav .ddbtn{font-size:13px}nav .logo{flex:none}}
@media (max-width:760px){nav .links{gap:9px}nav .links>a,nav .ddbtn{font-size:12.5px}nav .lgimg{height:13px;width:auto}nav .acctbtn{padding:6px 10px;font-size:13px}}
@media (max-width:640px){
 nav .wrap{gap:5px;padding:0 10px!important}
 nav .logo{flex:none}nav .lgimg{height:9px;width:auto}
 nav .menubtn{display:none!important}
 nav .links,nav .links.open{display:flex!important;position:static;flex-direction:row;align-items:center;gap:8px;padding:0;margin:0 auto 0 4px;background:none;border:0;box-shadow:none;flex:1;min-width:0}
 nav .links>a{padding:0;border:0;font-size:12px;white-space:nowrap}
 nav .links>a.deskonly{display:none}
 nav .dd{width:auto;position:relative}
 nav .ddbtn{padding:0;width:auto;font-size:12px;white-space:nowrap}
 nav .ddm{position:absolute!important;top:calc(100% + 14px);right:-70px;left:auto;min-width:220px;max-height:calc(70vh / var(--z,1));overflow:auto;background:var(--panel);border:1px solid var(--line)!important;border-radius:10px;box-shadow:var(--sh)!important;padding:6px!important;z-index:40}
 nav .ddm a{display:block;padding:9px 10px;font-size:14px;border:0}
 nav .ddm .mobonly{display:block;font-weight:600}
 body.signed nav .links>a.navcta{display:inline;font-size:13px}body.signed nav .ddm .mobonly{display:none}
 nav .acctbtn{padding:5px 8px;font-size:12px}
 nav .avm{flex:none}nav .avm img,nav .avm button{width:28px;height:28px}
 nav .cartbtn{padding:2px;flex:none;width:32px;min-width:0}
}
@media (max-width:360px){nav .links{gap:7px}nav .links>a,nav .ddbtn{font-size:11.5px}nav .lgimg{height:8px}}

/* ===== Build a part, 2026 layout =====
   Three columns: the ends and body on the left (cards on a slate panel), the part in the middle, the summary and order on
   the right. One blue for actions and choices, a frosted slate for the body and the view controls, outlined fields with
   small labels set into the border. */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]){--b-pri:#0054FC;--b-priH:#0047D6;--b-ink:#101418;--b-mute:#6A737D;--b-sub:#45464F;--b-card:#fff;--b-cardA:rgba(255,255,255,.75);--b-field:#fff;--b-fline:#D3E1FF;--b-fhover:#8EC2FF;--b-hair:#E7EDF6;--b-outline:#D3E1FF;
 --b-pane:linear-gradient(180deg,#EEF1F5 0%,#E3E8EE 55%,#D6DDE6 100%);--b-stage:radial-gradient(75% 75% at 50% 42%,#F4F6F9 0%,#E2E7EE 55%,#CDD5DF 100%);
 --b-frost:#E3EEF3;--b-frostInk:#1F4553;--b-frostLine:#D3DEE6;--b-viewLine:#C3CFD9;--b-sel:#E7F1FF;--b-selInk:#0E2463;--b-a:#0054FC;--b-b:#4C97FF;--b-radio:#5B6570;--b-ok:#146C2E;
 --b-page:linear-gradient(180deg,#fff 0%,#FAFBFC 45%,#F1F4F7 100%);background:var(--b-page);font-family:"Geist",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]){--b-ink:#E9EDF1;--b-mute:#98A2AD;--b-sub:#B4BCC5;--b-card:#1D2228;--b-cardA:rgba(29,34,40,.82);--b-field:#15191E;--b-fline:#2E3B4F;--b-fhover:#4C6A96;--b-hair:#2A323C;--b-outline:#2C3A52;
 --b-pane:linear-gradient(180deg,#1A1F25 0%,#161A1F 100%);--b-stage:radial-gradient(75% 75% at 50% 42%,#262D36 0%,#1B2128 60%,#12161A 100%);--b-frost:#22323A;--b-frostInk:#BFD9E3;--b-frostLine:#33454F;--b-viewLine:#3A4855;--b-sel:#10233F;--b-selInk:#9CC3FF;--b-radio:#98A2AD;--b-ok:#6CC08F;--b-page:var(--bg)}}
:root[data-theme="dark"] :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]){--b-ink:#E9EDF1;--b-mute:#98A2AD;--b-sub:#B4BCC5;--b-card:#1D2228;--b-cardA:rgba(29,34,40,.82);--b-field:#15191E;--b-fline:#2E3B4F;--b-fhover:#4C6A96;--b-hair:#2A323C;--b-outline:#2C3A52;
 --b-pane:linear-gradient(180deg,#1A1F25 0%,#161A1F 100%);--b-stage:radial-gradient(75% 75% at 50% 42%,#262D36 0%,#1B2128 60%,#12161A 100%);--b-frost:#22323A;--b-frostInk:#BFD9E3;--b-frostLine:#33454F;--b-viewLine:#3A4855;--b-sel:#10233F;--b-selInk:#9CC3FF;--b-radio:#98A2AD;--b-ok:#6CC08F;--b-page:var(--bg)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"])>.wrap{max-width:1680px;padding:0 16px}
.page[data-page="build"] h4{text-transform:none;letter-spacing:0}

/* Outlined field with its label in the border */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf{position:relative;display:block;min-width:0;margin:0;color:var(--b-ink)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfbox>.szfr{box-sizing:border-box;display:block;width:100%;height:44px;margin:0;padding:0 12px;border:1px solid var(--b-fline);border-radius:6px;background-color:var(--b-field);color:var(--b-ink);font:400 14px/42px "Geist",system-ui,sans-serif;font-variant-numeric:tabular-nums;box-shadow:none;max-width:none;min-width:0}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select{-webkit-appearance:none;appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345464F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:16px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input{padding-right:36px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input[type=number]{-moz-appearance:textfield}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input::-webkit-outer-spin-button,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select:hover,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input:hover{border-color:var(--b-fhover)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select:focus,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input:focus{outline:0;border-color:var(--b-pri);box-shadow:inset 0 0 0 1px var(--b-pri)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>input:disabled,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select:disabled{opacity:.5;cursor:not-allowed}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>span{position:absolute;left:8px;top:-7px;padding:0 4px;font:500 11px/14px "Geist",system-ui,sans-serif;color:var(--b-mute);background:linear-gradient(to bottom,transparent 50%,var(--b-field) 50%);pointer-events:none;white-space:nowrap;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf:focus-within>span{color:var(--b-pri)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12.5px;color:var(--b-mute);pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4BCC5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tf>select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4BCC5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E")}

/* Pill segmented controls: chosen option in pale blue */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg{display:flex;height:44px;border:1px solid var(--b-fline);border-radius:999px;overflow:hidden;background:var(--b-field);box-shadow:none}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button{flex:1 1 auto;min-width:0;padding:0 12px!important;border:0;border-radius:0;background:transparent;color:var(--b-sub)!important;font:500 13.5px/1 "Geist",system-ui,sans-serif;cursor:pointer;white-space:nowrap}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button+button{border-left:1px solid var(--b-fline)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button[aria-pressed="true"]{box-shadow:none!important;border:0!important}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button+button,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button+button[aria-pressed]{border-left:1px solid var(--b-fline)!important}
.page[data-page="build"] .bodyic button+button{border-left:1px solid var(--b-frostLine)!important}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button[aria-pressed="true"]{background:var(--b-sel)!important;color:var(--b-selInk)!important;font-weight:600}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .seg button:disabled{opacity:.4;cursor:not-allowed}
.page[data-page="build"] .chips{display:flex;flex-wrap:wrap;gap:6px}
.page[data-page="build"] .frow .chips button{padding:6px 12px;border:1px solid var(--b-fline);border-radius:999px;background:var(--b-field);color:var(--b-sub);font-size:12.5px}
.page[data-page="build"] .frow .chips button[aria-pressed="true"]{background:var(--b-sel);border-color:var(--b-sel);color:var(--b-selInk);font-weight:600}

/* Top bar: part name, the settings for the whole part, units */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0;padding:12px 0 10px;background:none;border:0;box-shadow:none}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle{flex:0 1 300px;min-width:180px}
.page[data-page="build"] .bname,.page[data-page="build"] #partName{margin:0;font:500 21px/1.3 "Geist",system-ui,sans-serif;letter-spacing:-.015em;color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page[data-page="build"] #partName{display:none;width:100%;box-sizing:border-box;padding:2px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent}
.page[data-page="build"] #partName::placeholder{color:var(--b-ink);opacity:1}
.page[data-page="build"] #partName:hover{border-bottom-color:var(--b-fline)}.page[data-page="build"] #partName:focus{outline:0;border-bottom-color:var(--b-pri)}
body.signed .page[data-page="build"] #partName{display:block}body.signed .page[data-page="build"] .bname{display:none}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields{display:flex;flex-wrap:wrap;gap:12px 8px;flex:1 1 520px;min-width:0;padding-top:6px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .fw{flex:0 1 auto;min-width:0;padding:0;margin:0}:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .fw[hidden]{display:none}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf{display:inline-block}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf>select{width:auto;min-width:92px;max-width:200px;height:40px;line-height:38px;font-weight:600}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bright{display:flex;align-items:center;gap:10px;margin-left:auto;padding-top:6px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bunits{display:inline-flex;height:36px;border:1px solid var(--b-fline);border-radius:999px;overflow:hidden;background:var(--b-field)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bunits button{padding:0 12px;border:0;background:transparent;color:var(--b-sub);font:500 13px "Geist",system-ui,sans-serif;cursor:pointer}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bunits button+button{border-left:1px solid var(--b-fline)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bunits button[aria-pressed="true"]{background:var(--b-sel);color:var(--b-selInk);font-weight:600}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bacts{display:flex;gap:6px;margin:0;padding:0}
body:not(.signed) :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bacts>:not(.breset){display:none!important}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bacts button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--b-sub);cursor:pointer}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bacts button:hover{color:var(--b-pri);background:var(--b-sel)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bacts svg{width:18px;height:18px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar .hxg{padding:0}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar .hxg p{padding:0;gap:10px;color:var(--b-sub);font-size:12px;line-height:1.35;max-width:250px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar .hxg a{padding:7px 14px;border-radius:999px;background:var(--b-pri);color:#fff}

/* Columns */
.page[data-page="build"] .cfg{grid-template-columns:minmax(280px,316px) minmax(0,1fr) minmax(300px,336px);gap:12px;margin:0 0 28px}
.page[data-page="build"] .cfg>aside.side{display:flex;flex-direction:column;gap:8px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;min-width:0}
.page[data-page="build"] .cfg>aside.lcol{background:var(--b-pane);border-radius:16px;padding:8px}
.page[data-page="build"] .cfg>aside.rcol{gap:10px}
/* On wide screens the summary scrolls inside its card so the order card below it stays in view. */
.page[data-page="build"] .cfg>aside.rcol>*{flex:none}
.page[data-page="build"] .pnotes>h3{margin:0 0 8px;font:500 16px/24px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] .pnotes .dfm{margin:0;padding:0;border:0;background:none;font-size:12.5px;line-height:1.45;color:var(--b-sub);gap:6px}
.page[data-page="build"] .pnotes:has(.dfm:empty){display:none}

/* Column 1: one card per end, then the body */
.page[data-page="build"] .ecard{position:relative;display:block;padding:8px 12px 14px;border-radius:12px;background:var(--b-cardA)}
.page[data-page="build"] .ecard[hidden]{display:none}
.page[data-page="build"] .ecx{position:absolute;top:10px;right:8px;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--b-sub);cursor:pointer}
.page[data-page="build"] .ecx:hover{background:rgba(127,140,160,.14)}
.page[data-page="build"] .ecx svg{width:22px;height:22px;transition:transform .2s}
.page[data-page="build"] .ecard.shut .ecx svg{transform:rotate(180deg)}
.page[data-page="build"] :is(#endA,#endB){display:flex;flex-direction:column;gap:14px;min-width:0}
.page[data-page="build"] :is(#endA,#endB) :is(.tycard,.szcard,.sblock,.odcard,.thcat){padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;gap:12px}
.page[data-page="build"] :is(#endA,#endB) .tycard{display:flex;flex-direction:column}
.page[data-page="build"] :is(#endA,#endB) .tyhd,.page[data-page="build"] :is(#endA,#endB) .tycard>.sblock>.chips{display:none!important}
.page[data-page="build"] :is(#endA,#endB) .shead{margin:0;padding:2px 36px 0 0;border:0}
.page[data-page="build"] :is(#endA,#endB) .shead .endtag{padding:0;gap:12px;border:0;background:none!important;box-shadow:none;color:var(--b-ink);font:500 16px/1.25 "Geist",system-ui,sans-serif;letter-spacing:0}
.page[data-page="build"] .enddot{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--b-b);color:#fff;font:500 15px/1 "Geist",system-ui,sans-serif}
.page[data-page="build"] .endtag[data-pick="a"] .enddot,.page[data-page="build"] .enddot[data-end="a"]{background:var(--b-a)}
.page[data-page="build"] .shead .endtag[aria-pressed="true"] .enddot{box-shadow:0 0 0 3px var(--b-sel)}
.page[data-page="build"] .esub{display:block;margin:-10px 0 0 48px;font-size:13px;line-height:18px;color:var(--b-sub)}
.page[data-page="build"] .endtags{display:flex;flex-wrap:wrap;gap:6px;padding-right:36px}
.page[data-page="build"] .endtags .endtag{padding:3px 12px 3px 3px;gap:8px;border:1px solid var(--b-fline);border-radius:999px;background:var(--b-field);color:var(--b-ink);font:500 13px/1.2 "Geist",system-ui,sans-serif;letter-spacing:0}
.page[data-page="build"] .endtags .endtag .enddot{width:24px;height:24px;font-size:11.5px}
.page[data-page="build"] .endtags .endtag[aria-pressed="true"]{background:var(--b-sel);border-color:var(--b-sel);color:var(--b-selInk)}
.page[data-page="build"] .endtags .endtag.add{padding:3px 12px;font-size:16px}
.page[data-page="build"] .endtags+.esub{margin:-6px 0 0 2px}
.page[data-page="build"] .facesec h4,.page[data-page="build"] :is(#endA,#endB) .sblock>h4{margin:0 0 6px;font:500 12px/1.3 "Geist",system-ui,sans-serif;color:var(--b-mute)}
.page[data-page="build"] .f2ck{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--b-sub)}.page[data-page="build"] .f2ck input{width:16px;height:16px;margin:0;accent-color:var(--b-pri)}
.page[data-page="build"] .tyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px}
.page[data-page="build"] .tyrow .seg{height:44px}
.page[data-page="build"] .szrow{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:8px}
.page[data-page="build"] :is(#endA,#endB) .szcard .list{display:none!important}
.page[data-page="build"] .szbase{margin:-4px 0 0;font-size:12px;color:var(--b-mute)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfbox>.szfr{display:flex;align-items:center;gap:4px;padding:0 4px}
.page[data-page="build"] .szfr button{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--b-sel);color:var(--b-selInk);font-size:16px;cursor:pointer}
.page[data-page="build"] .szfv{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
.page[data-page="build"] .szfv input{width:100%;min-width:0;border:0;background:transparent;color:var(--b-ink);font:500 14px "Geist",system-ui,sans-serif;text-align:center;padding:0}
.page[data-page="build"] .szfv input:focus{outline:0}.page[data-page="build"] .szfv span{font-size:12px;color:var(--b-mute)}
.page[data-page="build"] .tsd>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:2px 0;font:500 14px/20px "Geist",system-ui,sans-serif;color:var(--b-pri)}
.page[data-page="build"] .tsd>summary::-webkit-details-marker{display:none}
.page[data-page="build"] .tsd>summary::before{content:"+";display:inline-block;width:16px;font-size:19px;line-height:1;text-align:center}
.page[data-page="build"] .tsd[open]>summary::before{content:"−"}
.page[data-page="build"] .tsd>summary em{margin-left:auto;font-style:normal;font-weight:400;font-size:12px;color:var(--b-mute)}
.page[data-page="build"] .tsdb{display:grid;gap:14px;padding-top:12px}
.page[data-page="build"] .dimgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
.page[data-page="build"] .dimgrid .tf>input{height:40px;padding:0 26px 0 10px;font-size:13.5px}
.page[data-page="build"] .dimgrid .tf>em{right:7px;font-size:11.5px}
.page[data-page="build"] .szck{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--b-sub);cursor:pointer}
.page[data-page="build"] .szck input,.page[data-page="build"] .orck input,.page[data-page="build"] .ckl input,.page[data-page="build"] #mfBar input{width:16px;height:16px;margin:0;accent-color:var(--b-pri)}
.page[data-page="build"] .frow{display:flex!important;flex-direction:column;gap:8px!important}
.page[data-page="build"] .frow>h4{display:flex;align-items:center;gap:6px;margin:0!important}
.page[data-page="build"] .frow .seg{height:40px}
.page[data-page="build"] .frow .bnote{margin:0;font-size:12px;color:var(--b-mute)}
.page[data-page="build"] .orhd{display:flex;align-items:center;gap:8px}
.page[data-page="build"] .orck{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--b-ink);cursor:pointer}
.page[data-page="build"] .orsub{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:end;margin-top:10px}
.page[data-page="build"] .orsub h4{margin:0 0 6px!important;font:500 12px "Geist",system-ui,sans-serif;color:var(--b-mute)}
.page[data-page="build"] .orsub select{width:100%;height:36px;padding:0 10px;border:1px solid var(--b-fline);border-radius:6px;background:var(--b-field);color:var(--b-ink);font:400 13px "Geist",system-ui,sans-serif}
.page[data-page="build"] .gkrow{display:flex;gap:6px}.page[data-page="build"] .gkrow button{width:28px;height:28px;padding:3px;border:1px solid var(--b-fline);border-radius:50%;background:var(--b-field);cursor:pointer}
.page[data-page="build"] .gkrow button i{display:block;width:100%;height:100%;border-radius:50%}
.page[data-page="build"] .gkrow button[aria-pressed="true"]{border-color:var(--b-pri);box-shadow:0 0 0 1px var(--b-pri)}
.page[data-page="build"] :is(#endA,#endB) .spec{font-size:12.5px;color:var(--b-mute);margin:0}
.page[data-page="build"] :is(#endA,#endB) .cardsel{border-color:transparent!important}
.page[data-page="build"] .ecard.shut :is(#endA,#endB)>:not(.tycard):not(.endtags):not(.esub),.page[data-page="build"] .ecard.shut .tycard>:not(.shead):not(.endtags):not(.esub),.page[data-page="build"] .ecard.shut .bcb{display:none!important}

/* Body card: frosted slate */
.page[data-page="build"] .bch{display:flex;align-items:center;gap:12px;padding:2px 36px 0 0}
.page[data-page="build"] .bico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--b-frost);color:var(--b-frostInk)}
.page[data-page="build"] .bico svg{width:18px;height:18px}
.page[data-page="build"] .bct{min-width:0}.page[data-page="build"] .bct b{display:block;font:500 16px/1.25 "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] .bct small{display:block;font-size:13px;line-height:18px;color:var(--b-sub)}
.page[data-page="build"] .bcb{display:flex;flex-direction:column;gap:14px;padding-top:14px}
.page[data-page="build"] .bcb [hidden]{display:none!important}
.page[data-page="build"] .bodysel{display:block}.page[data-page="build"] .bodysel .lbl{display:none}
.page[data-page="build"] .bodyic{display:flex;height:40px;border:1px solid var(--b-frostLine);border-radius:999px;overflow:hidden;background:var(--b-field)}
.page[data-page="build"] .bodyic button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;border:0;background:transparent;color:var(--b-sub);font:500 13.5px "Geist",system-ui,sans-serif;cursor:pointer;opacity:1}
.page[data-page="build"] .bodyic button+button{border-left:1px solid var(--b-frostLine)}
.page[data-page="build"] .bodyic svg{width:18px;height:18px}
.page[data-page="build"] .bodyic .bo{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}.page[data-page="build"] .bodyic .bi{fill:none;stroke:currentColor;stroke-width:1.8}
.page[data-page="build"] .bodyic button[aria-pressed="true"]{background:var(--b-frost);color:var(--b-frostInk);font-weight:600}
.page[data-page="build"] .bodyic button:disabled{opacity:.4;cursor:not-allowed}
.page[data-page="build"] .redck{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;margin:0;border:1px solid var(--b-frostLine);border-radius:999px;background:var(--b-field);color:var(--b-sub);font:500 13.5px "Geist",system-ui,sans-serif;cursor:pointer}
.page[data-page="build"] .redck .lbl{font:inherit;color:inherit}
.page[data-page="build"] .redck .redbx{display:flex}.page[data-page="build"] .redck input{width:16px;height:16px;margin:0;accent-color:var(--b-frostInk);cursor:pointer}
.page[data-page="build"] .redck:has(input:checked){background:var(--b-frost);color:var(--b-frostInk);font-weight:600}
.page[data-page="build"] .redck.dis{opacity:.45;cursor:not-allowed}
.page[data-page="build"] .bcb .custom{flex-direction:column;align-items:stretch;gap:14px;padding:0;margin:0;border:0;background:none;font-size:13.5px;color:var(--b-ink)}
.page[data-page="build"] #extBar .blrow{display:flex;gap:8px}.page[data-page="build"] #extBar .boreid{flex:1 1 0;display:block;min-width:0;padding:0;margin:0;border:0}
.page[data-page="build"] #extBar .boreid .uL{display:inline}
.page[data-page="build"] #extBar .boreid input,.page[data-page="build"] .bcb .tf>input{width:100%;text-align:left}
.page[data-page="build"] #extBar .optrow,.page[data-page="build"] #extBar .extrow{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.page[data-page="build"] #extBar #blCtrls,.page[data-page="build"] #extBar .blf,.page[data-page="build"] #extBar .extf{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex:none}
.page[data-page="build"] .ckl{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--b-ink);cursor:pointer}
.page[data-page="build"] #colBar .colf{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px;flex-wrap:nowrap}
.page[data-page="build"] #colBar .tf>input{width:100%!important;padding:0 36px 0 12px!important;font-size:14px}
.page[data-page="build"] #colBar .colpos{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0}
.page[data-page="build"] #colBar .colpos .lbl{display:block;font-size:13px;color:var(--b-sub)}
.page[data-page="build"] #colBar .colpos .seg{flex:1;height:36px}
.page[data-page="build"] #customBar .rng{display:grid;grid-template-columns:76px minmax(0,1fr) 46px;align-items:center;gap:10px;font-size:13px;color:var(--b-sub)}
.page[data-page="build"] #customBar .rng b{text-align:right;color:var(--b-ink);font-weight:500;font-variant-numeric:tabular-nums}
.page[data-page="build"] #mfBar{gap:10px}.page[data-page="build"] #mfBar label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.page[data-page="build"] .bcb input[type=range]{width:100%!important;flex:none!important;height:18px;margin:0}
.page[data-page="build"] .bcb .custom>*,.page[data-page="build"] #extBar :is(.blrow,.optrow,.extrow,#blCtrls,.blf,.extf),.page[data-page="build"] #colBar>*{flex:none!important;min-width:0}
.page[data-page="build"] #colBar{align-items:stretch}
.page[data-page="build"] #extBar .tf>input{width:100%!important;padding:0 36px 0 12px!important;text-align:left}
.page[data-page="build"] #colBar.off .colf,.page[data-page="build"] #extBar.off .extf{display:none!important}
.page[data-page="build"] .bcb input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1F4553,#8FAAB6)}
.page[data-page="build"] .bcb input[type=range]::-webkit-slider-thumb{background:#fff;border:2px solid #1F4553;box-shadow:none}
.page[data-page="build"] .bcb input[type=range]::-moz-range-track{background:linear-gradient(90deg,#1F4553,#8FAAB6)}
.page[data-page="build"] .bcb input[type=range]::-moz-range-thumb{background:#fff;border:2px solid #1F4553;box-shadow:none}

/* Middle: the part on a slate stage; in 2D the drawing fills it and the four views run along the bottom */
.page[data-page="build"] .cfg>.center{display:flex;flex-direction:column;min-height:520px;padding:0;border:0;border-radius:28px;background:var(--b-stage);box-shadow:none;overflow:hidden}
.page[data-page="build"] #stage{flex:1 1 auto;min-height:320px}
.page[data-page="build"] .viewtog{top:16px;right:16px;gap:8px;align-items:center}
.page[data-page="build"] .viewtog .seg{height:34px;border-color:var(--b-viewLine);background:transparent!important}
.page[data-page="build"] .viewtog .seg button{padding:0 14px!important;background:transparent!important;font-size:13px}
.page[data-page="build"] .viewtog .seg button+button{border-left-color:var(--b-viewLine)}
.page[data-page="build"] .viewtog .seg button[aria-pressed="true"]{background:var(--b-frost)!important;color:var(--b-frostInk)!important}
.page[data-page="build"] .lbltog{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--b-viewLine);border-radius:50%;background:transparent!important;color:var(--b-sub)!important;cursor:pointer}
.page[data-page="build"] .lbltog[aria-pressed="true"]{background:var(--b-frost)!important;color:var(--b-frostInk)!important;border-color:var(--b-frostLine)}
.page[data-page="build"] .hud{left:24px;right:24px;bottom:20px;padding:0;background:none;backdrop-filter:none;font-size:13px;line-height:1.5;color:var(--b-sub)}
.page[data-page="build"] .hud b{color:var(--b-ink);font-weight:600}
.page[data-page="build"] #drawing{z-index:1;background:var(--b-stage);padding:60px 24px 20px}
.page[data-page="build"] .center>.views{display:none}
.page[data-page="build"] .center.v2d>.views{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:4px 20px 18px;border:0}
.page[data-page="build"] .center.v2d .hud{display:none}
.page[data-page="build"] .vwi{background:transparent;border:0;border-radius:0}
.page[data-page="build"] .bguest[hidden]{display:none!important}
.page[data-page="build"] #protoCard{display:none!important}
.page[data-page="build"] .bguest{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:none;padding:16px}
.page[data-page="build"] .bguest h3{margin:0;font:500 16px/24px "Geist",system-ui,sans-serif;letter-spacing:0;color:var(--b-ink)}
.page[data-page="build"] .bguest p{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--b-sub)}
.page[data-page="build"] .bguest .btn{width:100%;height:46px;margin:0;border:0;border-radius:999px;background:var(--b-pri);color:#fff;font:500 15px "Geist",system-ui,sans-serif;display:grid;place-items:center;text-decoration:none}
.page[data-page="build"] .bguest .btn:hover{background:var(--b-priH)}
html.presigned .page[data-page="build"] .bguest,body.signed .page[data-page="build"] .bguest{display:none!important}
.page[data-page="build"] .vwi svg{font:500 11px "Geist",system-ui,sans-serif;color:var(--b-sub)}
.page[data-page="build"] .vw figcaption{margin-top:8px;font:600 11px/1 "Geist",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--b-sub)}

/* Column 3: part summary, then the order card */
.page[data-page="build"] .rcard{display:block;padding:14px 16px;border:0;border-radius:16px;background:var(--b-card);box-shadow:inset 0 0 0 1px var(--b-outline)}
.page[data-page="build"] .psum>h3{margin:0 0 10px;font:500 16px/24px "Geist",system-ui,sans-serif;letter-spacing:0;color:var(--b-ink)}
.page[data-page="build"] .psum .bsc{padding:0;border:0!important;overflow:visible;min-width:0}
.page[data-page="build"] .psum .bsc:empty{display:none}
.page[data-page="build"] .psum .bsc+.bsc{margin-top:16px}
.page[data-page="build"] .psum .bsc>h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 13.5px/1.3 "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] .smh .enddot{width:22px;height:22px;font-size:11px;background:var(--b-card)!important;color:var(--b-a);box-shadow:inset 0 0 0 1.5px var(--b-a)}
.page[data-page="build"] .smh .enddot:not([data-end="a"]){color:var(--b-b);box-shadow:inset 0 0 0 1.5px var(--b-b)}
.page[data-page="build"] .smh .call{flex:1;min-width:0;font:500 13.5px/1.3 "Geist",system-ui,sans-serif;color:var(--b-pri)}
.page[data-page="build"] .smh small{flex:none;font-size:11.5px;font-weight:400;color:var(--b-mute)}
.page[data-page="build"] .psum .smeta{padding:0;gap:0}
.page[data-page="build"] .psum .dims{table-layout:auto}
.page[data-page="build"] .psum .dims td{padding:4px 0;border:0;border-top:1px solid var(--b-hair);font:400 12.5px/1.4 "Geist",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--b-sub);overflow-wrap:normal;word-break:normal}
.page[data-page="build"] .psum .dims td:last-child{width:auto;padding-left:12px;text-align:right;color:var(--b-ink);font-family:"Geist",system-ui,sans-serif;font-size:12.5px}
.page[data-page="build"] .psum .dims tr:first-child td{border-top:0}
.page[data-page="build"] .psum .dfm{margin:0 0 12px;padding:0;border:0;background:none;font-size:12.5px;line-height:1.45;color:var(--b-sub);gap:6px}
.page[data-page="build"] .psum .dfm:empty{display:none}
.page[data-page="build"] .ostack{display:flex;flex-direction:column;gap:10px;margin:0}
.page[data-page="build"] .ostack>.order{display:block;padding:0;margin:0;border:0;border-radius:16px;background:var(--b-card);box-shadow:inset 0 0 0 1px var(--b-outline);overflow:hidden}
.page[data-page="build"] .ocard .ordpart{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:6px 12px;padding:12px 16px;border:0;border-bottom:1px solid var(--b-hair)}
.page[data-page="build"] .ocard .ordpart img{width:56px;height:56px;aspect-ratio:1;object-fit:contain;border:0;border-radius:10px;background:var(--b-frost)}
.page[data-page="build"] .ocard .ordpart .opspec{margin:0;font-size:12px;line-height:1.4;color:var(--b-sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.page[data-page="build"] .ocard .ordpart .markex{grid-column:1/-1}
.page[data-page="build"] .og{padding:12px 16px}.page[data-page="build"] .og+.og{border-top:1px solid var(--b-hair)}
.page[data-page="build"] .ogh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px}
.page[data-page="build"] .ogh h4{margin:0;font:500 14px/20px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] .og .bigp{gap:4px}.page[data-page="build"] .og .bigp b{font:600 17px/1 "Geist",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--b-ink)}
.page[data-page="build"] .og .bigp span{font-size:12.5px;color:var(--b-mute)}
.page[data-page="build"] .og .pb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px;margin:0}
.page[data-page="build"] .og .pb button{gap:1px;padding:7px 2px!important;border:1px solid var(--b-fline);border-radius:10px;background:var(--b-field);box-shadow:none}
.page[data-page="build"] .og .pb button:hover{border-color:var(--b-fhover)}
.page[data-page="build"] .og .pb button small{font-size:11px;color:var(--b-mute)}
.page[data-page="build"] .og .pb button b{font:500 13.5px "Geist",system-ui,sans-serif!important;font-variant-numeric:tabular-nums;color:var(--b-ink)}
.page[data-page="build"] .og .pb button i{font-size:10px;color:var(--b-mute)}
.page[data-page="build"] .og .pb button[aria-pressed="true"]{background:var(--b-frost);border-color:var(--b-frostLine);box-shadow:none}
.page[data-page="build"] .og .pb button[aria-pressed="true"] :is(b,small,i){color:var(--b-frostInk)}
.page[data-page="build"] .og details.more{margin:0;padding:0;border:0}
.page[data-page="build"] .og details.more summary{list-style:none;display:flex;align-items:center;gap:6px;padding:10px 0 0;font:500 13px "Geist",system-ui,sans-serif;color:var(--b-pri)}
.page[data-page="build"] .ogmore details.more summary{padding:0}
.page[data-page="build"] .og details.more summary::-webkit-details-marker{display:none}
.page[data-page="build"] .og details.more summary::before{content:"+";display:inline-block;width:14px;font-size:17px;line-height:1;text-align:center}
.page[data-page="build"] .og details.more[open] summary::before{content:"−"}
.page[data-page="build"] .og details.more summary small{margin-left:6px;color:var(--b-mute);font-weight:400}
.page[data-page="build"] .og details.more[open] summary{margin-bottom:10px}
.page[data-page="build"] #qtyOpts{margin:0;padding:0;border:0}
.page[data-page="build"] .qcustom{max-width:none;margin:0}
.page[data-page="build"] .qcustom .fw input,.page[data-page="build"] .og .cfields input,.page[data-page="build"] .og .cfields select{height:38px;padding:0 10px;border:1px solid var(--b-fline);border-radius:6px;background:var(--b-field);color:var(--b-ink)}
.page[data-page="build"] .og .moreChecks{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.page[data-page="build"] .og .moreChecks label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--b-ink)}
.page[data-page="build"] .og .moreChecks input{width:16px;height:16px;margin:0;accent-color:var(--b-pri)}
.page[data-page="build"] .dlist{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
.page[data-page="build"] .dlist button{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--b-ink);text-align:left;cursor:pointer;font:inherit}
.page[data-page="build"] .dlist button:hover{background:rgba(127,140,160,.08)}
.page[data-page="build"] .dlist i{display:grid;place-items:center;width:18px;height:18px;box-sizing:border-box;border:2px solid var(--b-radio);border-radius:50%}
.page[data-page="build"] .dlist b{display:block;font:400 14px/20px "Geist",system-ui,sans-serif}
.page[data-page="build"] .dlist small{display:block;font-size:12px;line-height:16px;color:var(--b-sub)}
.page[data-page="build"] .dlist em{font-style:normal;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.page[data-page="build"] .dlist em.free{padding:2px 9px;border-radius:999px;background:var(--b-sel);color:var(--b-pri);font-size:12.5px;font-weight:500}
.page[data-page="build"] .dlist [aria-checked="true"],.page[data-page="build"] .dlist [aria-checked="true"]:hover{background:var(--b-frost);color:var(--b-frostInk)}
.page[data-page="build"] .dlist [aria-checked="true"] i{border-color:var(--b-frostInk)}
.page[data-page="build"] .dlist [aria-checked="true"] i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--b-frostInk)}
.page[data-page="build"] .dlist [aria-checked="true"] small{color:var(--b-frostInk)}
.page[data-page="build"] .ocard>.price{display:block;margin:0;padding:0;border:0;border-top:1px solid var(--b-hair);background:none}
.page[data-page="build"] .ocard .sumcard{display:flex;flex-direction:column;gap:8px;height:auto;padding:12px 16px 16px;background:none}
.page[data-page="build"] :is(.ocard,.procard) .qsum{gap:0}
.page[data-page="build"] :is(.ocard,.procard) .qsum .ln{line-height:26px;font-size:13.5px;color:var(--b-sub)}
.page[data-page="build"] :is(.ocard,.procard) .qsum .ln b{font:500 13.5px "Geist",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--b-ink)}
.page[data-page="build"] :is(.ocard,.procard) .qsum .ln.tot{align-items:baseline;margin-top:6px;padding-top:10px;border-top:1px solid var(--b-hair);color:var(--b-ink);font:600 15px "Geist",system-ui,sans-serif}
.page[data-page="build"] :is(.ocard,.procard) .qsum .ln.tot b{font:500 26px/1 "Geist",system-ui,sans-serif;letter-spacing:-.01em}
.page[data-page="build"] :is(.ocard,.procard) .okn{font-size:12px;color:var(--b-ok)}.page[data-page="build"] :is(.ocard,.procard) .qtax{font-size:12px;color:var(--b-mute)}
.page[data-page="build"] .sumcard .actions{display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.page[data-page="build"] #add,.page[data-page="build"] #protoAdd{width:100%;height:48px;padding:0 16px;border:0;border-radius:999px;background:var(--b-pri);color:#fff;font:500 15px "Geist",system-ui,sans-serif;box-shadow:none}
.page[data-page="build"] #add:hover,.page[data-page="build"] #protoAdd:not(:disabled):hover{background:var(--b-priH)}
.page[data-page="build"] .act2{display:flex;gap:8px}.page[data-page="build"] .act2 .btn{flex:1;width:auto}.page[data-page="build"] .act2 .btn[hidden]{display:none}
.page[data-page="build"] .sumcard .btn.ghost,.page[data-page="build"] #protoBtn{height:38px;padding:0 14px;border:1px solid var(--b-fline);border-radius:999px;background:var(--b-card);color:var(--b-pri);font:500 13.5px "Geist",system-ui,sans-serif;box-shadow:none}
.page[data-page="build"] .sumcard .btn.ghost:hover,.page[data-page="build"] #protoBtn:hover{border-color:var(--b-fhover);background:var(--b-sel)}
.page[data-page="build"] .unit.loading,.page[data-page="build"] #unit.loading{opacity:.5}
.page[data-page="build"] .procard .ordl{display:block;padding:14px 16px}
.page[data-page="build"] .procard .osec{padding:0;border:0}
.page[data-page="build"] .procard .phead{flex-direction:column;align-items:flex-start;gap:10px}
.page[data-page="build"] .procard .phead h4{margin:0 0 2px;font:500 15px/1.3 "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] .procard .phead small{font-size:12.5px;color:var(--b-sub)}
.page[data-page="build"] #protoPanel{display:flex;flex-direction:column;gap:12px;margin-top:12px}.page[data-page="build"] #protoPanel[hidden]{display:none}
.page[data-page="build"] #protoPanel .qrow{display:flex;flex-direction:column;gap:12px}
.page[data-page="build"] #protoPanel .seg{height:auto;min-height:40px;flex-wrap:wrap;border-radius:12px}
.page[data-page="build"] #protoPanel .seg button{white-space:normal;padding:8px 10px!important;line-height:1.25}
.page[data-page="build"] #protoPanel .lbl,.page[data-page="build"] #protoPanel label{font-size:12.5px;color:var(--b-sub)}
.page[data-page="build"] #protoQ{height:38px;padding:0 10px;border:1px solid var(--b-fline);border-radius:6px;background:var(--b-field);color:var(--b-ink)}
.page[data-page="build"] .procard>.price{display:block;margin:0;padding:0;border:0;border-top:1px solid var(--b-hair);background:none}
.page[data-page="build"] .procard:not(.on)>.price{display:none}
.page[data-page="build"] #protoSum{padding:12px 16px 16px;border:0;background:none}
.page[data-page="build"] #protoSum h4{margin:0;font:500 14px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="build"] #protoSum .bigp b{font:600 22px/1 "Geist",system-ui,sans-serif}

@media (max-width:1100px){
 .page[data-page="build"] .cfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .page[data-page="build"] .cfg>.center{grid-column:1/-1;order:-1;min-height:420px}
 .page[data-page="build"] .cfg>aside.side{position:static;height:auto;max-height:none;overflow:visible}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle{flex:1 1 100%}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bright{margin-left:0}
}
@media (max-width:700px){
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"])>.wrap{padding:0 12px}
 .page[data-page="build"] .cfg{grid-template-columns:minmax(0,1fr)}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .fw{flex:1 1 40%}:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf{display:block}:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf>select{width:100%;max-width:none}
 .page[data-page="build"] .bname,.page[data-page="build"] #partName{font-size:18px}
 .page[data-page="build"] .center.v2d>.views{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 12px 14px}
 .page[data-page="build"] .cfg>.center{border-radius:20px}
}

/* ===== Home, 2026: the same system as Build a part =====
   White page fading to a light slate, the slate stage behind the hero part, white cards with a light blue outline,
   frosted slate icon circles, pill buttons in the brand blue. */
.page[data-page="home"]{--h-pri:#0054FC;--h-priH:#0047D6;--h-ink:#101418;--h-sub:#45464F;--h-card:#fff;--h-outline:#D3E1FF;--h-hair:#E7EDF6;--h-frost:#E3EEF3;--h-frostInk:#1F4553;--h-sel:#E7F1FF;
 --h-stage:radial-gradient(70% 90% at 72% 45%,#F6F7F8 0%,#E7E9EC 55%,#DADDE1 100%);--h-pane:linear-gradient(180deg,#F2F3F5 0%,#E9EBEE 100%);background:linear-gradient(180deg,#fff 0%,#FBFBFC 45%,#F3F4F6 100%)}
.page[data-page="home"]{--h-outline:#E2E5E9;--h-hair:#ECEEF1;--h-frost:#E9ECEF;--h-frostInk:#2E3A44}
.page[data-page="home"] .abstephd>svg,.page[data-page="home"] .abic{background:transparent!important;box-shadow:inset 0 0 0 1px #D5D9DE!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page[data-page="home"]{--h-ink:#E9EDF1;--h-sub:#B4BCC5;--h-card:#1D2228;--h-outline:#2C3A52;--h-hair:#2A323C;--h-frost:#22323A;--h-frostInk:#BFD9E3;--h-sel:#10233F;--h-stage:radial-gradient(70% 90% at 72% 45%,#262D36 0%,#1B2128 60%,#12161A 100%);--h-pane:linear-gradient(180deg,#1A1F25 0%,#161A1F 100%);background:var(--bg)}}
:root[data-theme="dark"] .page[data-page="home"]{--h-ink:#E9EDF1;--h-sub:#B4BCC5;--h-card:#1D2228;--h-outline:#2C3A52;--h-hair:#2A323C;--h-frost:#22323A;--h-frostInk:#BFD9E3;--h-sel:#10233F;--h-stage:radial-gradient(70% 90% at 72% 45%,#262D36 0%,#1B2128 60%,#12161A 100%);--h-pane:linear-gradient(180deg,#1A1F25 0%,#161A1F 100%);background:var(--bg)}
.page[data-page="home"] :is(.abhero,.abhow,.abwhy,.abused,.abbuild,.abworks){border-bottom:0}
/* hero: the part sits on the slate stage */
.page[data-page="home"] .abhero{background:#F4F5F7;padding:44px 0 40px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page[data-page="home"] .abhero{background:var(--h-stage)}}:root[data-theme="dark"] .page[data-page="home"] .abhero{background:var(--h-stage)}
.page[data-page="home"] .abhero h1{color:var(--h-ink)}.page[data-page="home"] .abhero .lead,.page[data-page="home"] .abwhy .lead{color:var(--h-sub)}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page[data-page="home"] .abphoto{mix-blend-mode:normal;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%)}}
:root[data-theme="dark"] .page[data-page="home"] .abphoto{mix-blend-mode:normal;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 68%,transparent 100%)}
.page[data-page="home"] .abcta .btn{min-height:50px;padding:0 26px;border-radius:999px;font-weight:500}
.page[data-page="home"] .abcta .abprimary{background:var(--h-pri)!important;border:0}.page[data-page="home"] .abcta .abprimary:hover{background:var(--h-priH)!important}
.page[data-page="home"] .abcta .abghost{background:var(--h-card);border:1px solid #D5D9DE;color:var(--h-ink)}.page[data-page="home"] .abcta .abghost:hover{background:#F3F4F6}
.page[data-page="home"] .abtrust{color:var(--h-sub)}
/* how it works: one white card on the page */
.page[data-page="home"] .abhow{background:none;padding:28px 0 8px}
.page[data-page="home"] .abhowgrid{padding:26px 20px;border-radius:0;background:none;box-shadow:none}
.page[data-page="home"] .abhowhd{border-right-color:var(--h-hair)}
.page[data-page="home"] .abstephd>svg{box-sizing:content-box;flex:none;width:20px;height:20px;padding:9px;border-radius:50%;background:var(--h-frost);color:var(--h-frostInk)}
.page[data-page="home"] .abstephd i{border-color:var(--h-hair)!important;background:var(--h-hair)}
.page[data-page="home"] .absteps h3{color:var(--h-ink)}
/* why: a slate panel with frosted icon circles */
.page[data-page="home"] .abwhy{background:none;padding:20px 0}
.page[data-page="home"] .abwhygrid{padding:40px 36px;border-radius:16px;background:var(--h-pane)}
.page[data-page="home"] .abwhy h2,.page[data-page="home"] .abbuild h2{color:var(--h-ink)}
.page[data-page="home"] .abic{width:40px;height:40px;border:0!important;border-radius:50%!important;background:var(--h-frost)!important;color:var(--h-frostInk)!important;box-shadow:none!important}
/* applications and parts: white cards with a light blue outline */
.page[data-page="home"] .abused{background:none;padding:28px 0 12px}
.page[data-page="home"] .abu{border:1px solid var(--h-outline);border-radius:16px;background:var(--h-card);box-shadow:none;color:var(--h-sub);padding:8px 8px 12px}
.page[data-page="home"] .abu b{color:var(--h-ink);padding:0 4px}.page[data-page="home"] .abu>span:not(.abupic){padding:0 4px}
.page[data-page="home"] .abupic{border-radius:10px}
.page[data-page="home"] .abu:hover,.page[data-page="home"] .abcard:hover{border-color:#C5CBD2;box-shadow:none;transform:none}
.page[data-page="home"] .abbuild{background:none;padding:28px 0 40px}
.page[data-page="home"] .abcard{border:1px solid var(--h-outline);border-radius:16px;background:var(--h-card);box-shadow:none;color:var(--h-sub)}
.page[data-page="home"] .abcard b,.page[data-page="home"] .abcard h3{color:var(--h-ink)}
.page[data-page="home"] .abcpic{border-bottom:1px solid var(--h-hair);background:#fff}
.page[data-page="home"] .abworks,.page[data-page="home"] .abworksin{border-color:var(--h-hair)}
.page[data-page="home"] .abworks .abchips a{border-radius:999px}
/* closing call to action: the slate stage again, inside the page width */
.page[data-page="home"] .cta{background:none;padding:0 0 56px}
.page[data-page="home"] .cta>.wrap{padding:44px 24px;border-radius:24px;background:var(--h-stage);text-align:center}
.page[data-page="home"] .cta h2{color:var(--h-ink)}.page[data-page="home"] .cta p{color:var(--h-sub)}
.page[data-page="home"] .cta .btn{min-height:50px;padding:0 26px;border-radius:999px;font-weight:500;display:inline-flex;align-items:center}
.page[data-page="home"] .cta .btn.light{background:var(--h-pri)!important;color:#fff!important;border:0}.page[data-page="home"] .cta .btn.light:hover{background:var(--h-priH)!important}
.page[data-page="home"] .cta .btn:not(.light){background:var(--h-card)!important;border:1px solid #D5D9DE!important;color:var(--h-ink)!important}
@media (max-width:760px){.page[data-page="home"] .abhowgrid{margin:0 12px;padding:20px 18px}.page[data-page="home"] .abwhygrid{margin:0 12px;padding:28px 20px}.page[data-page="home"] .cta>.wrap{margin:0 12px;padding:32px 18px}}

.page[data-page="home"] .abwhy .abic,.page[data-page="home"] .abhow .abstephd>svg{background:transparent!important;box-shadow:none!important;border:0!important}

/* Home and Build a part use Geist, as in the Direction A mockups. Titles are 600 with tight tracking. */
.page:is([data-page="home"],[data-page="build"]),.page:is([data-page="home"],[data-page="build"]) :is(h1,h2,h3,h4,p,a,span,b,em,li,small,label,button,input,select,td,th,summary,figcaption,strong,div){font-family:"Geist",system-ui,sans-serif}
.page[data-page="home"] :is(h1,h2){font-weight:600;letter-spacing:-.035em}
.page[data-page="home"] h3{font-weight:600;letter-spacing:-.012em}
.page[data-page="home"] .eyebrow{font-weight:600;letter-spacing:.06em}

/* Site wide: Geist everywhere, titles semibold with tight tracking (the Direction A type). */
h1,h2,h3{font-weight:600;letter-spacing:-.025em}
h4{letter-spacing:0}

/* Small screens: keep columns and photos from stretching edge to edge on large phones and small tablets. */
@media (max-width:1100px){.page[data-page="build"] .cfg>.center{max-height:520px}}
@media (max-width:700px){
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar,:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .cfg{max-width:560px;margin-left:auto;margin-right:auto}
 .page[data-page="build"] .cfg>.center{max-height:440px;min-height:340px}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .fw{flex:1 1 44%}
}
@media (max-width:860px){.page[data-page="home"] .abusedrow{grid-template-columns:repeat(4,minmax(0,1fr))!important}.page[data-page="home"] .abu{font-size:11.5px}}
@media (max-width:640px){.page[data-page="home"] .abusedrow{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:420px){.page[data-page="home"] .abusedrow{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:520px){.page[data-page="home"] .abcards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}.page[data-page="home"] .abcard{font-size:12.5px}}
@media (max-width:760px){.page[data-page="home"] .abphoto{max-width:380px}.page[data-page="home"] :is(.abhow,.abwhy,.abused,.abbuild,.cta)>.wrap{max-width:600px}}

/* Top bar: grey outlines, units sit in the field group beside Material */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf>select{border-color:#D5D9DE}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf>select:hover{border-color:#A9B0B8}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bfields .tf>select:focus{border-color:var(--b-pri)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits{display:flex;height:40px;border:1px solid #D5D9DE;border-radius:6px;overflow:hidden;background:var(--b-field)}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits button{flex:1;min-width:38px;padding:0 10px;border:0;background:transparent;color:var(--b-sub);font:500 13.5px "Geist",system-ui,sans-serif;cursor:pointer}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits button+button{border-left:1px solid #D5D9DE}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits button[aria-pressed="true"]{background:#EEF0F3;color:var(--b-ink);font-weight:600}
@media (max-width:700px){.page[data-page="build"] .bfields #f_units{flex:0 0 auto}}

.page[data-page="home"] .abu[hidden]{display:none!important}
@media (min-width:861px){.page[data-page="home"] .abusedrow{grid-template-columns:repeat(6,minmax(0,1fr))!important}}

/* ===== Create an assembly, 2026: the Build a part system (tokens, outlined fields, cards on slate, stage, order card) ===== */
.page[data-page="assembly"] .asmdesk{max-width:1680px;padding:0 16px}
.page[data-page="assembly"] h4{text-transform:none;letter-spacing:0}
/* top bar */
.page[data-page="assembly"] #asmBar{display:flex;margin:0;padding:12px 0 10px;background:none!important;border:0!important;box-shadow:none!important;border-radius:0;color:var(--b-ink)}
.page[data-page="assembly"] #asmName{display:block;width:100%;box-sizing:border-box;height:auto;padding:2px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;color:var(--b-ink);font:500 21px/1.3 "Geist",system-ui,sans-serif;letter-spacing:-.015em}
.page[data-page="assembly"] #asmName::placeholder{color:var(--b-ink);opacity:1}
.page[data-page="assembly"] #asmName:hover{border-bottom-color:#D5D9DE}.page[data-page="assembly"] #asmName:focus{outline:0;border-bottom-color:var(--b-pri)}
.page[data-page="assembly"] #asmTubeBar{display:contents}
.page[data-page="assembly"] #asmTubeBar .fw{flex:0 1 auto;min-width:0;padding:0;margin:0;border:0;background:none}
.page[data-page="assembly"] #asmTubeBar .fw::before,.page[data-page="assembly"] #asmTubeBar .fw::after{display:none}
.page[data-page="assembly"] #asmTubeBar .tf>select{width:auto;min-width:92px;max-width:220px;height:40px;line-height:38px;font-weight:600;border-color:#D5D9DE;background-color:var(--b-field)!important;color:var(--b-ink)!important}
.page[data-page="assembly"] #asmTubeBar .tf>select:disabled{opacity:.55}
/* columns */
.page[data-page="assembly"] .asmlive{grid-template-columns:minmax(280px,316px) minmax(0,1fr) minmax(300px,336px);gap:12px;margin:0 0 28px}
.page[data-page="assembly"] .asmleftcol{background:var(--b-pane);border-radius:16px;padding:8px}
.page[data-page="assembly"] #asmLeft{gap:8px}
/* column 1 sections: white cards with a badge, title and one line summary */
.page[data-page="assembly"] #asmLeft .runsec{padding:8px 12px 14px;margin:0;border:0!important;border-radius:12px;background:var(--b-cardA)!important;box-shadow:none!important;color:var(--b-ink)}
.page[data-page="assembly"] #asmLeft .runsec.sel{box-shadow:inset 0 0 0 1.5px var(--b-fline)!important}
.page[data-page="assembly"] #asmLeft .runhead{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:2px 0 0;margin:0;border:0;background:none!important;color:var(--b-ink);text-align:left;cursor:pointer}
.page[data-page="assembly"] #asmLeft .runhead h4{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:center;margin:0;min-width:0;font:inherit}
.page[data-page="assembly"] #asmLeft .runhead .endtag{display:contents;border:0;background:none;padding:0;color:var(--b-ink);font:500 16px/1.25 "Geist",system-ui,sans-serif;letter-spacing:0}
.page[data-page="assembly"] #asmLeft .runhead .enddot{grid-column:1;grid-row:1/3;order:-1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--b-a);color:#fff;font:500 15px/1 "Geist",system-ui,sans-serif}
.page[data-page="assembly"] #asmLeft .runhead .enddot[data-end="B"]{background:var(--b-b)}.page[data-page="assembly"] #asmLeft .runhead .enddot[data-end="C"]{background:#8EC2FF;color:#0E2463}
.page[data-page="assembly"] #asmLeft .runjct .runhead .enddot,.page[data-page="assembly"] #asmLeft .runflow .runhead h4::before{background:var(--b-frost)!important;color:var(--b-frostInk)!important}
.page[data-page="assembly"] #asmLeft .runflow .runhead h4::before{content:"";grid-column:1;grid-row:1/3;width:36px;height:36px;border-radius:50%;background:var(--b-frost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4553' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 9h18M3 15h18M6 9v6M18 9v6'/%3E%3C/svg%3E") center/18px no-repeat!important}
.page[data-page="assembly"] #asmLeft .runflow .runhead .endtag{grid-column:2}
.page[data-page="assembly"] #asmLeft .runhead .endtag>span:not(.enddot){grid-column:2}
.page[data-page="assembly"] #asmLeft .esub{grid-column:2;display:block;margin-top:1px;font:400 13px/18px "Geist",system-ui,sans-serif;color:var(--b-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page[data-page="assembly"] #asmLeft .runchev{flex:none;width:22px;height:22px;color:var(--b-sub);transition:transform .2s}
.page[data-page="assembly"] #asmLeft .runsec.shut .runchev{transform:rotate(180deg)}
.page[data-page="assembly"] #asmLeft .runtop{position:absolute;right:44px;top:20px;font-size:12.5px}
.page[data-page="assembly"] #asmLeft .runsec{position:relative}
.page[data-page="assembly"] #asmLeft .runbody{display:flex;flex-direction:column;gap:14px;padding-top:14px;margin:0;border:0;background:none}
.page[data-page="assembly"] #asmLeft .runsec.shut .runbody{display:none}
.page[data-page="assembly"] #asmLeft .rungrp{display:flex;flex-direction:column;gap:14px;padding:0!important;margin:0;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;color:var(--b-ink)}
.page[data-page="assembly"] #asmLeft .rungrp+.rungrp{padding-top:14px!important;border-top:1px solid var(--b-hair)!important}
.page[data-page="assembly"] #asmLeft .runghd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.page[data-page="assembly"] #asmLeft .runghd h4{margin:0;font:500 13px "Geist",system-ui,sans-serif;color:var(--b-sub)}
.page[data-page="assembly"] #asmLeft .runghd>.tf{flex:1}
.page[data-page="assembly"] #asmLeft .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px 8px}
.page[data-page="assembly"] #asmLeft .tf>select,.page[data-page="assembly"] #asmLeft .tf>input{width:100%;height:44px;background-color:var(--b-field)}
.page[data-page="assembly"] #asmLeft .asmck,.page[data-page="assembly"] #asmLeft .orck{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--b-ink);text-transform:none;letter-spacing:0}
.page[data-page="assembly"] #asmLeft input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--b-pri)}
.page[data-page="assembly"] #asmLeft .runfld{display:flex;flex-direction:column;gap:6px}
.page[data-page="assembly"] #asmLeft .runlbl{font:500 12px "Geist",system-ui,sans-serif;color:var(--b-mute);text-transform:none;letter-spacing:0}
.page[data-page="assembly"] #asmLeft .runlen{display:grid;grid-template-columns:minmax(0,1fr) 72px auto;align-items:center;gap:8px}
.page[data-page="assembly"] #asmLeft .runlen input[type=number],.page[data-page="assembly"] #asmLeft .runrot input{height:38px;padding:0 8px;border:1px solid var(--b-fline);border-radius:6px;background:var(--b-field);color:var(--b-ink);font:400 14px "Geist",system-ui,sans-serif;text-align:right}
.page[data-page="assembly"] #asmLeft .runu,.page[data-page="assembly"] #asmLeft .runrot i{font-style:normal;font-size:12.5px;color:var(--b-mute)}
.page[data-page="assembly"] #asmLeft input[type=range]{width:100%;height:18px;margin:0}
.page[data-page="assembly"] #asmLeft input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1F4553,#8FAAB6)}
.page[data-page="assembly"] #asmLeft input[type=range]::-webkit-slider-thumb{background:#fff;border:2px solid #1F4553;box-shadow:none}
.page[data-page="assembly"] #asmLeft input[type=range]::-moz-range-track{background:linear-gradient(90deg,#1F4553,#8FAAB6)}
.page[data-page="assembly"] #asmLeft input[type=range]::-moz-range-thumb{background:#fff;border:2px solid #1F4553}
.page[data-page="assembly"] #asmLeft .runrot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--b-sub)}
.page[data-page="assembly"] #asmLeft .runrot span{display:flex;align-items:center;gap:6px}.page[data-page="assembly"] #asmLeft .runrot input{width:80px}
.page[data-page="assembly"] #asmLeft .runwarn,.page[data-page="assembly"] #asmLeft .asmjoin.bad{margin:0;padding:8px 10px;border:0;border-radius:12px;background:#FFF5E1;color:#7A4B00;font-size:12.5px;line-height:1.4}
.page[data-page="assembly"] #asmLeft .runchips button,.page[data-page="assembly"] #asmLeft .chips button{padding:6px 12px;border:1px solid var(--b-fline);border-radius:999px;background:var(--b-field);color:var(--b-sub);font-size:12.5px}
.page[data-page="assembly"] #asmLeft .chips button[aria-pressed="true"]{background:var(--b-sel);border-color:var(--b-sel);color:var(--b-selInk);font-weight:600}
.page[data-page="assembly"] #asmLeft .gkrow{display:flex;gap:6px}.page[data-page="assembly"] #asmLeft .gkrow button{width:28px;height:28px;padding:3px;border:1px solid var(--b-fline);border-radius:50%;background:var(--b-field)}
.page[data-page="assembly"] #asmLeft .gkrow button i{display:block;width:100%;height:100%;border-radius:50%}.page[data-page="assembly"] #asmLeft .gkrow button[aria-pressed="true"]{border-color:var(--b-pri);box-shadow:0 0 0 1px var(--b-pri)}
.page[data-page="assembly"] #asmLeft .runsaved{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.page[data-page="assembly"] #asmLeft .runtile{border:1px solid var(--b-fline);border-radius:10px;background:var(--b-field);padding:6px;font-size:12px;color:var(--b-ink)}
.page[data-page="assembly"] #asmLeft .runtile.on{border-color:var(--b-pri);box-shadow:inset 0 0 0 1px var(--b-pri)}
.page[data-page="assembly"] #asmLeft .runpn{display:flex;justify-content:space-between;align-items:center;margin:0;font-size:13px}
.page[data-page="assembly"] #asmLeft .runnone{margin:0;font-size:13px;color:var(--b-mute)}
/* middle: the slate stage */
.page[data-page="assembly"] .asmlive>.asmcenter{padding:0;border:0;border-radius:28px;background:var(--b-stage);box-shadow:none;overflow:hidden}
.page[data-page="assembly"] .asmvis,.page[data-page="assembly"] .asmvis.flat{background:transparent}
.page[data-page="assembly"] .asmtog{top:16px;right:16px;gap:8px;align-items:center}
.page[data-page="assembly"] .asmtog .seg{height:34px;border-color:var(--b-viewLine);background:transparent!important}
.page[data-page="assembly"] .asmtog .seg button{padding:0 14px!important;background:transparent!important;font-size:13px}
.page[data-page="assembly"] .asmtog .seg button+button{border-left-color:var(--b-viewLine)!important}
.page[data-page="assembly"] .asmtog .seg button[aria-pressed="true"]{background:var(--b-frost)!important;color:var(--b-frostInk)!important}
.page[data-page="assembly"] .asmtog .lbltog{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--b-viewLine);border-radius:50%;background:transparent!important;color:var(--b-sub)!important}
.page[data-page="assembly"] .asmtog .lbltog[aria-pressed="true"]{background:var(--b-frost)!important;color:var(--b-frostInk)!important;border-color:var(--b-frostLine)}
.page[data-page="assembly"] #asmHud{left:24px;right:24px;bottom:20px;padding:0;background:none;backdrop-filter:none;font-size:13px;color:var(--b-sub)}
.page[data-page="assembly"] #asmHud b{color:var(--b-ink);font-weight:600}
/* column 3: parts card, order card, sign in card */
.page[data-page="assembly"] .asmright{display:flex;flex-direction:column;gap:10px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.page[data-page="assembly"] #asmSum{display:flex;flex-direction:column;gap:10px}
.page[data-page="assembly"] .arcard{display:block;margin:0;padding:14px 16px!important;border:0!important;border-radius:16px!important;background:var(--b-card)!important;box-shadow:inset 0 0 0 1px var(--b-outline)!important;color:var(--b-ink)}
.page[data-page="assembly"] .arcard>h3{margin:0 0 8px;font:500 16px/24px "Geist",system-ui,sans-serif;letter-spacing:0;color:var(--b-ink)}
.page[data-page="assembly"] .arcard .asmq{margin:0;padding:0;border:0;background:none}
.page[data-page="assembly"] .asmitem{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border:0;border-top:1px solid var(--b-hair)}
.page[data-page="assembly"] .asmitem:first-child{border-top:0;padding-top:2px}
.page[data-page="assembly"] .asmitem>img,.page[data-page="assembly"] .asmitem>.athsvg{width:40px;height:40px;border-radius:50%;background:var(--b-frost);color:var(--b-frostInk);object-fit:contain;font-size:0;overflow:hidden;border:0}
.page[data-page="assembly"] .asmitem .aib b{display:block;font:500 13.5px/1.3 "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="assembly"] .asmitem .aib span{display:block;font-size:12px;line-height:1.4;color:var(--b-sub)}
.page[data-page="assembly"] .asmitem .aiq{text-align:right}.page[data-page="assembly"] .asmitem .aiq b{font:500 13px "Geist",system-ui,sans-serif;color:var(--b-ink)}.page[data-page="assembly"] .asmitem .aiq span{display:block;font-size:12px;color:var(--b-sub)}
.page[data-page="assembly"] .aorder{padding:0!important;overflow:hidden}
.page[data-page="assembly"] .aorder .og{padding:12px 16px}.page[data-page="assembly"] .aorder .og+.og{border-top:1px solid var(--b-hair)}
.page[data-page="assembly"] .aorder .ogh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0}
.page[data-page="assembly"] .aorder .ogh h4{margin:0;font:500 14px/20px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="assembly"] .aorder .ogh>b{font:500 14px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="assembly"] .aorder .ogs{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--b-sub)}.page[data-page="assembly"] .aorder .ogs b{font:600 15px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="assembly"] .aorder .asmstep{display:flex;align-items:center;height:36px;border:1px solid var(--b-fline);border-radius:999px;overflow:hidden;background:var(--b-field)}
.page[data-page="assembly"] .aorder .asmstep button{width:34px;height:100%;border:0;background:transparent;color:var(--b-sub);font-size:16px;cursor:pointer}
.page[data-page="assembly"] .aorder .asmstep input{width:52px;height:100%;border:0;background:transparent;color:var(--b-ink);text-align:center;font:500 14px "Geist",system-ui,sans-serif;-moz-appearance:textfield}
.page[data-page="assembly"] .aorder .atot{padding:12px 16px 16px;border-top:1px solid var(--b-hair);background:var(--b-card)}
.page[data-page="assembly"] .aorder #asmNote{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--b-sub)}.page[data-page="assembly"] .aorder #asmNote:empty{display:none}
.page[data-page="assembly"] .aorder .row{display:flex;justify-content:space-between;line-height:26px;font-size:13.5px;color:var(--b-sub);border:0;padding:0;margin:0}
.page[data-page="assembly"] .aorder .row b{font:500 13.5px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.page[data-page="assembly"] .aorder .row.tot{align-items:baseline;margin-top:6px;padding-top:10px;border-top:1px solid var(--b-hair);color:var(--b-ink);font:600 15px "Geist",system-ui,sans-serif}
.page[data-page="assembly"] .aorder .row.tot b{font:500 26px/1 "Geist",system-ui,sans-serif;letter-spacing:-.01em}
.page[data-page="assembly"] .asmctas{display:flex!important;flex-direction:column;gap:8px;margin-top:12px!important}
.page[data-page="assembly"] .asmctas .btn,.page[data-page="assembly"] #asmSign .btn{width:100%;height:46px;margin:0;border:0;border-radius:999px;background:var(--b-pri);color:#fff;font:500 15px "Geist",system-ui,sans-serif;box-shadow:none;display:grid;place-items:center}
.page[data-page="assembly"] .asmctas .btn:hover:not(:disabled),.page[data-page="assembly"] #asmSign .btn:hover{background:var(--b-priH)}
.page[data-page="assembly"] .asmctas .btn.ghost{height:40px;border:1px solid var(--b-fline);background:var(--b-card);color:var(--b-pri);font-size:14px}
.page[data-page="assembly"] .asmctas .btn.ghost:hover:not(:disabled){background:var(--b-sel)}
.page[data-page="assembly"] .asmctas .btn:disabled{opacity:.45}
.page[data-page="assembly"] #asmSign{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px}
body.signed .page[data-page="assembly"] #asmSign{display:none!important}
.page[data-page="assembly"] #asmSign h3{margin:0}.page[data-page="assembly"] #asmSign p{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--b-sub)}
/* board below and the gate */
.page[data-page="assembly"] .asmboard .asmcol,.page[data-page="assembly"] .asmboard .asmcard{border:1px solid #E2E5E9;border-radius:16px;background:var(--b-card);box-shadow:none}
.page[data-page="assembly"] .asmboard h3{font:500 16px/1.3 "Geist",system-ui,sans-serif;letter-spacing:0}
.page[data-page="assembly"] .asmboard .btn.sm{border-radius:999px}
.page[data-page="assembly"] .asmmodalcard{border-radius:24px}
.page[data-page="assembly"] .asmmodalcard .btn{border-radius:999px}
@media (max-width:1100px){.page[data-page="assembly"] .asmlive{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.page[data-page="assembly"] .asmlive>.asmcenter{grid-column:1/-1}}
@media (max-width:860px){.page[data-page="assembly"] .asmlive{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.page[data-page="assembly"] .asmdesk{padding:0 12px}.page[data-page="assembly"] #asmBar,.page[data-page="assembly"] .asmlive{max-width:560px;margin-left:auto;margin-right:auto}
 .page[data-page="assembly"] .asmlive>.asmcenter{height:440px;min-height:340px;border-radius:20px}.page[data-page="assembly"] #asmTubeBar .fw,.page[data-page="assembly"] #asmBar .bfields>.fw{flex:1 1 44%}.page[data-page="assembly"] #asmTubeBar .tf>select{width:100%;max-width:none}.page[data-page="assembly"] #asmName{font-size:18px}}

.page[data-page="assembly"] #asmBar #f_tshape{padding:0!important;margin:0!important;border:0!important}.page[data-page="assembly"] #asmBar #asmTubeBar select{font-size:14px!important;height:40px!important;padding:0 32px 0 12px!important}.page[data-page="assembly"] .asmvis.flat #asmHud{display:none}
.page[data-page="assembly"] #asmBar #asmTubeBar select,.page[data-page="assembly"] #asmBar #f_tshape select{background:var(--b-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345464F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 9px center/16px!important;color:var(--b-ink)!important;border-color:#D5D9DE!important;width:auto!important;min-width:110px}
@media (max-width:700px){.page[data-page="assembly"] #asmBar #f_tshape select{width:100%!important}}.page[data-page="assembly"] #asmBar #f_tshape label{color:inherit}

.page[data-page="assembly"] #asmBar .btitle{flex:0 1 240px}
.page[data-page="assembly"] #asmName{background:transparent!important;box-shadow:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits button[aria-pressed="true"]{background:#2A323C;color:var(--b-ink)}:root:not([data-theme="light"]) :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) :is(.bfields .tf>select,.tfu .bunits,#asmReset){border-color:#3A4450!important}}
:root[data-theme="dark"] :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .tfu .bunits button[aria-pressed="true"]{background:#2A323C;color:var(--b-ink)}:root[data-theme="dark"] :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) :is(.bfields .tf>select,.tfu .bunits,#asmReset){border-color:#3A4450!important}
.page[data-page="assembly"] #asmBar,.page[data-page="assembly"] #asmBar .bfields{min-width:0;max-width:100%;box-sizing:border-box}
@media (max-width:700px){.page[data-page="assembly"] #asmBar .bfields .tf{display:block}.page[data-page="assembly"] #asmBar .bfields .tf>select{width:100%!important;max-width:none;min-width:0}.page[data-page="assembly"] #asmBar .bfields{flex:1 1 100%}}

/* Assembly top bar: one row, tighter fields, all 40px tall. Reset sits with save and open beside the name. */
.page[data-page="assembly"] #asmBar .bfields{flex-wrap:nowrap;gap:8px}
.page[data-page="assembly"] #asmBar .bfields .tf>select,.page[data-page="assembly"] #asmBar #asmTubeBar .tf>select,.page[data-page="assembly"] #asmBar #f_tshape select{height:40px!important;line-height:38px;min-width:0!important;width:auto!important;padding:0 26px 0 10px!important;font-size:13.5px!important;background-position:right 6px center!important;background-size:14px!important}
.page[data-page="assembly"] #asmBar #asmInd{max-width:132px}.page[data-page="assembly"] #asmBar #asmMedia{max-width:100px}
.page[data-page="assembly"] #asmBar #f_tshape select{max-width:110px}
.page[data-page="assembly"] #asmBar [data-rt="kind"]{max-width:150px}.page[data-page="assembly"] #asmBar [data-rt="size"]{max-width:170px}.page[data-page="assembly"] #asmBar [data-rcolsel]{max-width:96px}
.page[data-page="assembly"] #asmBar .tfu .bunits button{min-width:34px;padding:0 8px}
.page[data-page="assembly"] #asmBar .btitle{flex:0 1 220px;min-width:140px}
@media (max-width:1180px){.page[data-page="assembly"] #asmBar .bfields{flex-wrap:wrap}}
@media (max-width:700px){.page[data-page="assembly"] #asmBar .bfields .tf>select,.page[data-page="assembly"] #asmBar #asmTubeBar .tf>select{width:100%!important;max-width:none!important}}

.page[data-page="assembly"] #asmLeft .runhead .enddot[data-end="D"]{background:#2F6FD6}.page[data-page="assembly"] #asmLeft .runhead .enddot[data-end="E"]{background:#BFD9FF;color:#0E2463}
.page[data-page="assembly"] #asmLeft .runadd{display:grid;place-items:center;align-self:flex-start;width:36px;height:36px;margin:2px 0 4px 12px;padding:0;border:1.5px dashed #9AA8B6;border-radius:50%;background:transparent;color:var(--b-sub);cursor:pointer}
.page[data-page="assembly"] #asmLeft .runadd span{font:400 22px/1 "Geist",system-ui,sans-serif;margin-top:-2px}
.page[data-page="assembly"] #asmLeft .runadd:hover{border-color:var(--b-pri);color:var(--b-pri);background:rgba(255,255,255,.6)}
.page[data-page="assembly"] #asmLeft .runrm{display:block;margin:0 12px 10px;padding:4px 0;font-size:12.5px;color:var(--b-mute)}
.page[data-page="assembly"] #asmLeft .runrm:hover{color:var(--bad,#B3261E)}
.page[data-page="assembly"] #asmLeft .runsplit{margin:0;font-size:13px;line-height:1.45;color:var(--b-sub)}

.page[data-page="assembly"] #asmBar #asmInd{width:118px!important;max-width:118px!important}
.page[data-page="assembly"] #asmBar #asmMedia{width:88px!important;max-width:88px!important}
.page[data-page="assembly"] #asmBar #f_tshape select{width:104px!important;max-width:104px!important}
.page[data-page="assembly"] #asmBar [data-rt="kind"]{width:150px!important;max-width:150px!important}
.page[data-page="assembly"] #asmBar [data-rcolsel]{width:96px!important;max-width:96px!important}
@media (max-width:700px){.page[data-page="assembly"] #asmBar :is(#asmInd,#asmMedia,[data-rt="kind"],[data-rcolsel]),.page[data-page="assembly"] #asmBar #f_tshape select{width:100%!important;max-width:none!important}}

/* Assembly top bar on the same three columns as the workspace: the name over column 1, the fields start at the middle card. */
@media (min-width:1101px){.page[data-page="assembly"] #asmBar{display:grid!important;grid-template-columns:minmax(280px,316px) minmax(0,1fr) minmax(300px,336px);column-gap:12px;align-items:center}
 .page[data-page="assembly"] #asmBar .btitle{grid-column:1;min-width:0}
 .page[data-page="assembly"] #asmBar .bfields{grid-column:2;min-width:0;padding-top:6px}
 .page[data-page="assembly"] #asmBar .bright{grid-column:3;justify-self:end;margin:0}}

/* O-ring: material first, then the color swatches on a row of their own */
.page[data-page="assembly"] #asmLeft .runor{display:flex;flex-direction:column;gap:12px}
.page[data-page="assembly"] #asmLeft .runor .row2{display:flex;flex-direction:column;gap:12px}
.page[data-page="assembly"] #asmLeft .runor .row2>.tf{order:1}.page[data-page="assembly"] #asmLeft .runor .row2>.runfld{order:2}
.page[data-page="assembly"] #asmLeft .runor .gkrow{flex-wrap:nowrap}

/* ===== Builder and assembler widths =====
   1280+     three columns as designed.
   900-1279 three columns, side columns a little narrower.
   under 900 the view runs full width on top, with columns 1 and 3 side by side under it (one column on phones). */
@media (min-width:900px) and (max-width:1279px){
 .page[data-page="build"] .cfg{grid-template-columns:minmax(248px,276px) minmax(0,1fr) minmax(260px,292px)!important;gap:10px}
 .page[data-page="assembly"] .asmlive{grid-template-columns:minmax(248px,276px) minmax(0,1fr) minmax(260px,292px)!important;gap:10px}
 .page[data-page="assembly"] #asmBar{display:grid!important;grid-template-columns:minmax(248px,276px) minmax(0,1fr) minmax(260px,292px)!important;column-gap:10px;align-items:center}
 .page[data-page="assembly"] #asmBar .btitle{grid-column:1;min-width:0;flex:none}.page[data-page="assembly"] #asmBar .bfields{grid-column:2/4;min-width:0;padding-top:6px;flex-wrap:wrap}.page[data-page="assembly"] #asmBar .bright{display:none}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .ecard,.page[data-page="assembly"] #asmLeft .runsec{padding-left:10px;padding-right:10px}
 :is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) :is(.rcard,.arcard){padding-left:14px!important;padding-right:14px!important}
}
/* 900-1023: three columns still, with narrower sides so the view keeps about 380px. */
@media (min-width:900px) and (max-width:1023px){
 .page[data-page="build"] .cfg{grid-template-columns:minmax(228px,244px) minmax(0,1fr) minmax(236px,252px)!important}
 .page[data-page="assembly"] .asmlive,.page[data-page="assembly"] #asmBar{grid-template-columns:minmax(228px,244px) minmax(0,1fr) minmax(236px,252px)!important}
}
@media (min-width:900px) and (max-width:1100px){
 .page[data-page="build"] .cfg{align-items:start}
 .page[data-page="build"] .cfg>.center{grid-column:auto;order:0;position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);max-height:none;min-height:460px}
 .page[data-page="build"] .cfg>aside.side{position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);max-height:calc(calc(100dvh / var(--z,1)) - 96px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
 .page[data-page="assembly"] .asmlive>.asmcenter{grid-column:auto;order:0;position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);min-height:460px}
 .page[data-page="assembly"] .asmlive>.asmleftcol,.page[data-page="assembly"] .asmlive>.asmright{position:sticky;top:72px;height:calc(calc(100dvh / var(--z,1)) - 96px);max-height:calc(calc(100dvh / var(--z,1)) - 96px);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;order:0}
}

@media (max-width:1279px){
 .page[data-page="build"] .tyrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .page[data-page="build"] .tyrow .seg button{padding:0 6px!important;font-size:12.5px}
 .page[data-page="build"] .tsd>summary{font-size:13px;white-space:nowrap}
 .page[data-page="build"] .tsd>summary em{display:none}
}

.page[data-page="build"] .tyrow>.tf{min-width:0}.page[data-page="build"] .tyrow .tf>select{min-width:0!important;width:100%!important;max-width:100%!important}

@media (min-width:861px) and (max-width:899px){.page[data-page="assembly"] .asmlive{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:start}
 .page[data-page="assembly"] .asmlive>.asmcenter{grid-column:1/-1;order:-1;position:relative;top:0;height:clamp(380px,calc(56vh / var(--z,1)),560px)}
 .page[data-page="assembly"] .asmlive>.asmleftcol,.page[data-page="assembly"] .asmlive>.asmright{order:0;position:static;height:auto;max-height:none;overflow:visible}}

.page[data-page="build"] .szhd2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.page[data-page="build"] .szunits{display:inline-flex;height:30px;border:1px solid #D5D9DE;border-radius:999px;overflow:hidden;background:var(--b-field)}
.page[data-page="build"] .szunits button{min-width:36px;padding:0 10px;border:0;background:transparent;color:var(--b-sub);font:500 12.5px "Geist",system-ui,sans-serif;cursor:pointer}
.page[data-page="build"] .szunits button+button{border-left:1px solid #D5D9DE}
.page[data-page="build"] .szunits button[aria-pressed="true"]{background:#EEF0F3;color:var(--b-ink);font-weight:600}
/* smaller part and assembly names, shorter assembly Material field */
.page[data-page="build"] .bname,.page[data-page="build"] #partName,.page[data-page="assembly"] #asmName{font-size:17px!important;letter-spacing:-.01em}
.page[data-page="assembly"] #asmBar [data-rt="kind"]{width:124px!important;max-width:124px!important}

/* End card, simpler: Size alone in the card; custom size, extra length and every dimension live together in the fold. */
.page[data-page="build"] .szstatic{box-sizing:border-box;display:flex;align-items:center;height:44px;padding:0 12px;border:1px solid var(--b-fline);border-radius:6px;background:var(--b-sel);color:var(--b-selInk);font:500 14px "Geist",system-ui,sans-serif}
.page[data-page="build"] .tsdb .szfr{height:44px}
.page[data-page="build"] .tsdb .szfv input{font-size:15px}
.page[data-page="build"] .tsdb .szbase{margin:-6px 0 0}
.page[data-page="build"] .szxl .tf{width:50%}
.page[data-page="build"] .dimgrid .tf>em{display:none}
.page[data-page="build"] .dimgrid .tf>input{padding:0 10px!important;text-align:left}

.page[data-page="build"] .szxl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.page[data-page="build"] .szxl .tf{width:auto}
.page[data-page="build"] .tsdb .szfr{gap:0;padding:0 2px}
.page[data-page="build"] .tsdb .szfr button{width:26px;height:26px;border-radius:4px;background:transparent;color:var(--b-sub);font-size:16px}
.page[data-page="build"] .tsdb .szfr button:hover{background:#EEF0F3;color:var(--b-ink)}
.page[data-page="build"] .tsdb .szfv{gap:3px;justify-content:center}
.page[data-page="build"] .tsdb .szfv input{border:0!important;box-shadow:none!important;background:transparent!important;height:auto;padding:0;width:100%;text-align:center;font:400 14px "Geist",system-ui,sans-serif}
.page[data-page="build"] .tsdb .szfv>span{font-size:12px}
.page[data-page="build"] .tsdb .szbase{margin:0;font-size:12px;line-height:1.4}

.page[data-page="build"] .szstatic{background:transparent!important;color:var(--b-ink)!important;border-color:#D5D9DE!important;font-weight:400!important}
.page[data-page="build"] .tf:has(>.szstatic)>span{background:#F9FAFB}
/* Save and open sit beside the part, assembly or kit name, which takes the room that is left. The block is as wide as the first
   column below it (--c1, measured by script), so the name and its icons line up with that column at every width. */
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar[style*="--cg"]{column-gap:var(--cg)!important}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .bbar[style*="--c1"] .btitle{flex:0 0 var(--c1)!important;width:var(--c1)!important;max-width:100%;min-width:0!important;box-sizing:border-box}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle{display:flex;align-items:center;gap:8px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle>:is(.bname,#partName,#asmName,#kitName){flex:1 1 auto;min-width:0}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle .bacts{flex:none;gap:4px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle .bacts button{width:32px;height:32px}
:is(.page[data-page="build"],.page[data-page="assembly"],.page[data-page="kitting"]) .btitle .bacts svg{width:16px;height:16px}
.page[data-page="build"] .bname,.page[data-page="build"] #partName,.page[data-page="assembly"] #asmName,.page[data-page="kitting"] #kitName{font-size:15px!important;letter-spacing:-.005em}
/* Signed in, Kitting joins Build and Assembly in the nav. */
body:not(.signed) nav .links>a.kitnav{display:none!important}
/* Motorsport: AN and INV links under the fluid systems, headed one step below the section. */
.page[data-page="motorsport"] h2.motoan{margin:56px 0 4px!important;font-size:28px}
.page[data-page="motorsport"] .motolinks{margin-top:18px}
.page[data-page="motorsport"] .motolinks h3{font-size:16px!important;line-height:1.3;margin:0 0 6px}
/* Kitting: three columns like the builder. Contents on the left, a 2D picture of the kit in the middle (kit, label, sheet),
   packing, labels, paperwork and the price on the right. Below 1024px the picture goes on top. */
.page[data-page="kitting"] #kitName{display:block;width:100%;box-sizing:border-box;padding:2px 0;border:0;border-bottom:1px dashed transparent;border-radius:0;background:transparent;color:var(--b-ink);font:500 21px/1.3 "Geist",system-ui,sans-serif;letter-spacing:-.015em}
.page[data-page="kitting"] #kitName::placeholder{color:var(--b-ink);opacity:1}
.page[data-page="kitting"] #kitName:hover{border-bottom-color:#D5D9DE}
.page[data-page="kitting"] #kitName:focus{outline:0;border-bottom-color:var(--b-pri)}
.page[data-page="kitting"] #kitName,.page[data-page="kitting"] #kitName:hover{background:transparent!important;border-top:0!important;border-left:0!important;border-right:0!important;padding:2px 0!important}
.page[data-page="kitting"] .bfields .fw{flex:0 1 170px;min-width:120px}
.page[data-page="kitting"] .bfields .fw.kwide{flex-basis:220px}
.kitcfg{display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(290px,330px);gap:12px;align-items:start;margin:0 0 28px}
.kitcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.kitleft{padding:8px;border-radius:16px;background:var(--b-pane)}
.kitcenter{position:sticky;top:72px;display:flex;flex-direction:column;height:calc(calc(100dvh / var(--z,1)) - 96px);min-height:460px;max-height:780px;border-radius:28px;background:var(--b-stage);overflow:hidden}
.kitcenter .kittabs{position:absolute;top:14px;right:14px;z-index:2}
.kitcenter .khud{position:absolute;left:18px;bottom:14px;right:18px;z-index:2;color:var(--b-sub);font-size:12.5px;line-height:1.4;pointer-events:none}
.kitstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:54px 22px 44px}
.kitstage>svg{width:100%;height:100%;max-height:100%;color:var(--b-ink);overflow:visible}
.kcard{display:block;margin:0;padding:12px 14px;border-radius:16px;background:var(--b-card);box-shadow:inset 0 0 0 1px var(--b-outline);color:var(--b-ink)}
.kcard>h3,.khead h3{margin:0;font:500 15px/22px "Geist",system-ui,sans-serif;color:var(--b-ink)}
.khead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px}
.khead small,.kcard .kspec{color:var(--b-mute);font-size:12px;line-height:1.4}
.kcard .kspec{margin:6px 0 0}
.kcard>h3{margin-bottom:10px}
.kcard .tf+.tf,.kcard .tf+.kck,.kcard .kck+.tf{margin-top:12px}
.kcard textarea{display:block;width:100%;box-sizing:border-box;min-height:84px;margin-top:10px;padding:8px 10px;border:1px solid var(--b-fline);border-radius:8px;background:var(--b-field);color:var(--b-ink);font:13px/1.45 "Geist",system-ui,sans-serif;resize:vertical}
.kcard textarea:focus{outline:0;border-color:var(--b-pri)}
.kck{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:13px;line-height:1.35;color:var(--b-ink);cursor:pointer}
.kck input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--b-pri)}
.kck small{display:block;color:var(--b-mute);font-size:11.5px}
.kchips{display:flex;flex-wrap:wrap;gap:6px}
.kchips label{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--b-fline);border-radius:999px;font-size:12.5px;cursor:pointer;background:var(--b-field)}
.kchips label:has(input:checked){border-color:var(--b-pri);background:var(--b-sel);color:var(--b-selInk)}
.kchips input{width:13px;height:13px;margin:0;accent-color:var(--b-pri)}
.krow{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--b-hair)}
.krow:first-child{border-top:0;padding-top:0}
.kth{display:flex;align-items:center;justify-content:center;width:52px;height:42px;border-radius:8px;background:var(--b-cardA);box-shadow:inset 0 0 0 1px var(--b-hair);color:var(--b-ink);overflow:hidden}
.kth svg{width:44px;height:34px}
.kinfo{min-width:0}
.kinfo b{display:block;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kinfo small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--b-mute);font-size:11.5px;line-height:1.35}
.kacts{grid-column:2/-1;display:flex;align-items:center;gap:10px}
.kacts .link{font-size:12px}
.kstep{display:inline-flex;align-items:center;border:1px solid var(--b-fline);border-radius:8px;overflow:hidden;background:var(--b-field)}
.kstep button{width:26px;height:28px;border:0;background:none;color:var(--b-ink);font-size:15px;cursor:pointer}
.kstep button:hover{background:var(--b-sel)}
.kstep input{width:38px;height:28px;border:0;border-left:1px solid var(--b-hair);border-right:1px solid var(--b-hair);background:none;color:var(--b-ink);text-align:center;font:600 13px "Geist",system-ui,sans-serif;-moz-appearance:textfield}
.kstep input::-webkit-inner-spin-button,.kstep input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.kperkit{color:var(--b-mute);font-size:11.5px}
.kline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 8px;padding:12px 0 8px;border-top:1px solid var(--b-hair)}
.kline:first-child{border-top:0;padding-top:4px}
.kline .kfull{grid-column:1/-1}
.kline .kacts{grid-column:1/-1}
.kline .tf>input[type=text]{padding-right:10px}
.kadd{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kadd button{padding:6px 10px;border:1px dashed var(--b-fhover);border-radius:8px;background:none;color:var(--b-pri);font:500 12.5px "Geist",system-ui,sans-serif;cursor:pointer}
.kadd button:hover{background:var(--b-sel)}
.kempty{margin:0;color:var(--b-mute);font-size:12.5px;line-height:1.45}
.kpick{margin-top:10px;padding:10px;border-radius:12px;background:var(--b-cardA);box-shadow:inset 0 0 0 1px var(--b-hair)}
.kpick[hidden]{display:none}
.kpick .krow{grid-template-columns:52px minmax(0,1fr) auto}
.kpick .kcode{display:flex;gap:6px}
.kpick .kcode input{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--b-fline);border-radius:8px;background:var(--b-field);color:var(--b-ink);font:12px "IBM Plex Mono",monospace}
.kpicklist{max-height:300px;overflow:auto}
.korder{padding:0!important;overflow:hidden}
.korder .og{padding:12px 16px}
.korder .og+.og{border-top:1px solid var(--b-hair)}
.korder .row{display:flex;justify-content:space-between;gap:10px;margin:4px 0;font-size:13px;color:var(--b-sub)}
.korder .row b{color:var(--b-ink);font-weight:600}
.korder .row.big{margin-top:8px;font-size:15px;color:var(--b-ink)}
.korder .row.big b{font-size:18px}
.korder .row.tot{padding-top:8px;margin-top:8px;border-top:1px solid var(--b-hair);color:var(--b-ink)}
.korder .ctas{display:flex;gap:8px;margin-top:12px}
.korder .ctas .btn{flex:1;padding:10px 12px}
.korder #kitNote{margin:8px 0 0;font-size:12px;color:var(--b-mute);line-height:1.4}
.korder #kitNote:empty{display:none}
.kitright .guestquote{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;max-width:none;padding:12px 14px}
.kitright .guestquote h3{margin:0;font:600 14px/1.3 "Geist",system-ui,sans-serif}
.kitright .guestquote .spec{grid-column:1;margin:0;font-size:12px}
.kitright .guestquote .btn{grid-column:2;grid-row:1/3;margin:0;padding:7px 12px;font-size:13px}
body:not(.signed) .korder{display:none!important}
.kitabout{max-width:760px;margin:6px auto 48px;padding:0 4px;color:var(--b-sub);font-size:14px;line-height:1.55}
.kitabout h2{margin:0 0 6px;font:600 18px/1.3 "Geist",system-ui,sans-serif;color:var(--b-ink)}
.kitabout p{margin:0 0 8px}
/* Cart: a kit's parts are listed under it and change with the number of kits */
.citem.kpart{margin-left:18px;padding-left:10px;border-left:2px solid var(--line)}
.citem .kitq{font-size:12px;color:var(--mute)}
.cthumb.kico svg{width:100%;height:100%}
@media (max-width:1279px){.kitcfg{grid-template-columns:minmax(270px,300px) minmax(0,1fr) minmax(270px,300px)}}
@media (min-width:900px) and (max-width:1023px){.kitcfg{grid-template-columns:minmax(236px,256px) minmax(0,1fr) minmax(246px,266px);gap:10px}}
@media (max-width:899px){.kitcfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kitcenter{grid-column:1/-1;order:-1;position:relative;top:0;height:440px;min-height:340px;border-radius:20px}}
@media (max-width:700px){.kitcfg{grid-template-columns:minmax(0,1fr)}.kitcenter{height:380px}.page[data-page="kitting"] .bfields .fw{flex:1 1 44%}.kitstage{padding:50px 10px 52px}}