: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}
#asmBar .asmtube #f_treset{align-self:stretch;align-items:flex-end}
#asmReset{display:grid;place-items:center;width:32px;height:32px;padding:0;margin-top:auto;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;cursor:pointer}#asmReset:hover{background:rgba(255,255,255,.12)}#asmReset:focus-visible{outline:2px solid var(--pickHi);outline-offset:2px}#asmReset svg{width:18px;height:18px}
.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(100dvh - 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,70vh);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(100dvh - 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(78vh,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}#asmBar .asmtube #f_treset{flex:none}
#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(100vh - 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(100dvh - 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(100dvh - 96px),var(--endsH,100dvh));max-height:calc(100dvh - 96px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;
 }
 .page[data-page="build"] .cfg>.center{position:sticky;top:72px;height:min(calc(100dvh - 96px),max(460px,var(--endsH,100dvh)));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(100dvh - 96px);max-height:calc(100dvh - 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:1340px){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:70vh;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{display:none}
: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:1px solid var(--b-fline);border-radius:50%;background:var(--b-field);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);border-color:var(--b-fhover)}
: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}
.page[data-page="assembly"] #f_treset{display:flex;align-items:center}
.page[data-page="assembly"] #asmReset{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #D5D9DE;border-radius:50%;background:var(--b-field);color:var(--b-sub);cursor:pointer}
.page[data-page="assembly"] #asmReset:hover{color:var(--b-pri);border-color:#A9B0B8}.page[data-page="assembly"] #asmReset svg{width:18px;height:18px}
/* 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. No reset button; tighter fields, all 40px tall. */
.page[data-page="assembly"] #f_treset{display:none!important}
.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 .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.
   1024-1279 three columns, side columns a little narrower.
   under 1024 the view runs full width on top, with columns 1 and 3 side by side under it (one column on phones). */
@media (min-width:1024px) 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);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}
}
@media (min-width:1024px) 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(100dvh - 96px);max-height:none;min-height:460px}
 .page[data-page="build"] .cfg>aside.side{position:sticky;top:72px;height:calc(100dvh - 96px);max-height:calc(100dvh - 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(100dvh - 96px);min-height:460px}
 .page[data-page="assembly"] .asmlive>.asmleftcol,.page[data-page="assembly"] .asmlive>.asmright{position:sticky;top:72px;height:calc(100dvh - 96px);max-height:calc(100dvh - 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:1023px){.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,56vh,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. */
: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(100dvh - 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 (max-width:1023px){.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}}