/* ============================================
   BELTSCAN SYSTEMS — Main Stylesheet
   Belt Guard® Conveyor Monitoring Solutions
   ============================================ */

/* --- CSS Variables / Theming --- */
:root{--primary:#203386;--pl:#2a42a8;--sec:#398CD1;--acc:#EC3832;--ag:rgba(236,56,50,.5);--ok:#22c55e;--wn:#f59e0b;--cr:#ef4444;--okg:rgba(34,197,94,.3);--r:2px;--nh:64px;--m:'IBM Plex Mono',monospace;--s:'IBM Plex Sans',sans-serif;--c:'IBM Plex Sans Condensed',sans-serif;--e:background .35s,color .35s,border-color .35s,box-shadow .35s}
[data-theme="dark"]{--bg:#0a0c14;--bg2:#0f1219;--pn:#141821;--in:rgba(0,0,0,.3);--bd:#1e2433;--tx:#d2d7e0;--tm:#8f96a6;--tb:#e8ecf4;--th:#e8ecf4;--nb:rgba(10,12,20,.94);--s1:0 4px 20px rgba(0,0,0,.3);--s2:0 12px 40px rgba(0,0,0,.5);--hg:linear-gradient(135deg,rgba(10,12,20,.92) 30%,rgba(10,12,20,.5));--hb:#101420;--hp:#181e2e;--hd:#222940;--ht:#c0c6d4;--htm:#99a1b4;--hth:#dde0ea;--ib:.65;--ic:1.15}
[data-theme="light"]{--bg:#f2f3f7;--bg2:#e8eaef;--pn:#ffffff;--in:rgba(0,0,0,.04);--bd:#c8cdd4;--tx:#31353f;--tm:#525663;--tb:#1a1e2a;--th:#111628;--nb:rgba(242,243,247,.94);--s1:0 2px 12px rgba(0,0,0,.06);--s2:0 8px 30px rgba(0,0,0,.1);--hg:linear-gradient(135deg,rgba(242,243,247,.88) 30%,rgba(242,243,247,.45));--hb:#e0e2e8;--hp:#ffffff;--hd:#b8bcc6;--ht:#3a3f4d;--htm:#525663;--hth:#111628;--ib:1;--ic:1}

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--s);background:var(--bg);color:var(--tx);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:var(--e)}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}
.X{max-width:1280px;margin:0 auto;padding:0 32px}

/* --- Laser Line --- */
.laser{position:fixed;top:var(--nh);left:0;right:0;height:2px;z-index:999;background:linear-gradient(90deg,transparent,var(--acc) 20%,var(--acc) 80%,transparent);box-shadow:0 0 6px var(--ag);opacity:.85}
.laser::after{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(180deg,rgba(236,56,50,.12),transparent)}


/* --- Navigation --- */
nav.N{position:fixed;top:0;left:0;right:0;height:var(--nh);background:var(--nb);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);z-index:1000;display:flex;align-items:center;transition:var(--e)}
nav.N .X{display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0;overflow:visible}
.NL{display:flex;align-items:center;cursor:pointer;height:36px;flex-shrink:0}
.NL img{height:62px;width:auto;background:transparent;mix-blend-mode:normal}
[data-theme="dark"] .logo-lt{display:none}
[data-theme="light"] .logo-dk{display:none}
.nk{display:flex;gap:20px;flex-shrink:1;min-width:0;overflow:visible}
.nk a{font-family:var(--m);font-size:0.92rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm);transition:color .2s;position:relative;padding:4px 0}
.nk a:hover,.nk a.on{color:var(--sec)}
/* Products dropdown */
.nDd{position:relative}
.nDm{display:none;position:absolute;top:100%;left:-12px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:8px 0;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200}
.nDd::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px}
.nDd:hover .nDm{display:block}
.nDm li{list-style:none}
.nDm a{display:flex;align-items:baseline;gap:8px;padding:8px 18px;font-size:0.8rem;letter-spacing:.03em;white-space:nowrap;color:var(--tx)}
.nDm a:hover{background:var(--hp);color:var(--sec)}
.nDm .dd-cat{font-size:0.68rem;opacity:.45;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.nk a.on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--sec)}
.nR{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ns{display:flex;align-items:center;gap:4px;font-family:var(--m);font-size:0.76rem;color:var(--ok)}
.dt{width:5px;height:5px;border-radius:50%;display:inline-block}
.dt.ok{background:var(--ok);box-shadow:0 0 6px var(--okg)}
.dt.wn{background:var(--wn)}
.dt.cr{background:var(--cr)}
.nC{font-family:var(--m);font-size:0.74rem;color:var(--tm);padding-left:7px;border-left:1px solid var(--bd)}
.sp{width:1px;height:14px;background:var(--bd);margin:0 5px}
.tg{width:38px;height:20px;border-radius:10px;background:var(--bd);position:relative;cursor:pointer;border:1px solid var(--bd);transition:background .3s;flex-shrink:0}
.tg::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sec);transition:transform .3s}
[data-theme="dark"] .tg::after{transform:translateX(18px)}
.tI{width:13px;height:13px;color:var(--tm);flex-shrink:0}
.nQ{font-family:var(--m);font-size:0.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;background:var(--acc);color:#fff;border-radius:var(--r);transition:all .2s;margin-left:8px;white-space:nowrap}
.nQ:hover{box-shadow:0 0 16px var(--ag)}
.nT{display:none;flex-direction:column;gap:3px;padding:3px}
.nT span{display:block;width:16px;height:2px;background:var(--tm)}
/* Portal icon in nav */
.nP{display:flex;align-items:center;gap:4px;font-family:var(--m);font-size:0.74rem;color:var(--tm);transition:color .2s;cursor:pointer}
.nP:hover{color:var(--sec)}
.nP svg{width:16px;height:16px}

/* --- Typography Helpers --- */
.lb{font-family:var(--m);font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tm)}
.ey{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px;color:var(--sec)}
.ey::before{content:'';width:18px;height:1px;background:currentColor}
.st{font-family:var(--c);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;line-height:1.08;margin-bottom:11px;color:var(--th)}
.sd{font-size:.97rem;line-height:1.7;color:var(--tm);max-width:500px}

