/* Beltscan — product page additions.
   Loaded after main.css. Every class here is prefixed `pp-`; everything else
   on the page reuses main.css. All colour comes from the existing theme
   tokens, so dark/light both work with no extra rules. */

.pp-sect { margin-bottom: 44px; position: relative; z-index: 2; }

/* --- Qualification / scope: two panels ------------------------------- */

.pp-qual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.pp-panel {
  padding: 22px 24px;
  background: var(--pn);
  border: 1px solid var(--bd);
  border-left: 2px solid var(--bd);
  border-radius: var(--r);
  transition: border-color .25s, box-shadow .25s;
}
.pp-panel-ok { border-left-color: var(--ok); }
.pp-panel-wn { border-left-color: var(--wn); }
.pp-panel-cr { border-left-color: var(--acc); }
.pp-panel:hover { box-shadow: var(--s1); }

.pp-panel-h {
  font-family: var(--m);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.pp-panel-ok .pp-panel-h { color: var(--ok); }
.pp-panel-wn .pp-panel-h { color: var(--wn); }
.pp-panel-cr .pp-panel-h { color: var(--acc); }

/* The mark and the first line of text are laid out as a two-column grid rather
   than an absolutely positioned ::before, so they share a baseline no matter
   how the text wraps or what the inherited line-height is. */
.pp-ticks { margin: 0; padding: 0; list-style: none; }
.pp-ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: .94rem;
  color: var(--tx);
  line-height: 1.55;
}
.pp-ticks li::before {
  content: "\2713";
  color: var(--ok);
  font-weight: 700;
  font-size: .92em;
  text-align: center;
}
/* Inline links stay in the flow of the item's text, not on their own row. */
.pp-ticks li > span > .pp-link { display: inline; margin-top: 0; }
.pp-crosses li::before { content: "\2715"; color: var(--acc); }

.pp-link {
  font-family: var(--m);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sec);
  display: inline-block;
  margin-top: 12px;
  transition: color .2s;
}
.pp-link:hover { color: var(--acc); }

/* --- Installation photographs ---------------------------------------- */

.pp-fG .fGi { position: relative; }
.pp-fc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 11px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.pp-cap {
  font-size: .93rem;
  color: var(--tx);
  line-height: 1.68;
  max-width: 78ch;
  margin: 12px 0 0;
}

/* --- Business case: three-up reuse of .wgiG -------------------------- */

.pp-wgi3 { grid-template-columns: repeat(3, 1fr); }

/* --- Track record ---------------------------------------------------- */

.pp-refs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.pp-ref {
  padding: 16px 18px;
  background: var(--pn);
  border: 1px solid var(--bd);
  border-left: 2px solid var(--sec);
  border-radius: var(--r);
}
.pp-ref-s {
  font-family: var(--c);
  font-weight: 700;
  font-size: .98rem;
  color: var(--th);
  line-height: 1.25;
}
.pp-ref-r { font-size: .88rem; color: var(--tx); margin-top: 3px; }
.pp-ref-d {
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--tm);
  margin-top: 8px;
  line-height: 1.5;
}

/* --- Unconfirmed content flag ---------------------------------------- */

.pp-todo {
  font-family: var(--m);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--wn);
  border: 1px dashed var(--wn);
  border-radius: var(--r);
  padding: 1px 7px;
  white-space: nowrap;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
  .pp-refs { grid-template-columns: repeat(2, 1fr); }
  .pp-wgi3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pp-qual { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .pp-refs, .pp-wgi3 { grid-template-columns: 1fr; }
  .pp-panel { padding: 18px 16px; }
  .pp-sect { margin-bottom: 34px; }
}

/* --- Theme-paired artwork ---------------------------------------------
   Some hero diagrams ship as a light and a dark rendering rather than a
   single transparent one, because the type has to invert. Both are in the
   markup; the theme picks one. The hidden variant carries loading="lazy",
   which keeps browsers from fetching an image that is display:none. */

/* .pdM-info is a fixed light plate because the older hero infographics are
   light-background JPGs. A diagram that ships a true dark rendering needs the
   plate to go dark with it — scoped to .pp-diagram so the other product
   heroes are untouched. The lightbox pad already follows the theme. */

