.powertrain {
  scroll-margin-top: 82px;
  padding: 130px 6vw 118px;
  color: #f4f7f6;
  background:
    radial-gradient(circle at 77% 16%, rgba(200,255,46,.11), transparent 28%),
    linear-gradient(135deg, #07181c 0%, #0d282d 58%, #07171a 100%);
}

.powertrain-head {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  align-items: end;
  gap: 7vw;
  margin-bottom: 64px;
}

.powertrain-head h2 { margin: 0; font: 500 clamp(44px, 5.2vw, 76px)/.97 Manrope; letter-spacing: -3px; }
.powertrain-head > p { margin: 0 0 5px; color: #a6b8b6; max-width: 600px; }
.powertrain .eyebrow { color: #c8ff2e; }

.powertrain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.16); }
.powertrain-card { min-width: 0; padding: clamp(30px, 4vw, 58px); }
.powertrain-card + .powertrain-card { border-left: 1px solid rgba(255,255,255,.16); }
.component-top { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.component-top span { color: #8ca19e; font: 600 10px Manrope; letter-spacing: 2px; }
.component-top b { color: #c8ff2e; font: 500 clamp(50px, 7vw, 104px)/.8 Manrope; letter-spacing: -5px; }
.powertrain-card h3 { margin: 46px 0 20px; font: 500 clamp(27px, 3vw, 42px)/1.04 Manrope; letter-spacing: -1.5px; }
.powertrain-card > p { color: #a9b9b7; max-width: 720px; }
.powertrain-card dl { margin: 36px 0; border-top: 1px solid rgba(255,255,255,.16); }
.powertrain-card dl div { display: grid; grid-template-columns: 42% 58%; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.powertrain-card dt { color: #78908d; font-size: 12px; }
.powertrain-card dd { margin: 0; color: #edf4f2; font: 500 13px Manrope; }
.powertrain-card .component-note { margin: 0; padding-left: 18px; border-left: 2px solid #c8ff2e; color: #b8c8c5; }
.component-note strong { color: #f4f7f6; }
.reference-box { margin-top: 30px; padding: 22px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.reference-box span { display: block; color: #c8ff2e; font: 600 9px Manrope; letter-spacing: 1.5px; }
.reference-box p { margin: 11px 0 14px; color: #9eb0ad; font-size: 12px; }
.reference-box a { color: #eef4f2; font: 600 10px Manrope; letter-spacing: .7px; }

.integration-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; align-items: center; gap: 22px; padding: 30px; border: 1px solid rgba(255,255,255,.16); border-top: 0; }
.integration-strip div { min-width: 0; }
.integration-strip span { display: block; margin-bottom: 7px; color: #78908d; font: 600 9px Manrope; letter-spacing: 1.7px; }
.integration-strip strong { font: 500 13px/1.35 Manrope; }
.integration-strip i { color: #c8ff2e; font-style: normal; }
.powertrain-disclosure { display: flex; justify-content: space-between; align-items: start; gap: 60px; margin-top: 34px; }
.powertrain-disclosure p { margin: 0; max-width: 850px; color: #9fb1ae; font-size: 13px; }
.powertrain-disclosure strong { color: #f4f7f6; }
.powertrain-disclosure a { flex: 0 0 auto; color: #c8ff2e; font: 600 11px Manrope; letter-spacing: 1px; }
.source-footnote { margin: 16px 0 0; color: #718783; font-size: 11px; }

@media (max-width: 900px) {
  .powertrain-head { grid-template-columns: 1fr; gap: 28px; }
  .powertrain-grid { grid-template-columns: 1fr; }
  .powertrain-card + .powertrain-card { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .integration-strip { grid-template-columns: 1fr 1fr; }
  .integration-strip i { display: none; }
}

@media (max-width: 680px) {
  .powertrain { scroll-margin-top: 68px; padding: 88px 6vw 82px; }
  .powertrain-head h2 { font-size: clamp(40px, 12.5vw, 54px); letter-spacing: -2px; }
  .powertrain-card { padding: 28px 22px 34px; }
  .component-top b { font-size: 56px; letter-spacing: -3px; }
  .powertrain-card h3 { margin-top: 34px; }
  .powertrain-card dl div { grid-template-columns: 1fr; gap: 5px; }
  .integration-strip { grid-template-columns: 1fr; padding: 24px 22px; gap: 22px; }
  .powertrain-disclosure { display: block; }
  .powertrain-disclosure a { display: inline-block; margin-top: 22px; }
}