/* --- Buttons --- */
.bt{font-family:var(--m);font-size:0.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:10px 22px;border-radius:var(--r);transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.bp{background:var(--primary);color:#fff;border:1px solid var(--pl)}
.bo{background:transparent;color:var(--tx);border:1px solid var(--tm)}
.hA .bo{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
[data-theme="light"] .hA .bo{background:rgba(0,0,0,.06);color:#1a1a1a;border:1.5px solid rgba(0,0,0,.4)}
.bo:hover{border-color:var(--sec);color:var(--sec)}
.ba{background:var(--acc);color:#fff;border:1px solid var(--acc)}
.ba:hover{box-shadow:0 0 20px var(--ag)}

/* --- Reveal Animations --- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.rv.v{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.35s}

/* --- Hero --- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:calc(var(--nh)+2px);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--ib)) contrast(var(--ic))}
.hero-bg::after{content:'';position:absolute;inset:0;background:var(--hg)}
.hero .X{position:relative;z-index:2}
.hR{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.hT{max-width:500px}
.hE{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.hE::before{content:'';width:18px;height:1px;background:var(--acc)}
.h1{font-family:var(--c);font-size:clamp(1.9rem,4vw,3rem);font-weight:700;line-height:1.05;color:var(--th);margin-bottom:16px}
.h1 em{font-style:normal;color:var(--sec)}
.hS{font-size:1.01rem;color:var(--tx);line-height:1.7;margin-bottom:24px;max-width:380px}
.hA{display:flex;gap:9px;flex-wrap:wrap}
.iB{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);margin-top:14px}
.iT{font-family:var(--m);font-size:0.68rem;color:var(--tm)}
.iT strong{color:var(--th);font-size:0.76rem;display:block}

/* --- Scanner Dashboard Widget (Hero) --- */
.hD{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:var(--e)}
.pH{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;border-bottom:1px solid var(--bd);background:var(--in)}
.pS{font-family:var(--m);font-size:0.68rem;color:var(--ok);display:flex;align-items:center;gap:3px}
.hDB{padding:14px}
.sV{position:relative;height:150px;margin-bottom:14px;background:var(--in);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.sBelt{position:absolute;bottom:34px;left:0;right:0;height:18px;background:repeating-linear-gradient(90deg,#2a2f3d 0px,#2a2f3d 24px,#232838 24px,#232838 26px);animation:bM 2s linear infinite}
[data-theme="light"] .sBelt{background:repeating-linear-gradient(90deg,#a0a8b8 0px,#a0a8b8 24px,#8890a0 24px,#8890a0 26px)}
@keyframes bM{to{background-position:-26px 0}}
.sBeam{position:absolute;top:6px;bottom:52px;width:2px;background:linear-gradient(180deg,var(--acc),rgba(236,56,50,.05));box-shadow:0 0 10px var(--ag);animation:sB 3s ease-in-out infinite}
@keyframes sB{0%,100%{left:10%}50%{left:90%}}
.sLbl{position:absolute;top:5px;left:8px;font-family:var(--m);font-size:0.68rem;color:var(--sec);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.sSt{position:absolute;bottom:5px;right:8px;font-family:var(--m);font-size:0.68rem;color:var(--ok);display:flex;align-items:center;gap:3px}
.mR{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mC{background:var(--in);border:1px solid var(--bd);border-radius:var(--r);padding:9px;transition:var(--e)}
.mC .lb{font-size:0.68rem;margin-bottom:3px}
.mV{font-family:var(--m);font-size:1.2rem;font-weight:700;color:var(--th);line-height:1}
.mU{font-family:var(--m);font-size:0.68rem;color:var(--tm);margin-top:2px}

/* --- Stats Bar --- */
.sbar{background:var(--primary);padding:18px 0}
.sbar .X{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.sbar .sI,.sbar .sBrand{flex:1 1 0;min-width:0}
.sBrand{display:flex;align-items:center;justify-content:center}
.sBreak{display:none}
.sDog{height:55px;width:auto;display:block;flex-shrink:0}
.sI{text-align:center;position:relative}
.sb-div{}
.sN{font-family:var(--m);font-size:1.28rem;font-weight:700;color:#fff;line-height:1.15}
.sL{font-family:var(--m);font-size:0.58rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:3px;line-height:1.35}

/* --- Trusted By (logos) --- */
.tru{background:var(--bg2);padding:32px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.tru .X{text-align:center}
.tru-l{font-family:var(--m);font-size:0.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);margin-bottom:20px}
.tru-logos{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;padding:4px 0;-webkit-overflow-scrolling:touch}
.tru-logos img{height:98px;width:auto;flex-shrink:0;object-fit:contain}
[data-theme="light"] .tru-logos img{filter:grayscale(100%) opacity(.6);transition:filter .3s}
[data-theme="light"] .tru-logos img:hover{filter:grayscale(0%) opacity(1)}
[data-theme="dark"] .tru-logos img{filter:brightness(0) invert(1) opacity(.65);transition:filter .3s}
[data-theme="dark"] .tru-logos img:hover{filter:brightness(0) invert(1) opacity(1)}

/* --- Product Cards --- */
.sH{position:relative;background:var(--hb);padding:75px 0;overflow:hidden;transition:var(--e)}
.sH::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23888' stroke-width='.3' opacity='.1'/%3E%3C/svg%3E");background-size:60px}
.sH .X{position:relative;z-index:2}
.pG{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.pC{background:var(--hp);border:1px solid var(--hd);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s,var(--e);cursor:pointer;display:flex;flex-direction:column;text-decoration:none}
.pC:hover{transform:translateY(-3px);box-shadow:var(--s2)}
.pC-img{position:relative;height:220px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--in)}
/* Renders are sized to a common box and lifted clear of the icon row. */
.pC-img img:not(.bg-watermark){height:62%;width:auto;max-width:74%;object-fit:contain;transition:transform .5s;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));margin-bottom:14px}
.pC:hover .pC-img img:not(.bg-watermark){transform:scale(1.04)}
.pC-b{padding:18px;flex:1;display:flex;flex-direction:column}
.pC-cat{font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.cat-rip{color:var(--acc)}.cat-cond{color:var(--sec)}.cat-cover{color:#b8860b}.cat-vis{color:#8b5cf6}
.pC-n{font-family:var(--c);font-size:1.15rem;font-weight:700;color:var(--hth);margin-bottom:6px}
.pC-d{font-size:.95rem;color:var(--htm);line-height:1.55;margin-bottom:14px;flex:1}
.tgs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px}
.tg2{font-family:var(--m);font-size:0.68rem;padding:4px 8px;background:var(--in);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx)}
.pC-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--bd)}
.pC-badges{display:flex;align-items:center;gap:5px}
.pC-badge{font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r);border:1px solid}
.badge-rip{color:var(--acc);border-color:rgba(236,56,50,.3);background:rgba(236,56,50,.08)}
.badge-cond{color:var(--sec);border-color:rgba(57,140,209,.3);background:rgba(57,140,209,.08)}
.badge-cover{color:#b8860b;border-color:rgba(184,134,11,.3);background:rgba(184,134,11,.08)}
.badge-vis{color:#8b5cf6;border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.08)}
.badge-nc{color:var(--ok);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.pC-link{font-family:var(--m);font-size:0.74rem;font-weight:600;color:var(--sec);display:flex;align-items:center;gap:4px;transition:color .2s}
.pC-link:hover{color:var(--acc)}

/* --- Dark Section --- */
.sD{position:relative;background:var(--bg);padding:75px 0;overflow:hidden;transition:var(--e)}
.sD .X{position:relative;z-index:2}
.scn{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(57,140,209,.012) 2px,rgba(57,140,209,.012) 4px);z-index:1}

/* --- Compare Table --- */
.cW{overflow-x:auto;margin-top:28px;border:1px solid var(--bd);border-radius:var(--r)}
.cT{width:100%;border-collapse:collapse;font-size:0.81rem}
.cT th,.cT td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap}
.cT th{background:var(--in);font-family:var(--m);font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm)}
.cT td:first-child{font-family:var(--m);font-size:0.74rem;color:var(--tm)}
.cT td{color:var(--tx)}
/* Compare table: first column wider, rest even and centred */
.cT-compare{table-layout:fixed;min-width:820px}
.cT-compare th:first-child,.cT-compare td:first-child{width:150px;text-align:left}
.cT-compare th:not(:first-child),.cT-compare td:not(:first-child){text-align:center}
/* Compare table: first column reversed out to white so the feature names stay
   legible against the alternating cells, in both themes. */
.cT-compare th:first-child,.cT-compare td:first-child{background:#fff;color:#111;font-weight:500}
.cT-compare tr:hover td:first-child{background:#fff}
/* Spare parts table: first column wider, rest even and centred */
.cT-parts{table-layout:fixed;min-width:580px}
.cT-parts th:first-child,.cT-parts td:first-child{width:38%;text-align:left}
.cT-parts th:not(:first-child),.cT-parts td:not(:first-child){text-align:center}
.cT tr:hover{background:var(--in)}
.cT tr:last-child td{border-bottom:none}
.cT .ck{color:var(--ok);font-weight:700}
.cT .cx{color:var(--tm);opacity:.3}
/* Quote buttons in compare table */
.cT .qt-btn{font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;background:var(--acc);color:#fff;border-radius:var(--r);border:1px solid var(--acc);transition:all .2s;cursor:pointer;display:inline-block;text-decoration:none}
.cT .qt-btn:hover{box-shadow:0 0 14px var(--ag)}

/* --- Case Studies --- */
.csG{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px}
.csC{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s;text-decoration:none;display:block}
.csC:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.csI{height:170px;overflow:hidden}
.csI img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--ib)) contrast(var(--ic));transition:transform .5s}
.csC:hover .csI img{transform:scale(1.05)}
.csB{padding:14px}
.csT{font-family:var(--m);font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sec);margin-bottom:5px}
.csH{font-family:var(--c);font-weight:700;font-size:1.05rem;color:var(--th);margin-bottom:5px;line-height:1.2}
.csD{font-size:0.92rem;color:var(--tm);line-height:1.5;margin-bottom:10px}
.csS{display:flex;gap:14px}
.csV{font-family:var(--m);font-size:1.1rem;font-weight:700;color:var(--ok)}
.csL{font-family:var(--m);font-size:0.68rem;color:var(--tm);text-transform:uppercase}

/* --- Field Strip --- */
.fS{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:45px 0}
.fSi{position:relative;height:240px;overflow:hidden}
.fSi img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--ib)) contrast(var(--ic));transition:transform .6s}
.fSi:hover img{transform:scale(1.05)}
.fSi .fc{position:absolute;bottom:0;left:0;right:0;padding:9px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-family:var(--m);font-size:0.68rem;color:#fff;letter-spacing:.04em;text-transform:uppercase}

/* --- Industries --- */
.iG{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.iC{background:var(--hp);border:1px solid var(--hd);border-radius:var(--r);padding:20px 14px;transition:transform .3s;position:relative;overflow:hidden}
.iC::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transition:transform .3s;transform-origin:left}
.iC:hover::after{transform:scaleX(1)}
.iC:hover{transform:translateY(-2px)}
.iCi{font-size:1.2rem;margin-bottom:8px}
.iCt{font-family:var(--c);font-weight:700;font-size:0.86rem;color:var(--hth);margin-bottom:3px}
.iCd{font-size:0.78rem;color:var(--htm);line-height:1.5}
.sCta{position:relative;background:var(--bg);padding:75px 0;overflow:hidden}
.ctaC{position:relative;z-index:2;text-align:center;max-width:560px;margin:0 auto}

/* --- Dashboard Mockup (Platform) --- */
.dM{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-top:36px;transition:var(--e)}
.dMt{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;background:var(--bg2);border-bottom:1px solid var(--bd)}
.dMd{display:flex;gap:5px}
.dMd span{width:7px;height:7px;border-radius:50%;background:var(--bd)}
.dMd span:first-child{background:var(--acc)}
.dMtx{font-family:var(--m);font-size:0.68rem;color:var(--tm)}
.dMb{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:14px}
.dP{background:var(--in);border:1px solid var(--bd);border-radius:var(--r);padding:12px;transition:var(--e)}
.dPh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dPt{font-family:var(--m);font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm)}
.dP.fw{grid-column:1/-1}
.bars{display:flex;align-items:flex-end;gap:3px;height:65px}
.bar{flex:1;border-radius:1px 1px 0 0;min-height:4px}
.bar.b1{background:var(--primary)}.bar.b2{background:var(--sec);opacity:.7}.bar.b3{background:var(--acc)}
.hL{display:flex;flex-direction:column;gap:5px}
.hI{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--in);border:1px solid var(--bd);border-radius:var(--r)}
.hIn{font-family:var(--m);font-size:0.74rem;color:var(--tx)}
.hIv{font-family:var(--m);font-size:0.74rem;font-weight:600}
.hIb{width:48px;height:3px;background:var(--bd);border-radius:1px;margin-left:8px;overflow:hidden}
.hIf{height:100%;border-radius:1px}
.aL{display:flex;flex-direction:column;gap:4px}
.aR{display:flex;align-items:center;gap:7px;font-family:var(--m);font-size:0.68rem;padding:5px 0;border-bottom:1px solid var(--in)}
.aR:last-child{border-bottom:none}
.aRt{color:var(--tm);min-width:45px}
.aRm{color:var(--tx);flex:1}
.aRs{font-size:0.68rem;padding:2px 5px;border-radius:var(--r);text-transform:uppercase;letter-spacing:.06em}
.aRs.info{background:rgba(57,140,209,.15);color:var(--sec)}
.aRs.warn{background:rgba(245,158,11,.15);color:var(--wn)}

/* --- Timeline --- */
.tl{position:relative;margin-top:32px;padding-left:28px}
.tl::before{content:'';position:absolute;top:0;bottom:0;left:10px;width:2px;background:var(--bd)}
.tli{position:relative;margin-bottom:24px;padding-left:18px}
.tli:last-child{margin-bottom:0}
.tld{position:absolute;left:-23px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--sec);border:2px solid var(--bg);z-index:2;transition:var(--e)}
.tly{font-family:var(--m);font-size:0.72rem;font-weight:700;color:var(--sec);margin-bottom:3px}
.tlt{font-family:var(--c);font-weight:700;font-size:.95rem;color:var(--th);margin-bottom:2px}
.tlx{font-size:0.89rem;color:var(--tm);line-height:1.5}

/* --- Product Detail Page --- */
.PD{padding-top:calc(var(--nh) + 24px);overflow-x:hidden}
.BC{display:flex;align-items:center;gap:5px;font-family:var(--m);font-size:0.76rem;color:var(--tm);margin-bottom:14px;padding-top:10px}
.BC a{color:var(--tm)}.BC a:hover{color:var(--sec)}.BC .sp2{opacity:.4}.BC .cu{color:var(--tx)}
.pdH{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-bottom:44px}
.pdM{width:100%;aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--bd);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--in)}
.pdM img{max-height:86%;max-width:86%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.pdG{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.pdTh{width:58px;height:44px;border-radius:var(--r);border:1px solid var(--bd);overflow:hidden;cursor:pointer;opacity:.5;transition:opacity .2s,border-color .2s}
.pdTh.on,.pdTh:hover{opacity:1;border-color:var(--sec)}
.pdTh img{width:100%;height:100%;object-fit:cover}
.pdMd{font-family:var(--m);font-size:0.71rem;color:var(--sec);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.pdT{font-family:var(--c);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:700;line-height:1.1;color:var(--th);margin-bottom:10px}
.pdDs{font-size:.97rem;color:var(--tm);line-height:1.7;margin-bottom:16px}
.pdK{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:18px}
.pdKi{background:var(--in);border:1px solid var(--bd);border-radius:var(--r);padding:9px}
.pdKi .lb{font-size:0.68rem;margin-bottom:2px;display:block}
.pdKv{font-family:var(--m);font-size:.97rem;font-weight:700;color:var(--th)}
.pdKu{font-size:0.68rem;color:var(--tm)}
.pdA{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pdDl{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-top:14px}
.pdDh{padding:7px 11px;border-bottom:1px solid var(--bd);font-family:var(--m);font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm);background:var(--in)}
.pdDb{padding:7px 11px}
.dR{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--bd)}
.dR:last-child{border-bottom:none}
.dRi{display:flex;align-items:center;gap:6px}
.dRc{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--in);border:1px solid var(--bd);border-radius:var(--r);color:var(--sec);flex-shrink:0;font-size:0.71rem}
.dRn{font-family:var(--m);font-size:0.82rem;color:var(--tx)}
.dRm{font-family:var(--m);font-size:0.68rem;color:var(--tm)}
.bdl{font-family:var(--m);font-size:0.68rem;padding:5px 9px;background:var(--pn);color:var(--tx);border:1px solid var(--bd);border-radius:var(--r);transition:all .2s;cursor:pointer}
.bdl:hover{border-color:var(--sec);color:var(--sec)}
/* Tabs */
.stb{display:flex;gap:0;border-bottom:1px solid var(--bd);margin-bottom:16px}
.stbi{font-family:var(--m);font-size:0.78rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;color:var(--tm);border-bottom:2px solid transparent;transition:all .2s;cursor:pointer;background:none}
.stbi:hover{color:var(--tx)}.stbi.on{color:var(--sec);border-bottom-color:var(--sec)}
.stC{display:none}.stC.on{display:block}
.spT{width:100%;border-collapse:collapse}
.spT tr{border-bottom:1px solid var(--bd)}
.spT tr:last-child{border-bottom:none}
.spT td{padding:8px 10px;font-size:0.86rem}
.spT td:first-child{font-family:var(--m);font-size:0.82rem;color:var(--th);font-weight:600;width:190px;white-space:nowrap}
.spT td:last-child{color:var(--tx)}
.spT tr:hover{background:var(--in)}
.fG{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}
.fGi{border-radius:var(--r);border:1px solid var(--bd);overflow:hidden;height:220px}
.fGi img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--ib)) contrast(var(--ic));transition:transform .5s}
.fGi:hover img{transform:scale(1.05)}
.rG{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}