[data-theme="dark"] .pdM-info.pp-diagram { background: #05070d; }
[data-theme="light"] .pdM-info.pp-diagram { background: #f2f3f7; }

/* .pdM-info is locked to 3/2 for the old landscape JPGs. The diagram sheets are
   a different shape, so forcing them into 3/2 letterboxed them with dead space
   on both sides. Let the artwork set the height instead. */
.pdM-info.pp-diagram { aspect-ratio: auto; padding: 0; }
.pdM-info.pp-diagram img { width: 100%; height: auto; object-fit: fill; }
[data-theme="dark"] .lbx-imgpad { background: #05070d; }

/* --- Legacy (discontinued) product pages ------------------------------- */

.lgH { margin: 6px 0 40px; }
.lgT { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lgH .pdT { margin: 0; }
.lgS {
  font-size: 1.05rem;
  color: var(--tm);
  margin: 6px 0 20px;
}
.lgBadge {
  font-family: var(--m);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wn);
  border: 1px solid var(--wn);
  border-radius: var(--r);
  padding: 5px 11px;
  white-space: nowrap;
}
.lgN { border-left-color: var(--wn); max-width: 78ch; margin-bottom: 22px; }

@media (max-width: 560px) {
  .lgT { gap: 10px; }
}

/* --- How it works / What gets installed: larger icons ------------------- */

/* 25% smaller than the 56px they were bumped to. */
.opIc { width: 42px; height: 42px; }
.opIc svg { width: 22px; height: 22px; }

/* Each installed element gets its own glyph at the same size as the
   how-it-works icons, so the two sections read as one system. */
.wgiIc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--sec);
  background: var(--in);
  margin-bottom: 10px;
}
.wgiIc svg { width: 22px; height: 22px; display: block; }
.wgiI:hover .wgiIc { border-color: var(--sec); }

@media (max-width: 560px) {
  .opIc, .wgiIc { width: 35px; height: 35px; }
  .opIc svg, .wgiIc svg { width: 19px; height: 19px; }
}

/* --- Reference sections, folded ----------------------------------------- */

.pp-accs {
  margin: 0 0 44px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pn);
}
.pp-acc { border-top: 1px solid var(--bd); }
.pp-acc:first-child { border-top: 0; }

.pp-acc-s {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.pp-acc-s::-webkit-details-marker { display: none; }
.pp-acc-s:hover .pp-acc-h { color: var(--sec); }

.pp-acc-ey {
  font-family: var(--m);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tm);
  flex: 0 0 132px;
}
.pp-acc-h {
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--th);
  transition: color .18s;
}
.pp-acc-i {
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 1.6px solid var(--tm);
  border-bottom: 1.6px solid var(--tm);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s;
  flex: none;
}
.pp-acc[open] .pp-acc-i { transform: rotate(-135deg) translate(-3px, -3px); }

.pp-acc-b { padding: 0 22px 24px; }
.pp-acc-b > .qa-table,
.pp-acc-b > .cW { margin-top: 2px; }

@media (max-width: 700px) {
  .pp-acc-s { flex-direction: column; align-items: flex-start; gap: 4px; padding: 15px 16px; }
  .pp-acc-ey { flex: none; }
  .pp-acc-i { position: absolute; right: 16px; top: 20px; margin: 0; }
  .pp-acc-b { padding: 0 16px 20px; }
}

/* --- Final CTA: last thing on the page ---------------------------------- */

.pp-last { margin-bottom: 0; }
.pdCta-pr { display: block; margin: 16px 0 18px; }
.pdCta-prl {
  display: block;
  font-family: var(--m);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tm);
  margin-bottom: 4px;
}
.pdCta-prv {
  display: block;
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--th);
}

/* Related products used to sit in a narrow column beside the CTA, so .rG was
   a single stack. Now the section runs full width and the cards need a grid. */
.pp-sect .rG { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pp-sect .rG .pC-img { aspect-ratio: 4 / 3; }
.pp-sect .rG .pC-img img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1000px) { .pp-sect .rG { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pp-sect .rG { grid-template-columns: 1fr; } }

/* Quantity sits inline with the element name rather than on its own line. */
.wgiN .wgiQ {
  display: inline;
  margin: 0 7px 0 0;
  font-family: var(--m);
  font-size: .82em;
  letter-spacing: .06em;
  color: var(--sec);
}

/* Technical reading sits inside the questions block: someone who has worked
   through the FAQ and still wants more is exactly who should see it. */
.pp-faq-more {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}
.pp-faq-more-t {
  font-family: var(--c);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--th);
  margin-bottom: 5px;
}
.pp-faq-more-p {
  font-size: .92rem;
  color: var(--tm);
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 0 14px;
}

