/* Electro Series: Figma desktop 70:2098 and mobile 26:3907. */
.electro-page .detail-hero { background-image: linear-gradient(90deg,rgba(10,46,99,.6),rgba(10,46,99,.28) 36%,transparent 60%),linear-gradient(180deg,transparent 84%,rgba(10,46,99,.85)),url('../images/electro-hero-compressed.webp'); }
.electro-page .summary-grid { grid-template-columns: minmax(0,470fr) repeat(3,minmax(0,240fr)); gap: 25px; }
.electro-page .summary-stat { gap: 10px; padding: 25px 19px; }
.electro-page .summary-stat > img { width: 64px; height: 64px; flex-basis: 64px; }
.electro-page .summary-stat p { font-size: 20px; margin-top: 20px; }
.electro-page .summary-stat strong { font-size: 20px; line-height: 32px; margin-top: 20px; }
.electro-page .sino-feature-icon img[src$="electro-peak.svg"] { width: 36px; height: 28px; }
.electro-page .detail-faq { min-height: auto; }
.electro-page .detail-faq p a { color: #db5b13; text-decoration: underline; }
@media (min-width: 768px) and (max-width: 1199px) {
 .electro-page .summary-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .electro-page .summary-grid > div:first-child { grid-column: 1/-1; }
 .electro-page .summary-stat { min-height: 240px; padding-inline: 16px; }
 .electro-page .summary-stat p { font-size: 17px; }
 .electro-page .summary-stat strong { font-size: 18px; line-height: 28px; }
}
@media (max-width: 767px) {
 .electro-page .detail-hero { background: linear-gradient(180deg,rgba(10,46,99,.9) 11%,rgba(10,46,99,.9) 55.66%,transparent 73.14%),linear-gradient(180deg,transparent 84%,rgba(10,46,99,.85)),url('../images/electro-hero-mobile-compressed.webp') calc(50% - 162px) 384px/812px 364px no-repeat #0e3670; }
 .electro-page .summary-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
 .electro-page .summary-grid > div:first-child > p { font-size: 15px; line-height: 22px; }
 .electro-page .summary-stat { min-height: 201px; padding: 20px; }
 .electro-page .summary-stat > img { width: 100px; height: 101px; flex-basis: 100px; }
 .electro-page .summary-stat p { font-size: 18px; margin-top: 21px; }
 .electro-page .summary-stat strong { font-size: 20px; line-height: 28px; margin-top: 10px; }
 .electro-page .group-title strong { font-size: 20px; }
 .electro-page .benefit-grid { gap: 20px; margin-top: 16.8px; }
 .electro-page .benefit-controls { margin-top: 16.8px; grid-template-columns: 64px 1fr 74px; gap: 10px; }
 .electro-page .benefit-pagination { display: flex; justify-content: center; gap: 6px; }
 .electro-page .benefit-pagination button { width: 20px; }
 .electro-page .benefit-arrows { gap: 6px; }
 .electro-page .benefit-arrows button { width: 34px; height: 34px; }
 .electro-page .detail-faq { min-height: 0; }
 .electro-page .detail-faq details[open] p { margin-right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
 .electro-page .benefit-grid { scroll-behavior: auto; }
}
.electro-page .detail-heading > span { display: flex; width: max-content; margin-inline: auto; line-height: 14px; }
@media (min-width: 768px) and (max-width: 1023px) {
 .electro-page footer > .wrap:first-child { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
 .electro-page .benefits .detail-heading h2 { max-width: 100%; font-size: clamp(24px,7.77vw,28px); }
}
@media (min-width: 1200px) {
 .electro-page .summary-stat { align-self: start; margin-top: 32px; }
 .electro-page .summary-stat strong { font-size: 18px; letter-spacing: -.35px; }
}