/* --- Contact / Forms --- */
.ctGrid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;margin-top:28px}
.ctForm{display:flex;flex-direction:column;gap:11px}
.ff{width:100%;padding:9px 11px;background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);color:var(--tx);font-family:var(--s);font-size:.9rem;outline:none;transition:border-color .2s}
.ff:focus{border-color:var(--sec)}
.ff::placeholder{color:var(--tm);opacity:.6}
.ctSide{display:flex;flex-direction:column;gap:14px}
.ctBox{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:16px;transition:var(--e)}
.ctBt{font-family:var(--m);font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);margin-bottom:10px}
.ctBr{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:0.92rem;color:var(--tx);margin-bottom:8px}
.ctBr:last-child{margin-bottom:0}
.ctBr .dt{margin-right:2px}
.ctBig{font-family:var(--m);font-size:1.8rem;font-weight:700;color:var(--th);margin-bottom:4px}
.ctBsm{font-size:0.78rem;color:var(--tm)}

/* --- Spare Parts --- */
.spG{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.spC{background:var(--hp);border:1px solid var(--hd);border-radius:var(--r);padding:18px;transition:transform .3s,var(--e)}
.spC:hover{transform:translateY(-2px);box-shadow:var(--s1)}
.spCi{font-size:1.4rem;margin-bottom:8px}
.spCn{font-family:var(--c);font-weight:700;font-size:0.92rem;color:var(--hth);margin-bottom:4px}
.spCd{font-size:0.78rem;color:var(--htm);line-height:1.5;margin-bottom:10px}
.spCb{font-family:var(--m);font-size:0.68rem;font-weight:600;color:var(--sec);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.spCb:hover{color:var(--acc)}

/* --- FAQ Accordion --- */
.faq-group{margin-bottom:32px}
.faq-group-title{font-family:var(--c);font-weight:700;font-size:1rem;color:var(--th);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.faq-item{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);margin-bottom:6px;overflow:hidden;transition:var(--e)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;font-family:var(--c);font-weight:600;font-size:.94rem;color:var(--th);transition:background .2s}
.faq-q:hover{background:var(--in)}
.faq-q::after{content:'+';font-family:var(--m);font-size:1rem;color:var(--sec);transition:transform .3s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:600px}
.faq-a-inner{padding:0 16px 14px;font-size:.9rem;color:var(--tm);line-height:1.7}

/* --- Partners Page --- */
.partner-card{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:24px;transition:transform .3s,var(--e)}
.partner-card:hover{transform:translateY(-2px);box-shadow:var(--s1)}
.partner-type{font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r);display:inline-block;margin-bottom:10px}
.partner-type.agent{color:var(--sec);background:rgba(57,140,209,.1);border:1px solid rgba(57,140,209,.2)}
.partner-type.recognised{color:#b8860b;background:rgba(184,134,11,.08);border:1px solid rgba(184,134,11,.2)}
.partner-name{font-family:var(--c);font-weight:700;font-size:1.05rem;color:var(--th);margin-bottom:6px}
.partner-region{font-family:var(--m);font-size:0.71rem;color:var(--sec);margin-bottom:8px}
.partner-detail{font-size:0.9rem;color:var(--tm);line-height:1.6;margin-bottom:4px}
.partner-link{font-family:var(--m);font-size:0.68rem;font-weight:600;color:var(--sec);text-transform:uppercase;letter-spacing:.04em;margin-top:10px;display:inline-flex;align-items:center;gap:4px}
.partner-link:hover{color:var(--acc)}
.partner-ct{color:var(--sec);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.partner-ct:hover{color:var(--acc);border-bottom-color:var(--acc)}

/* --- Client Portal --- */
.portal-card{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:28px;text-align:center;transition:transform .3s,var(--e)}
.portal-card:hover{transform:translateY(-2px);box-shadow:var(--s1)}
.portal-icon{font-size:2rem;margin-bottom:12px}
.portal-title{font-family:var(--c);font-weight:700;font-size:1.05rem;color:var(--th);margin-bottom:6px}
.portal-desc{font-size:0.92rem;color:var(--tm);line-height:1.5;margin-bottom:14px}
.portal-btn{font-family:var(--m);font-size:0.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:8px 18px;border-radius:var(--r);display:inline-block;transition:all .2s}

/* --- Case Study Detail --- */
.cs-hero{position:relative;height:320px;overflow:hidden;border-radius:var(--r);margin-bottom:32px}
.cs-hero img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--ib)) contrast(var(--ic))}
.cs-hero-overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.7));display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.cs-metric{display:flex;gap:24px;margin-top:24px}
.cs-metric-item{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:16px 20px;text-align:center}
.cs-metric-val{font-family:var(--m);font-size:1.6rem;font-weight:700;color:var(--ok)}
.cs-metric-lbl{font-family:var(--m);font-size:0.68rem;color:var(--tm);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.cs-section{margin-bottom:28px}
.cs-section-title{font-family:var(--c);font-weight:700;font-size:1rem;color:var(--th);margin-bottom:8px;padding-left:12px;border-left:2px solid var(--sec)}
.cs-section p{font-size:.94rem;color:var(--tm);line-height:1.75}


/* --- Belt Guard Watermark on Product Images --- */
.pC-img{position:relative}
.bg-watermark{position:absolute;top:10px;left:10px;height:28px;width:auto;z-index:2;opacity:.8;filter:none !important;max-width:none !important;object-fit:contain !important;transform:none !important}
.bg-watermark-lg{position:absolute;top:14px;left:14px;height:34px;width:auto;z-index:2;opacity:.8;filter:none !important;max-width:none !important;object-fit:contain !important}
/* Remove dark bg from logos using blend modes */
[data-theme="dark"] .bg-watermark,[data-theme="dark"] .bg-watermark-lg{mix-blend-mode:screen}
[data-theme="light"] .bg-watermark,[data-theme="light"] .bg-watermark-lg{mix-blend-mode:multiply}
.pdM{position:relative}

/* --- Theme toggle icons --- */
.theme-wrap{display:flex;align-items:center;gap:4px}
.theme-wrap .tI{width:15px;height:15px;color:var(--tm);flex-shrink:0;opacity:.35;transition:opacity .3s,color .3s}
[data-theme="light"] .theme-wrap .tI-sun{opacity:1;color:var(--wn)}
[data-theme="dark"] .theme-wrap .tI-moon{opacity:1;color:var(--sec)}

/* --- Image Zoom --- */
.img-zoom-wrap{position:relative;cursor:zoom-in}
.img-zoom-wrap img:not(.bg-watermark):not(.bg-watermark-lg){transition:transform .3s}


/* --- Reseller Badge --- */
.reseller-badge{position:absolute;top:10px;right:10px;font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r);background:rgba(139,92,246,.15);color:#8b5cf6;border:1px solid rgba(139,92,246,.3);z-index:3}
.reseller-badge-lg{top:14px;right:14px;font-size:0.68rem;padding:4px 10px}
/* BeltSpy logo in dark mode - invert for visibility */


/* --- Footer --- */
.foot{background:var(--bg2);border-top:1px solid var(--bd);padding:36px 0 22px;margin-top:48px;transition:var(--e);position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;opacity:.04;background-image:linear-gradient(var(--tm) 1px,transparent 1px),linear-gradient(90deg,var(--tm) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
[data-theme="dark"] .foot::before{opacity:.06}
.foot>*{position:relative;z-index:1}
.fG2{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.fBd{font-size:0.92rem;color:var(--tm);line-height:1.6;margin-top:7px;max-width:240px}
.fCt{font-family:var(--m);font-size:0.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tm);margin-bottom:10px}
.fLi li{margin-bottom:4px}
.fLi a{font-size:0.86rem;color:var(--tx);transition:color .2s}
.fLi a:hover{color:var(--sec)}
.fBo{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--bd)}
.fBo span{font-family:var(--m);font-size:0.68rem;color:var(--tm)}
.fBl{display:flex;gap:12px}
.fBl a{font-family:var(--m);font-size:0.74rem;color:var(--tm)}
.fBl a:hover{color:var(--sec)}

/* --- Responsive --- */
@media(max-width:1024px){
  .hR{grid-template-columns:1fr;gap:28px}
  /* display:contents flattens the two columns, so this gap applies between
     every element in the hero — keep it tight and let margins do the rest. */
  .pdH{grid-template-columns:1fr;gap:10px}
  .pG{grid-template-columns:1fr}
  .iG{grid-template-columns:repeat(2,1fr)}
  .csG{grid-template-columns:repeat(2,1fr)}
  .fG2{grid-template-columns:1fr 1fr}
  .fS{grid-template-columns:1fr 1fr}
  .dMb{grid-template-columns:1fr 1fr}
  .ctGrid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .X{padding:0 14px}
  .nk{display:none}
  .nT{display:flex}
  .nk.open{display:flex;flex-direction:column;position:absolute;top:var(--nh);left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--bd);padding:14px 20px;gap:10px;z-index:100}
  /* Mobile dropdown */
  .nDm{position:static;border:none;box-shadow:none;padding:4px 0 4px 12px;margin-top:4px;min-width:0;background:transparent}
  .nDd:hover .nDm{display:none}
  .nk.open .nDm{display:block}
  .nDm a{padding:7px 0;font-size:0.82rem}
  .ns,.nC,.sp{display:none}
  /* Nav: prevent right-side elements from pushing off-screen */
  nav.N .X{gap:6px;min-width:0;padding:0 10px}
  .NL img{height:36px}
  .nR{gap:5px}
  .nP svg{width:12px;height:12px}
  .nQ{padding:3px 6px;font-size:0.68rem;margin-left:2px}
  .theme-wrap{gap:2px}
  /* Hero: fill initial viewport on mobile */
  .hero{min-height:calc(100vh - 90px);min-height:calc(100dvh - 90px);padding-top:calc(var(--nh) + 12vh);padding-bottom:20px;align-items:flex-start;overflow:visible;display:flex}
  .hero .hR{gap:28px;flex-direction:column}
  .h1{font-size:1.6rem}
  .hD{display:none}
  .hS{font-size:.94rem}
  .hA{flex-direction:column;gap:10px;width:100%}
  .hA .bt{width:100%;justify-content:center;padding:14px}
  /* Stats bar: expand for mobile viewport */
  .sbar{padding:22px 0}
  .sbar .sN{font-size:1rem}
  .sbar .sL{font-size:0.54rem;letter-spacing:.06em}
  /* One line on mobile: 45+ | dog | ANY. Monitoring and sensor loops are
     desktop-only — five items wrapped onto two rows and the bar lost its
     shape. Nothing is lost: both points are made elsewhere on the page. */
  .sbar .X{justify-content:space-around;gap:0 10px;flex-wrap:nowrap}
  .sbar .s-yrs{order:1}
  .sbar .sBrand{order:2}
  .sbar .s-mfr{order:3}
  .sbar .s-mon,.sbar .s-loop,.sbar .sBreak{display:none}
  .sDog{height:46px}
  /* Hide trusted logos from initial viewport */
  .tru{margin-top:0}
  /* Breadcrumbs: allow wrapping on mobile */
  .BC{flex-wrap:wrap;line-height:1.6;gap:3px 5px}
  /* Page content: tighter top padding */
  .PD{padding-top:calc(var(--nh) + 16px)}
  .BC{margin-bottom:10px;padding-top:8px}
  /* Grids to single column */
  .pG,.iG,.csG,.spG{grid-template-columns:1fr}
  .pdK{grid-template-columns:1fr}
  .fG{grid-template-columns:1fr 1fr}
  .fS{grid-template-columns:1fr}
  .fSi{height:170px}
  .fG2{grid-template-columns:1fr}
  .fBo{flex-direction:column;gap:7px;text-align:center}
  .mR{grid-template-columns:1fr}
  .dMb{grid-template-columns:1fr}
  .dP.fw{grid-column:span 1}
  .cs-metric{flex-wrap:wrap;gap:10px}
  .cs-metric-item{flex:1;min-width:100px}
  /* Partner cards: stack on mobile */
  .partner-card{padding:18px}
  /* Portal cards: stack on mobile */
  .portal-card{padding:20px}
  /* Contact CTA form on home: stack */
  .ctGrid{grid-template-columns:1fr}
  /* Override inline grids for mobile stacking */
  .grid-cta-home{grid-template-columns:1fr !important;gap:28px !important}
  .grid-2col-mob{grid-template-columns:1fr !important;gap:16px !important}
  .grid-3col-mob{grid-template-columns:1fr !important;gap:12px !important}
  /* Hide Get Quote row in compare table on mobile */
  .qt-row{display:none}
  /* Halve logo padding between rows on mobile */
  .tru-logos{gap:16px}
  .tru-logos img{height:60px}
}

/* How It Works image container - reduced height on desktop */
.how-it-works-img{aspect-ratio:21/9;height:auto;max-height:280px}
@media(max-width:768px){.how-it-works-img{max-height:none;aspect-ratio:16/9}}

/* Sites table mobile scroll */

/* Sites table - contained scroll */
.sites-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100%;box-sizing:border-box}
.sites-scroll table{width:100%;table-layout:auto;border-collapse:collapse}
.sites-scroll table td,.sites-scroll table th{font-size:0.78rem;padding:6px 10px;white-space:normal;word-wrap:break-word}
[data-theme="dark"] .sites-scroll table td{color:#c8cdd8}
[data-theme="light"] .sites-scroll table td{color:#3a3f4d}
@media(max-width:768px){
  .sites-scroll table td:nth-child(3),.sites-scroll table th:nth-child(3){display:none}
  .sites-scroll table td{font-size:0.74rem;padding:5px 6px}
}

/* Dark mode title legibility improvements */
[data-theme="dark"] .st{color:#f0f2f8}
[data-theme="dark"] .h1{color:#f0f2f8}
[data-theme="dark"] .pdT{color:#f0f2f8}
[data-theme="dark"] .faq-q{color:#e8ecf4}
[data-theme="dark"] .ctBt{color:var(--sec)}
[data-theme="dark"] .lb{color:#8890a0}

/* Form field labels sit above their input and need to read as headings, not as
   hint text. The muted grey is right for spec-table labels but too faint here,
   so the contrast is raised for labels inside a form only. Placeholders stay
   grey — that distinction is what tells you which is the label. */
.ctForm .lb,form .lb{color:var(--th);font-weight:600}
[data-theme="dark"] .ctForm .lb,[data-theme="dark"] form .lb{color:#fff}
[data-theme="dark"] .ff{background:var(--bg);border-color:var(--bd);color:#e0e4ee}

/* How It Works grid */
@media(max-width:768px){
  .hiw-grid{grid-template-columns:1fr !important}
}

/* ============================================
   WHY CHOOSE — Technical Schematic Layout
   ============================================ */
:root{--wc-line:var(--sec);--wc-dot:var(--sec)}
[data-theme="dark"]{--wc-line:#4a8ec8;--wc-dot:#5a9ed8}
.wc-section{position:relative;padding:80px 0;overflow:hidden;background:var(--bg)}
.wc-grid-bg{position:absolute;inset:0;opacity:.04;background-image:linear-gradient(var(--tm) 1px,transparent 1px),linear-gradient(90deg,var(--tm) 1px,transparent 1px);background-size:48px 48px}
[data-theme="dark"] .wc-grid-bg{opacity:.06}
.wc-map{position:relative;max-width:960px;margin:0 auto;min-height:420px}
.wc-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Node positioning — offset grid, not rigid 2x2 */
.wc-node{position:absolute;width:calc(50% - 40px);padding:22px 24px;background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);transition:border-color .3s,box-shadow .3s}
.wc-node:hover{border-color:var(--sec);box-shadow:0 0 20px rgba(57,140,209,.08)}
.wc-n1{top:0;left:0}
.wc-n2{top:0;right:0}
.wc-n3{bottom:0;left:20px}
.wc-n4{bottom:0;right:20px}
/* Indicator — small technical marker */
.wc-indicator{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative}
.wc-pulse{width:6px;height:6px;border-radius:50%;background:var(--sec);box-shadow:0 0 6px var(--sec);flex-shrink:0}
.wc-node:hover .wc-pulse{animation:wc-ping 1.2s ease-out infinite}
@keyframes wc-ping{0%{box-shadow:0 0 0 0 rgba(57,140,209,.5)}70%{box-shadow:0 0 0 8px rgba(57,140,209,0)}100%{box-shadow:0 0 0 0 rgba(57,140,209,0)}}
.wc-title{font-family:var(--c);font-size:.92rem;font-weight:700;color:var(--th);margin-bottom:6px;letter-spacing:-.01em}
[data-theme="dark"] .wc-title{color:#e8ecf4}
.wc-body{font-size:.95rem;color:var(--tx);line-height:1.65;margin:0}
/* Responsive */
@media(max-width:768px){
  .wc-map{display:flex;flex-direction:column;gap:14px;min-height:auto}
  .wc-node{position:static;width:100%}
  .wc-lines{display:none}
  .wc-section{padding:48px 0}
}
@media(min-width:769px) and (max-width:1024px){
  .wc-node{width:calc(50% - 24px);padding:18px 20px}
  .wc-n3{left:10px}.wc-n4{right:10px}
}

/* ============================================
   HOW IT WORKS — Blueprint System Operation
   ============================================ */
.hiw-section{position:relative;margin-bottom:40px;padding:32px 28px;overflow:hidden;border:1px solid var(--bd);border-radius:var(--r);background:var(--bg)}
.hiw-bp-bg{position:absolute;inset:0;opacity:.035;background-image:linear-gradient(var(--tm) 1px,transparent 1px),linear-gradient(90deg,var(--tm) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
[data-theme="dark"] .hiw-bp-bg{opacity:.06}
.hiw-layout{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:20px;align-items:start}
.hiw-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* Text node — system module feel */
.hiw-text-node{position:relative;padding:24px;border:1px solid var(--bd);border-radius:var(--r);z-index:2;background:var(--bg);transition:border-color .3s}
.hiw-text-node:hover{border-color:var(--sec)}
.hiw-node-corner{position:absolute;width:8px;height:8px;border-color:var(--sec);opacity:.35}
.hiw-nc-tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-top-left-radius:var(--r)}
.hiw-nc-tr{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid;border-top-right-radius:var(--r)}
.hiw-nc-bl{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:var(--r)}
.hiw-nc-br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-bottom-right-radius:var(--r)}
.hiw-text-node:hover .hiw-node-corner{opacity:.7}
.hiw-node-label{font-family:var(--m);font-size:0.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.hiw-node-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--sec);box-shadow:0 0 4px var(--sec);flex-shrink:0}
.hiw-node-body{font-size:0.86rem;color:var(--tm);line-height:1.7}
/* Diagram frame — schematic viewport */
.hiw-diagram-frame{position:relative;z-index:2;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--in);min-height:240px;transition:border-color .3s}
.hiw-diagram-frame:hover{border-color:var(--sec)}
.hiw-frame-overlay{position:absolute;inset:0;opacity:.03;background-image:linear-gradient(var(--tm) 1px,transparent 1px),linear-gradient(90deg,var(--tm) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:1}
.hiw-frame-dots{position:absolute;inset:0;pointer-events:none;z-index:2}
.hiw-fd{position:absolute;width:5px;height:5px;border-radius:50%;border:1px solid var(--sec);opacity:.3}
.hiw-diagram-frame:hover .hiw-fd{opacity:.6;box-shadow:0 0 4px rgba(57,140,209,.3)}
.hiw-diagram-img{position:relative;z-index:0;aspect-ratio:16/10;max-height:320px}
.hiw-diagram-img img{border-radius:0}
/* Responsive */
@media(max-width:768px){
  .hiw-layout{grid-template-columns:1fr;gap:16px}
  .hiw-connectors{display:none}
  .hiw-section{padding:20px 16px}
  .hiw-diagram-img{max-height:220px}
}

/* Cloudflare Turnstile seamless integration */
.cf-turnstile{display:flex;justify-content:center}
.cf-turnstile iframe{border-radius:var(--r) !important;max-width:100%}

/* ============================================
   CLIENT PORTAL — Industrial Access Centre
   ============================================ */
.cp-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px;border:1px solid var(--bd);border-radius:var(--r);text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.cp-tile:hover{border-color:var(--sec);box-shadow:0 0 12px rgba(57,140,209,.08)}
.cp-tile-t{font-family:var(--c);font-weight:700;font-size:.92rem;color:var(--th)}
.cp-tile-d{font-family:var(--m);font-size:0.76rem;color:var(--tm)}
.cp-equip-card{padding:18px 20px;border:1px solid var(--bd);border-radius:var(--r);transition:border-color .2s}
.cp-equip-card .dt{margin-right:6px;flex-shrink:0;vertical-align:middle}
.cp-equip-card:hover{border-color:var(--sec)}
.cp-equip-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cp-equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-bottom:12px}
.cp-equip-label{font-family:var(--m);font-size:0.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tm);margin-right:6px}
.cp-equip-val{font-family:var(--m);font-size:0.81rem;color:var(--tx)}
.cp-equip-actions{display:flex;gap:14px;padding-top:10px;border-top:1px solid var(--bd)}
.cp-doc-row{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--bd);border-radius:var(--r);font-family:var(--m);font-size:0.81rem;color:var(--tx);text-decoration:none;transition:border-color .2s,background .2s}
.cp-doc-row:hover{border-color:var(--sec);background:var(--hp);color:var(--sec)}
.cp-support-btn{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--bd);border-radius:var(--r);text-decoration:none;transition:border-color .2s}
.cp-support-btn:hover{border-color:var(--sec)}
@media(max-width:768px){
  .cp-equip-grid{grid-template-columns:1fr}
}

/* Clients label - visible on all screen sizes */
.nCl{font-family:var(--m);font-size:0.68rem;color:var(--tm)}
@media(max-width:768px){.nP{display:none !important}}

/* Portal parts table - hide Code/Status on mobile */
@media(max-width:768px){.cp-hide-mob{display:none}}

/* Form validation errors */
.ff-err{font-family:var(--m);font-size:0.68rem;color:var(--acc);margin-top:2px}

/* SVG lightbox trigger wrapper */
.svg-zoom{position:relative;cursor:zoom-in;border-radius:var(--r)}

/* Footer blueprint nodes */
.foot-nodes{position:absolute;inset:0;pointer-events:none;z-index:0}
.foot-nd{position:absolute;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--sec);opacity:.25;box-shadow:0 0 6px rgba(57,140,209,.1)}
[data-theme="dark"] .foot-nd{opacity:.35;box-shadow:0 0 8px rgba(57,140,209,.15)}

/* Prevent horizontal overflow on mobile */
html,body{overflow-x:hidden;max-width:100vw}

@media(max-width:768px){.spT td:first-child{width:auto;min-width:100px;max-width:130px;white-space:normal}}

/* Prevent iOS auto-zoom on input focus */
@media(max-width:768px){
  input.ff,select.ff,textarea.ff{font-size:16px !important}
  /* The country-code select is 56px on desktop, which clips "+971" once the
     16px mobile font size kicks in. */
  select.ff[id$="_cc"]{width:88px !important;padding-left:11px !important;padding-right:4px !important;font-size:15px !important}
}

/* Client Portal link in mobile hamburger */
.nk-portal{display:none}
@media(max-width:768px){
  .nk-portal{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--bd)}
  .nk-portal a{color:var(--sec) !important;font-weight:600}
}

/* Partner card logo layout */
.partner-inner{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.partner-logo{display:flex;align-items:center;justify-content:center}
.partner-logo img{max-width:180px;height:80px;object-fit:contain}
@media(max-width:768px){
  .partner-inner{grid-template-columns:1fr;gap:14px}
  .partner-logo{justify-content:flex-start}
  .partner-logo img{max-width:120px}
}

/* Mobile: larger toggle, CTA, hamburger */
@media(max-width:768px){
  .tg{width:40px;height:22px;border-radius:11px}
  .tg::after{width:16px;height:16px;top:2px;left:2px}
  [data-theme="dark"] .tg::after{transform:translateX(18px)}
  .nQ{padding:6px 10px;font-size:0.68rem}
  .nT{padding:5px}
  .nT span{width:20px;height:2.5px}
}

/* FAQ 2-column layout on desktop */
.faq-group{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:start}
.faq-group-title{grid-column:1/-1}
@media(max-width:768px){
  .faq-group{grid-template-columns:1fr}
}

/* Inline SVG diagrams open in the lightbox */
.hiw-text-node svg,.hiw-acc-body svg{cursor:zoom-in}

/* Article CTA buttons: side-by-side on mobile */
.art-cta-btns{display:flex;gap:8px}
.art-cta-btns .bt{flex:1;min-width:120px;text-align:center;font-size:0.71rem !important;padding:10px 12px !important}

/* Footer logo bigger */
footer .NL img,.fL .NL img{height:52px}

/* Mobile: reorder so Support stacks under Downloads */
@media(max-width:1024px){
  .pdH > div:first-child{display:contents}
  .pdH > div:last-child{display:contents}
  /* Everything defaults behind the render; the image and its caption lead. */
  .pdH > div > *{order:3}
  .pdH .pdM{order:1}
  .pdH .pdCap{order:2}
  .pdH .pdMd,.pdH h1,.pdH p.pdSub,.pdH p.pdDs,.pdH .pdK,.pdH .pdPr,.pdH .pdA,.pdH .prDis,.pdH .pdInc{order:3}
  .pdH .pdDl{order:4}
}

/* Belt Guard range header - mobile stack */
@media(max-width:768px){
  .bg-range-header{flex-direction:column;align-items:flex-start;gap:10px}
}


/* ============================================
   BELTSCANNER MF LANDING PAGE (lp-*)
   Theme-aware. Tonal steps are defined per
   theme so the page follows the global BSS
   light/dark toggle. No hard-coded colours.
   lp0 = strongest band ... lp2 = softest band
   lp3 = panel, lp4 = raised panel
   ============================================ */
[data-theme="dark"]{
  --lp0:#07090f;--lp1:#0a0c14;--lp2:#0e1119;--lp3:#12161f;--lp4:#171c28;
  --lpb:#1e2433;--lpb2:#2a3244;
  --lpgrid:rgba(57,140,209,.05);
  --lpf1:#161b28;--lpf2:#0b0e15;
  --lppl1:rgba(32,51,134,.24);--lppl2:rgba(18,22,31,.6);
  --lpsh:none;
}
[data-theme="light"]{
  --lp0:#e3e6ed;--lp1:#ecedf2;--lp2:#f4f5f8;--lp3:#ffffff;--lp4:#f7f8fb;
  --lpb:#ccd1da;--lpb2:#b3bac6;
  --lpgrid:rgba(32,51,134,.055);
  --lpf1:#ffffff;--lpf2:#e7eaf1;
  --lppl1:rgba(57,140,209,.13);--lppl2:rgba(255,255,255,.85);
  --lpsh:0 1px 3px rgba(16,22,40,.05);
}

/* --- Tonal bands --- */
.lp-s{padding:46px 0;position:relative}
.lp-s-sm{padding:30px 0;position:relative}
.lp-t0{background:var(--lp0)}
.lp-t1{background:var(--lp1)}
.lp-t2{background:var(--lp2)}
.lp-rule-top{border-top:1px solid var(--lpb)}
.lp-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--lpgrid) 1px,transparent 1px),linear-gradient(90deg,var(--lpgrid) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.lp-in{position:relative;z-index:2}

/* --- Type --- */
.lp-ey{font-family:var(--m);font-size:0.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sec);display:flex;align-items:center;gap:9px;margin-bottom:14px}
.lp-ey::before{content:'';width:24px;height:2px;background:var(--acc);flex-shrink:0}
.lp-ey-c{justify-content:center}
.lp-h2{font-family:var(--c);font-weight:700;font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.08;color:var(--th);margin-bottom:12px;letter-spacing:-.005em}
.lp-p{font-size:.94rem;line-height:1.72;color:var(--tm);max-width:600px}
.lp-p+.lp-p{margin-top:11px}
.lp-mono{font-family:var(--m);font-size:0.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tm)}

/* --- Hero --- */
.lp-hero{background:var(--lp0);padding:calc(var(--nh) + 30px) 0 38px;position:relative;overflow:hidden}
.lp-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--acc),rgba(57,140,209,.35) 45%,transparent 75%)}
.lp-hero-g{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;position:relative;z-index:2}
.lp-h1{font-family:var(--c);font-weight:700;font-size:clamp(1.95rem,4.1vw,3.1rem);line-height:1.03;color:var(--th);margin-bottom:14px;letter-spacing:-.012em}
.lp-h1 em{font-style:normal;color:var(--sec)}
.lp-lead{font-size:1rem;line-height:1.68;color:var(--tx);max-width:540px;margin-bottom:12px}
.lp-claim{font-family:var(--c);font-weight:600;font-size:1.02rem;color:var(--th);line-height:1.5;padding-left:13px;border-left:2px solid var(--sec);margin-bottom:20px}

