/* ==========================================================================
   BELT GUARD PRODUCT-PAGE DESIGN SYSTEM
   --------------------------------------------------------------------------
   Reusable components for every Belt Guard product page. Everything here is
   namespaced under .product-page, so adding that one class to a page's <div
   class="PD"> opts it in and nothing elsewhere on beltscan.com is affected.

   Applying this to another product page = add .product-page to the container
   and the section-background modifier classes. No product-specific selectors
   live in this file; product differences are content, imagery and the accent
   *category* chosen for an icon, never bespoke CSS.

   Accent categories (use the meaning, not the colour, when choosing):
     is-alarm    red    defects, alarms, protection, critical conditions
     is-data     blue   monitoring, data, software, detection, comms
     is-ok       green  healthy, operational, confirmed  (use sparingly)
     is-install  amber  installation, intervention, maintenance, physical setup
     is-trend    purple analytics, historical comparison, trending, reporting
     is-eng      slate  engineering, specifications, supporting technical info
   ========================================================================== */

.product-page{
  /* Spacing scale — sections and cards both draw from this so rhythm stays
     consistent instead ofeach section inventing its own values. */
  --ps-sect: 56px;     /* major section rhythm, desktop (80 was 160px between bands) */
  --ps-sect-sm: 36px;
  --ps-card: 22px;     /* card internal padding */
  --ps-gap: 16px;      /* grid gutter */
  --ps-r: 16px;        /* card radius (14-18px band) */

  /* Category accents. Kept deliberately muted: these tint icons, hairlines
     and very pale card washes, never large areas. */
  --pc-alarm:#e5342b;  --pc-alarm-bg:rgba(229,52,43,.08);
  --pc-data:#2f6fd0;   --pc-data-bg:rgba(47,111,208,.08);
  --pc-ok:#1f9d55;     --pc-ok-bg:rgba(31,157,85,.09);
  --pc-install:#c97a12;--pc-install-bg:rgba(201,122,18,.10);
  --pc-trend:#6b4fc4;  --pc-trend-bg:rgba(107,79,196,.09);
  --pc-eng:#5a6480;    --pc-eng-bg:rgba(90,100,128,.09);
}
[data-theme="dark"] .product-page{
  --pc-alarm-bg:rgba(229,52,43,.16); --pc-data-bg:rgba(47,111,208,.18);
  --pc-ok-bg:rgba(31,157,85,.16);    --pc-install-bg:rgba(201,122,18,.18);
  --pc-trend-bg:rgba(107,79,196,.20);--pc-eng-bg:rgba(154,164,189,.14);
}

/* --------------------------------------------------------------------------
   1. SECTION RHYTHM + ALTERNATING BACKGROUNDS
   Backgrounds are applied with modifier classes rather than :nth-child so a
   section can be reordered or omitted on another product without the whole
   rhythm shifting. Full-bleed via padding on the section itself.
   -------------------------------------------------------------------------- */
.product-page .pp-sect,
.product-page .hiw-section,
.product-page .bp-sect{
  padding-top:var(--ps-sect);
  padding-bottom:var(--ps-sect);
  margin:0;
  position:relative;
}
/* Full-bleed tint without breaking the site's container width. */
.product-page .ps-tint::before,
.product-page .ps-tint-cool::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:0;bottom:0;width:100vw;z-index:-1;
}
.product-page .ps-tint::before{background:var(--in)}
.product-page .ps-tint-cool::before{background:rgba(47,111,208,.04)}
[data-theme="dark"] .product-page .ps-tint-cool::before{background:rgba(47,111,208,.07)}
.product-page .ps-plain{background:transparent}

/* --------------------------------------------------------------------------
   2. SECTION HEADING + EYEBROW PILL
   -------------------------------------------------------------------------- */
.product-page .ey{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--m);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--sec);background:var(--in);
  border:1px solid var(--bd);border-radius:100px;
  padding:5px 12px;margin-bottom:14px;
}
.product-page .ey::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--acc);flex-shrink:0;
}
.product-page .st{margin-bottom:10px;line-height:1.18}
.product-page .sd{max-width:74ch;line-height:1.65}

