/* V15: smaller, uncropped product views with a quieter editorial rhythm.
   Load after the existing styles. The product geometry and hotspot mapping stay intact. */
.human-hero{padding:calc(var(--head) + 38px) 0 40px}
.human-hero-grid{gap:6%;align-items:center}
.human-hero-copy{padding-bottom:6px}
.human-hero h1{margin-bottom:21px}
.human-hero .actions{margin-top:24px}
.human-product{width:100%;max-width:586px;justify-self:center}
.human-product img{width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center;border-radius:4px;background:#eeeae5}
.human-main figcaption{line-height:1.6;color:#626b60;margin-top:10px}
.human-intro{padding:46px 0 48px}
.human-rack-section{padding:10px 0 52px}
.human-photo-row{gap:7%;align-items:center}
.human-photo-row figure{width:100%;max-width:568px;justify-self:center}
.human-photo-row img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center;border-radius:4px;background:#eeeae5}
.human-photo-row.reverse{gap:8%}
.human-photo-row.reverse figure{max-width:515px}
.human-photo-row.reverse img{aspect-ratio:auto;object-position:center}
.human-photo-copy h2{margin-bottom:18px}
.human-readings{margin:22px 0 17px}
.human-readings>div{padding-block:12px}
.human-connections{padding:42px 0 50px}
.human-link-pair{margin-top:21px}
.human-engineering{padding-bottom:48px}
.human-guides{padding:42px 0 48px}
.human-brief{padding:40px 0}

/* Natural 16:9 proportions replace the former tight photo crops. */
.detail-hero{padding-bottom:43px}
.detail-hero-grid{gap:6%;align-items:center}
.detail-hero-image{width:100%;max-width:533px;justify-self:center;background:#eeeae5;border-radius:4px}
.detail-hero-image img,.detail-hero-image.product-image img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center}
.detail-hero .actions{margin-top:23px}
.detail-section{padding-block:53px}
.visual-panel.hero-graphic{width:100%;max-width:500px;justify-self:center;aspect-ratio:auto;min-height:0;max-height:none;padding:16px;background:#f3f3ed;border:1px solid #e0e1d9;border-radius:4px}
.visual-panel.hero-graphic svg{display:block;width:100%;height:auto;max-height:268px;overflow:visible}
.wide-diagram{max-width:600px;padding:18px;border-radius:4px}
.wide-diagram svg{display:block;width:100%;height:auto;max-height:300px;overflow:visible}
.detail-page .guide-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.2vw,44px);padding:clamp(24px,2.4vw,34px);border:1px solid var(--rule);border-radius:4px}
.detail-page .guide-feature>div{min-width:0}
.detail-page .guide-callout{padding:24px;border:1px solid #d7ddcf;border-radius:4px}
.guide-feature .visual-panel{width:100%;max-width:500px;justify-self:center;padding:16px;border-radius:4px}
.guide-feature .visual-panel svg{width:100%;height:auto;max-height:268px;overflow:visible}
.figure-caption{max-width:600px;color:#65705f;line-height:1.7}
.explore-section{padding:48px 0 54px}
.guide-article{padding-block:46px 58px}

/* Reduce this frame through width, preserving the percent-positioned hotspots. */
#rack .rack-figure{max-width:480px;justify-self:center}
#rack .rack-frame img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}

/* Actual HTML labels stay readable when the engineering drawing is compact. */
.visual-panel.has-diagram-key{display:block;aspect-ratio:auto;min-height:0;max-height:none}
.diagram-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--rule)}
.diagram-key>div{min-width:0}
.diagram-key dt{margin:0;font-size:13px;line-height:1.5;font-weight:700;color:#343f32}
.diagram-key dd{margin:4px 0 0;font-size:12px;line-height:1.65;font-weight:400;color:#626b60}

@media(min-width:900px) and (max-height:760px){
 .human-hero{padding-top:calc(var(--head) + 28px)}
 .human-product{max-width:568px}
 .human-product img{max-height:none}
 .detail-hero{padding-bottom:35px}
}
@media(min-width:700px) and (max-width:999px){
 .human-product{max-width:498px}
 .human-photo-row figure{max-width:498px}
 .human-photo-row.reverse figure{max-width:462px}
 .detail-hero-image{max-width:480px}
 .visual-panel.hero-graphic,.guide-feature .visual-panel{padding:14px}
 .visual-panel.hero-graphic svg,.guide-feature .visual-panel svg{max-height:245px}
}
@media(max-width:699px){
 .human-hero{padding:91px 0 28px}
 .human-hero-grid{gap:22px}
 .human-hero-copy{padding:0}
 .human-hero h1{margin-bottom:19px}
 .human-hero .actions{margin-top:20px}
 .human-product{max-width:373px}
 .human-product img{width:100%;height:auto;aspect-ratio:auto;max-height:none}
 .human-main figcaption{font-size:11px;margin-top:9px;line-height:1.65}
 .human-intro{padding:30px 0 32px}
 .human-photo-row,.human-photo-row.reverse{gap:23px}
 .human-photo-row figure{max-width:365px}
 .human-photo-row img{width:100%;height:auto;aspect-ratio:auto;max-height:none}
 .human-photo-row.reverse figure{max-width:338px}
 .human-photo-row.reverse img{aspect-ratio:auto;max-height:none}
 .human-rack-section{padding:8px 0 32px}
 .human-photo-copy h2{margin-bottom:16px}
 .human-readings{margin:19px 0 14px}
 .human-readings>div{padding-block:11px}
 .human-readings dt,.human-readings dd{font-size:13px}
 .human-connections{padding:30px 0 33px}
 .human-link-pair{margin-top:17px}
 .human-engineering{padding-bottom:30px}
 .human-guides{padding:30px 0 34px}
 .human-brief{padding:30px 0}
 .detail-hero{padding-bottom:28px}
 .detail-hero-grid{gap:22px}
 .detail-hero-image{max-width:373px;border-radius:3px}
 .detail-hero-image img,.detail-hero-image.product-image img{width:100%;height:auto;aspect-ratio:auto;max-height:none}
 .detail-hero .actions{margin-top:20px}
 .detail-section{padding-block:33px}
 .visual-panel.hero-graphic{max-width:370px;padding:12px;border-radius:3px}
 .visual-panel.hero-graphic svg{height:auto;max-height:196px}
 .wide-diagram{max-width:370px;padding:12px;border-radius:3px}
 .wide-diagram svg{height:auto;max-height:200px}
 .detail-page .guide-feature{grid-template-columns:minmax(0,1fr);gap:24px;padding:20px;border-radius:3px}
 .detail-page .guide-callout{padding:20px;border-radius:3px}
 .guide-feature .visual-panel{max-width:370px;padding:12px;border-radius:3px}
 .guide-feature .visual-panel svg{height:auto;max-height:196px}
 .figure-caption{max-width:370px}
 .explore-section{padding:32px 0 36px}
 .guide-article{padding:28px 0 38px}
 #rack .rack-figure{max-width:365px}
 .has-diagram-key .architecture-diagram>text,.has-diagram-key .architecture-diagram .diagram-note{display:none}
 .has-diagram-key .architecture-diagram g[data-sensor-highlight]>text{font-size:18px}
 .diagram-key{grid-template-columns:minmax(0,1fr);gap:9px;margin-top:12px;padding-top:12px}
 .diagram-key>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:start}
 .diagram-key dt,.diagram-key dd{font-size:13px;line-height:1.6}
 .diagram-key dd{margin:0}
}
@media(max-width:359px){
 .human-hero{padding-top:87px}
 .human-hero-grid{gap:20px}
 .human-hero .actions{margin-top:18px}
 .human-photo-row,.human-photo-row.reverse{gap:21px}
}
@media(prefers-reduced-motion:reduce){
 .human-product img,.detail-hero-image{animation:none}
 .human-photo-row .photo-enter{opacity:1;transform:none;transition:none}
}