/* --- Hero quick-quote panel (replaces price block) --- */
.lp-qq{border:1px solid var(--lpb2);border-left:3px solid var(--acc);background:var(--lp3);border-radius:var(--r);padding:18px 21px;margin-bottom:20px;max-width:460px;box-shadow:var(--lpsh)}
.lp-qq-t{font-family:var(--m);font-size:0.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sec);margin-bottom:8px}
.lp-qq-h{font-family:var(--c);font-weight:700;font-size:1.08rem;color:var(--th);margin-bottom:6px;line-height:1.3}
.lp-qq-d{font-size:0.9rem;color:var(--tm);line-height:1.6}
.lp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.lp-btn{padding:14px 28px;font-size:0.8rem}

/* --- Capability chips --- */
.lp-chips{display:flex;flex-wrap:wrap;gap:7px}
.lp-chip{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tm);border:1px solid var(--lpb);background:var(--lp3);border-radius:var(--r);padding:6px 10px;display:flex;align-items:center;gap:6px}
.lp-chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--ok);flex-shrink:0}

/* --- Product frame --- */
.lp-frame{background:radial-gradient(120% 90% at 60% 35%,var(--lpf1),var(--lpf2) 70%);border:1px solid var(--lpb2);border-radius:var(--r);padding:24px;position:relative;box-shadow:var(--lpsh)}
.lp-frame::before,.lp-frame::after{content:'';position:absolute;width:14px;height:14px;border-color:var(--sec);opacity:.5}
.lp-frame::before{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.lp-frame::after{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}
.lp-frame img{width:100%;height:auto}
.lp-frame-l{position:absolute;top:12px;right:14px;font-family:var(--m);font-size:0.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}

/* --- Independence split --- */
.lp-split{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center;position:relative;z-index:2}
.lp-stmt{font-family:var(--c);font-weight:700;line-height:1.02;letter-spacing:-.015em;margin-bottom:18px}
.lp-stmt .l1{display:block;font-size:clamp(1.6rem,3.4vw,2.5rem);color:var(--th)}
.lp-stmt .l2{display:block;font-size:clamp(1.9rem,4.2vw,3.05rem);color:var(--sec)}
.lp-sig{font-family:var(--m);font-size:0.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--th);line-height:2.05;margin-top:20px;padding-left:13px;border-left:2px solid var(--acc)}
.lp-plate{border:1px solid var(--lpb2);border-radius:var(--r);background:linear-gradient(150deg,var(--lppl1),var(--lppl2));padding:20px}
.lp-plate-t{font-family:var(--m);font-size:0.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);line-height:1.85}
.lp-plate-t span{color:var(--sec)}
.lp-list{display:grid;gap:8px;margin-top:16px}
.lp-li{display:flex;gap:10px;align-items:flex-start;font-size:0.91rem;color:var(--tm);line-height:1.55}
.lp-li::before{content:'';width:5px;height:5px;margin-top:7px;background:var(--ok);flex-shrink:0}

