.ss-components{padding:64px 0;background:transparent}
.ss-components-panel{max-width:1080px;margin:auto;padding:42px 48px;border:1px solid #e0edfc;border-radius:24px;box-shadow:0 2px 12px #203c5905}
.ss-components-title{text-align:center;font-size:clamp(30px,3vw,42px);margin:0}
.ss-component-feature{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:40px;max-width:740px;margin:0 auto 38px}
.ss-component-feature h3{color:var(--ss-navy);font-size:26px;margin:0 0 12px}
.ss-component-feature p{font-size:16px;line-height:1.65;max-width:540px}
.ss-component-visual{display:flex;align-items:center;justify-content:center;height:150px}
.ss-component-image{display:block;width:150px;max-width:100%;height:140px;object-fit:contain}
.ss-component-feature .ss-component-image{width:170px;height:165px}
.ss-component-feature .ss-component-visual{height:180px}
.ss-component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0}
.ss-component-grid li{min-width:0;padding:24px 16px;text-align:center}
.ss-component-grid li:not(:nth-child(3n+1)){border-left:1px solid #c8e4ff}
.ss-component-grid li:nth-child(n+4){border-top:1px solid #c8e4ff}
.ss-component-grid h3{font-size:15px;font-weight:400;line-height:1.4;color:var(--ss-navy);margin:14px 0 0}
@media(max-width:700px){
 .ss-components{padding:40px 0}
 .ss-components-panel{padding:28px 18px;border-radius:18px}
 .ss-components-heading{margin-bottom:28px}
 .ss-component-feature{grid-template-columns:100px minmax(0,1fr);gap:18px;margin-bottom:24px}
 .ss-component-feature .ss-component-visual{height:135px}
 .ss-component-feature .ss-component-image{width:100px;height:125px}
 .ss-component-feature h3{font-size:22px}
 .ss-component-feature p{font-size:14px}
 .ss-component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ss-component-grid li{padding:20px 8px}
 .ss-component-grid li:not(:nth-child(3n+1)){border-left:0}
 .ss-component-grid li:nth-child(even){border-left:1px solid #c8e4ff}
 .ss-component-grid li:nth-child(n+3){border-top:1px solid #c8e4ff}
 .ss-component-visual{height:115px}
 .ss-component-image{width:110px;height:105px}
 .ss-component-grid h3{font-size:14px}
}
@media(max-width:380px){.ss-component-feature{grid-template-columns:1fr;gap:12px}.ss-component-feature .ss-component-visual{height:115px}.ss-component-feature .ss-component-image{height:110px}}

/* Keep cell dividers stationary while each cell content enters independently. */
.ss-components-heading{margin-bottom:36px}
.ss-components-heading p{font-size:17px;max-width:680px}
.ss-component-cell.ss-reveal{transition-delay:var(--ss-component-delay,0ms)}
.ss-component-cell .ss-component-image,.ss-component-feature .ss-component-image{transition:transform .3s ease}
@media(hover:hover) and (pointer:fine){
 .ss-component-grid li:hover .ss-component-image,.ss-component-feature:hover .ss-component-image{transform:translateY(-5px) scale(1.04)}
}
@media(max-width:700px){.ss-components-heading{margin-bottom:28px}.ss-components-heading p{font-size:15px}.ss-component-cell.ss-reveal{transition-delay:0ms}}
@media(prefers-reduced-motion:reduce){.ss-component-cell.ss-reveal{opacity:1;transform:none;transition:none}.ss-component-grid li:hover .ss-component-image,.ss-component-feature:hover .ss-component-image{transform:none}}

/* Keep the Components section and panel on their original white background. */
.ss-components{background:transparent}
.ss-components-panel{background:#fff}

/* Centralina above the grid; Tornello and Display grafico share the bottom row. */
.ss-component-controller,
.ss-component-extras .ss-component-feature{display:grid;grid-template-columns:1fr;gap:16px;text-align:center;align-content:start;min-width:0}
.ss-component-controller{max-width:560px;margin:0 auto 38px}
.ss-component-controller p{margin-inline:auto}
.ss-component-extras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;border-top:1px solid #c8e4ff}
.ss-component-extras .ss-component-feature{width:100%;margin:0;padding:24px 16px;gap:0}
.ss-component-extras .ss-component-feature+ .ss-component-feature{border-left:1px solid #c8e4ff}
.ss-component-extras .ss-component-feature h3{font-size:15px;font-weight:400;line-height:1.4;margin:14px 0 0}
.ss-component-extras .ss-component-feature .ss-component-visual{height:150px}
.ss-component-extras .ss-component-feature .ss-component-image{width:150px;height:140px}
.ss-component-extras p{margin:10px auto 0;font-size:14px;line-height:1.5}
@media(max-width:700px){
 .ss-component-controller{margin-bottom:24px}
 .ss-component-extras{gap:0;margin:0;padding:0}
 .ss-component-extras .ss-component-feature{gap:0;padding:20px 8px}
 .ss-component-extras .ss-component-feature h3{font-size:14px;overflow-wrap:anywhere}
 .ss-component-extras .ss-component-feature .ss-component-visual{height:115px}
 .ss-component-extras .ss-component-feature .ss-component-image{width:110px;height:105px}
 .ss-component-controller .ss-component-visual,.ss-component-extras .ss-component-visual{height:135px}
 .ss-component-controller .ss-component-image,.ss-component-extras .ss-component-image{width:100px;height:125px}
}