/* --- Installation: table left, diagrams right -------------------------- */

.instSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* The three diagrams share the table's height so the two columns finish at
   roughly the same point. Equal fractions rather than fixed heights, so it
   still works when the table gains or loses a row. */
.dgG {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  height: 100%;
}

.dgF { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.dgI {
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--pn);
  padding: 12px;
  cursor: zoom-in;
  transition: border-color .2s;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.dgI:hover { border-color: var(--sec); }
.dgI img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }

.dgC {
  font-size: .82rem;
  color: var(--tm);
  line-height: 1.5;
  margin-top: 7px;
  flex: 0 0 auto;
}
.dgT {
  display: block;
  font-family: var(--c);
  font-weight: 700;
  font-size: .92rem;
  color: var(--th);
  margin-bottom: 2px;
}

@media (max-width: 1000px) {
  /* Stacked, the height-matching is meaningless — let each diagram size to
     its own artwork instead of being squeezed into a third of the table. */
  .instSplit { grid-template-columns: 1fr; gap: 26px; }
  .dgG { grid-template-rows: none; height: auto; gap: 20px; }
  .dgI { padding: 10px; }
  .dgI img { max-height: none; }
}

/* Scope panels sit under the fit panels in the same section. */
.pp-qual-2 { margin-top: 16px; }

/* --- In the field: photographs on operating conveyors ------------------- */

.fdG {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.fdF { margin: 0; }

/* Uniform tiles regardless of camera orientation — the photographs are a mix
   of landscape and portrait. The full frame is preserved in the lightbox. */
.fdI {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--pn);
  cursor: zoom-in;
  transition: border-color .2s;
}
.fdI:hover { border-color: var(--sec); }
.fdI img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fdC {
  font-size: .84rem;
  color: var(--tm);
  line-height: 1.5;
  margin-top: 8px;
}

