/* Content bento panels reuse the jade and orange palette without model associations. */
main#main-content .content-bento{
 display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem;
 align-items:stretch;
}
main#main-content .content-bento>*{
 grid-column:span 5;min-inline-size:0;padding:clamp(1.5rem,3vw,2.75rem);
 border:0;border-radius:var(--hc-radius-panel);--bento-surface:var(--hc-color-paper);background:var(--hc-color-paper);
 color:var(--hc-color-ink);overflow-wrap:anywhere;
}
main#main-content .content-bento>:nth-child(4n+1),
main#main-content .content-bento>:nth-child(4n+4){grid-column:span 7}
main#main-content .content-bento>*>:first-child{margin-block-start:0}
main#main-content .content-bento>*>:last-child{margin-block-end:0}
main#main-content .content-bento>article{display:flex;flex-direction:column;align-items:flex-start}
main#main-content .content-bento>article>.pdf-download{margin-block-start:auto;padding-block-start:1rem}
main#main-content .content-bento--sizing>:first-child{grid-column:span 5;--bento-surface:var(--hc-tertiary-light);background:var(--hc-tertiary-light)}
main#main-content .content-bento--sizing>:last-child{grid-column:span 7;--bento-surface:var(--hc-secondary-light);background:var(--hc-secondary-light)}
main#main-content .content-bento--downloads>:first-child{--bento-surface:var(--hc-secondary-light);background:var(--hc-secondary-light)}
main#main-content .content-bento--downloads>:last-child{--bento-surface:var(--hc-tertiary-light);background:var(--hc-tertiary-light)}
main#main-content .content-bento--downloads>:nth-child(2),
main#main-content .content-bento--downloads>:nth-child(3){--bento-surface:var(--hc-surface-neutral);background:var(--hc-surface-neutral)}
main#main-content .content-bento--topics>:first-child{--bento-surface:var(--hc-secondary-light);background:var(--hc-secondary-light)}
main#main-content .content-bento--topics>:last-child{--bento-surface:var(--hc-tertiary-light);background:var(--hc-tertiary-light)}
main#main-content .content-bento--topics>:nth-child(2),
main#main-content .content-bento--topics>:nth-child(3){--bento-surface:var(--hc-surface-neutral);background:var(--hc-surface-neutral)}
@media(max-width:60rem){
 main#main-content .content-bento{gap:1.25rem}
 main#main-content .content-bento>*{padding:1.75rem}
}
@media(max-width:48rem){
 main#main-content .content-bento{grid-template-columns:minmax(0,1fr)}
 main#main-content .content-bento>*{grid-column:1!important;padding:1.5rem}
}

/* Broader content-page use. Technical value lists keep their row treatment. */
main#main-content.site-rhythm :is(.technical-grid,.product-specs__grid).content-bento{
 gap:1.5rem;align-items:stretch;margin-block-end:0;
}
main#main-content .content-bento--accent>:first-child{--bento-surface:var(--hc-secondary-light);background:var(--hc-secondary-light)}
main#main-content .content-bento--accent>:last-child{--bento-surface:var(--hc-tertiary-light);background:var(--hc-tertiary-light)}
main#main-content .content-bento--quiet>:first-child{--bento-surface:var(--hc-surface-neutral);background:var(--hc-surface-neutral)}
main#main-content .content-bento--quiet>:last-child{--bento-surface:var(--hc-secondary-ultra-light);background:var(--hc-secondary-ultra-light)}
main#main-content .content-bento--four>:nth-child(2),
main#main-content .content-bento--four>:nth-child(3){--bento-surface:var(--hc-surface-neutral);background:var(--hc-surface-neutral)}
main#main-content .content-bento .bento-heading{margin-block-end:1rem}
main#main-content .content-bento .bento-heading h3{margin:0;font-family:var(--hc-font-heading);font-size:1.625rem;font-weight:400;line-height:1.2;letter-spacing:0;text-transform:none}
main#main-content .content-bento>article>figure{align-self:stretch}
main#main-content .content-bento>article>br{display:none}
main#main-content .content-bento>article>.hex-button+.hex-button{margin-block-start:.5rem}
@media(max-width:60rem){
 main#main-content.site-rhythm :is(.technical-grid,.product-specs__grid).content-bento{gap:1.25rem}
}

/* Bento panels must not inherit the old technical-row hover stripe. */
main#main-content .content-bento>article::before{content:none}

/* Nested technical rows follow their own bento panel's colour. */
main#main-content .content-bento--installation>:first-child{--bento-surface:var(--hc-secondary-light)}
main#main-content .content-bento--installation>:last-child{--bento-surface:var(--hc-tertiary-light)}
main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item){
 --bento-rule:color-mix(in srgb,var(--bento-surface) 88%,#000);
 --bento-rule-active:color-mix(in srgb,var(--bento-surface) 80%,#000);
 border-block-start-color:var(--bento-rule);
 transition:border-color .2s;
}
main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item)::before{
 border-inline-start-color:var(--bento-rule);background:transparent;
}
main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item):is(:hover,:focus-within){border-block-start-color:var(--bento-rule-active)}
main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item):is(:hover,:focus-within)::before{
 border-inline-start-color:var(--bento-rule-active);background:#fff;
}
@media(hover:none){
 main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item):hover:not(:focus-within){border-block-start-color:var(--bento-rule)}
 main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item):hover:not(:focus-within)::before{border-inline-start-color:var(--bento-rule);background:transparent}
}
@media(prefers-reduced-motion:reduce){
 main#main-content .content-bento.content-bento > * :is(.feature-item,.benefits__item){transition:none}
}