/* Product portfolio: the approved IBMS visual language, scoped away from cid 52.
   cid 531 retains its observed introduction and conversion layout. */
.product-page-shell.portfolio-shell{width:1180px;max-width:calc(100% - 96px);margin:0 auto}
.commonwrap.portfolio-detail{width:1180px;max-width:calc(100% - 96px);margin:22px auto 0;box-sizing:border-box}
.portfolio-shell .product-hero-copy{max-width:1100px}
.portfolio-shell .product-lead{font-size:18px;line-height:1.85;color:#283f54}
.portfolio-content{max-width:1180px;margin:0 auto;text-align:left}
.portfolio-content .pm-story{margin-bottom:52px;scroll-margin-top:24px}
.portfolio-content .pm-story h2{font-size:28px;line-height:1.5;margin:0 0 18px}
.portfolio-content .pm-story h3{font-size:20px;line-height:1.6}
.portfolio-content .pm-intro{font-size:18px;line-height:1.85}
.portfolio-reader-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 38px}
.portfolio-reader-nav a{padding:12px 14px;border:1px solid #b4d4e4;border-radius:6px;color:#096786;text-align:center;text-decoration:none;font:16px/1.5 "Microsoft Yahei",Arial,sans-serif}
.portfolio-reader-nav a:hover{background:#eef7fb}
.portfolio-content .portfolio-grid,.portfolio-content .portfolio-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:28px 0;align-items:start}
.portfolio-content .portfolio-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-content .pm-card{min-width:0;padding:24px}
.portfolio-content .portfolio-pair>.pm-card{align-self:stretch}
@supports(grid-template-rows:subgrid){@media(min-width:769px){.portfolio-content .portfolio-pair>.pm-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}}}
.portfolio-content .pm-card .pm-figure{margin:18px 0 0}
.portfolio-content .portfolio-screen{padding:0;border:0;background:transparent;margin:26px 0}
.portfolio-browser{display:block;border:1px solid #cbd8e2;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(22,62,91,.08)}
.portfolio-browser-bar{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 14px;background:linear-gradient(#f8fafc,#eaf0f5);border-bottom:1px solid #d5dee7;box-sizing:border-box}
.portfolio-browser-dots{display:flex;gap:6px;flex:none}.portfolio-browser-dots i{width:9px;height:9px;border-radius:50%;background:#ff6058}.portfolio-browser-dots i:nth-child(2){background:#febc2e}.portfolio-browser-dots i:nth-child(3){background:#28c840}
.portfolio-browser-title{font:12px/1.5 "Microsoft Yahei",Arial,sans-serif;color:#536878;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:center}
.portfolio-browser-mark{font:11px/1.5 "Microsoft Yahei",Arial,sans-serif;color:#627989;flex:none}
.portfolio-content .pm-figure .portfolio-browser img{display:block;width:100%!important;height:auto!important;max-width:100%;max-height:none!important;margin:0;border:0;border-radius:0}
.portfolio-content .portfolio-screen figcaption,.portfolio-content .portfolio-diagram figcaption{padding:12px 4px 0;font-size:13px;line-height:1.75;color:#526c80;background:transparent}
.portfolio-content .portfolio-diagram{padding:0;border:0;background:transparent;max-width:920px;margin:28px auto}
.portfolio-content .portfolio-diagram img{width:100%;height:auto;max-height:none;border-radius:12px;border:1px solid #d4e3ed;box-sizing:border-box}
.portfolio-content .portfolio-hardware{max-width:640px;margin-left:auto;margin-right:auto}
.portfolio-content .portfolio-hardware img{max-height:410px;object-fit:contain;background:#f6f9fc;border:1px solid #dce8ef;border-radius:12px;padding:22px}
.portfolio-steps{list-style:none;margin:28px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.portfolio-content .portfolio-steps>li{display:flex;align-items:flex-start;gap:15px;border:1px solid #dce8ef;border-radius:12px;padding:22px;list-style:none;margin:0}
.portfolio-step-number{font-size:20px;font-weight:700;color:#087aa3;line-height:1.8}
.portfolio-steps h3{margin-top:0}
.portfolio-foundation{background:#edf6fb;border-left:4px solid #087aa3;padding:22px 28px;margin:28px 0;border-radius:0 10px 10px 0}
.portfolio-table-wrap{max-width:100%;overflow-x:auto;margin:24px 0}
.portfolio-content .portfolio-table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0}
.portfolio-content .portfolio-table th,.portfolio-content .portfolio-table td{padding:15px;border:1px solid #dce8ef;text-align:left;vertical-align:top;overflow-wrap:anywhere;font-size:16px;line-height:1.8}
.portfolio-table thead{background:#edf6fb}.portfolio-table tbody th{font-weight:700;background:#f8fbfd}
.portfolio-reference{border:1px solid #dce8ef;border-radius:10px;margin:22px 0;background:#f8fbfd}
.portfolio-reference>summary{cursor:pointer;font-weight:700;color:#163e5b;padding:17px 20px;line-height:1.7}
.portfolio-reference[open]>summary{border-bottom:1px solid #dce8ef}
.portfolio-reference-body{padding:22px;background:#fff}
.portfolio-protocol{min-width:620px}.portfolio-reference .portfolio-table-wrap{max-height:620px}
.portfolio-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;align-items:start}.portfolio-gallery .portfolio-screen{width:100%;max-width:360px;margin:0 auto}.portfolio-gallery .portfolio-browser-bar{min-height:30px}.portfolio-gallery .portfolio-browser-title{font-size:10px}
.portfolio-content .guhe-faq-list{margin:0}
.portfolio-content .guhe-faq-list dt{font-weight:700;font-size:19px;margin:24px 0 8px;color:#163e5b}
.portfolio-content .guhe-faq-list dd{margin:0;padding-bottom:20px;border-bottom:1px solid #e3edf3}
.portfolio-content .pm-links a{min-height:46px;box-sizing:border-box}
.portfolio-content .pm-links .pm-consult:hover,.portfolio-content .pm-links .pm-consult:focus-visible{background:#096786;color:#fff;border-color:#096786}
.portfolio-content a:focus-visible,.portfolio-reference>summary:focus-visible,.portfolio-table-wrap:focus-visible{outline:3px solid #0087ae;outline-offset:3px}
@media(max-width:1024px){.portfolio-content .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){
 .product-page-shell.portfolio-shell{width:auto;max-width:100%}
 .commonwrap.portfolio-detail{width:auto;max-width:100%;margin:18px 0 0}
 .portfolio-shell .product-lead{font-size:16px}
 .portfolio-reader-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:28px}
 .portfolio-reader-nav a{font-size:15px;padding:11px 8px}
 .portfolio-content .portfolio-grid,.portfolio-content .portfolio-two,.portfolio-steps{grid-template-columns:1fr;gap:16px}
 .portfolio-content .pm-story h2{font-size:25px}.portfolio-content .pm-story h3{font-size:20px}
 .portfolio-content .pm-story{font-size:16px;margin-bottom:42px}.portfolio-content .pm-card{padding:20px}
 .portfolio-content .portfolio-steps>li{padding:18px;gap:12px}.portfolio-foundation{padding:18px 20px}
 .portfolio-reference-body{padding:14px}.portfolio-content .portfolio-table th,.portfolio-content .portfolio-table td{padding:12px;font-size:15px}
 .portfolio-table{min-width:530px}.portfolio-table-wrap{padding-bottom:6px}
 .portfolio-browser-bar{min-height:30px;padding:0 10px;gap:8px}.portfolio-browser-dots i{width:7px;height:7px}.portfolio-browser-title{font-size:10px}.portfolio-browser-mark{display:none}
 .portfolio-content .pm-links a{width:100%;text-align:center}
}

/* Visual review: complete software screenshots fill their own browser frame. */
.product-detail-content .pm-figure>a{text-decoration:none}
.product-detail-content #product-focus .portfolio-screen{padding:0;border:0;background:transparent}
.product-detail-content #product-focus .portfolio-screen .portfolio-browser img{display:block;width:100%!important;height:auto!important;max-height:none!important;margin:0;border:0;border-radius:0}
.product-detail-content #product-focus .portfolio-screen figcaption{padding:12px 4px 0;font-size:13px;line-height:1.75;background:transparent}
.portfolio-content .portfolio-thumbnail .portfolio-browser{width:100%;max-width:calc(var(--portfolio-source-width) + 2px);margin:0 auto}
.portfolio-content .portfolio-mobile .portfolio-browser{width:100%;max-width:322px;margin:0 auto}