@media (max-width: 900px) { .fdG { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 560px) { .fdG { grid-template-columns: 1fr; } }

/* Single-column gallery on a phone: centre the tiles and cap their width so a
   full-bleed photograph doesn't dominate the page. */
@media (max-width: 560px) {
  .fdG { justify-items: center; }
  .fdF { width: 100%; max-width: 420px; }
  .fdC { text-align: center; }
}

/* ============================================
   Sales-page restructure components (BSMF Fixed)
   ============================================ */

/* "Not sure?" strip under qualification cards */
.pp-notsure{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;padding:18px 22px;background:var(--pn);border:1px solid var(--bd);border-left:3px solid var(--sec);border-radius:var(--r)}
.pp-notsure-t{font-family:var(--m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);margin-bottom:3px}
.pp-notsure-p{font-size:.92rem;color:var(--tm);margin:0;line-height:1.5}
@media(max-width:700px){.pp-notsure{flex-direction:column;align-items:stretch;text-align:center}.pp-notsure .bt{width:100%;text-align:center}}

/* Field photography: 1 large + 4 small on desktop, swipe carousel on mobile */
.fdHero{display:grid;grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.fdHero .fdF{display:flex;flex-direction:column;min-height:0}
.fdHero .fdF-main{grid-row:1/3}
.fdHero .fdI{aspect-ratio:auto;flex:1;min-height:0}
.fdHero .fdF-main .fdI{min-height:340px}
@media(max-width:700px){
  .fdHero{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;margin:0 -18px;padding:0 18px 6px;scrollbar-width:none}
  .fdHero::-webkit-scrollbar{display:none}
  .fdHero .fdF{flex:0 0 84%;scroll-snap-align:center}
  .fdHero .fdI,.fdHero .fdF-main .fdI{aspect-ratio:4/3;min-height:0}
}

/* Installation at a Glance grid */
.glG{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.glI{background:var(--pn);padding:16px 18px}
.glL{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);margin-bottom:6px}
.glV{font-size:.9rem;color:var(--tx);line-height:1.5}
@media(max-width:900px){.glG{grid-template-columns:repeat(2,1fr)}}

/* Engineering detail cards */
.edG{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.edC{display:flex;flex-direction:column;align-items:flex-start;background:var(--pn);border:1px solid var(--bd);border-top:3px solid var(--sec);border-radius:var(--r);padding:20px;cursor:pointer;text-align:left;font-family:inherit;transition:box-shadow .2s,border-color .2s}
.edC:hover{box-shadow:var(--s1);border-color:var(--sec)}
.edN{font-family:var(--m);font-weight:600;font-size:.92rem;color:var(--tx);margin-bottom:8px;line-height:1.35}
.edD{font-size:.87rem;color:var(--tm);line-height:1.55;margin-bottom:12px;flex:1}
.edL{font-family:var(--m);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
.edC:hover .edL{color:var(--acc)}
@media(max-width:1000px){.edG{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.edG{grid-template-columns:1fr}}

/* Software benefit chips */
.bp-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.bp-chip{display:flex;gap:10px;align-items:flex-start;background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;font-size:.89rem;color:var(--tx);line-height:1.45}
.bp-chip::before{content:'';width:6px;height:6px;margin-top:7px;background:var(--sec);flex-shrink:0}
@media(max-width:900px){.bp-chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bp-chips{grid-template-columns:1fr}}

/* Technical resource cards */
.resG{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.resC{display:block;background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;transition:border-color .2s}
.resC:hover{border-color:var(--sec)}
.resK{font-family:var(--m);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);margin-bottom:6px}
.resN{font-family:var(--m);font-weight:600;font-size:.87rem;color:var(--tx);line-height:1.4}
@media(max-width:900px){.resG{grid-template-columns:repeat(2,1fr)}}

/* Collapsed additional FAQs */
.faqMore{margin-top:6px}
.faqMore>summary{list-style:none;cursor:pointer;font-family:var(--m);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);padding:14px 0;border-top:1px solid var(--bd);transition:color .2s}
.faqMore>summary:hover{color:var(--acc)}
.faqMore>summary::-webkit-details-marker{display:none}
.faqMore>summary::after{content:"\2193";margin-left:8px}
.faqMore[open]>summary::after{content:"\2191"}
.faqMore[open]>summary .fm-show{display:none}
.faqMore>summary .fm-hide{display:none}
.faqMore[open]>summary .fm-hide{display:inline}

/* Navy final CTA */
.pdCta-navy{background:linear-gradient(150deg,#131b3f 0%,#203386 100%);border-color:#2a42a8}
.pdCta-navy .pdCta-h{color:#fff}
.pdCta-navy .pdCta-p{color:#c7cdea}
.pdCta-navy .pdCta-prl{color:#9aa4d4}
.pdCta-navy .pdCta-prv,.pdCta-navy .pdCta-prv b{color:#fff}
.pdCta-navy .bt.bo{color:#fff;border-color:rgba(255,255,255,.45)}
.pdCta-navy .bt.bo:hover{border-color:#fff;color:#fff}
.ctaNeeds{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px;margin:20px auto 24px;max-width:520px;text-align:left}
.ctaNd{display:flex;gap:9px;align-items:flex-start;font-family:var(--m);font-size:.8rem;line-height:1.5;color:#c7cdea}
.ctaNd::before{content:'';width:5px;height:5px;margin-top:7px;background:var(--acc);flex-shrink:0}
@media(max-width:640px){.ctaNeeds{grid-template-columns:1fr 1fr;gap:8px 16px}}

/* Anchored accordions land clear of the fixed nav */
.pp-acc{scroll-margin-top:calc(var(--nh) + 16px)}
/* Diagrams inside a full-width accordion: 3-across, not stacked full width */
.pp-acc-b .dgG{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:none;height:auto;gap:16px;margin-top:20px}
@media(max-width:1000px){.pp-acc-b .dgG{grid-template-columns:1fr}}

/* ============================================
   Round 3: progressive disclosure + sticky CTA
   ============================================ */

/* Single disclosure control wrapping the installation accordions */
.ppExp{margin-top:26px}
.ppExp>summary{list-style:none;cursor:pointer;font-family:var(--m);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);padding:14px 18px;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);transition:color .2s,border-color .2s}
.ppExp>summary:hover{color:var(--acc);border-color:var(--acc)}
.ppExp>summary::-webkit-details-marker{display:none}
.ppExp>summary::after{content:"+";float:right;font-size:1rem;line-height:1;font-weight:400}
.ppExp[open]>summary::after{content:"\2212"}
.ppExp>.pp-accs{margin-top:14px}

/* Hidden accordion groups revealed by detail cards */
.ppHidden{margin-top:26px}
.ppHidden[hidden]{display:none}

/* Resource cards: one-line support + CTA, button variant */
.resD{font-size:.84rem;color:var(--tm);line-height:1.5;margin:6px 0 0}
.resL{display:block;font-family:var(--m);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sec);margin-top:10px}
.resC:hover .resL{color:var(--acc)}
button.resC{width:100%;text-align:left;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start}
button.resC .resD{flex:1}

/* Mobile sticky CTA bar */
.mCta{display:none}
@media(max-width:700px){
  .mCta{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(150deg,#131b3f,#203386);border-top:1px solid #2a42a8;box-shadow:0 -4px 16px rgba(0,0,0,.25)}
  .mCta[hidden]{display:none}
  .mCta-b{flex:0 0 auto;padding:10px 14px;font-size:.72rem}
  .mCta-alt{flex:1;background:none;border:0;cursor:pointer;font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c7cdea;text-align:left;padding:10px 0}
  .mCta-alt:active,.mCta-alt:hover{color:#fff}
  .mCta-x{flex:0 0 auto;background:none;border:0;cursor:pointer;color:#9aa4d4;font-size:.85rem;padding:10px 4px;line-height:1}
}

/* Compact row variant for What Gets Installed */
.wgiRows{display:flex;flex-direction:column;gap:8px}
.wgiRows .wgiI{display:flex;align-items:center;gap:14px;padding:10px 16px}
.wgiRows .wgiIc{width:34px;height:34px;flex-shrink:0;margin:0}
.wgiRows .wgiIc svg{width:18px;height:18px}
.wgiRows .wgiN{margin:0;flex:0 0 320px}
.wgiRows .wgiD{margin:0;flex:1;font-size:.85rem}
@media(max-width:700px){
  .wgiRows .wgiI{flex-wrap:wrap;gap:6px 12px;padding:10px 14px}
  .wgiRows .wgiN{flex:1 1 auto}
  .wgiRows .wgiD{flex-basis:100%;font-size:.82rem}
}

/* Mobile: compact stat row (values only) and 2-up scrollable side shots */
@media(max-width:700px){
  .bp-grid{grid-template-columns:repeat(3,1fr)}
  .bp-cell{padding:12px 10px}
  .bp-cell-v{font-size:1.05rem}
  .bp-cell-t{font-size:.6rem;margin-bottom:0}
  .bp-cell-d{display:none}
  .bp-shot-side{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .bp-shot-side .bp-shot{flex:0 0 78%;scroll-snap-align:center}
}

/* Slimmer related-product imagery on product pages */
.pp-sect .rG .pC-img{aspect-ratio:16/10}

/* Mobile compaction: secondary text collapses, cards become compact rows */
@media(max-width:700px){
  /* Related products: compact text cards instead of three tall stacks */
  .pp-sect .rG{grid-template-columns:1fr;gap:10px}
  .pp-sect .rG .pC-img,.pp-sect .rG .pC .tgs,.pp-sect .rG .pC-foot{display:none}
  .pp-sect .rG .pC-b{padding:14px 16px}
  .pp-sect .rG .pC-d{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Track record references two-up */
  .pp-refs{grid-template-columns:1fr 1fr;gap:10px}
  .pp-ref{padding:12px 14px}
  /* Engineering detail cards two-up, titles only */
  .edG{grid-template-columns:1fr 1fr;gap:10px}
  .edC{padding:14px}
  .edD{display:none}
  /* Resource cards: titles only */
  .resD{display:none}
  /* What Gets Installed: name rows only */
  .wgiRows .wgiD{display:none}
}


/* Detection: 60/40 split, text panels left, event figures right */
.detSplit{display:grid;grid-template-columns:3fr 2fr;gap:24px;align-items:start}
.detL{display:flex;flex-direction:column;gap:24px}
.evCar{position:relative}
.evTrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--r)}
.evTrack::-webkit-scrollbar{display:none}
.evTrack .evF{margin:0;flex:0 0 100%;scroll-snap-align:start}
.evI{background:var(--pn);border:1px solid var(--bd);border-radius:var(--r);padding:14px;cursor:zoom-in;transition:border-color .2s;height:auto}
.evI:hover{border-color:var(--sec)}
.evI img{width:100%;height:auto;object-fit:contain;display:block;filter:none}
.evI:hover img{transform:none}
.evNav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--pn);border:1px solid var(--bd);border-radius:50%;color:var(--tx);font-size:1.35rem;line-height:1;cursor:pointer;box-shadow:var(--s1);transition:border-color .2s,color .2s;z-index:2}
.evNav:hover{border-color:var(--sec);color:var(--sec)}
.evPrev{left:-14px}
.evNext{right:-14px}
@media(max-width:900px){
  .detSplit{grid-template-columns:1fr}
  .evPrev{left:6px}
  .evNext{right:6px}
}


/* Plain product-render hero plate: shorter than the old infographic */
.pdM-render{aspect-ratio:16/9;background:var(--pn);padding:16px}
.pdM-render img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))}

/* End-of-page system overview infographic thumb */
.ovF{margin:0;max-width:430px}
.ovI{height:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);padding:10px;cursor:zoom-in;transition:border-color .2s}
.ovI:hover{border-color:var(--sec)}
.ovI img{width:100%;height:auto;object-fit:contain;display:block;filter:none}
.ovI:hover img{transform:none}

/* Hero "Why" benefit block */
.whyB{margin-top:16px}
.whyR{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--bd)}
.whyR:last-child{border-bottom:0;padding-bottom:0}
.whyIc{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border:1px solid var(--bd);border-radius:var(--r);color:var(--sec);background:var(--in)}
.whyIc svg{width:21px;height:21px;display:block}
.whyR:hover .whyIc{border-color:var(--sec)}
.whyT{font-family:var(--m);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tx);margin-bottom:3px}
.whyP{font-size:.88rem;color:var(--tm);line-height:1.5;margin:0}

/* Combined Technical Resources layout */
.trWrap{display:grid;grid-template-columns:430px 1fr;gap:30px;align-items:start}
.trList{margin-top:10px;padding:4px 14px}
.resG2{grid-template-columns:1fr 1fr}
@media(max-width:900px){.trWrap{grid-template-columns:1fr}}
@media(max-width:1024px){.pdH .whyB{order:4}}

/* Pricing & What's Included */
.prcWrap{display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:start}
.prcCard{background:var(--pn);border:1px solid var(--bd);border-top:3px solid var(--sec);border-radius:var(--r);padding:24px 26px}
.prcSide{border-top-color:var(--bd);border-left:3px solid var(--sec)}
.prcName{font-family:var(--m);font-weight:700;font-size:1rem;color:var(--tx);margin-bottom:14px}
.prcL{font-family:var(--m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--th);margin-bottom:4px}
.prcV{font-family:var(--m);font-weight:700;font-size:1.9rem;color:var(--tx);line-height:1.1}
.prcV2{font-size:1.5rem}
.prcU{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--tm)}
.prcN{font-size:.9rem;color:var(--tm);line-height:1.55;margin:8px 0 0}
.prcSub{font-family:var(--m);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx);margin:20px 0 8px}
.prcCard .pp-ticks{margin:8px 0 0}
@media(max-width:900px){.prcWrap{grid-template-columns:1fr}}

/* Mobile: hero chips as one scrollable row; clamp long descriptions */
@media(max-width:700px){
  .pdK{display:flex;overflow-x:auto;gap:8px;margin:10px -18px;padding:2px 18px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pdK::-webkit-scrollbar{display:none}
  .pdKi{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .pdDs.pdClamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.pdMore{display:none;background:none;border:0;padding:4px 0 0;font-family:var(--m);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sec);cursor:pointer}
@media(max-width:700px){.pdMore{display:inline-block}}

/* Pricing single-card variant */
.prcWrap-1{grid-template-columns:1fr;max-width:780px}
@media(max-width:700px){
  .pdM-render{aspect-ratio:2/1;padding:10px}
}

/* Wide schematic beneath a two-panel comparison */
.dgWide{margin-top:20px}
.dgWide .dgF{margin:0;max-width:900px}
.dgWide .dgI{height:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);padding:14px;cursor:zoom-in}
.dgWide .dgI img{width:100%;height:auto;object-fit:contain;display:block;filter:none}
.dgWide .dgI:hover img{transform:none}

/* Three equal schematics across the page, stacking on mobile */
.dg3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.dg3 .dgF{margin:0}
.dg3 .dgI{height:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--pn);padding:10px;cursor:zoom-in}
.dg3 .dgI img{width:100%;height:auto;object-fit:contain;display:block;filter:none}
.dg3 .dgI:hover img{transform:none}
@media(max-width:820px){.dg3{grid-template-columns:1fr;gap:12px}}