/* --- Capability matrix --- */
.lp-cap{display:grid;grid-template-columns:repeat(2,1fr);margin-top:22px;border-top:1px solid var(--lpb);border-left:1px solid var(--lpb)}
.lp-cap-i{border-right:1px solid var(--lpb);border-bottom:1px solid var(--lpb);padding:13px 16px;display:flex;gap:12px;align-items:flex-start;transition:background .25s}
.lp-cap-i:hover{background:var(--lp3)}
.lp-cap-k{font-family:var(--m);font-size:0.68rem;color:var(--sec);letter-spacing:.06em;padding-top:2px;flex-shrink:0;width:22px}
.lp-cap-t{font-family:var(--m);font-size:0.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--th);margin-bottom:4px}
.lp-cap-d{font-size:0.89rem;color:var(--tm);line-height:1.5}

/* --- Progression strip --- */
.lp-prog{display:flex;align-items:stretch;margin:20px 0 18px;border:1px solid var(--lpb);border-radius:var(--r);overflow:hidden;background:var(--lp3)}
.lp-prog-i{flex:1;padding:13px 12px;text-align:center;border-right:1px solid var(--lpb)}
.lp-prog-i:last-child{border-right:none}
.lp-prog-n{font-family:var(--m);font-size:0.68rem;color:var(--acc);letter-spacing:.14em;margin-bottom:6px}
.lp-prog-t{font-family:var(--c);font-weight:700;font-size:.95rem;color:var(--th);letter-spacing:.02em}
.lp-prog-d{font-size:0.84rem;color:var(--tm);line-height:1.5;margin-top:5px}

