/* Local presentations follow the website's compact spacing in ordinary browsing. */
@media screen {
 body:not(.presenting) .section{padding-block:32px}
 body:not(.presenting) .section-heading{margin-bottom:28px}
}
@media screen and (max-width:700px){
 body:not(.presenting) .section{padding-block:24px}
 body:not(.presenting) .section-heading{margin-bottom:24px}
}
/* Keep every board's hero in proportion on ultrawide displays. */
@media screen and (min-width:1600px){
 body:not(.presenting) .wrap{width:min(1760px,calc(100% - 120px))}
 body:not(.presenting) .header{padding-inline:max(60px,calc((100vw - 1760px)/2))}
 body:not(.presenting) .hero{max-width:2040px;margin-inline:auto;height:820px;min-height:0}
 body:not(.presenting) .hero-art{left:auto;right:0;width:min(100%,1600px);object-fit:contain;object-position:right center}
 body:not(.presenting) .hero-content{padding-bottom:55px}
 body:not(.presenting) .hero h1{font-size:88px}
 body:not(.presenting) .hero-detail{max-width:420px;font-size:15px}
}
/* Remove the inherited dimming from the native board hero renders. */
.hero-art{opacity:1}
/* Keep the product clear; only the desktop text column needs shading. */
.hero .hero-shade{background:linear-gradient(90deg,#0a1012 0%,#0a1012f2 23%,#0a101240 37%,transparent 48%)}
@media(max-width:760px){.hero .hero-shade{background:none}}

/* Fit the entire native render, never crop the board to fill the hero. */
.hero .studio-hero .hero-art{object-fit:contain;object-position:right center;mask-image:none}
.enclosure-image img,.blade-visual img,.system-visual img{object-fit:contain}
@media(max-width:1100px){.header nav{display:none}}
@media(min-width:761px) and (max-width:1000px){
 .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:center}
 .hero-content{order:0;padding-block:36px 24px}
 .hero .studio-hero{order:1;display:block;width:min(640px,100%)}
 .hero .studio-hero .hero-art{position:static;width:100%;height:auto;aspect-ratio:8/5;object-position:center}
 .hero .hero-shade{display:none}
 .hero-bottom{order:2;position:static;padding-block:18px}
}
@media(max-width:760px){
 .hero{min-height:0}
 .hero .studio-hero .hero-art{width:100%;max-width:100%;left:0;right:0;bottom:34px;height:auto;aspect-ratio:8/5;object-position:center}
 .hero-content{padding-bottom:calc(62.5vw + 40px)}
 .hero-meta{width:auto;flex-wrap:wrap;row-gap:10px}
 .actions{flex-wrap:wrap}
 .hero-bottom .art-label{max-width:55%}
 .dialog-image-wrap img{min-width:0;max-width:100%}
 .viewer-controls,.viewer-toolbar,.view-actions{min-width:0;flex-wrap:wrap}
 .case-visibility{flex-wrap:wrap}
}

/* studio-header-framing:start */
/* Feather only empty studio background; measured hardware bounds stay opaque. */
.pa-showcase .pa-hero-art,.hero .studio-hero .hero-art{
 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);
 mask-composite:intersect;
}
@media(min-width:1001px){
 body:not(.presenting) .hero h1{font-size:clamp(48px,5vw,72px)}
 body:not(.presenting) .hero[data-title="Classic controls. Open connections."] h1{font-size:clamp(48px,5vw,68px)}
 .pa-showcase .pa-hero-art,.hero .studio-hero .hero-art{
  mask-image:linear-gradient(90deg,transparent 14%,#000 34%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 94%,transparent);
 }
}
@media(min-width:1600px){
 .pa-showcase .pa-hero-art,body:not(.presenting) .hero .studio-hero .hero-art{right:clamp(0px,calc((100vw - 1760px)/2),140px);transform:translateY(-40px)}
}
/* Trim empty side background on narrow headers, keeping the entire PCB visible. */
@media(max-width:1000px){
 body:not(.presenting) .hero .studio-hero .hero-art{aspect-ratio:29/20;object-fit:cover;object-position:center}
}
@media(max-width:760px){
 body:not(.presenting) .hero-content{padding-bottom:calc(68.965517vw + 40px)}
}
@media(min-width:761px) and (max-width:1000px){
 .pa-showcase .pa-hero-art{aspect-ratio:29/20;object-fit:cover;object-position:center}
}
/* studio-header-framing:end */

/* Size ordinary board heroes to their 16:9 studio render, allowing room for text. */
@media screen and (min-width:1001px) and (max-width:1599px){
 body:not(.presenting) .hero{height:auto;min-height:min(56.25vw,clamp(690px,calc(100svh - 84px),790px))}
 body:not(.presenting) .hero-content{padding-top:36px}
 body:not(.presenting) .hero .studio-hero .hero-art{object-position:right top}
}

/* Native board cutouts share a square inspection frame on every presentation. */
.board-renders .enclosure-image{background:#0d171a}
.board-renders .enclosure-image img{background:transparent;width:100%;height:auto;aspect-ratio:1;object-fit:contain;padding:clamp(20px,2.4vw,36px)}
.board-renders .revision{top:12px;left:12px;padding:6px 9px;font-size:9px}