/* --------------------------------------------------------------------------
   3. CARD SYSTEM
   One base card; everything else is a variant. Shadows stay subtle — this is
   an engineering company, not a SaaS landing page.
   -------------------------------------------------------------------------- */
.product-page .pp-panel,
.product-page .opCard,
.product-page .glI,
.product-page .archC,
.product-page .prcCard,
.product-page .pp-ref,
.product-page .resC,
.product-page .faq-item,
.product-page .pp-acc,
.product-page .pC,
.product-page .pdKi,
.product-page .p-card{
  background:var(--pn);
  border:1px solid var(--bd);
  border-radius:var(--ps-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.product-page .opCard,
.product-page .archC,
.product-page .prcCard,
.product-page .resC,
.product-page .pp-ref,
.product-page .p-card{padding:var(--ps-card)}
.product-page .glI{padding:18px 20px}

/* Hover: a hairline lift only. */
.product-page .resC:hover,
.product-page .pC:hover,
.product-page .p-card-link:hover{
  border-color:var(--sec);
  box-shadow:0 3px 10px rgba(16,24,40,.07);
}

/* --- 3a. Icon card ------------------------------------------------------- */
.product-page .p-iconGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ps-gap)}
.product-page .p-iconCard{
  background:var(--pn);border:1px solid var(--bd);border-radius:var(--ps-r);
  padding:var(--ps-card);box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.product-page .p-ico{
  width:38px;height:38px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.product-page .p-ico svg{width:19px;height:19px;display:block}
.product-page .p-iconT{
  font-family:var(--c);font-weight:700;font-size:1rem;color:var(--tx);
  line-height:1.3;margin-bottom:6px;
}
.product-page .p-iconD{font-size:.89rem;color:var(--tm);line-height:1.6;margin:0}

/* Accent categories */
.product-page .is-alarm .p-ico,.product-page .p-ico.is-alarm{background:var(--pc-alarm-bg);color:var(--pc-alarm)}
.product-page .is-data .p-ico,.product-page .p-ico.is-data{background:var(--pc-data-bg);color:var(--pc-data)}
.product-page .is-ok .p-ico,.product-page .p-ico.is-ok{background:var(--pc-ok-bg);color:var(--pc-ok)}
.product-page .is-install .p-ico,.product-page .p-ico.is-install{background:var(--pc-install-bg);color:var(--pc-install)}
.product-page .is-trend .p-ico,.product-page .p-ico.is-trend{background:var(--pc-trend-bg);color:var(--pc-trend)}
.product-page .is-eng .p-ico,.product-page .p-ico.is-eng{background:var(--pc-eng-bg);color:var(--pc-eng)}

/* --- 3b. Hero specification card ---------------------------------------- */
.product-page .pdK{gap:10px}
.product-page .pdKi{padding:14px 16px}
.product-page .pdKi .p-ico{width:30px;height:30px;border-radius:9px;margin-bottom:9px}
.product-page .pdKi .p-ico svg{width:16px;height:16px}

/* --- 3c. Process / step card -------------------------------------------- */
.product-page .opCard{position:relative;overflow:hidden;display:flex;flex-direction:column}
.product-page .opCard .opNum{
  position:absolute;top:10px;right:16px;
  font-family:var(--c);font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--tx);opacity:.055;pointer-events:none;
}
[data-theme="dark"] .product-page .opCard .opNum{opacity:.10}
.product-page .opCard .opHd{margin-bottom:12px}
.product-page .opT{font-family:var(--c);font-weight:700;font-size:1.02rem;margin-bottom:7px}
.product-page .opP{font-size:.89rem;line-height:1.6;color:var(--tm);margin:0}

/* --- 3d. Information card (installation at a glance) --------------------- */
.product-page .glL{
  display:flex;align-items:center;gap:7px;
  font-size:.64rem;letter-spacing:.13em;margin-bottom:7px;
}
.product-page .glL .p-ico{width:24px;height:24px;border-radius:7px;margin:0}
.product-page .glL .p-ico svg{width:13px;height:13px}
.product-page .glV{font-size:.92rem;line-height:1.55}

/* --- 3e. Reference card -------------------------------------------------- */
.product-page .pp-ref{border-left:3px solid var(--sec)}

/* --- 3f. Qualification pair --------------------------------------------- */
.product-page .pp-panel{padding:24px 26px}
.product-page .pp-panel-ok{border-top:3px solid var(--sec)}
.product-page .pp-panel-h{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.68rem;letter-spacing:.13em;margin-bottom:14px;
}

/* --- 3g. Accordion / FAQ ------------------------------------------------- */
.product-page .faq-item{margin-bottom:10px;overflow:hidden}
.product-page .faq-q{padding:16px 18px;font-weight:600}
.product-page .pp-acc{margin-bottom:10px;border-radius:var(--ps-r);overflow:hidden}
.product-page .pp-acc-s{padding:16px 18px}

/* The accordion group is a list of separate cards, not a card itself. The
   legacy wrapper painted its own white panel and hairline behind them, which
   reads as white-on-white now the rows carry their own. */
.product-page .pp-accs{
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
  margin-bottom:34px;
}
.product-page .pp-acc:first-child{border-top:1px solid var(--bd)}
.product-page .pp-acc-s{padding:18px 22px}
.product-page .pp-acc-b{padding:2px 22px 26px}
@media(max-width:820px){
  .product-page .pp-acc-s{padding:16px 18px}
  .product-page .pp-acc-b{padding:2px 18px 22px}
}

/* --- 3i. Information grid (Installation at a Glance) --------------------- */
/* The legacy grid drew its hairlines by showing a dark background through a
   1px gap. The cards now have their own borders, so that background just
   reads as a grey slab — especially where the last row is short. */
.product-page .glG{
  gap:var(--ps-gap);
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
}
.product-page .glI{padding:var(--ps-card)}

/* --- 3j. Key callout ----------------------------------------------------- */
/* Sat on the section tint, so it read as a grey slab once the cards around it
   turned white. */
.product-page .fitKey{
  background:var(--pn);
  border:1px solid var(--bd);
  border-left:3px solid var(--pc-alarm);
  border-radius:var(--ps-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:20px 24px;
  margin-top:24px;
}

/* Quotation note — same problem as .fitKey: a tinted slab beside white cards. */
.product-page .qtNote{
  background:var(--pn);
  border:1px solid var(--bd);
  border-left:3px solid var(--pc-eng);
  border-radius:var(--ps-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:20px 24px;
  margin-top:24px;
}

/* --- 3k. Specification tables -------------------------------------------- */
/* The table wrapper is the card; the table itself keeps its own hairlines. */
.product-page .cW{
  background:var(--pn);
  border-radius:var(--ps-r);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.product-page .pp-acc-b > .cW{box-shadow:none}

/* --- 3h. CTA panel ------------------------------------------------------- */
.product-page .pdCta{border-radius:var(--ps-r);padding:40px 32px}

/* --------------------------------------------------------------------------
   4. INTERNAL PAGE NAVIGATOR
   Not a second nav bar: a single scroll-spy strip that sticks under the site
   header on desktop and scrolls horizontally on mobile.
   -------------------------------------------------------------------------- */
.product-page .p-jump{
  position:sticky;top:var(--nh);z-index:40;
  background:var(--bg);border-bottom:1px solid var(--bd);
  margin:0 0 var(--ps-sect);
}
.product-page .p-jumpIn{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:9px 0;
}
.product-page .p-jumpIn::-webkit-scrollbar{display:none}
.product-page .p-jump a{
  flex:0 0 auto;font-family:var(--m);font-size:.74rem;font-weight:600;
  letter-spacing:.05em;color:var(--tm);padding:7px 13px;border-radius:100px;
  white-space:nowrap;transition:color .2s,background .2s;
}
.product-page .p-jump a:hover{color:var(--sec);background:var(--in)}
/* Brand navy, not the light secondary blue: at 11.8px the pale blue left the
   label below AA contrast in both themes. */
.product-page .p-jump a.on,
[data-theme="dark"] .product-page .p-jump a.on{color:#fff;background:#203386;opacity:1}

/* --------------------------------------------------------------------------
   5. RESPONSIVE
   4-col -> 2-col -> 1-col; 3-col -> 1-col; 2-col -> 1-col.
   -------------------------------------------------------------------------- */
@media(max-width:1000px){
  .product-page .p-iconGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .product-page{--ps-sect:var(--ps-sect-sm);--ps-card:18px;--ps-gap:12px}
  .product-page .pdCta{padding:28px 20px}
}
@media(max-width:560px){
  .product-page .p-iconGrid{grid-template-columns:1fr}
  .product-page .opCard .opNum{font-size:2.1rem}
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.product-page a:focus-visible,
.product-page button:focus-visible,
.product-page summary:focus-visible{
  outline:2px solid var(--sec);outline-offset:2px;border-radius:4px;
}

/* --------------------------------------------------------------------------
   7. LAYOUT REFINEMENTS
   -------------------------------------------------------------------------- */

/* Hero spec card: icon and label share a line, value sits beneath. */
.product-page .pdKi{display:block}
.product-page .pdKi .p-ico{
  width:26px;height:26px;border-radius:8px;margin:0 8px 0 0;
  vertical-align:middle;display:inline-flex;
}
.product-page .pdKi .p-ico svg{width:14px;height:14px}
.product-page .pdKi .lb{display:inline-block;vertical-align:middle;margin:0}
.product-page .pdKi .pdKv{display:block;margin-top:7px}

/* Detection: capability cards stack in the text column beside the imagery. */
.product-page .detL .p-iconGrid{grid-template-columns:1fr 1fr;margin-top:0;margin-bottom:18px}
.product-page .detL .p-iconCard{padding:16px 18px}
.product-page .detL .p-iconT{font-size:.94rem}
.product-page .detL .p-iconD{font-size:.85rem}
@media(max-width:900px){.product-page .detL .p-iconGrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.product-page .detL .p-iconGrid{grid-template-columns:1fr}}

/* ==========================================================================
   6. BSMF FIXED — ENGINEERING PRESENTATION
   Added for the engineering-evaluation restructure. Everything here reuses
   the existing card, spacing and accent variables above.
   ========================================================================== */

/* --- 6a. Hero capability row --------------------------------------------- */
.product-page .capR{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px;
}
.product-page .capC{
  font-family:var(--m);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--th);
  background:var(--pn);border:1px solid var(--bd);border-radius:100px;
  padding:7px 14px;white-space:nowrap;
}
.product-page .capC-acc{
  color:var(--acc);border-color:rgba(236,56,50,.38);
  background:rgba(236,56,50,.05);
}

/* --- 6b. Technical key data / plant integration table pair ---------------- */
.product-page .tkdG{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:22px;
}
.product-page .tkdG .cW{margin-top:10px}
.product-page .tkdG .spT td:first-child{white-space:nowrap}
@media(max-width:900px){
  .product-page .tkdG{grid-template-columns:1fr;gap:22px}
  .product-page .tkdG .spT td:first-child{white-space:normal}
}

/* --- 6c. System architecture flow ---------------------------------------- */
.product-page .afFlow{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  align-items:stretch;gap:0;margin-top:26px;
}
.product-page .afN{
  background:var(--pn);border:1px solid var(--bd);border-radius:var(--ps-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:16px 16px 18px;margin:0 7px;position:relative;
}
.product-page .afN-belt{border-color:rgba(47,111,208,.34)}
.product-page .afN-end{border-color:rgba(236,56,50,.34)}
.product-page .afK{
  font-family:var(--m);font-size:.64rem;letter-spacing:.12em;color:var(--tm);margin-bottom:8px;
}
.product-page .afT{
  font-family:var(--c);font-weight:700;font-size:.96rem;color:var(--th);line-height:1.25;
  margin-bottom:7px;
}
.product-page .afD{font-size:.8rem;color:var(--tm);line-height:1.55;margin:0}
.product-page .afA{display:none}
.product-page .afSide{margin-top:22px}
@media(max-width:1100px){
  .product-page .afFlow{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 0}
}
@media(max-width:680px){
  .product-page .afFlow{grid-template-columns:1fr;gap:12px}
  .product-page .afN{margin:0}
}

/* --- 6d. Independence / DED two-up panels -------------------------------- */
.product-page .indG{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ps-gap);margin-top:22px;
}
.product-page .indG .pp-panel{padding:var(--ps-card)}
@media(max-width:820px){.product-page .indG{grid-template-columns:1fr}}

/* --- 6e. Control architecture panel -------------------------------------- */
.product-page .ctrlPanel{padding:var(--ps-card);margin-top:var(--ps-gap)}
.product-page .ctrlKey{
  border-left:3px solid var(--pc-alarm);padding-left:14px;color:var(--th);
}
.product-page .relG{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px;
}
.product-page .relC{
  background:var(--in);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;
}
.product-page .relC-halt{border-color:rgba(236,56,50,.4)}
.product-page .relC-halt .relN{color:var(--acc)}
.product-page .relN{
  font-family:var(--m);font-size:.74rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--th);margin-bottom:5px;
}
.product-page .relD{font-size:.78rem;color:var(--tm);line-height:1.5;margin:0}
@media(max-width:900px){.product-page .relG{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.product-page .relG{grid-template-columns:1fr}}

/* --- 6f. Track record headline ------------------------------------------- */
.product-page .trkHero{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ps-gap);
  margin:22px 0 var(--ps-gap);
}
.product-page .trkM{
  background:var(--pn);border:1px solid var(--bd);border-left:3px solid var(--acc);
  border-radius:var(--ps-r);box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:20px 24px;
}
.product-page .trkV{
  font-family:var(--c);font-weight:800;font-size:clamp(2.1rem,4vw,2.9rem);
  line-height:1;color:var(--th);
}
.product-page .trkL{
  font-family:var(--m);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);margin-top:7px;
}
.product-page .trkD{font-size:.86rem;color:var(--tm);line-height:1.5;margin:8px 0 0}
@media(max-width:620px){.product-page .trkHero{grid-template-columns:1fr}}

/* --- 6g. Scope of supply -------------------------------------------------- */
.product-page .scopeP{padding:var(--ps-card);margin-bottom:var(--ps-gap)}
.product-page .scopeL{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px 22px;margin-top:4px;
}
@media(max-width:820px){.product-page .scopeL{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.product-page .scopeL{grid-template-columns:1fr}}

/* --- 6h. Engineering documentation --------------------------------------- */
.product-page .docG{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ps-gap);margin-top:22px;
}
.product-page .docC{display:block;text-decoration:none}
.product-page .docC-req{border-style:dashed}
.product-page .docC-req .resL{color:var(--tm)}
.product-page .docC-req:hover .resL{color:var(--sec)}
.product-page .docSplit{margin-top:30px}
.product-page .docAsk{padding:var(--ps-card);margin-top:18px}
.product-page .trA{
  display:block;font-family:var(--m);font-size:.81rem;color:var(--sec);
  padding:7px 0;border-bottom:1px solid var(--bd);text-decoration:none;
}
.product-page .trA:hover{color:var(--acc)}
.product-page .trA-all{
  font-size:.74rem;color:var(--tm);text-align:center;border-bottom:0;padding-top:10px;
}
@media(max-width:980px){.product-page .docG{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.product-page .docG{grid-template-columns:1fr}}

/* --- 6i. Closing dual CTA ------------------------------------------------- */
.product-page .ctaSplit{
  display:grid;grid-template-columns:1fr 1.25fr;gap:var(--ps-gap);margin-top:22px;
  align-items:start;
}
.product-page .ctaSplit .pdCta{margin:0;height:100%}
.product-page .pdCta-eng{
  background:var(--pn);border:1px solid var(--bd);border-radius:var(--ps-r);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.product-page .pdCta-eng .pdCta-h{color:var(--th)}
.product-page .pdCta-eng .pdCta-p{color:var(--tm)}
.product-page .ctaNote{
  font-size:.82rem;color:var(--tm);margin:14px 0 0;font-style:normal;
}
@media(max-width:900px){.product-page .ctaSplit{grid-template-columns:1fr}}

/* --- 6j. How It Works diagram pair ---------------------------------------- */
.product-page .hiwDg{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--ps-gap);margin-top:26px;
}
@media(max-width:820px){.product-page .hiwDg{grid-template-columns:1fr}}

/* --- 6k. Software section ------------------------------------------------- */
/* .bp-sect sits on the normal page background, not a navy panel, so the cards
   inside it take the standard card colours. */
.product-page .swG{margin-bottom:22px}
.product-page .saPanel{padding:var(--ps-card);margin-top:24px}

/* --- 6l. Architecture flow connectors ------------------------------------ */
/* The chain reads left to right; a chevron in the gutter makes the hand-off
   between stages explicit rather than relying on the numbering alone. */
.product-page .afFlow .afN::after{
  content:"";position:absolute;top:50%;right:-11px;width:8px;height:8px;
  border-top:2px solid var(--bd);border-right:2px solid var(--bd);
  transform:translateY(-50%) rotate(45deg);
}
.product-page .afFlow .afN:last-child::after{display:none}
@media(max-width:1100px){
  /* 3-up: no chevron at the end of each row */
  .product-page .afFlow .afN:nth-child(3n)::after{display:none}
}
@media(max-width:680px){
  .product-page .afFlow .afN::after{
    top:auto;bottom:-10px;right:50%;transform:translateX(50%) rotate(135deg);
  }
  .product-page .afFlow .afN:nth-child(3n)::after{display:block}
  .product-page .afFlow .afN:last-child::after{display:none}
}

/* A standalone system diagram is the subject of its section, not a sidebar
   thumbnail, so it is not capped at the 430px sidebar width. */
.product-page .archDg{max-width:none}
.product-page .archDg .ovI{padding:16px}
.product-page .archDg img{width:100%;height:auto;display:block}

/* .ctaNd was built for the navy CTA; on the white engineering panel it has to
   take the normal text colours or it drops below AA. */
.product-page .pdCta-eng .ctaNd{color:var(--tx);border-color:var(--bd)}
.product-page .pdCta-eng .ctaNd::before{background:var(--acc)}
.product-page .pdCta-eng .ctaNote{color:var(--tm)}
.product-page .ctaSplit .pdCta-navy{
  display:flex;flex-direction:column;justify-content:center;
}

/* --- 6m. Small uppercase label reds --------------------------------------- */
/* The brand accent is 4.06:1 on white — fine for a 40px headline, below AA for
   an 11px uppercase label. These two tints keep the same red reading while
   passing AA at label sizes in both themes. */
.product-page{--pc-label:#C41E23}
[data-theme="dark"] .product-page{--pc-label:#FF8A84}
.product-page .capC-acc{
  color:var(--pc-label);
  border-color:rgba(196,30,35,.34);
  background:rgba(196,30,35,.05);
}
[data-theme="dark"] .product-page .capC-acc{
  border-color:rgba(255,138,132,.3);
  background:rgba(255,138,132,.07);
}
.product-page .relC-halt .relN{color:var(--pc-label)}
.product-page .trkL{color:var(--pc-label)}

/* --- 6n. Scope of supply, three columns ---------------------------------- */
.product-page .supG{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ps-gap);margin-top:20px;
  align-items:start;
}
.product-page .supC{padding:var(--ps-card)}
.product-page .supC-opt{border-left:3px solid var(--pc-install)}
.product-page .supN{
  font-size:.82rem;color:var(--tm);margin:0 0 12px;line-height:1.5;
}
@media(max-width:960px){.product-page .supG{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.product-page .supG{grid-template-columns:1fr}}