/* --- Process line --- */
.lp-proc{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;position:relative}
.lp-proc::before{content:'';position:absolute;top:19px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,var(--sec),rgba(57,140,209,.25));opacity:.5}
.lp-proc-i{position:relative;padding:0 14px;text-align:center}
.lp-proc-d{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;background:var(--lp3);border:1px solid var(--sec);display:flex;align-items:center;justify-content:center;font-family:var(--m);font-size:0.78rem;color:var(--sec);position:relative;z-index:2}
.lp-proc-t{font-family:var(--c);font-weight:700;font-size:1rem;color:var(--th);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.lp-proc-x{font-size:0.88rem;color:var(--tm);line-height:1.55}

/* --- Diagram split --- */
.lp-diag{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;margin-top:26px;border:1px solid var(--lpb);border-radius:var(--r);background:var(--lp3);padding:20px}
.lp-diag-f{background:var(--lp1);border:1px solid var(--lpb);border-radius:var(--r);padding:16px;cursor:zoom-in}

/* --- Service ladder --- */
.lp-ladder{margin-top:22px;max-width:840px}
.lp-rung{border:1px solid var(--lpb);border-radius:var(--r);background:var(--lp3);padding:15px 20px;display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;box-shadow:var(--lpsh)}
.lp-rung-k{font-family:var(--m);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sec);line-height:1.6}
.lp-rung-t{font-family:var(--c);font-weight:700;font-size:1.02rem;color:var(--th);margin-bottom:5px}
.lp-rung-d{font-size:0.91rem;color:var(--tm);line-height:1.6}
.lp-rung-hw{background:var(--lp4);border-color:var(--lpb2)}
.lp-rung-hw .lp-rung-k{color:var(--tm)}
.lp-rung-feat{border-color:var(--sec)}
.lp-down{text-align:center;color:var(--sec);font-size:.9rem;line-height:1;padding:5px 0;opacity:.55}

/* --- Value triad --- */
.lp-triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;background:var(--lpb);border:1px solid var(--lpb);border-radius:var(--r);overflow:hidden}
.lp-tri{background:var(--lp3);padding:22px 20px}
.lp-tri-n{font-family:var(--m);font-size:0.68rem;letter-spacing:.16em;color:var(--acc);margin-bottom:10px}
.lp-tri-t{font-family:var(--c);font-weight:700;font-size:1.35rem;color:var(--th);margin-bottom:8px;letter-spacing:.03em}
.lp-tri-d{font-size:0.91rem;color:var(--tm);line-height:1.6}

/* --- Sector strip --- */
.lp-strip{font-family:var(--m);font-size:0.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tm);line-height:2.1;border-top:1px solid var(--lpb);border-bottom:1px solid var(--lpb);padding:13px 0;margin:18px 0 20px}
.lp-strip b{color:var(--sec);font-weight:400;margin:0 7px}

/* --- Track record --- */
.lp-tr{display:grid;grid-template-columns:.92fr 1.08fr;gap:40px;align-items:center}
.lp-photo{border:1px solid var(--lpb2);border-radius:var(--r);overflow:hidden;position:relative}
.lp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lp-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,15,.1),rgba(7,9,15,.55))}
.lp-photo-c{position:absolute;bottom:12px;left:14px;z-index:2;font-family:var(--m);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:#dfe4ee}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lpb);border:1px solid var(--lpb);border-radius:var(--r);overflow:hidden;margin-top:22px}
.lp-stat{background:var(--lp3);padding:16px 14px;text-align:center}
.lp-stat-v{font-family:var(--m);font-weight:600;font-size:1.4rem;color:var(--sec);line-height:1}
.lp-stat-l{font-family:var(--m);font-size:0.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tm);margin-top:6px}

/* --- Partner strip --- */
.lp-partner{border:1px solid var(--lpb);border-left:2px solid var(--sec);border-radius:var(--r);background:var(--lp3);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:var(--lpsh)}

/* --- Quick Quote form --- */
.lp-form-g{display:grid;grid-template-columns:.78fr 1.22fr;gap:40px;align-items:start}
.lp-form{background:var(--lp3);border:1px solid var(--lpb2);border-radius:var(--r);padding:24px;box-shadow:var(--lpsh)}
.lp-step{border-top:1px solid var(--lpb);padding-top:16px;margin-top:18px}
.lp-step:first-of-type{border-top:none;padding-top:0;margin-top:0}
.lp-step-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lp-step-n{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;color:var(--acc);border:1px solid var(--lpb);border-radius:var(--r);padding:3px 7px;flex-shrink:0}
.lp-step-t{font-family:var(--m);font-size:0.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th)}
.lp-fr{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.lp-fr:last-child{margin-bottom:0}
.lp-lb{font-family:var(--m);font-size:0.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tm);margin-bottom:5px;display:block}
.lp-lb .opt{text-transform:none;letter-spacing:0;color:var(--tm);opacity:.75}

/* service selector cards */
.lp-svc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lp-svc-b{text-align:left;border:1px solid var(--lpb);background:var(--lp4);border-radius:var(--r);padding:11px 13px;cursor:pointer;transition:border-color .2s,background .2s;display:flex;gap:10px;align-items:flex-start;font-family:var(--s)}
.lp-svc-b:hover{border-color:var(--sec)}
.lp-svc-b[aria-pressed="true"]{border-color:var(--sec);background:var(--lppl1)}
.lp-svc-x{width:15px;height:15px;border:1px solid var(--lpb2);border-radius:var(--r);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:0.68rem;color:#fff;line-height:1}
.lp-svc-b[aria-pressed="true"] .lp-svc-x{background:var(--sec);border-color:var(--sec)}
.lp-svc-b[aria-pressed="true"] .lp-svc-x::after{content:'\2713'}
.lp-svc-t{font-family:var(--m);font-size:0.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--th);margin-bottom:3px}
.lp-svc-d{font-size:0.83rem;color:var(--tm);line-height:1.45}
.lp-svc-inc{border:1px dashed var(--lpb2);border-radius:var(--r);padding:10px 13px;margin-bottom:9px;display:flex;gap:10px;align-items:center}
.lp-svc-inc .lp-svc-t{margin-bottom:0}
.lp-inc-tag{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);border-radius:var(--r);padding:2px 6px;flex-shrink:0}
.lp-note{font-size:0.84rem;color:var(--tm);line-height:1.55;margin-top:14px}
.lp-status{margin-top:12px;padding:11px 14px;border-radius:var(--r);font-size:0.89rem;display:none}
.lp-status.ok{display:block;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:var(--ok)}
.lp-status.err{display:block;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:var(--cr)}
.lp-need{border:1px solid var(--lpb);border-radius:var(--r);background:var(--lp3);padding:16px 18px;margin-top:20px;box-shadow:var(--lpsh)}
.lp-need-t{font-family:var(--m);font-size:0.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tm);margin-bottom:9px}
.lp-need-i{font-family:var(--m);font-size:0.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--th);line-height:1.95}

/* --- FAQ tone on landing bands --- */
.lp-s .faq-item{background:var(--lp3);border-color:var(--lpb)}
.lp-s .faq-q{color:var(--th)}
.lp-s .faq-q:hover{background:var(--lp4)}

/* --- Final --- */
.lp-final{text-align:center;position:relative;z-index:2;max-width:660px;margin:0 auto}
.lp-final-s{font-family:var(--m);font-size:0.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sec);line-height:2.1;margin-top:24px}

/* --- Responsive --- */
@media(max-width:1024px){
  .lp-hero-g,.lp-split,.lp-diag,.lp-tr,.lp-form-g{grid-template-columns:1fr;gap:30px}
  .lp-proc{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .lp-proc::before{display:none}
  .lp-triad{grid-template-columns:1fr}
  .lp-hero{padding:calc(var(--nh) + 28px) 0 34px}
}
@media(max-width:768px){
  .lp-s{padding:34px 0}
  .lp-s-sm{padding:24px 0}
  .lp-cap,.lp-fr,.lp-proc,.lp-svc{grid-template-columns:1fr}
  .lp-prog{flex-direction:column}
  .lp-prog-i{border-right:none;border-bottom:1px solid var(--lpb)}
  .lp-prog-i:last-child{border-bottom:none}
  .lp-rung{grid-template-columns:1fr;gap:10px}
  .lp-cta{flex-direction:column}
  .lp-cta .bt{width:100%;justify-content:center}
  .lp-qq{max-width:none}
  .lp-frame{padding:15px}
  .lp-stats{grid-template-columns:1fr}
  .lp-partner{flex-direction:column;align-items:flex-start}
}

/* ============================================
   ONLINE PORTAL SECTION (bp-*)
   Theme-aware; reuses core tokens.
   ============================================ */
.bp-sect{margin:0 0 40px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);overflow:hidden}
.bp-head{padding:26px 28px 20px;border-bottom:1px solid var(--bd)}
.bp-ey{font-family:var(--m);font-size:0.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sec);display:flex;align-items:center;gap:9px;margin-bottom:12px}
.bp-ey::before{content:'';width:24px;height:2px;background:var(--acc);flex-shrink:0}
.bp-h{font-family:var(--c);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.1;color:var(--th);margin-bottom:10px}
.bp-p{font-size:.94rem;line-height:1.7;color:var(--tm);max-width:660px}
.bp-body{padding:24px 28px 28px}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.bp-cell{background:var(--pn);padding:20px 18px}
.bp-cell-v{font-family:var(--m);font-weight:600;font-size:1.5rem;color:var(--sec);line-height:1;margin-bottom:8px}
.bp-cell-t{font-family:var(--m);font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--th);margin-bottom:5px}
.bp-cell-d{font-size:0.89rem;color:var(--tm);line-height:1.55}
.bp-shots{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin-bottom:22px}
.bp-shot{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--in);position:relative;aspect-ratio:16/10;cursor:zoom-in}
.bp-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.bp-shot-side{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-height:0}
.bp-shot-side>.bp-shot{aspect-ratio:auto;min-height:0}
.bp-cap{position:absolute;bottom:0;left:0;right:0;padding:7px 11px;background:linear-gradient(transparent,rgba(0,0,0,.72));font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:#e8ecf4}
/* placeholder shown until real screenshots are supplied */
.bp-ph{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:repeating-linear-gradient(45deg,var(--in),var(--in) 9px,transparent 9px,transparent 18px);border:1px dashed var(--bd);color:var(--tm);text-align:center;padding:16px}
.bp-ph-t{font-family:var(--m);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.bp-ph-d{font-size:0.8rem;line-height:1.5;max-width:280px}
.bp-shot-side .bp-ph{aspect-ratio:auto;height:100%;min-height:104px}
.bp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px}
.bp-li{display:flex;gap:10px;align-items:flex-start;font-size:0.92rem;color:var(--tm);line-height:1.55}
.bp-li::before{content:'';width:5px;height:5px;margin-top:7px;background:var(--ok);flex-shrink:0}
@media(max-width:900px){
  .bp-grid{grid-template-columns:1fr}
  .bp-shots{grid-template-columns:1fr}
  .bp-shot-side{grid-template-rows:auto auto}
  .bp-shot-side>.bp-shot{aspect-ratio:16/9}
  .bp-list{grid-template-columns:1fr}
  .bp-head,.bp-body{padding-left:18px;padding-right:18px}
}

/* Single case study spans the grid */
.csG .csC:only-child{grid-column:1/-1}

/* ============================================
   Lightbox — product images, diagrams, portal
   ============================================ */
.lbx{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(6,8,14,.92);backdrop-filter:blur(3px);padding:56px 24px 72px;opacity:0;transition:opacity .18s}
.lbx.on{display:flex}
.lbx.vis{opacity:1}
.lbx-stage{position:relative;max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r);cursor:zoom-in}
.lbx-stage.zoomed{cursor:grab}
.lbx-stage.zoomed.dragging{cursor:grabbing}
.lbx-stage img{max-width:100%;max-height:calc(100vh - 128px);width:auto;height:auto;object-fit:contain;display:block;transition:transform .25s;transform-origin:50% 50%}
.lbx-stage svg{width:100%;max-height:calc(100vh - 172px);height:auto;display:block;transition:transform .25s;transform-origin:50% 50%}
.lbx-stage.zoomed img,.lbx-stage.zoomed svg{transform:scale(2.4);transition:none}
.lbx-svgpad{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:22px;width:min(1000px,92vw);max-height:calc(100vh - 128px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lbx-imgpad{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:14px;display:flex;align-items:center;justify-content:center}
.lbx-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--m);font-size:0.76rem;letter-spacing:.05em;color:#9aa2b4;padding:0 24px;pointer-events:none}
.lbx-x{position:absolute;top:16px;right:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);color:#e8ecf4;font-size:1.1rem;line-height:1;cursor:pointer;transition:all .2s}
.lbx-x:hover{background:var(--acc);border-color:var(--acc)}
.lbx-hint{position:absolute;top:20px;left:20px;font-family:var(--m);font-size:0.68rem;letter-spacing:.09em;text-transform:uppercase;color:#9aa2b4}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);color:#e8ecf4;cursor:pointer;transition:all .2s;z-index:2}
.lbx-nav:hover{background:var(--acc);border-color:var(--acc)}
.lbx-prev{left:16px}
.lbx-next{right:16px}
.lbx-count{position:absolute;bottom:22px;right:22px;font-family:var(--m);font-size:0.68rem;letter-spacing:.09em;color:#9aa2b4}
body.lbx-open{overflow:hidden}
@media(max-width:768px){
  .lbx{padding:52px 12px 74px}
  .lbx-hint{display:none}
  .lbx-stage img,.lbx-stage svg{max-height:calc(100vh - 132px)}

  /* Zoomed on a phone, every pixel of screen counts. Drop the padding, the
     pad chrome and the caption, and let the stage take the whole viewport so
     the magnified drawing has somewhere to go. Scale is raised too: 2.4x of a
     letterboxed image is not enough to read a dimension callout.

     The pad KEEPS its background. The diagrams are transparent PNG/WebP with
     dark artwork in the light variant, so a transparent pad drops them onto
     the dark overlay and they read as the wrong variant. */
  .lbx:has(.lbx-stage.zoomed){padding:0}
  .lbx-stage.zoomed{max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;border-radius:0}
  .lbx-stage.zoomed .lbx-imgpad{padding:0;border:0;border-radius:0;
    width:100vw;height:100dvh}
  .lbx-stage.zoomed img{max-height:100dvh;max-width:100vw}
  .lbx-stage.zoomed img,.lbx-stage.zoomed svg{transform:scale(3.2)}
  .lbx:has(.lbx-stage.zoomed) .lbx-cap,
  .lbx:has(.lbx-stage.zoomed) .lbx-count,
  .lbx:has(.lbx-stage.zoomed) .lbx-nav{display:none}
  .lbx-svgpad{padding:12px;width:96vw}
  .lbx-nav{top:auto;bottom:14px;transform:none;width:38px;height:38px}
  .lbx-prev{left:14px}
  .lbx-next{right:14px}
  .lbx-cap{bottom:56px}
  .lbx-count{bottom:25px;right:auto;left:50%;transform:translateX(-50%)}
}
/* Included-with-product note (product hero) */
.pdInc{margin-top:14px;display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border:1px solid var(--bd);border-left:2px solid var(--ok);border-radius:var(--r);background:var(--in)}
.pdInc-k{font-family:var(--m);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ok);flex-shrink:0;padding-top:2px}
.pdInc-t{font-size:0.88rem;color:var(--tm);line-height:1.6;margin:0}
@media(max-width:600px){.pdInc{flex-direction:column;gap:6px}}

/* ============================================
   Public "From" pricing — understated, non-retail
   ============================================ */
.pC-price{display:flex;align-items:baseline;gap:7px;margin-bottom:12px}
.pC-price-l{font-family:var(--m);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tm)}
.pC-price-v{font-family:var(--c);font-weight:700;font-size:1.02rem;color:var(--hth);letter-spacing:.01em}

/* Product hero price block */
.pdPr{margin:18px 0 14px;padding:16px 0 0;border-top:1px solid var(--bd)}
.pdPr-l{font-family:var(--m);font-size:0.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tm);margin-bottom:5px}
.pdPr-v{font-family:var(--c);font-weight:700;font-size:1.9rem;line-height:1.1;color:var(--hth);letter-spacing:-.01em}
.pdPr-n{font-size:0.86rem;color:var(--tm);line-height:1.6;margin-top:8px;max-width:46ch}

