/* system pages (/systems/<key>/) and range pages (/ranges/<key>/): loaded after products.css */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:14px 0;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.crumbs a:hover{color:var(--text,#f2f3f5)}.crumbs b{color:var(--text,#f2f3f5);font-weight:700}
.sHero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding-block:22px 30px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% -20%,rgba(221,36,43,.2),transparent 55%)}
.sHero h1.cond{font-size:clamp(40px,5.2vw,80px);margin-top:10px}
.sHero h1 span{color:var(--redT)}
.sHero .lead{margin-top:12px;max-width:640px}
.sHeroPic{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b0d10;aspect-ratio:2/1}
.sHeroPic img{width:100%;height:100%;object-fit:cover;display:block}
.stdChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.stdChips span{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--panel)}
.secAct{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.secAct .btn{min-height:50px;font-size:13px;padding:0 18px}
/* build-up steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:20px}
.step{display:grid;grid-template-columns:auto 56px 1fr;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:76px;transition:.2s}
.step:hover{border-color:var(--red)}
.step i{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;font-style:normal;color:var(--redT)}
.step .sp{position:relative;width:56px;height:56px;border-radius:8px;background:#fff;overflow:hidden;display:block}
.step .sp img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
.step b{display:block;font:800 16px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.step small{display:block;color:var(--dim);font-size:12.5px;line-height:1.3;margin-top:3px}
/* 3D renders */
.r3Grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.r3{position:relative;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;aspect-ratio:4/3}
.r3 img{width:100%;height:100%;object-fit:cover;display:block}
.r3 figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(5,6,7,.92));display:flex;flex-direction:column;gap:2px}
.r3 b{font:800 20px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.r3 span{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
/* CAD library */
.cadGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.cadT{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 8px 10px;color:var(--text,#f2f3f5);cursor:zoom-in;transition:.2s;font:inherit}
.cadT:hover{border-color:var(--red)}
.cadT.mine{border-color:rgba(221,36,43,.55)}
.cadT img{width:100%;height:auto;aspect-ratio:520/368;object-fit:cover;border-radius:8px;background:#fff;display:block}
.cadT .cc{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redT);margin-top:4px}
.cadT b{font:800 16px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.cadT small{color:var(--dim);font-size:12.5px}
.cadMore{display:none}
/* chips + system links */
.chipRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font:600 13px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;color:var(--dim);white-space:nowrap}
.chip:hover{color:var(--text,#f2f3f5);border-color:#fff}.chip.on{background:#fff;color:#000;border-color:#fff}
.sysLGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.sysL{display:grid;grid-template-columns:96px 1fr 18px;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;min-height:72px;transition:.2s}
.sysL:hover{border-color:var(--red)}
.sysL img{width:96px;height:56px;object-fit:cover;border-radius:8px;display:block}
.sysL b{display:block;font:800 16px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.sysL small{color:var(--dim);font-size:12px}
.sysL i{font-style:normal;color:var(--dim)}
/* lightbox for CAD sheets */
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,6,7,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top,0px)) 14px 14px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:calc(100% - 70px);background:#fff;border-radius:8px}
.lb .cap{margin-top:10px;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text,#f2f3f5);text-align:center}
.lb button{position:absolute;right:14px;top:max(14px,env(safe-area-inset-top,0px));width:50px;height:50px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text,#f2f3f5);font-size:22px;cursor:pointer}
@media (max-width:1250px){.sysLGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1100px){.cadGrid{grid-template-columns:repeat(3,1fr)}.sysLGrid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.sHero{grid-template-columns:1fr;gap:16px}.sHeroPic{order:-1}}
/* phone: about one screen per section */
@media (max-width:700px){
  .crumbs{font-size:12px;padding-block:10px 0;gap:6px}
  .sHero{padding-block:12px 18px;gap:12px}
  .sHeroPic{aspect-ratio:2.1/1;border-radius:10px}
  .sHero h1.cond{font-size:clamp(34px,10vw,46px);margin-top:8px}
  .sHero .lead{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .stdChips{margin-top:10px}.stdChips span{font-size:12px;padding:5px 6px}
  .secAct{margin-top:12px}.secAct .btn{flex:1 1 0;padding:0 8px;font-size:12px;white-space:nowrap}
  body.sysPage .sec .lead{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
  .step{grid-template-columns:auto 40px 1fr;gap:6px;padding:6px;min-height:56px}
  .step .sp{width:40px;height:40px}.step b{font-size:13.5px}.step small{display:none}.step i{font-size:12px}
  .r3Grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .r3:first-child{grid-column:span 2;aspect-ratio:2/1}
  .r3 b{font-size:16px}.r3 span{font-size:12px}.r3 figcaption{padding:20px 10px 8px}
  .r3:not(:first-child) span{display:none}
  .cadGrid{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .cadT{padding:6px 6px 8px}.cadT b{font-size:14px}.cadT small{display:none}.cadT .cc{font-size:12px}
  .cadGrid:not(.all) .cadT.more{display:none}
  .cadMore{display:flex}
  .cadGrid.all + .cadMore{display:none}
  .chipRow{gap:6px;margin-top:12px}.chip{font-size:12.5px;padding:0 10px;min-height:40px}
  .sysLGrid{grid-template-columns:1fr;gap:6px;margin-top:14px}
  .sysL{grid-template-columns:72px 1fr 16px;min-height:60px;padding:6px}.sysL img{width:72px;height:46px}
}

/* CAD tiles: titles hold two lines so every tile in a row is the same height */
.cadT b{height:2.2em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cadT .cc{white-space:nowrap;overflow:hidden;text-overflow:clip}
@media (max-width:700px){.cadT .cc{font-size:12px;letter-spacing:.04em}}

/* 3D drawing heroes: the whole drawing on a white card, never cropped (James, 10 Nov 2026) */
.sHeroPic.d3{aspect-ratio:4/3;background:#fff}
.sHeroPic.d3 img{object-fit:contain}
.sysL img[src*="/3d/"]{object-fit:contain;background:#fff}
/* On site: real job photos */
.osGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.osGrid.n1{grid-template-columns:minmax(0,560px)}
.osGrid.n2{grid-template-columns:repeat(2,1fr)}
.os{position:relative;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0d10;aspect-ratio:3/2}
.os img{width:100%;height:100%;object-fit:cover;display:block}
.os figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(5,6,7,.92));font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.sHeroPic.d3{aspect-ratio:16/10}}
@media (max-width:700px){
  .sHeroPic.d3{aspect-ratio:16/10}
  .osGrid,.osGrid.n2{grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .osGrid.n3 .os:first-child{grid-column:span 2;aspect-ratio:2/1}
  .osGrid.n1{grid-template-columns:1fr}
  .os figcaption{font-size:12px;padding:16px 8px 7px}
}

/* ---- 10 Nov (James, phone review): 3D drawing box takes the drawing's shape (inline aspect-ratio), drawing fills it ---- */
.sHeroPic.d3{background:#fff}
.sHeroPic.d3 img{object-fit:contain;width:100%;height:100%}
@media (min-width:901px){.sHeroPic.d3{max-height:560px;justify-self:end;width:100%;max-width:640px}}
/* phone and tablet: heading full width, then the stats stacked on the left with the drawing on the right, then the buttons */
@media (max-width:900px){
  .sHero{display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,44vw,300px);column-gap:10px;row-gap:0;align-items:start}
  .sHeroTxt{display:contents}
  .sHeroTxt>.tag{grid-row:1;grid-column:1/-1}
  .sHeroTxt>h1{grid-row:2;grid-column:1/-1}
  .sHeroTxt>.lead{grid-row:3;grid-column:1/-1}
  .sHeroTxt>.stdChips{grid-row:4;grid-column:1/-1}
  .sHeroTxt>.pStats{grid-row:5;grid-column:1;flex-direction:column;flex-wrap:nowrap;gap:6px;margin-top:12px;align-self:center}
  .sHeroTxt>.pStats div{flex:none;padding:10px 12px}
  .sHeroPic,.sHeroPic.d3{order:0;grid-row:5;grid-column:2;margin-top:12px;align-self:center;width:100%;aspect-ratio:auto}
  .sHeroPic.d3{height:auto}
  .sHeroPic:not(.d3){aspect-ratio:1/1}
  .sHeroTxt>.secAct{grid-row:6;grid-column:1/-1}
}
.prodMore[hidden]{display:none!important}

/* ================= chat 02, 10 Nov 2026 ================= */
/* "Real jobs": the row is always full. Photos, then project cards, then a "your job next" tile takes any spare cells
   (was: one 560 px photo beside an empty half on desktop). */
.osGrid,.osGrid.n1,.osGrid.n2{grid-template-columns:repeat(3,minmax(0,1fr))}
.os.proj{aspect-ratio:auto;display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--panel)}
.os.proj h3{font:800 26px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.os.proj .pw{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.os.proj .pm{color:var(--dim);font-size:15px;line-height:1.45}
.os.proj ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.os.proj li{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--panel)}
.os.proj.cta{background:linear-gradient(160deg,#1b0d0e,var(--panel) 60%);border-color:rgba(221,36,43,.45);justify-content:center}
.os.proj.cta.s2{grid-column:span 2}
.os.proj.cta .btn{min-height:50px;font-size:13px;align-self:flex-start;margin-top:6px;padding:0 18px}
@media (max-width:900px){
  .osGrid,.osGrid.n1,.osGrid.n2{grid-template-columns:1fr 1fr;gap:8px}
  .osGrid .os:not(.proj):first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:2/1}
  .os.proj{padding:12px;gap:5px}.os.proj h3{font-size:19px}.os.proj .pm{font-size:13px;line-height:1.35}.os.proj .pw{font-size:12px}
  .os.proj li{font-size:12px;padding:4px 6px}
  .os.proj.cta,.os.proj.cta.s2{grid-column:1/-1}
  .os.proj.cta .btn{align-self:stretch;justify-content:center}
}
@media (max-width:700px){.osGrid.n3 .os:first-child{grid-column:auto;aspect-ratio:3/2}.osGrid .os:not(.proj):first-child:nth-last-child(odd){grid-column:1/-1;aspect-ratio:2/1}}

/* ---- the build-up: one row per layer, in the order it goes down, one TDS figure each; tap for why ---- */
.buWrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start;margin-top:20px}
.layers{display:grid;gap:8px;list-style:none;counter-reset:ly}
.layer{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.layer[open]{border-color:rgba(221,36,43,.55)}
.layer summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:26px 52px minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:8px 12px;min-height:68px}
.layer summary::-webkit-details-marker{display:none}
.layer .no{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;color:var(--redT)}
.layer .sp{position:relative;width:52px;height:52px;border-radius:8px;background:#fff;overflow:hidden;display:block}
.layer .sp img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}
.layer .sp img.strip{transform:rotate(-38deg) scale(1.22)}
.layer .lt small{display:block;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.layer .lt b{display:block;font:800 19px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase;margin-top:3px}
.layer .fig{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.02em;text-align:right;color:var(--text,#f2f3f5);border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel);max-width:230px}
.layer .chev{color:var(--dim);font-size:16px;transition:transform .2s;text-align:center}
.layer[open] .chev{transform:rotate(180deg)}
.layer .why{padding:0 14px 14px 102px;color:var(--dim);font-size:15px;line-height:1.5}
.layer .why .lk{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.layer .why .lk a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:8px;color:var(--text,#f2f3f5)}
.layer .why .lk a.v{background:var(--red);border-color:var(--red)}
.layer .why .lk a:hover{border-color:#fff}
.buSide{display:grid;gap:10px;position:sticky;top:84px}
.buPic{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.buPic img{display:block;width:100%;height:auto}
.calcBand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.calcBand b{display:block;font:800 22px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.calcBand span{display:block;color:var(--dim);font-size:14px;line-height:1.4;margin-top:4px}
.calcBand .btn{min-height:50px;font-size:13px;padding:0 16px;white-space:nowrap}
/* ---- the rules in plain English ---- */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.rule{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px}
.rule h3{font:800 21px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.rule p{color:var(--dim);font-size:15px;line-height:1.45}
.rule .ref{margin-top:auto;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redT)}
.reports{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.reports a{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--text,#f2f3f5)}
.reports a:hover{border-color:#fff}.reports a i{font-style:normal;color:var(--redT)}
.fsNote{margin-top:12px;color:var(--dim);font-size:13px;line-height:1.45;max-width:900px}
/* ---- how it's done: the video loads only when tapped ---- */
.howWrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:center;margin-top:20px}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0b0d10;padding:0;cursor:pointer}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.yt .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.yt .play::before{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.yt .len{position:absolute;left:12px;bottom:12px;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;background:rgba(5,6,7,.85);padding:6px 8px;border-radius:6px;color:var(--text,#f2f3f5)}
.howTxt h3{font:800 30px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.howTxt ul{list-style:none;display:grid;gap:8px;margin-top:14px}
.howTxt li{position:relative;padding-left:26px;color:rgba(255,255,255,.88);font-size:15px;line-height:1.4}
.howTxt li::before{content:"✓";position:absolute;left:0;top:0;color:var(--redT);font-weight:800}
/* ---- FAQ ---- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:20px;align-items:start}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.qa[open]{border-color:rgba(221,36,43,.55)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:12px;align-items:center;padding:12px 16px;min-height:60px}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font:700 17px/1.25 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif}
.qa .chev{color:var(--dim);transition:transform .2s;text-align:center}
.qa[open] .chev{transform:rotate(180deg)}
.qa p{padding:0 16px 16px;color:var(--dim);font-size:15px;line-height:1.5}
@media (max-width:1100px){.rules{grid-template-columns:1fr 1fr}.buWrap{grid-template-columns:1fr}.buSide{position:static;grid-template-columns:1fr 1fr;align-items:center}}
@media (max-width:900px){.howWrap{grid-template-columns:1fr;gap:14px}.faq{grid-template-columns:1fr}}
@media (max-width:700px){
  .buWrap{gap:10px;margin-top:14px}
  .layers{gap:5px}
  .layer summary{grid-template-columns:18px 38px minmax(0,1fr) 16px;gap:8px;padding:5px 8px;min-height:56px}
  .layer .sp{width:38px;height:38px}
  .layer .lt{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
  .layer .lt small{font-size:12px;letter-spacing:.06em}
  .layer .lt b{font-size:15px;margin-top:0}
  .layer .fig{grid-column:3;grid-row:2;text-align:left;border:0;background:none;padding:0;max-width:none;font-size:12px;color:var(--redT);margin-top:-4px}
  .layer summary{grid-template-rows:auto auto}
  .layer .no,.layer .sp,.layer .chev{grid-row:1/3}
  .layer .why{padding:0 10px 10px 72px;font-size:13.5px;line-height:1.4}
  .buSide{grid-template-columns:1fr}
  .buPic{display:none}
  .calcBand{padding:10px 12px;gap:10px}.calcBand b{font-size:17px}.calcBand span{font-size:12.5px}.calcBand .btn{font-size:12px;padding:0 12px}
  .rules{grid-template-columns:1fr;gap:5px;margin-top:14px}
  .rule{padding:10px 12px;gap:3px}.rule h3{font-size:16px}.rule p{font-size:13.5px;line-height:1.35}.rule .ref{font-size:12px;margin-top:2px}
  .reports{gap:6px;margin-top:8px}.reports a{flex:1 1 100%;font-size:12px;min-height:46px}
  .fsNote{font-size:12px}
  .howWrap{margin-top:14px;gap:10px}.yt{border-radius:10px}.yt .play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .howTxt h3{font-size:21px}.howTxt ul{margin-top:8px;gap:5px}.howTxt li{font-size:13.5px}.howTxt li:nth-child(n+3){display:none}
  .faq{gap:5px;margin-top:14px}.qa summary{padding:8px 12px;min-height:52px}.qa h3{font-size:15px}.qa p{padding:0 12px 12px;font-size:13.5px;line-height:1.4}
}

/* ================= chat 02, 10 Nov 2026: eight-size page check, run 1 fixes ================= */
/* RED: CAD tiles in one row were different heights on tablet (264 / 254). Every tile now fills its row. */
.cadGrid{align-items:stretch}
.cadT{height:100%;justify-content:flex-start}
.cadT .cc i{font-style:normal}
/* ORANGE: buttons in one row were different widths. Every pair is now equal columns, as wide as the longer label. */
.secAct{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:max-content;max-width:100%}
.secAct .btn{white-space:nowrap;justify-content:center}
/* ORANGE: hero text column much shorter than a tall 3D drawing on wide screens: the drawing is held to the text's height range */
@media (min-width:901px){.sHeroPic.d3{max-height:440px;width:auto;max-width:100%}}
/* tablet: CAD library shows two rows of three, then "Show all" (was 1.3 screens) */
@media (min-width:701px) and (max-width:1024px){
  .cadGrid:not(.all) .cadT.more6{display:none}
  .cadMore{display:flex}
  .cadGrid.all + .cadMore{display:none}
}
/* phone: nothing under 12 px, body copy 15 px, nothing clamped or cut off */
@media (max-width:700px){
  .secAct{width:100%}
  .crumbs{font-size:12px;letter-spacing:.04em;gap:5px}
  .sHero .lead{font-size:15px;display:block;-webkit-line-clamp:unset;overflow:visible}
  .stdChips span{font-size:12px;letter-spacing:.02em;padding:5px 6px}
  .step i{font-size:12px}
  .r3 span,.r3:not(:first-child) span{font-size:12px;letter-spacing:.04em}
  .r3:not(:first-child) span{display:none}
  .cadT .cc{font-size:12px;letter-spacing:.02em}.cadT .cc i{display:none}
  .os figcaption{font-size:12px;letter-spacing:.02em}
  .prod .tl{font-size:12px;line-height:1.3;min-height:31px;display:block;-webkit-line-clamp:unset;overflow:visible}
  .prod.ctx .sysTag{font-size:12px}
  .prod.ctx p.cl{font-size:15px;line-height:1.35;display:block;-webkit-line-clamp:unset;overflow:visible}
  .layer .lt small{font-size:12px;letter-spacing:.03em}
  .layer .no{font-size:12px}
  .layer .why{font-size:15px;line-height:1.4;padding-left:10px}
  .rule p{font-size:15px;line-height:1.38}.rule .ref{font-size:12px;letter-spacing:.03em}
  .reports a{font-size:12px;letter-spacing:.02em}
  .calcBand span{font-size:15px;line-height:1.35}
  .os.proj .pm{font-size:15px;line-height:1.35}.os.proj .pw,.os.proj li{font-size:12px;letter-spacing:.02em}
  .qa p{font-size:15px;line-height:1.42}
  .howTxt li{font-size:15px}
  .yt .len{font-size:12px}
}
.finePrint{margin-top:12px;color:var(--dim);font-size:13px;line-height:1.45;max-width:900px}
@media (min-width:701px){.prod.ctx p.cl{-webkit-line-clamp:unset;display:block;overflow:visible}}

/* phone: calculator band stacks (text, then a full-width button) */
@media (max-width:700px){.calcBand{grid-template-columns:1fr}.calcBand .btn{justify-content:center;width:100%}}

/* build-up side picture: the CAD detail for this system, opens in the lightbox */
.buPic .cadOpen{display:block;width:100%;padding:10px;border:0;background:#fff;cursor:zoom-in}
.buPic figcaption{padding:10px 14px;background:var(--panel);color:var(--dim);font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.04em;text-transform:uppercase;border-top:1px solid var(--line)}
.buPic figcaption b{color:var(--redT)}

/* ---- chat 02, page check run 2 ---- */
/* button pairs: two equal columns, as wide as the longer label (inline grid, so both tracks take the same width) */
.secAct{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;width:auto;max-width:100%;gap:8px}
.reports a .sm{display:none}
/* "how it's done": the text sits in a panel as tall as the video, so the two columns balance */
@media (min-width:901px){.howWrap{align-items:stretch}.howTxt{display:flex;flex-direction:column;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}}
/* tablet and small laptop: the build-up side column is the calculator band only (the CAD sheet left a half-empty column) */
@media (max-width:1100px){.buSide{grid-template-columns:1fr}.buPic{display:none}}
@media (max-width:700px){
  .secAct{display:grid;width:100%}
  .cadT b{height:3.3em;-webkit-line-clamp:3}
  .rules{gap:4px}.rule{padding:8px 12px;gap:2px}
  .reports{display:grid;grid-template-columns:1fr 1fr}.reports a{padding:0 10px;gap:6px}
  .reports a .lg{display:none}.reports a .sm{display:inline}
  .finePrint{font-size:12px;margin-top:8px}
}

/* ---- product grids: first rows, then "Show all" (CSS only, so nothing jumps when the script runs) ---- */
.prodMore{display:none}
@media (max-width:700px){
  .prods.cap4:not(.all)>.prod:not(.ctx):nth-child(n+5){display:none}
  .prods.cap4:not(.all)+.prodMore{display:flex}
}
@media (min-width:701px) and (max-width:899px){
  .prods.cap6:not(.all)>.prod:not(.ctx):nth-child(n+7){display:none}
  .prods.cap6:not(.all)+.prodMore{display:flex}
}
@media (min-width:900px) and (max-width:1024px){
  .prods.cap10:not(.all)>.prod:not(.ctx):nth-child(n+11){display:none}
  .prods.cap10:not(.all)+.prodMore{display:flex}
}
/* button pairs: equal columns that may shrink, so two labels always share the row evenly */
.secAct{grid-auto-columns:minmax(0,1fr)}
@media (min-width:701px){.secAct{display:inline-grid;grid-template-columns:repeat(2,minmax(max-content,1fr));grid-auto-flow:row}.howTxt .secAct{align-self:flex-start}}
/* build-up: the CAD sheet beside the layers never grows taller than the layer list */
.buPic img{max-height:400px;object-fit:contain;width:100%}
@media (max-width:700px){.rules{margin-top:10px}.rule{padding:7px 12px}.rule h3{font-size:15.5px}}

/* hero 3D drawing on desktop: at most 440 px tall, its width worked out from the drawing's own shape (--ar),
   so the box is the right size before the image arrives (width:auto made the page jump: layout shift 0.23-0.29) */
@media (min-width:901px){.sHeroPic.d3{width:min(100%,calc(440px*var(--ar,1.333)));max-width:640px;max-height:none;height:auto}}
/* video text panel: the two buttons share the row evenly */
@media (min-width:701px){.howTxt .secAct{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;max-width:440px}}
@media (min-width:901px) and (max-width:1300px){.howTxt .secAct{grid-template-columns:1fr;max-width:none}.howTxt{padding:18px}}

/* warranty stat: never a bare "Up to 25 yr" (James, 11 Nov 2026). Full wording on desktop, short on phone and tablet. */
.pStats .war .sm{display:none}
@media (max-width:900px){.pStats .war .lg{display:none}.pStats .war .sm{display:inline}.pStats .war{flex-wrap:wrap}}

/* a test report that is named but not public: same chip, dashed, not a link */
.reports .rq{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border:1px dashed var(--line);border-radius:10px;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.reports .rq i{font-style:normal;color:var(--redT)}.reports .rq .sm{display:none}
@media (max-width:700px){.reports .rq{grid-column:1/-1;font-size:12px;letter-spacing:.02em;min-height:46px;padding:0 10px;gap:6px}.reports .rq .lg{display:none}.reports .rq .sm{display:inline}}
/* phone: the on-request report chip is left out (the FAQ says it), so the rules section stays about one screen */
@media (max-width:700px){.reports .rq{display:none}}
/* build-up with no CAD sheet beside it: the layers run two across on desktop and the calculator band sits under them, so no empty half */
.buWrap.solo{grid-template-columns:1fr}
@media (min-width:901px){.buWrap.solo .layers{grid-template-columns:1fr 1fr;align-items:start}}
.buWrap.solo .buSide{position:static}
@media (max-width:700px){.cadT b{height:4.4em;-webkit-line-clamp:4}}
/* step numbers: no chip behind them (the shared stylesheet gives .step i a light grey box; red on it was 2.1:1, unreadable) */
.step i,.layer .no{background:none;padding:0;border:0;width:auto;height:auto;border-radius:0}
/* wide screens: the calculator band under a two-column build-up keeps a readable width */
.buWrap.solo .buSide{max-width:820px}
/* a report named without a link shows on phone too, on its own row */
@media (max-width:700px){.reports .rq{display:inline-flex}}

/* ---- chat 02, 11 Nov: clearing the oranges ---- */
/* "Need it specified?" tile: picture the same height as the product photos; wide tile = picture left, words right */
@media (min-width:701px){
  .prod.ctx.row{flex-direction:row;align-items:stretch}
  .prod.ctx.row .pic{flex:none;align-self:flex-start}
  .prod.ctx.row .body{flex:1 1 0;justify-content:center;padding:18px}
  .prod.ctx.row h3{font-size:24px;height:auto}
  .prod.ctx .pic img[src*="/hero/"]{inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#fff;border-radius:0}
  .prod.ctx .pic:has(img[src*="/hero/"]){background:#fff}
}
.prod.ctx .pic img[src*="/hero/"]{object-fit:contain;background:#fff}
.sysL img[src*="/hero/"]{object-fit:contain;background:#fff}
/* video poster is 1280 px: on very wide screens the player stops at 640 so the poster stays sharp at 4K */
@media (min-width:1500px){.howWrap{grid-template-columns:minmax(0,640px) minmax(0,1fr)}}
.docsAct{margin-top:12px}

.finePrint .sm{display:none}
/* phone: rules section back to about one screen (three report chips now) */
@media (max-width:700px){
  .finePrint .lg{display:none}.finePrint .sm{display:inline}
  .rule{padding:5px 12px 6px}.rules{gap:3px}
  .reports a,.reports .rq{min-height:44px}
}

/* CAD thumbs are 1040 px copies (media/site/cad), sharp at 4K; shown at the same size as before */
.cadT img{aspect-ratio:1040/735}
/* phone: the two document buttons under a product list are small chips, so the section stays about one screen */
@media (max-width:700px){
  .docsAct{margin-top:6px}.docsAct .btn{min-height:36px;font-size:12px}
  .rule h3{font-size:15px}.reports a,.reports .rq{min-height:40px}.finePrint{margin-top:6px}
}

/* phone: the document buttons are full 50 px buttons (button rule); the space comes from tighter gaps around them */
@media (max-width:700px){
  .docsAct{margin-top:4px}.docsAct .btn{min-height:50px;font-size:12px}
  .moreBtn.prodMore{margin:6px 0 4px}
  .prods{margin-top:10px}
  .finePrint{margin-top:2px}.reports{margin-top:6px}
}
@media (max-width:700px){body.sysPage .prods{margin-top:6px}.moreBtn.prodMore{margin:4px 0 4px}}

/* ---- typical values (James, 11 Nov 2026): one row per product, opens to property / typical value / test standard ---- */
.vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:20px;align-items:start}
.val{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.val[open]{border-color:rgba(221,36,43,.55)}
.val summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:12px 16px;min-height:60px}
.val summary::-webkit-details-marker{display:none}
.val h3{font:800 20px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.val .vb{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.val .chev{color:var(--dim);transition:transform .2s;text-align:center}
.val[open] .chev{transform:rotate(180deg)}
.val .vt{padding:0 12px 12px;overflow-x:auto}
.val table{border-collapse:collapse;width:100%;font-size:15px}
.val th,.val td{text-align:left;vertical-align:top;padding:8px 6px;border-top:1px solid var(--line);font-weight:400;color:rgba(255,255,255,.88)}
.val thead th{font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-top:0}
.val tbody th{color:var(--text,#f2f3f5);font-weight:600}
.val td:nth-child(2){font-weight:700;color:var(--text,#f2f3f5);white-space:nowrap}
@media (max-width:900px){.vals{grid-template-columns:1fr}}
@media (max-width:700px){
  .vals{gap:5px;margin-top:12px}
  .val summary{grid-template-columns:minmax(0,1fr) 18px;padding:8px 12px;min-height:52px;gap:2px 10px}
  .val h3{font-size:16px}.val .vb{grid-column:1;grid-row:2;font-size:12px}.val .chev{grid-row:1/3}
  .val table{font-size:15px}.val th,.val td{padding:7px 4px}.val td:nth-child(2){white-space:normal}
}

/* ===== v33 (overnight 11 Nov): Go deeper links, range "by type" cards, hosted explainer ===== */
.moreGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.mL{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18px;column-gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:76px;transition:.2s}
.mL:hover{border-color:var(--red)}
.mL small{grid-column:1;font:700 12px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redT)}
.mL b{grid-column:1;display:block;font:800 18px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mL span{grid-column:1;color:var(--dim);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mL i{grid-column:2;grid-row:1/span 3;font-style:normal;color:var(--dim)}
.tyGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;align-items:stretch}
.tyGrid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.tyGrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ty{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.ty h3{font:800 20px/1.05 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.tyL{display:grid;gap:6px;margin-top:10px}
.tyL a{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;min-height:50px;align-content:center;transition:.2s}
.tyL a:hover{border-color:var(--red)}
.tyL b{font:800 15px/1.1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif;font-stretch:62%;text-transform:uppercase}
.tyL small{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;display:block;background:#000}
.exLb{position:fixed;inset:0;z-index:1200;background:#000;display:none}
.exLb.on{display:block}
.exLb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.exLb button{position:absolute;right:10px;top:10px;z-index:2;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(5,6,7,.7);color:var(--text,#f2f3f5);font-size:26px;line-height:1;cursor:pointer}
@media (max-width:1100px){.moreGrid{grid-template-columns:1fr 1fr}.tyGrid,.tyGrid.n3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){
  .moreGrid{grid-template-columns:1fr;gap:6px;margin-top:14px}
  .mL{min-height:60px;padding:8px 12px}.mL b{font-size:16px;-webkit-line-clamp:1}.mL span{display:none}
  .tyGrid,.tyGrid.n3,.tyGrid.n2{grid-template-columns:1fr;gap:6px;margin-top:14px}
  .ty{padding:10px 12px}.ty h3{font-size:18px}.tyL{grid-template-columns:1fr 1fr;margin-top:8px}.tyL a{padding:6px 8px}.tyL small{display:none}.tyL b{font-size:13.5px}
}

/* v33b: no half-empty rows. Links stretch to fill their last row; type cards are one row each on wide screens; four products a type on phone */
@media (min-width:701px){
  .moreGrid{display:flex;flex-wrap:wrap}.mL{flex:1 1 30%;min-width:260px}
  .tyGrid,.tyGrid.n3,.tyGrid.n2{grid-template-columns:1fr}
  .ty{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:center}
  .tyL{margin-top:0;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}
@media (max-width:700px){.tyL a:nth-child(n+5){display:none}}

/* v33c: nothing in the Go deeper rows is clamped or cut with dots; long titles wrap */
.mL b{display:block;overflow:visible;-webkit-line-clamp:unset;-webkit-box-orient:unset}
.mL span{white-space:normal;overflow:visible;text-overflow:clip}
.tyL small{white-space:normal;overflow:visible;text-overflow:clip}
@media (max-width:700px){.mL b{-webkit-line-clamp:unset;font-size:15px;line-height:1.15}}

/* v33d: smallest phones drop the intro line of the rules so the section is one screen */
@media (max-width:380px){#rules>.lead{display:none}}

/* v37: CAD tiles are links to the drawing pages; the build-up sheet is a link too; fewer than four tiles still fill the row */
a.cadT{display:block;color:inherit;text-decoration:none}a.cadOpen{display:block}
@media (min-width:701px){.cadGrid.n1{grid-template-columns:minmax(0,420px)}.cadGrid.n2{grid-template-columns:repeat(2,minmax(0,440px))}.cadGrid.n3{grid-template-columns:repeat(3,minmax(0,440px))}}   /* tiles never wider than the 1040 px copy stays sharp at 2x */

/* v37b: phone, a lone drawing tile (one detail, or the third of three) runs the full width as picture left, words right: no empty half */
@media (max-width:700px){
  .cadGrid.n1{grid-template-columns:1fr}
  .cadGrid.n1 .cadT,.cadGrid.n3 .cadT:nth-child(3){display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);column-gap:10px;align-content:center;align-items:center}
  .cadGrid.n3 .cadT:nth-child(3){grid-column:1/-1}
  .cadGrid.n1 .cadT img,.cadGrid.n3 .cadT:nth-child(3) img{grid-row:1/span 3}
}

/* ===== v39 (chat 17, 13 Nov): 12 px minimum and soft white on the system and range pages ===== */
body.products :is(.cadT .cc,.layer .no,.lt small,.r3 figcaption span,.lk a,.lk .off,.rule .ref,.os figcaption,.yt .len,.reports a i,.buPic figcaption){font-size:12px}
body.products .lk .off{color:rgba(242,243,245,.66);border-style:dashed;pointer-events:none}
body.products .r3 figcaption{background:rgba(11,13,16,.92);padding-top:10px}
body.products .r3 figcaption :is(b,span){color:var(--text,#f2f3f5)}
body.products .r3 figcaption span{color:rgba(242,243,245,.82)}