/* Monitoring product detail system · v41
   A consistent editorial / technical presentation below the hero. */

body.page-bg-other-products.monitoring-clean-hero {
 --md-ink:#202a35;
 --md-muted:#67727d;
 --md-gold:#b58a55;
 --md-line:rgba(44,57,69,.12);
 --md-dark:#202936;
 --md-dark-2:#293544;
}

/* Shared heading rhythm and typography */
body.page-bg-other-products.monitoring-clean-hero .detail-benefits h2,
body.page-bg-other-products.monitoring-clean-hero .product-story h2,
body.page-bg-other-products.monitoring-clean-hero .monitoring-section-head h2,
body.page-bg-other-products.monitoring-clean-hero .applications-section h2,
body.page-bg-other-products.monitoring-clean-hero .content-cta h2,
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid h3 {
 font-family:Manrope,Arial,"Microsoft YaHei",sans-serif;
}
body.page-bg-other-products.monitoring-clean-hero .content-heading.split {
 grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
 gap:clamp(36px,6vw,88px);
 align-items:end;
 margin-bottom:44px;
}
body.page-bg-other-products.monitoring-clean-hero .content-heading h2 {
 max-width:760px;
 margin:12px 0 0;
 font-size:clamp(36px,4.2vw,58px);
 font-weight:620;
 line-height:1.04;
 letter-spacing:-.048em;
}
body.page-bg-other-products.monitoring-clean-hero .content-heading>p {
 max-width:460px;
 margin:0 0 5px;
 font-size:15px;
 line-height:1.75;
}