/* Comparison table price row */
.cT-compare .cPr{font-family:var(--c);font-weight:700;color:var(--hth)}

/* Pricing disclaimer — deliberately low-contrast */
.prDis{font-size:0.9rem;color:var(--tx);line-height:1.7;max-width:78ch;margin-top:18px}
.prDis strong{color:var(--tx);font-weight:600}
.prRen{font-family:var(--m);font-size:0.82rem;letter-spacing:.04em;color:var(--tx);margin-top:12px;line-height:1.6}
.prRen b{color:var(--tx);font-weight:600}

@media(max-width:600px){
  .pdPr-v{font-size:1.6rem}
  .pC-price{margin-bottom:10px}
}

/* ============================================
   V1 System Operation — numbered sequence,
   no installation schematics
   ============================================ */
.opSeq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;position:relative;z-index:2}
.opCard{padding:24px 24px 26px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);transition:border-color .25s,box-shadow .25s}
.opCard:hover{border-color:var(--sec);box-shadow:0 0 22px rgba(57,140,209,.07)}
.opHd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.opIc{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--bd);border-radius:var(--r);color:var(--sec);background:var(--in)}
.opIc svg{width:21px;height:21px;display:block}
.opCard:hover .opIc{border-color:var(--sec)}
.opNum{font-family:var(--m);font-size:1.45rem;font-weight:600;color:var(--sec);line-height:1;letter-spacing:-.02em;opacity:.5}
.opT{font-family:var(--c);font-size:1.04rem;font-weight:700;color:var(--th);margin:0 0 9px;letter-spacing:.01em}
.opP{font-size:.9rem;color:var(--tx);line-height:1.7;margin:0 0 9px}
.opP:last-child{margin-bottom:0}
.opL{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:6px}
.opL li{font-size:0.92rem;color:var(--tx);line-height:1.55;padding-left:16px;position:relative}
.opL li:before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--sec);opacity:.7}

/* Technical clarification callout */
.tNote{margin-top:22px;padding:16px 18px;border:1px solid var(--bd);border-left:2px solid var(--sec);border-radius:var(--r);background:var(--pn);position:relative;z-index:2}
.tNote p{font-size:0.93rem;color:var(--tx);line-height:1.68;margin:0}
.tNote p+p{margin-top:7px}
.tNote b{color:var(--tx);font-weight:600}

/* What Gets Installed */
.wgiG{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.wgiI{padding:17px 18px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn)}
.wgiQ{font-family:var(--m);font-size:0.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);margin-bottom:7px}
.wgiN{font-family:var(--c);font-size:1.06rem;font-weight:700;color:var(--th);margin-bottom:7px;line-height:1.3}
.wgiD{font-size:.94rem;color:var(--tx);line-height:1.65;margin:0}
.wgiSub{font-family:var(--m);font-size:0.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tx);margin:26px 0 0}

/* One Scanner. Multiple Conveyors. — portable proposition */
.oneSc{margin:26px 0 0;padding:26px 28px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);text-align:center;position:relative;z-index:2}
.oneSc-h{font-family:var(--c);font-size:1.55rem;font-weight:700;color:var(--th);line-height:1.25;margin:0 0 9px;letter-spacing:-.01em}
.oneSc-p{font-size:.92rem;color:var(--tx);line-height:1.65;margin:0 auto;max-width:62ch}

