/* The three product pages use the approved CEMC reading scale, geometry and
   interactions in product.css, typography.css, product-scroll.css and product.js.
   Only product-specific artwork composition and additional modules live here. */
#top.detail-page .site-header{background:#fff}
.detail-hero-inner{position:relative}
.detail-dark-hero{background:#031125}
#top.detail-page .detail-dark-hero{--type-heading:#f3f4f6;--type-copy:#cbd5e1;--type-muted:#a6b3c4;--type-accent:#09c9e8}
.detail-dark-hero .product-code{color:#d2edff;border-color:#57798d}
.detail-hero>.product-backdrop{top:calc(109 * var(--measure));height:calc(100% - 109 * var(--measure))}
.detail-hero-art{object-fit:contain}
.detail-architecture-image{display:block;object-fit:contain}
.detail-image-link,.detail-media-link{display:block;min-width:0;color:var(--type-accent,#2456a6)}
.detail-image-hint,.detail-media-hint{display:none}
.detail-ai{background:#f5f6fb}
.detail-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(28 * var(--measure));margin-top:calc(42 * var(--measure))}
.detail-card{position:relative;grid-column:auto;overflow:visible;transition:box-shadow 300ms ease}
.detail-card:is(:hover,:focus-within),.detail-advantages .product-case-card:is(:hover,:focus-within){box-shadow:0 8px 24px #2866bf24;border-color:#9fc3fa}
.detail-card>.detail-card-icon{position:absolute;right:26px;top:-22px;width:48px;height:48px;max-width:none;aspect-ratio:auto;object-fit:contain;transition:transform 300ms ease;border-radius:0}
.detail-card:is(:hover,:focus-within)>.detail-card-icon{transform:translateY(-4px)}
.detail-card>h3{margin-right:40px}
.detail-card>.detail-media-link{margin-top:auto}
.detail-card-image{display:block;width:100%;aspect-ratio:1.8;object-fit:contain;border-radius:6px}
.detail-core{background:#030b10;background-image:linear-gradient(#1830443b 1px,transparent 1px),linear-gradient(90deg,#1830443b 1px,transparent 1px);background-size:160px 160px}
.detail-expression-tabs{display:flex;gap:12px;overflow-x:auto;border-bottom:1px solid #d5e4f3;margin:calc(28 * var(--measure)) 0 calc(24 * var(--measure))}
.detail-expression-tabs button{flex:1;display:flex;justify-content:center;align-items:center;gap:10px;background:none;border:0;border-bottom:2px solid transparent;padding:14px 18px;white-space:nowrap;cursor:pointer;font:var(--type-weight-regular) var(--type-navigation)/var(--type-line-control) var(--type-font);color:var(--type-copy)}
.detail-expression-tabs button.active{color:var(--type-accent);border-color:#2a80ff}
.detail-expression-tabs img{width:24px;height:24px;object-fit:contain}
.detail-expression-panel[hidden]{display:none}
.detail-expression-panel h3{margin:0 0 12px}
.detail-expression-panel p{margin:0 0 20px}
.detail-expression-panel>.detail-media-link>img{display:block;width:100%;max-height:620px;object-fit:contain;object-position:left center}
.detail-link-grid{display:grid;grid-template-columns:32% 64%;gap:4%;align-items:center;margin-top:calc(36 * var(--measure))}
.detail-link-points article{display:flex;gap:18px;border-bottom:1px solid #dfe8ef;margin:0 0 24px;padding-bottom:20px}
.detail-link-points article>span{color:var(--type-accent);font-size:var(--type-note)}
#top.detail-page main .detail-link-points h3{font-size:var(--type-subheading);margin:0 0 10px}
.detail-link-points p{margin:0}
.detail-link figure{margin:0;min-width:0}
.detail-link-grid img{display:block;width:100%;object-fit:contain;border-radius:8px}
.detail-scenario-points{margin:24px 0 0;padding-left:22px}
.detail-scenario-points li{margin:0 0 12px}
.detail-value-illustrated{min-height:0;background:#f5f6fb}
.detail-value-illustrated>.container{display:grid;grid-template-columns:46% 48%;gap:6%;align-items:center;position:relative}
.detail-value-illustrated .product-value-copy{width:auto;max-width:none}
.detail-value-illustrated .detail-value-panels{position:static;width:100%;height:auto;pointer-events:auto}
.detail-value-illustrated .detail-value-panels>div{height:auto}
.detail-value-illustrated .detail-value-panels img{height:auto;object-fit:contain;border-radius:8px}
.detail-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.detail-page :is(button,.detail-media-link,.detail-image-link):focus-visible{outline:3px solid #40a3ff;outline-offset:4px}

@media(max-width:1100px){.detail-card-grid{gap:20px}}

@media(max-width:640px){
 .detail-hero>.product-backdrop{top:84px;height:calc(100% - 84px)}
 .detail-dark-hero .product-backdrop{object-position:67% center;opacity:.45}
 .detail-dark-hero .detail-hero-copy{background:linear-gradient(90deg,#031125d9,transparent);border-radius:8px;padding:16px}
 .detail-image-hint,.detail-media-hint{display:inline-block;margin-top:12px;font:var(--type-weight-regular) var(--type-note)/var(--type-line-control) var(--type-font)}
 .detail-card-grid{grid-template-columns:1fr;gap:38px;margin-top:36px}
 .detail-card>.detail-card-icon{width:44px;height:44px;top:-20px}
 .detail-card-image{max-height:320px}
 .detail-expression-tabs{gap:0}
 .detail-expression-tabs button{flex:none;padding:12px}
 .detail-expression-panel>.detail-media-link>img{max-height:420px}
 .detail-link-grid{grid-template-columns:1fr;gap:28px}
 .detail-link-points article:last-child{margin-bottom:0}
 .detail-value-illustrated>.container{grid-template-columns:1fr;gap:28px}
 .detail-value-illustrated .detail-value-panels{height:auto;margin-bottom:36px}

 .detail-value:not(.detail-value-illustrated)>.product-backdrop{inset:auto 0 0;width:100%;height:280px;object-fit:cover;object-position:right center;opacity:1}

}
@media(prefers-reduced-motion:reduce){.detail-card,.detail-card>.detail-card-icon{transition:none}}

/* CEDV frame 8: ordinary left-copy/right-image feature and four scene cards.
   Geometry only; all type, buttons and card chrome come from the CEMC styles. */
.detail-page .detail-core-static{min-height:0}
.detail-page .detail-feature-row{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,58fr);gap:4%;align-items:start;margin-top:calc(60 * var(--measure))}
.detail-page .detail-feature-copy{width:auto;margin-top:0}
.detail-page .detail-feature-copy .product-feature-tags{width:auto;flex-wrap:wrap}
.detail-page .detail-feature-picture{min-width:0}
.detail-page .detail-feature-picture img{display:block;width:100%;height:auto;object-fit:contain}
.detail-page .detail-scenarios-cards{min-height:0;background:#f5f8fc}
.detail-page .detail-scenario-card{background:#fff}
.detail-page .detail-scenario-card h3{margin-right:0}
.detail-page .detail-scenario-card .detail-card-image{aspect-ratio:2.2;object-fit:contain}
@media(max-width:640px){
 .detail-page .detail-core-static{padding-bottom:45px}
 .detail-page .detail-feature-row{grid-template-columns:1fr;gap:28px;margin-top:32px}
 .detail-page .detail-scenario-card .detail-card-image{aspect-ratio:1.8}
}

/* Product-specific layouts reuse shared reading and card/button tokens. */
.detail-feature-row[hidden],.detail-scene-panel[hidden],.detail-role-panel[hidden]{display:none!important}
.detail-compact-tabs{display:flex;gap:12px;border-bottom:1px solid #d5e4f3;overflow-x:auto;margin:32px 0 24px;scrollbar-width:thin}
.detail-compact-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;background:transparent;border:0;border-bottom:2px solid transparent;padding:14px 8px;white-space:nowrap;cursor:pointer;font:var(--type-weight-regular) var(--type-navigation)/var(--type-line-control) var(--type-font);color:var(--type-copy)}
.detail-compact-tabs button.active{color:var(--type-accent);border-color:var(--type-accent)}
.detail-compact-tabs img{width:20px;height:20px;object-fit:contain}
.detail-core .detail-compact-tabs{border-color:#284153}
.detail-core .detail-art-missing{background:#0b1a25;border-color:#345169;color:var(--type-muted)}
.detail-page .detail-core-static:has(.detail-compact-tabs) .detail-feature-row{margin-top:32px}
.detail-art-missing{min-height:240px;aspect-ratio:1.8;font-size:var(--type-note);width:100%}
.detail-page .detail-card{min-height:0}
.detail-link-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.detail-link-card-grid .detail-card{background:linear-gradient(#f4f9ff,#eef7ff)}
.detail-link-card-grid .detail-card h3{margin-right:0;font-size:var(--type-subheading)!important}
.detail-link-card-image{width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;border-radius:6px}
.detail-point-list{list-style:none;margin:20px 0;padding:0}
.detail-point-list li{position:relative;padding-left:22px;margin:0 0 16px}
.detail-point-list li:before{content:'✓';position:absolute;left:0;color:var(--type-accent)}
.detail-point-list b{font-size:var(--type-body);color:var(--type-heading);font-weight:var(--type-weight-heading)}
.detail-point-list p{font-size:var(--type-note);margin:4px 0 0;line-height:var(--type-line-body)}
.detail-link-banner{display:flex;align-items:center;justify-content:space-between;gap:28px;background:linear-gradient(110deg,#f3f9ff,#dbe7ff);border:1px solid #d7e2ee;border-radius:8px;padding:28px;margin-top:24px}
.detail-link-banner h3{font-size:var(--type-subheading)!important;margin:0 0 12px}
.detail-link-banner p{font-size:var(--type-note);margin:0}
.detail-link-banner .button{flex:none}
.detail-scene-horizontal{min-height:0}
.detail-scene-panel{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,60fr);gap:4%;align-items:center;padding:28px;border:1px solid #d7e2ee;border-radius:8px;background:#fff}
.detail-scene-panel img{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px}
.detail-scene-panel h3{font-size:var(--type-subheading)!important;margin:0 0 12px}
.detail-scene-panel .detail-point-list{margin-bottom:0}
.product-page main h2 > .detail-title-phrase{display:inline-block;max-width:100%;white-space:normal;text-wrap:wrap}
.detail-value-cards{background:#f5f8fc}
.detail-value-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:36px}
.detail-value-card-grid summary{list-style:none;cursor:pointer}
.detail-value-card-grid summary::-webkit-details-marker{display:none}
.detail-value-card-grid summary h3{font-size:var(--type-subheading)!important;margin:0 0 16px}
.detail-value-card-grid summary img{width:100%;height:auto;aspect-ratio:1.4;object-fit:contain}
.detail-value-card-grid details{display:block;background:#fff}
.detail-value-card-grid details>p{margin:16px 0 0;padding-top:16px;border-top:1px solid #d7e2ee}
.detail-card-arrow{display:block;text-align:right;color:var(--type-accent)}
.detail-value-card-grid details[open] .detail-card-arrow{transform:rotate(90deg)}
.detail-advantages .detail-card{grid-column:span 2;background:#f5f8fc}
.detail-advantages .case-large{grid-column:span 3}
.detail-role-layout{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,58fr);gap:28px 4%;align-items:center}
.detail-role-head{grid-column:1;grid-row:1}
.detail-role-panel{display:contents}
.detail-role-description{grid-column:1;grid-row:2;align-self:start}
.detail-role-description h3{font-size:var(--type-subheading)!important;margin:0 0 16px}
.detail-role-description p{margin:0 0 24px}
.detail-role-picture{grid-column:2;grid-row:1 / span 2}
.detail-role-picture img{display:block;width:100%;height:auto;object-fit:contain}
.detail-role-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.detail-role-tabs button{background:transparent;border:0;border-radius:30px;padding:10px 16px;cursor:pointer;color:var(--type-heading);font:var(--type-weight-heading) var(--type-navigation)/var(--type-line-control) var(--type-font)}
.detail-role-tabs .active{background:#111820;color:white}
.detail-role-number{color:var(--type-accent);font-size:var(--type-note)}
.detail-data img{display:block;width:100%;height:auto;object-fit:contain}
.cemx .detail-hero-art{width:48%;right:0;top:120px}
.cemx .detail-value>.product-backdrop{width:60%;left:auto;right:0;object-fit:contain;object-position:right bottom}
@media(max-width:1100px){.detail-value-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-link-card-grid{gap:16px}.cemx .detail-hero-art{position:static;width:100%}}
@media(max-width:640px){
 /* Balance only small-screen banner lines; desktop keeps its available width. */
 #top.product-page main .product-hero :is(h1,h2){text-wrap:balance}
 #top.product-page main .product-hero h1 > .hero-title-phrase{display:inline-block;max-width:100%}
 .detail-compact-tabs button{flex:none;padding:12px}
 .detail-link-card-grid,.detail-value-card-grid,.detail-scene-panel,.detail-role-layout{grid-template-columns:1fr}
 .detail-link-banner{flex-direction:column;align-items:flex-start;padding:20px}
 .detail-scene-panel{padding:20px;gap:24px}
 .detail-role-head,.detail-role-description,.detail-role-picture{grid-column:auto;grid-row:auto}
 .detail-advantages .detail-card,.detail-advantages .case-large{grid-column:auto}
 .detail-advantages .detail-card-image{max-height:240px}
 .cemx .detail-value>.product-backdrop{width:100%}
 .detail-art-missing{min-height:180px}
}

.detail-page summary:focus-visible{outline:3px solid #40a3ff;outline-offset:4px;border-radius:6px}
.detail-media-link:not([href]){cursor:default}

@font-face{font-family:ProductScenarioJinBu;src:url('./fonts/detail/DingTalkJinBuTi.ttf') format('truetype');font-weight:400;font-display:swap}
#top.detail-page main .detail-scenario-card h3{font-family:ProductScenarioJinBu,var(--type-font);font-weight:400;font-size:26px;line-height:1.4;margin:0 0 16px;text-wrap:wrap}
.detail-page .detail-scenarios-cards .detail-card-grid{gap:24px;align-items:stretch}
.detail-page .detail-scenario-card{display:flex;flex-direction:column;padding:32px;min-width:0}
.detail-page .detail-scenario-card>p{margin:0 0 24px;line-height:1.7;min-height:55px}
.detail-page .detail-scenario-card .detail-media-link{margin-top:auto}
.detail-page .detail-scenario-card .detail-card-image{width:100%;aspect-ratio:2.2;object-fit:contain}
.detail-page .detail-value>.product-backdrop{display:none}
.detail-page .detail-value-panels{position:absolute;inset:0;width:100%;height:100%}
.detail-page .detail-value-panels a{height:100%}
.detail-page .detail-value-panels img{width:100%;height:100%;object-fit:cover}
.detail-page .detail-value-card-grid details[open]{border-color:#7fb2ff;box-shadow:0 8px 24px #2866bf24}
.detail-page .detail-value-card-grid details:hover{border-color:#9fc3fa}
.detail-page .detail-value-card-grid summary:focus-visible{outline:2px solid #2878ff;outline-offset:4px}
@media(max-width:640px){#top.detail-page main .detail-scenario-card h3{font-size:22px}.detail-page .detail-scenario-card{padding:24px}.detail-page .detail-scenario-card>p{min-height:0}.detail-page .detail-value-panels{position:relative;height:280px}.detail-page .detail-value-panels img{object-position:75% center}}

.detail-advantages .product-case-card{transition:box-shadow 300ms ease,border-color 300ms ease}