.motor-gallery { grid-template-rows: 330px 270px; }
.motor-system-shot { grid-column: 1 / 8; grid-row: 1; }
.motor-dashboard-shot { grid-column: 8 / 13; grid-row: 1 / 3; background: #f3f5f7; }
.motor-signin-shot { grid-column: 1 / 8; grid-row: 2; background: #f3f5f7; }
.motor-system-shot img { object-fit: contain; padding-bottom: 28px; }
.motor-dashboard-shot img { width: 275%; height: auto; max-width: none; margin-left: -87.5%; object-fit: initial; }
.motor-dashboard-shot:hover img { transform: none; }
.gallery-stage:has(.gallery-full-image[src$="/smart-motor-dashboard.png"]) {
 display: block;
 width: min(100%,720px);
 max-height: 62dvh;
 margin-inline: auto;
 overflow-x: hidden;
 overflow-y: auto;
 background: #f3f5f7;
 scrollbar-gutter: stable;
}
.gallery-full-image[src$="/smart-motor-dashboard.png"] {
 display: block;
 width: 240%;
 max-width: none;
 height: auto;
 max-height: none;
 margin-left: -70%;
 object-fit: initial;
}
@media(max-width:600px) {
 .gallery-stage:has(.gallery-full-image[src$="/smart-motor-dashboard.png"]) { max-height: 60dvh; }
}
.motor-signin-shot img { object-fit: contain; padding-bottom: 28px; }
@media(max-width:960px) { .motor-gallery { grid-template-rows: 270px 230px; } }
@media(max-width:600px) {
 .motor-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 240px 520px 200px; }
 .motor-system-shot { grid-column: 1 / 3; grid-row: 1; }
 .motor-dashboard-shot { grid-column: 1 / 3; grid-row: 2; }
 .motor-signin-shot { grid-column: 1 / 3; grid-row: 3; }
}
.motor-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 40px; }
.motor-facts div { border-top: 1px solid var(--line-2); padding-top: 20px; }
.motor-facts strong { display: block; font: 500 32px var(--serif); color: var(--ink); }
.motor-facts span { display: block; color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.motor-flow { list-style: none; padding: 0; margin: 38px 0 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; counter-reset: stage; }
.motor-flow li { border-top: 1px solid var(--line-2); padding-top: 22px; counter-increment: stage; }
.motor-flow li::before { content: '0' counter(stage); display: block; color: var(--accent); font: 12px var(--mono); margin-bottom: 25px; }
.motor-flow p { font-size: 15px; }
.motor-architecture { margin: 38px 0 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.motor-node { padding: 28px 22px; background: var(--bg-2); border: 1px solid var(--line-2); min-height: 174px; }
.motor-node small { color: var(--accent); font: 10px var(--mono); text-transform: uppercase; }
.motor-node h3 { margin-top: 13px; font-size: 22px; }
.motor-node p { font-size: 14px; margin-bottom: 0; }
.motor-link { color: var(--accent); font-size: 25px; }
.motor-note { font: 12px/1.8 var(--mono); color: var(--ink-3); margin-top: 22px !important; max-width: 890px; }
.motor-stack { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 10px; margin: 30px 0 0; }
.motor-stack li { padding: 8px 13px; border: 1px solid var(--line-2); font: 12px var(--mono); }
@media(max-width:760px) { .motor-facts { grid-template-columns: 1fr; gap: 20px; } .motor-flow { grid-template-columns: 1fr 1fr; } .motor-architecture { grid-template-columns: 1fr; gap: 10px; } .motor-node { min-height: auto; } .motor-link { text-align: center; transform: rotate(90deg); } }
@media(max-width:440px) { .motor-flow { grid-template-columns: 1fr; gap: 10px; } }