/* Want the Engineering Detail? */
.engD{margin-bottom:40px;padding:24px 26px;border:1px solid var(--bd);border-radius:var(--r)}
.engL{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.engL a{font-family:var(--m);font-size:0.74rem;font-weight:600;letter-spacing:.04em;color:var(--sec);padding:10px 14px;border:1px solid var(--bd);border-radius:var(--r);transition:all .2s}
.engL a:hover{color:var(--acc);border-color:var(--acc)}

@media(max-width:900px){.opSeq{grid-template-columns:1fr}}
@media(max-width:768px){
  .wgiG{grid-template-columns:1fr}
  .opCard{padding:20px}
  .opNum{font-size:1.2rem}
  .oneSc{padding:20px 18px}
  .oneSc-h{font-size:1.25rem}
  .engD{padding:18px 16px}
  .engL a{width:100%}
}
.pdCap{font-family:var(--m);font-size:0.68rem;letter-spacing:.05em;color:var(--tm);margin:9px 0 0;line-height:1.5}

/* Bottom-of-page quote CTA (product pages) */
.pdCta{margin-bottom:40px;padding:38px 32px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);text-align:center}
.pdCta-h{font-family:var(--c);font-size:1.5rem;font-weight:700;color:var(--th);line-height:1.25;margin:0 0 10px;letter-spacing:-.01em}
.pdCta-p{font-size:.92rem;color:var(--tx);line-height:1.65;margin:0 auto 20px;max-width:58ch}
.pdCta-pr{font-family:var(--m);font-size:0.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tm);margin:0 0 18px}
.pdCta-pr b{font-family:var(--c);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--th)}
.pdCta-a{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(max-width:600px){
  .pdCta{padding:26px 18px}
  .pdCta-h{font-size:1.22rem}
  .pdCta-a a{width:100%}
}

/* Related product + closing CTA, paired side by side */
.endRow{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-bottom:40px}
.endCol{display:flex;flex-direction:column;margin-bottom:0}
.endCol .rG,.endCol .pdCta{flex:1;margin:20px 0 0}
.endCol .rG > .pC{height:100%}
.endRow .pdCta{display:flex;flex-direction:column;justify-content:center;text-align:center}
@media(max-width:900px){
  .endRow{grid-template-columns:1fr}
  .endCol .rG,.endCol .pdCta{flex:none}
}

/* Hero infographic variant: dense artwork, so fill the frame edge-to-edge
   at its native 3:2 and lean on the lightbox for readable detail. */
.pdM-info{aspect-ratio:3/2;padding:0;background:#f4f5f8;border:1px solid var(--bd)}
.pdM-info img{max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain;filter:none}
[data-theme="dark"] .pdM-info{background:#eef0f4}

/* ============================================
   Connectivity icons on product card imagery
   Laptop = data download / configuration software
   PLC    = hard-wired plant control integration
   ============================================ */
.pC-conn{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.pC-conn .cGrp{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r);border:1px solid var(--bd);background:var(--pn);opacity:.94}
.pC-conn .cGrp.is-plc{margin-left:auto}
.pC-conn .cIc{display:inline-flex;align-items:center;justify-content:center;color:var(--sec)}
.pC-conn .cIc svg{width:18px;height:18px;display:block}
.pC-conn .cLb{font-family:var(--m);font-size:0.68rem;font-weight:600;letter-spacing:.08em;color:var(--tx);line-height:1}
@media(max-width:600px){
  .pC-conn{left:8px;right:8px;bottom:8px}
  .pC-conn .cGrp{gap:5px;padding:3px 6px}
  .pC-conn .cIc svg{width:15px;height:15px}
  .pC-conn .cLb{font-size:0.68rem}
}

/* ============================================
   Mobile product hero: tighter rhythm + one-line CTAs
   ============================================ */
@media(max-width:1024px){
  .pdH .pdT{margin-top:4px}
  .pdH .pdSub{margin-bottom:8px}
  .pdH .pdDs{margin-bottom:10px}
  .pdH .pdCap{margin:4px 0 6px}
  .pdH .pdK{margin:6px 0}
  .pdH .pdPr{margin:8px 0 10px;padding-top:12px}
  .pdH .pdA{margin:0 0 10px}
  .pdH .prDis{margin-top:8px}
  .pdH .pdInc{margin-top:10px}
  /* "Tell us about your conveyor" is too long to sit beside Get Pricing at
     this width — it was overflowing the hero. Dropped on mobile; the same
     action is still offered in the final CTA at the foot of the page. */
  .pdH .pdA .bt.bo{display:none}
  .pdA{flex-wrap:wrap}
  .pdA .bt{flex:1 1 100%;justify-content:center;padding:13px 14px;font-size:0.74rem;letter-spacing:.05em}
}

/* ============================================
   Mobile scroll performance
   The fixed nav's 16px backdrop-blur forces the browser to re-blur a
   full-width strip of page content on every scroll frame, which is the
   usual cause of "stuttering / catching up" scroll on phones. Blend modes
   on the card watermarks add a second compositing cost per card.
   Both are dropped below 1024px; the nav uses an opaque bar instead.
   ============================================ */
@media(max-width:1024px){
  nav.N{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .hA .bo{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.22)}
  .bg-watermark,.bg-watermark-lg{mix-blend-mode:normal}
  [data-theme="dark"] .bg-watermark,[data-theme="dark"] .bg-watermark-lg{mix-blend-mode:normal}
  [data-theme="light"] .bg-watermark,[data-theme="light"] .bg-watermark-lg{mix-blend-mode:normal}
  /* Reveal transforms only need compositing while they run. */
  .rv{will-change:opacity,transform}
  .rv.v{will-change:auto}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}


/* Contact form: paired fields stack on mobile so Job Title, Interest and the
   rest each get a full-width line instead of being squashed into halves. */
.ctf-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
@media (max-width:760px){.ctf-2{grid-template-columns:1fr}}

/* ---- Spare parts ------------------------------------------------------- */
.spSec{margin-bottom:36px}
.spSecH{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.spSecT{font-family:var(--c);font-weight:700;font-size:1.15rem;color:var(--th)}
.spSecS{font-size:.86rem;color:var(--tm);margin-top:2px}
.spCode{font-family:var(--m);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tm)}
.spCode b{color:var(--sec)}
.spT2{min-width:720px}
.spT2 td,.spT2 th{white-space:normal;vertical-align:top}
.spT2 .spPn{font-family:var(--m);font-size:.78rem;color:var(--sec);white-space:nowrap}
.spT2 .spDs{color:var(--tx)}
.spT2 .spNt{color:var(--tm);font-size:.84rem}
.spT2 .spAc{text-align:right;white-space:nowrap}
.spEn{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--sec);text-decoration:none;border-bottom:1px solid transparent}
.spEn:hover{border-bottom-color:var(--sec)}
@media (max-width:760px){.spSecH{align-items:flex-start;flex-direction:column;gap:6px}}

/* Enquiry sent — replaces the form so the confirmation persists. */
.formDone{border:1px solid var(--ok);border-left:3px solid var(--ok);border-radius:var(--r);background:rgba(34,197,94,.06);padding:22px 24px}
.formDone-t{font-family:var(--c);font-weight:700;font-size:1.1rem;color:var(--th);margin-bottom:6px}
.formDone-p{font-size:.92rem;color:var(--tx);line-height:1.6;margin:0}
.formDone-p a{color:var(--sec)}

/* Low-prominence links to discontinued systems. Deliberately not part of the
   product grid or navigation — discoverable, not promoted. */
.lgLinks{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:38px;padding-top:16px;border-top:1px solid var(--bd);font-size:.84rem;color:var(--tm)}
.lgLinks-l{font-family:var(--m);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tm)}
.lgLinks a{color:var(--sec)}
.lgLinks-n{color:var(--tm);font-size:.8rem;margin-left:4px}
@media (max-width:560px){.lgLinks{flex-direction:column;align-items:flex-start;gap:4px}.lgLinks-n{margin-left:0}}

/* Download tiles are links now, not JS triggers. */
.dR-link{text-decoration:none;color:inherit;cursor:pointer}
.dR-link .bdl{display:inline-flex;align-items:center;pointer-events:none}


/* The discontinued-systems line is a quiet footnote, not a section. Drop the
   alternating background so it does not read as a band of its own. */
section:has(> .X > .lgLinks){background:none}


/* ============================================
   Lightbox in landscape on a phone or small tablet
   A rotated screen is how a drawing actually gets read, and vertical space is
   the scarce resource. Strip every piece of chrome — hint, caption, counter —
   and give the image the whole viewport. The nav buttons stay, as overlays,
   because swipe-to-change is deliberately disabled.
   ============================================ */
@media (orientation:landscape) and (max-height:600px){
  .lbx{padding:0}
  .lbx-hint,.lbx-cap,.lbx-count{display:none}
  /* Unzoomed the pad hugs the artwork, so a portrait-ish diagram sits in the
     middle with the overlay either side rather than on a full-bleed white
     sheet. Aspect ratio is the limit here: filling the height IS the maximum
     without cropping the drawing. */
  .lbx-stage{max-width:100vw;max-height:100dvh;width:auto;height:auto;border-radius:0}
  .lbx-imgpad{padding:0;border:0;border-radius:0;width:auto;height:auto}
  .lbx-stage img,.lbx-stage svg{max-height:100dvh;max-width:100vw}

  /* Zoomed, the stage takes the whole viewport so the magnified drawing can be
     panned across the full width instead of through a narrow window. */
  .lbx-stage.zoomed{width:100vw;height:100dvh}
  .lbx-stage.zoomed .lbx-imgpad{width:100vw;height:100dvh}
  .lbx-close{top:8px;right:8px;width:38px;height:38px;background:rgba(6,8,14,.6)}
  .lbx-nav{top:50%;bottom:auto;transform:translateY(-50%);width:36px;height:36px;
    background:rgba(6,8,14,.55);border-color:rgba(255,255,255,.18)}
  .lbx-prev{left:8px}
  .lbx-next{right:8px}
  /* Zoomed in landscape the nav goes too — nothing should sit over the
     drawing once you are reading it. */
  .lbx:has(.lbx-stage.zoomed) .lbx-nav{display:none}
}

/* ============================================
   Launch pass: problem selector, About Today,
   partner note, spare-parts tools
   ============================================ */

/* Products: choose by problem */
.cbpWrap{margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid var(--bd)}
.cbpG{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.cbpC{display:flex;flex-direction:column;background:var(--pn);border:1px solid var(--bd);border-left:3px solid var(--sec);border-radius:var(--r);padding:16px 18px;transition:border-color .2s,box-shadow .2s}
.cbpC:hover{border-color:var(--sec);box-shadow:var(--s1)}
.cbpK{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);margin-bottom:6px}
.cbpN{font-size:.92rem;color:var(--tx);line-height:1.45;margin-bottom:12px;flex:1}
.cbpL{font-family:var(--m);font-size:.78rem;font-weight:700;color:var(--sec)}
.cbpC:hover .cbpL{color:var(--acc)}
.cbpS{font-family:var(--m);font-size:.66rem;color:var(--tm);margin-top:4px}
@media(max-width:800px){.cbpG{grid-template-columns:1fr}}

/* About: Beltscan today */
.todayG{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.todayC{background:var(--pn);border:1px solid var(--bd);border-top:3px solid var(--sec);border-radius:var(--r);padding:16px 18px}
.todayK{font-family:var(--m);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--tx);margin-bottom:7px}
.todayD{font-size:.87rem;color:var(--tm);line-height:1.55}
@media(max-width:900px){.todayG{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.todayG{grid-template-columns:1fr}}

/* Partners: direct supply note */
.pnDirect{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:26px 0 40px;padding:18px 22px;background:var(--pn);border:1px solid var(--bd);border-left:3px solid var(--acc);border-radius:var(--r)}
.pnDirect-t{font-family:var(--m);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx);margin-bottom:4px}
.pnDirect-p{font-size:.93rem;color:var(--tm);margin:0;line-height:1.5}
@media(max-width:700px){.pnDirect{flex-direction:column;align-items:stretch;text-align:center}.pnDirect .bt{width:100%;text-align:center}}

/* Spare parts: search + filters */
.spTools{margin:0 0 26px}
.spSearchW{position:relative;max-width:460px}
.spSearchI{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--tm);pointer-events:none}
.spSearch{width:100%;padding-left:36px}
.spSearch::-webkit-search-cancel-button{cursor:pointer}
.spChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.spChip{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:7px 13px;background:var(--pn);color:var(--tm);border:1px solid var(--bd);border-radius:var(--r);cursor:pointer;transition:border-color .2s,color .2s,background .2s;white-space:nowrap}
.spChip:hover{border-color:var(--sec);color:var(--sec)}
.spChip.is-on{background:var(--sec);border-color:var(--sec);color:#fff}
.spCount{font-family:var(--m);font-size:.74rem;color:var(--tm);margin:12px 0 0}
@media(max-width:700px){
  .spSearchW{max-width:none}
  .spChips{flex-wrap:nowrap;overflow-x:auto;margin:12px -18px 0;padding:0 18px 4px;scrollbar-width:none}
  .spChips::-webkit-scrollbar{display:none}
}

/* Case study: word-metric values and single-column body on mobile */
@media(max-width:760px){
  .cs-metric{flex-wrap:wrap;gap:10px}
  .cs-metric-item{flex:1 1 calc(50% - 5px);min-width:0;padding:12px 10px}
  .cs-metric-val{font-size:1.15rem;overflow-wrap:anywhere}
  .cs-metric-lbl{font-size:.6rem}
  .cs-body{grid-template-columns:1fr !important;gap:22px !important}
}

/* Pricing gate: logged-out by default, revealed once /api/pricing responds */
.pxIn{display:none}
html.px-authed .pxIn{display:block}
html.px-authed span.pxIn{display:inline}
html.px-authed .pxOut{display:none}
.pxLock{display:inline-flex;align-items:center;gap:9px;font-family:var(--m);font-size:.86rem;font-weight:600;color:var(--tm);background:var(--in);border:1px dashed var(--bd);border-radius:var(--r);padding:9px 14px;margin:2px 0 4px}
.pxLock svg{width:16px;height:16px;flex-shrink:0;color:var(--sec)}

/* Request-access form: hint text and inline status */
.fH2{font-family:var(--m);font-size:.74rem;color:var(--tm);line-height:1.5;margin:5px 0 0}
.fSt2{font-family:var(--m);font-size:.82rem;line-height:1.5;padding:10px 13px;border-radius:var(--r);margin-bottom:14px}
.fSt2.ok{background:var(--in);border:1px solid var(--ok);color:var(--ok)}
.fSt2.err{background:var(--in);border:1px solid var(--acc);color:var(--acc)}
.ctBox .ctf-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.ctBox>div:not(.ctf-2):not(.fSt2){margin-bottom:12px}
@media(max-width:640px){.ctBox .ctf-2{grid-template-columns:1fr}}

/* Comparison table: the trailing CTA row sat on white while every other row
   carries the table's own surface — match it so the block reads as one table */
.cT-compare .qt-row td{background:transparent}
.cT-compare .qt-row td:first-child{background:#fff}
.cT-compare tr:last-child td{border-bottom:0}

/* Enquiry forms: give the homepage and contact forms a defined edge rather
   than floating loose on the page background */
.ctForm,#hsFormHome{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:22px}
@media(max-width:640px){.ctForm,#hsFormHome{padding:16px}}

/* Belt Guard wordmark: keep its aspect and give it room on small screens.
   The mark is far wider than the old dog, so the flex cell needs to grow
   rather than compress the image. */
.sDog{object-fit:contain}
@media(max-width:700px){
  .sbar .sBrand{flex:1.7 1 auto;min-width:150px}
  .sDog{height:34px;width:auto}
}