/* Benefits: four distinct technical value cards */
body.page-bg-other-products.monitoring-clean-hero .detail-benefits {
 position:relative;
 margin-block:84px;
 padding:clamp(42px,5vw,68px);
 overflow:hidden;
 border:1px solid rgba(255,255,255,.82);
 border-radius:30px;
 background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(248,245,240,.66));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 28px 80px rgba(43,52,62,.09);
 -webkit-backdrop-filter:blur(18px) saturate(1.05);
 backdrop-filter:blur(18px) saturate(1.05);
}
body.page-bg-other-products.monitoring-clean-hero .detail-benefits::after {
 content:"";
 position:absolute;
 right:-120px;
 top:-150px;
 width:360px;
 height:360px;
 border-radius:50%;
 background:radial-gradient(circle,rgba(190,207,213,.26),transparent 68%);
 pointer-events:none;
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid {
 position:relative;
 z-index:1;
 gap:14px;
 border:0;
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article {
 position:relative;
 min-height:244px;
 padding:28px 25px 26px;
 overflow:hidden;
 border:1px solid var(--md-line)!important;
 border-radius:20px;
 background:rgba(255,255,255,.62);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
 transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article::after {
 content:"";
 position:absolute;
 right:-24px;
 bottom:-44px;
 width:120px;
 height:120px;
 border:1px solid rgba(181,138,85,.16);
 border-radius:50%;
 box-shadow:0 0 0 22px rgba(181,138,85,.035);
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article:hover {
 transform:translateY(-5px);
 border-color:rgba(181,138,85,.28)!important;
 box-shadow:0 20px 48px rgba(40,51,62,.12);
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article>span {
 display:grid;
 width:42px;
 height:42px;
 place-items:center;
 margin-bottom:48px;
 border:1px solid rgba(181,138,85,.34);
 border-radius:50%;
 color:var(--md-gold);
 background:rgba(255,255,255,.74);
 font-size:10px;
 font-weight:800;
 letter-spacing:.08em;
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid h3 {
 position:relative;
 z-index:1;
 margin:0 0 12px;
 color:var(--md-ink);
 font-size:clamp(20px,1.55vw,24px);
 font-weight:650;
 line-height:1.16;
 letter-spacing:-.035em;
}
body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid p {
 position:relative;
 z-index:1;
 margin:0;
 color:var(--md-muted);
 font-size:13px;
 line-height:1.7;
}

/* Product media: dark technical gallery with complete 16:9 artwork */
body.page-bg-other-products.monitoring-clean-hero .product-story {
 position:relative;
 padding-block:clamp(78px,8vw,112px);
 overflow:hidden;
 color:var(--md-ink);
 background:
  radial-gradient(circle at 9% 12%,rgba(205,179,143,.22),transparent 27%),
  radial-gradient(circle at 92% 76%,rgba(150,181,192,.2),transparent 30%),
  linear-gradient(135deg,#edf0ef,#dfe7e9);
}
body.page-bg-other-products.monitoring-clean-hero .product-story::before {
 content:"";
 position:absolute;
 inset:0;
 pointer-events:none;
 background-image:linear-gradient(rgba(48,65,78,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(48,65,78,.035) 1px,transparent 1px);
 background-size:48px 48px;
 mask-image:linear-gradient(to bottom,black,transparent 86%);
}
body.page-bg-other-products.monitoring-clean-hero .product-story .content-shell {
 position:relative;
 z-index:1;
}
body.page-bg-other-products.monitoring-clean-hero .product-story .content-kicker { color:#a77743; }
body.page-bg-other-products.monitoring-clean-hero .product-story .content-heading h2 { color:var(--md-ink); }
body.page-bg-other-products.monitoring-clean-hero .product-story .content-heading>p { color:#697680; }
body.page-bg-other-products.monitoring-clean-hero .product-story-grid { gap:22px; }
body.page-bg-other-products.monitoring-clean-hero .product-story-grid figure {
 padding:12px 12px 15px;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.82);
 border-radius:22px;
 background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(247,249,248,.5));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 22px 55px rgba(48,63,74,.11);
 -webkit-backdrop-filter:blur(14px);
 backdrop-filter:blur(14px);
 transition:transform .25s ease,border-color .25s ease;
}
body.page-bg-other-products.monitoring-clean-hero .product-story-grid figure:hover {
 transform:translateY(-4px);
 border-color:rgba(181,138,85,.34);
}
body.page-bg-other-products.monitoring-clean-hero .story-image-button {
 aspect-ratio:16/9;
 border-radius:14px;
 background:#f4f6f7;
}
body.page-bg-other-products.monitoring-clean-hero .story-image-button img {
 width:100%;
 height:100%;
 aspect-ratio:auto;
 object-fit:contain;
 border-radius:14px;
}
body.page-bg-other-products.monitoring-clean-hero .product-story-grid figcaption {
 padding:15px 6px 1px;
 color:#576671;
 font-size:10px;
 letter-spacing:.12em;
}

/* Complete specifications: full-width dark band, readable copy, balanced cards */
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section {
 padding:clamp(82px,8vw,116px) max(4vw,calc((100vw - 1240px)/2));
 color:var(--md-ink);
 background:
  radial-gradient(circle at 88% 18%,rgba(177,194,133,.18),transparent 31%),
  radial-gradient(circle at 8% 82%,rgba(191,168,137,.15),transparent 28%),
  linear-gradient(138deg,#e8edec,#dce5e8)!important;
}
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-section-head p {
 color:#65727c;
}
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-section-head h2 { color:var(--md-ink); }
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-kicker {
 border-color:rgba(181,138,85,.35);
 color:#a77743;
 background:rgba(255,255,255,.42);
}
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-common-grid { gap:18px; }
body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-glass-card {
 padding:30px 25px 24px;
 border-color:rgba(255,255,255,.62);
 background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,244,244,.86));
 box-shadow:inset 0 1px 0 #fff,0 26px 62px rgba(48,63,74,.12);
}

/* Model variants: calmer light comparison surface */
body.page-bg-other-products.monitoring-clean-hero .monitoring-models-section {
 padding:clamp(82px,8vw,116px) max(4vw,calc((100vw - 1240px)/2));
 background:linear-gradient(180deg,rgba(247,244,239,.94),rgba(239,243,244,.88));
}
body.page-bg-other-products.monitoring-clean-hero .monitoring-models-section .monitoring-section-head p { color:var(--md-muted); }
body.page-bg-other-products.monitoring-clean-hero .monitoring-model-card {
 border-color:rgba(44,57,69,.12);
 background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(248,249,247,.72));
 box-shadow:inset 0 1px 0 #fff,0 26px 70px rgba(44,57,69,.1);
}
body.page-bg-other-products.monitoring-clean-hero .monitoring-model-specs { background:rgba(245,248,248,.72); }

/* Application and support: four clear project steps */
body.page-bg-other-products.monitoring-clean-hero .applications-section {
 margin-block:82px 34px;
 padding:clamp(42px,5vw,66px);
 grid-template-columns:minmax(280px,.78fr) minmax(500px,1.22fr);
 gap:clamp(40px,6vw,86px);
 align-items:center;
 border:1px solid rgba(255,255,255,.82);
 border-radius:30px;
 background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(245,246,242,.68));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 26px 74px rgba(43,52,62,.09);
 -webkit-backdrop-filter:blur(18px);
 backdrop-filter:blur(18px);
}
body.page-bg-other-products.monitoring-clean-hero .applications-section h2 {
 margin:15px 0 0;
 color:var(--md-ink);
 font-size:clamp(36px,4vw,54px);
 font-weight:620;
 line-height:1.04;
 letter-spacing:-.047em;
}
body.page-bg-other-products.monitoring-clean-hero .application-list {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:12px;
 border:0;
}
body.page-bg-other-products.monitoring-clean-hero .application-list>div {
 position:relative;
 min-height:118px;
 padding:22px 20px;
 border:1px solid var(--md-line);
 border-radius:17px;
 background:rgba(255,255,255,.62);
}
body.page-bg-other-products.monitoring-clean-hero .application-list span {
 display:block;
 margin-bottom:24px;
 color:var(--md-gold);
}
body.page-bg-other-products.monitoring-clean-hero .application-list p {
 color:var(--md-ink);
 font-size:15px;
 font-weight:680;
}

/* Final action: one premium, focused enquiry panel */
body.page-bg-other-products.monitoring-clean-hero .content-cta {
 position:relative;
 margin-top:0;
 margin-bottom:96px;
 padding:clamp(48px,6vw,78px);
 overflow:hidden;
 border:1px solid rgba(255,255,255,.16);
 border-radius:30px;
 background:
  radial-gradient(circle at 88% 18%,rgba(235,207,167,.25),transparent 31%),
  linear-gradient(135deg,#627286,#46586d);
 box-shadow:0 30px 80px rgba(48,61,76,.2);
}
body.page-bg-other-products.monitoring-clean-hero .content-cta::after {
 content:"";
 position:absolute;
 right:-96px;
 bottom:-180px;
 width:360px;
 height:360px;
 border:1px solid rgba(255,255,255,.11);
 border-radius:50%;
 box-shadow:0 0 0 52px rgba(255,255,255,.025),0 0 0 104px rgba(255,255,255,.018);
}
body.page-bg-other-products.monitoring-clean-hero .content-cta>p,
body.page-bg-other-products.monitoring-clean-hero .content-cta>h2,
body.page-bg-other-products.monitoring-clean-hero .content-cta>div { position:relative; z-index:1; }
body.page-bg-other-products.monitoring-clean-hero .content-cta>p {
 margin:0 0 17px;
 color:#dfbc8f;
 font-size:10px;
 font-weight:800;
 letter-spacing:.14em;
 text-transform:uppercase;
}
body.page-bg-other-products.monitoring-clean-hero .content-cta h2 {
 max-width:900px;
 margin:0 0 34px;
 color:#fff;
 font-size:clamp(38px,4.7vw,64px);
 font-weight:620;
 line-height:1.02;
 letter-spacing:-.05em;
}
body.page-bg-other-products.monitoring-clean-hero .content-cta>div { display:flex; flex-wrap:wrap; gap:12px; }

@media (max-width:1000px) {
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid { grid-template-columns:repeat(2,1fr); }
 body.page-bg-other-products.monitoring-clean-hero .applications-section { grid-template-columns:1fr; }
}

@media (max-width:700px) {
 body.page-bg-other-products.monitoring-clean-hero .content-heading.split {
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:28px;
 }
 body.page-bg-other-products.monitoring-clean-hero .content-heading h2 { font-size:clamp(31px,9vw,42px); }
 body.page-bg-other-products.monitoring-clean-hero .content-heading>p { font-size:14px; line-height:1.65; }
 body.page-bg-other-products.monitoring-clean-hero .detail-benefits,
 body.page-bg-other-products.monitoring-clean-hero .applications-section {
  width:calc(100% - 24px);
  margin-block:48px;
  padding:28px 18px;
  border-radius:22px;
 }
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid { grid-template-columns:1fr; gap:10px; }
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article {
  min-height:0;
  padding:22px 20px;
  border-radius:17px;
 }
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article>span { margin-bottom:30px; }
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article:hover,
 body.page-bg-other-products.monitoring-clean-hero .product-story-grid figure:hover { transform:none; }
 body.page-bg-other-products.monitoring-clean-hero .product-story { padding-block:58px; }
 body.page-bg-other-products.monitoring-clean-hero .product-story-grid { grid-template-columns:1fr; gap:13px; }
 body.page-bg-other-products.monitoring-clean-hero .product-story-grid figure { padding:8px 8px 12px; border-radius:17px; }
 body.page-bg-other-products.monitoring-clean-hero .story-image-button,
 body.page-bg-other-products.monitoring-clean-hero .story-image-button img { border-radius:11px; }
 body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section,
 body.page-bg-other-products.monitoring-clean-hero .monitoring-models-section {
  padding:58px 14px;
 }
 body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-common-grid { gap:12px; }
 body.page-bg-other-products.monitoring-clean-hero .monitoring-details-section .monitoring-glass-card { padding:24px 18px 18px; }
 body.page-bg-other-products.monitoring-clean-hero .applications-section { gap:30px; }
 body.page-bg-other-products.monitoring-clean-hero .applications-section h2 { font-size:clamp(32px,9vw,42px); }
 body.page-bg-other-products.monitoring-clean-hero .application-list { grid-template-columns:1fr; gap:9px; }
 body.page-bg-other-products.monitoring-clean-hero .application-list>div { min-height:96px; padding:18px; }
 body.page-bg-other-products.monitoring-clean-hero .application-list span { margin-bottom:17px; }
 body.page-bg-other-products.monitoring-clean-hero .content-cta {
  width:calc(100% - 24px);
  margin:0 auto 56px;
  padding:36px 22px;
  border-radius:22px;
 }
 body.page-bg-other-products.monitoring-clean-hero .content-cta h2 { font-size:clamp(34px,9.5vw,44px); }
 body.page-bg-other-products.monitoring-clean-hero .content-cta>div { display:grid; }
}

@media (prefers-reduced-motion:reduce) {
 body.page-bg-other-products.monitoring-clean-hero .detail-feature-grid article,
 body.page-bg-other-products.monitoring-clean-hero .product-story-grid figure { transition:none; }
}