/* One airy section rhythm throughout the designer page. */
.designer-page{--designer-section-gap:5rem;padding-block-end:var(--designer-section-gap)}
.product-page.designer-page .designer-page-content>.technical-section,
.product-page.designer-page .designer-page-content>.research-supplement{margin-block:0}
.product-page.designer-page .designer-page-content>.technical-section:not(.feature-section){padding-block:0;border:0}
.product-page.designer-page .designer-page-content>.technical-section+.research-supplement,
.product-page.designer-page .designer-page-content>.research-supplement+.technical-section,
.product-page.designer-page .designer-page-content>.technical-section+.technical-section{margin-block-start:var(--designer-section-gap)}
.designer-page .designer-page-content>.research-supplement .technical-research{margin-block:0}
.designer-page .designer-page-content>.research-supplement .technical-callout{margin-block:var(--designer-section-gap) 0;padding-block:0}
.designer-page .designer-page-content>.technical-section:not(.feature-section)>:first-child,
.designer-page .research-supplement .technical-callout>:first-child{margin-block-start:0}
.designer-page .designer-page-content>.technical-section>:last-child,
.designer-page .research-supplement .technical-callout>:last-child{margin-block-end:0}
@media(max-width:40rem){.designer-page{--designer-section-gap:3rem}}

/* Neutral grey trial for the technology introduction. */
.designer-page #harjapatteritekniikka{background:var(--hc-surface-grey)}

/* Customer sizing example: readable term/value pairs on desktop and mobile. */
.designer-page .sizing-example>.technical-grid{margin-block-start:2.5rem}
.designer-page .sizing-example .technical-grid>div{min-inline-size:0}
.designer-page .sizing-example dl{margin:1.5rem 0}
.designer-page .sizing-example dl>div{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1rem;padding-block:.875rem;border-bottom:1px solid #D7DCDC}
.designer-page .sizing-example dt{margin:0;font-weight:500}
.designer-page .sizing-example dd{margin:0;font-variant-numeric:tabular-nums}
.designer-page .sizing-example strong{overflow-wrap:anywhere}
@media(max-width:40rem){.designer-page .sizing-example dl>div{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:.75rem}.designer-page .sizing-example>.technical-grid{gap:2rem}}

/* Section rhythm owns the outer spacing; only bento cards retain inner padding. */
main#main-content.designer-page.site-rhythm .designer-page-content>:is(.technical-section,.research-supplement){
 margin-block:0;padding-block:0;
}
main#main-content.designer-page.site-rhythm .designer-page-content>:is(.technical-section,.research-supplement)+:is(.technical-section,.research-supplement){
 margin-block-start:var(--designer-section-gap);
}
main#main-content.designer-page.site-rhythm{padding-block-end:var(--designer-section-gap)}
main#main-content.designer-page.site-rhythm .designer-page-content>.technical-section>.shell>:last-child{
 margin-block-end:0;
}

/* Research callout uses the site's shared graphite surface. */
.designer-page .research-supplement .technical-research{
 background:var(--hc-surface-dark);color:var(--hc-color-paper);
}
.designer-page .research-supplement .technical-research :is(h3,p,strong){color:inherit}

/* Keep the technical panels' left rule visible at rest, including touch devices. */
main#main-content.designer-page .feature-item::before{border-inline-start-color:#E8EBE9}
main#main-content.designer-page .feature-item:is(:hover,:focus-within)::before{border-inline-start-color:#A0B0B8}
@media(hover:none){
 main#main-content.designer-page .feature-item:hover:not(:focus-within)::before{border-inline-start-color:#E8EBE9}
}

/* Extra breathing room after the filled installation callout. */
main#main-content.designer-page.site-rhythm .designer-page-content>#tuotetiedot{
 margin-block-start:calc(var(--designer-section-gap) + 1.5rem);
}
@media(max-width:40rem){
 main#main-content.designer-page.site-rhythm .designer-page-content>#tuotetiedot{margin-block-start:calc(var(--designer-section-gap) + 1rem)}
}

/* Installation details and modular construction belong to the same bento group. */
main#main-content.designer-page .content-bento--installation>:first-child{background:var(--hc-secondary-light)}
main#main-content.designer-page .content-bento--installation>:last-child{background:var(--hc-tertiary-light)}

/* Match the top rule to the lighter resting left rule. */
main#main-content.designer-page .feature-item{border-block-start-color:#E8EBE9}