.oj-ev-page {
  --ev-black: #050606;
  --ev-light: #f5f6f6;
  --ev-gray: #ececec;
  --ev-pill: #c9c7c4;
  --ev-green: #3d6148;
  --ev-gold: #e1bf8c;
  --ev-teal: #00677a;
  color: #080808;
  background: #fff;
  overflow: visible;
}
.oj-ev-page *, .oj-ev-page *::before, .oj-ev-page *::after { box-sizing: border-box; }
.oj-ev-page img { max-width: 100%; }
.oj-ev-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.oj-ev-narrow { width: min(900px, calc(100% - 40px)); }
.oj-ev-kicker { margin: 0 0 14px; font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; }
.oj-ev-kicker.center, .oj-ev-page .center { text-align: center; }
.oj-ev-kicker.teal { color: var(--ev-teal); font-weight: 700; }
.oj-ev-page h1, .oj-ev-page h2, .oj-ev-page h3, .oj-ev-page p { margin-top: 0; }
.oj-ev-page h2 { font-weight: 400; letter-spacing: -.03em; }
.oj-ev-page h3 { font-weight: 400; }

.oj-ev-hero {
  position: relative;
  width: 100%;
  min-height: min(690px, calc(100vh - 70px));
  color: #fff;
  background: #111;
  overflow: hidden;
}
.oj-ev-hero picture, .oj-ev-hero img { display: block; width: 100%; height: 100%; }
.oj-ev-hero picture { position: absolute; inset: 0; }
.oj-ev-hero img { object-fit: cover; object-position: center center; }
.oj-ev-hero::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.42));
  pointer-events: none;
}
.oj-ev-hero-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 34px;
  width: min(1120px, calc(100% - 64px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1.05fr 1.28fr auto;
  align-items: end;
  gap: 22px;
}
.oj-ev-hero-copy h1 {
  margin: 0;
  font-size: clamp(40px, 3.25vw, 58px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.oj-ev-hero-copy p {
  margin: 0;
  max-width: 360px;
  font-size: 18px;
  line-height: 1.28;
  font-weight: 500;
}
.oj-ev-hero-actions { display: flex; gap: 14px; justify-content: flex-end; }
.oj-ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 29px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.oj-ev-btn:hover { transform: translateY(-1px); }
.oj-ev-btn-gold { color: #111 !important; background: var(--ev-gold); }
.oj-ev-btn-outline { color: #fff !important; border-color: #fff; background: rgba(0,0,0,.12); }

.oj-ev-anchor-shell {
  position: sticky;
  z-index: 30;
  top: 58px;
  padding: 14px 0 6px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
}
.oj-ev-anchor-nav {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 999px;
  background: var(--ev-pill);
  overflow: hidden;
}
.oj-ev-anchor-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #3d3d3d !important;
  font-size: 14px;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease;
}
.oj-ev-anchor-nav a.active { color: #fff !important; background: var(--ev-green); font-weight: 700; }

.oj-ev-anchor-section { scroll-margin-top: 126px; }
.oj-ev-intro { padding: 24px 20px 44px; text-align: center; }
.oj-ev-intro p { margin: 0; font-size: clamp(21px, 1.7vw, 28px); line-height: 1.35; letter-spacing: .01em; }

.oj-ev-dark { color: #fff; background: var(--ev-black); }
.oj-ev-stats { padding: 37px 0 54px; }
.oj-ev-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.oj-ev-stats-grid div { display: flex; flex-direction: column; align-items: center; }
.oj-ev-stats-grid strong { font-size: clamp(38px, 3.2vw, 54px); line-height: 1; font-weight: 600; }
.oj-ev-stats-grid span { margin-top: 12px; font-size: 14px; }
.oj-ev-explained { display: grid; grid-template-columns: .8fr 1.2fr; gap: 84px; align-items: center; padding-top: 70px; }
.oj-ev-explained h2 { margin: 0; font-size: clamp(34px, 3vw, 50px); line-height: 1.12; }
.oj-ev-explained > p { margin: 0; font-size: 15px; line-height: 1.42; font-weight: 600; }

.oj-ev-three-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; padding-top: 52px; padding-bottom: 52px; text-align: center; }
.oj-ev-three-benefits article img { width: 34px; height: 34px; object-fit: contain; margin-bottom: 15px; }
.oj-ev-three-benefits h3 { margin: 0 0 10px; font-size: 24px; }
.oj-ev-three-benefits p { margin: 0 auto; max-width: 300px; font-size: 14px; line-height: 1.35; }

.oj-ev-light { background: var(--ev-light); }
.oj-ev-energy { padding: 48px 0 58px; }
.oj-ev-energy h2 { margin: 0 0 48px; font-size: clamp(40px, 4vw, 64px); }
.oj-ev-energy-image { display: block; width: min(690px, 100%); margin: 0 auto; border-radius: 16px; }
.oj-ev-energy-note { margin: 20px 0 0; font-size: 14px; }
.oj-ev-flow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin-top: 62px; text-align: center; }
.oj-ev-flow-grid h3 { margin: 7px 0 14px; font-size: clamp(29px, 2.4vw, 40px); line-height: 1.03; }
.oj-ev-flow-grid p { font-size: 14px; line-height: 1.4; }

.oj-ev-components { padding: 40px 0; background: #efefef; }
.oj-ev-components-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; text-align: center; }
.oj-ev-components article { display: flex; flex-direction: column; align-items: center; }
.oj-ev-components img { width: 34px; height: 34px; object-fit: contain; margin-bottom: 16px; }
.oj-ev-components small { font-size: 13px; }
.oj-ev-components h3 { margin: 8px 0 0; font-size: 23px; font-weight: 700; }

.oj-ev-saving { padding: 76px 0 58px; }
.oj-ev-saving-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 42px; align-items: end; margin-bottom: 22px; }
.oj-ev-saving-intro h2 { margin: 0; font-size: clamp(35px, 3.3vw, 52px); }
.oj-ev-saving-intro > p { margin: 0 0 6px; color: #555; font-size: 15px; line-height: 1.42; }
.oj-ev-vehicle-card {
  display: grid;
  grid-template-columns: 1fr .9fr .65fr;
  gap: 30px;
  align-items: center;
  padding: 42px 28px;
  border-radius: 16px;
  background: #f1f1f1;
}
.oj-ev-vehicle-card p { margin-bottom: 20px; }
.oj-ev-vehicle-card p span, .oj-ev-result-title span { margin-right: 11px; color: #00677a; }
.oj-ev-vehicle-card select {
  width: 100%;
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
}
.oj-ev-vehicle-card img { width: 270px; justify-self: center; }
.oj-ev-vehicle-name { display: flex; flex-direction: column; gap: 5px; }
.oj-ev-vehicle-name strong { font-size: 20px; }
.oj-ev-vehicle-name span { color: #666; font-size: 14px; }
.oj-ev-result {
  display: grid;
  grid-template-columns: .6fr 1.35fr .8fr;
  align-items: center;
  gap: 30px;
  margin-top: 10px;
  padding: 18px 28px;
  min-height: 176px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(100deg,#020303,#171d1d);
}
.oj-ev-result-title { display: flex; align-items: center; }
.oj-ev-saving-number { display: flex; flex-direction: column; align-items: center; }
.oj-ev-saving-number strong { font-size: clamp(64px, 7vw, 108px); line-height: .92; letter-spacing: -.04em; }
.oj-ev-saving-number span { margin-top: 16px; font-size: 13px; }
.oj-ev-result dl { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 0; }
.oj-ev-result dt { margin-bottom: 10px; color: #c7c7c7; font-size: 12px; }
.oj-ev-result dd { margin: 0; font-size: 28px; font-weight: 700; }
.oj-ev-editor { margin-top: 10px; border-radius: 13px; background: #f2f2f2; }
.oj-ev-editor > summary { padding: 13px 20px; text-align: center; list-style: none; cursor: pointer; font-weight: 700; }
.oj-ev-editor > summary::-webkit-details-marker { display: none; }
.oj-ev-editor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; padding: 20px; }
.oj-ev-editor label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.oj-ev-editor input { min-height: 40px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; }
.oj-ev-editor small { color: #666; }
.oj-ev-editor button { margin: 0 20px 20px; padding: 8px 18px; border: 0; border-radius: 999px; background: #111; color: #fff; }
.oj-ev-disclaimer, .oj-ev-final-disclaimers details { margin-top: 38px; border-top: 1px solid #ddd; }
.oj-ev-disclaimer summary, .oj-ev-final-disclaimers summary { padding: 15px 0; font-size: 22px; cursor: pointer; }
.oj-ev-disclaimer p { font-size: 11px; line-height: 1.55; }

.oj-ev-range { padding: 46px 0 58px; }
.oj-ev-range-head { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.oj-ev-range-head h2 { margin: 0; font-size: clamp(42px, 4vw, 62px); line-height: 1.1; }
.oj-ev-range-head > p { margin: 0; font-weight: 600; line-height: 1.35; }
.oj-ev-range-tips { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; margin-top: 70px; text-align: center; }
.oj-ev-range-tips strong { display: block; margin-bottom: 20px; font-size: 32px; }
.oj-ev-range-tips h3 { margin-bottom: 34px; font-size: 15px; font-weight: 700; }
.oj-ev-range-tips p { font-size: 14px; line-height: 1.4; }

.oj-ev-charging-hero { padding: 48px 0 42px; background: #fff; }
.oj-ev-charging-hero .oj-ev-container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: start; }
.oj-ev-charging-hero img { width: 100%; border-radius: 16px; aspect-ratio: 16/9; object-fit: cover; }
.oj-ev-charging-hero h2 { margin: 0 0 34px; font-size: clamp(42px,4vw,62px); font-weight: 700; }
.oj-ev-charging-hero .oj-ev-kicker { margin-top: 28px; }
.oj-ev-charging-hero p:not(.oj-ev-kicker) { font-size: 14px; }

.oj-ev-charge-copy { padding: 52px 0; }
.oj-ev-charge-copy h2 { margin: 0 0 34px; font-size: clamp(42px,4vw,60px); font-weight: 600; line-height: 1.1; }
.oj-ev-charge-copy p:last-child { max-width: 760px; font-size: 14px; line-height: 1.45; }

.oj-ev-charge-table { padding: 34px 0 70px; }
.oj-ev-charge-row {
  display: grid;
  grid-template-columns: 36px 1fr 120px;
  gap: 10px;
  align-items: start;
  padding: 10px 14px;
  border-bottom: 1px solid #d9d9d9;
}
.oj-ev-charge-row:nth-child(odd) { background: #efefef; }
.oj-ev-charge-row h3 { margin: 0 0 4px; font-size: 27px; }
.oj-ev-charge-row p { margin: 0; font-size: 13px; line-height: 1.35; }
.oj-ev-charge-row > strong { justify-self: end; }
.oj-ev-public-btn { margin-top: 44px; }
.oj-ev-small-note { margin-top: 30px; font-size: 10px; }

.oj-ev-battery-confidence { padding: 65px 0 88px; }
.oj-ev-battery-confidence .oj-ev-container { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.oj-ev-battery-confidence img { width: 100%; border-radius: 15px; aspect-ratio: 16/9; object-fit: cover; }
.oj-ev-battery-confidence h2 { margin: 0 0 18px; font-size: clamp(40px,3.6vw,56px); line-height: 1.15; }
.oj-ev-battery-confidence p:last-child { font-size: 14px; line-height: 1.45; }

.oj-ev-ownership { padding: 55px 0 62px; }
.oj-ev-ownership > .oj-ev-container { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: center; }
.oj-ev-warranty img { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.oj-ev-warranty p { margin: 18px 0 0; text-align: center; font-size: 10px; line-height: 1.4; }
.oj-ev-owner-steps article + article { margin-top: 32px; }
.oj-ev-owner-steps h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.oj-ev-owner-steps h3 span { margin-right: 10px; color: #d7f0ff; }
.oj-ev-owner-steps p { margin: 0; font-size: 14px; line-height: 1.4; }

.oj-ev-life { padding: 60px 0 68px; }
.oj-ev-life > .oj-ev-container > h2 { margin: 0; font-size: clamp(42px,4vw,60px); font-weight: 700; line-height: 1.12; }
.oj-ev-life-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 70px; margin-top: 95px; }
.oj-ev-life-grid article > span { font-size: 11px; }
.oj-ev-life-grid h3 { min-height: 66px; margin: 14px 0 24px; font-size: 26px; font-weight: 700; line-height: 1.15; }
.oj-ev-life-grid p { font-size: 14px; line-height: 1.38; }
.oj-ev-life-grid a { color: #00677a !important; text-decoration: none !important; }

.oj-ev-faq { padding: 40px 0 68px; background: #ede5da; }
.oj-ev-faq > .oj-ev-container { display: grid; grid-template-columns: .38fr .62fr; gap: 70px; }
.oj-ev-faq h2 { margin: 34px 0 0; font-size: 38px; }
.oj-ev-faq-list details { border-bottom: 1px solid #d4cec4; }
.oj-ev-faq-list summary { position: relative; padding: 17px 44px 17px 8px; list-style: none; cursor: pointer; font-size: 19px; }
.oj-ev-faq-list summary::-webkit-details-marker { display: none; }
.oj-ev-faq-list summary::after {
  content: "⌄";
  position: absolute;
  right: 8px;
  top: 11px;
  font-size: 30px;
  transition: transform .2s ease;
}
.oj-ev-faq-list details[open] summary::after { transform: rotate(180deg); }
.oj-ev-faq-list details p { padding: 0 44px 18px 8px; font-size: 14px; line-height: 1.45; }

.oj-ev-test-drive { padding: 56px 0; }
.oj-ev-test-drive .oj-ev-container { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.oj-ev-test-drive img { width: 100%; border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; }
.oj-ev-test-drive h2 { margin: 0 0 24px; font-size: clamp(38px,3vw,50px); }
.oj-ev-test-drive p { margin-bottom: 36px; font-size: 14px; }
.oj-ev-final-disclaimers { padding: 10px 0 55px; }
.oj-ev-final-disclaimers p { font-size: 11px; line-height: 1.45; }

@media (max-width: 991.98px) {
  .oj-ev-hero { min-height: 680px; }
  .oj-ev-hero-copy {
    bottom: 28px;
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
    justify-items: center;
  }
  .oj-ev-hero-copy h1 { white-space: normal; }
  .oj-ev-hero-copy p { max-width: 520px; }
  .oj-ev-hero-actions { justify-content: center; flex-wrap: wrap; }
  .oj-ev-anchor-shell { top: 56px; }
  .oj-ev-anchor-nav { overflow-x: auto; grid-template-columns: repeat(5, minmax(150px,1fr)); justify-content: start; }
  .oj-ev-explained, .oj-ev-range-head, .oj-ev-saving-intro,
  .oj-ev-charging-hero .oj-ev-container, .oj-ev-battery-confidence .oj-ev-container,
  .oj-ev-ownership > .oj-ev-container, .oj-ev-test-drive .oj-ev-container,
  .oj-ev-faq > .oj-ev-container { grid-template-columns: 1fr; }
  .oj-ev-explained { gap: 30px; }
  .oj-ev-vehicle-card { grid-template-columns: 1fr 1fr; }
  .oj-ev-vehicle-name { grid-column: 1 / -1; align-items: center; }
  .oj-ev-result { grid-template-columns: 1fr; text-align: center; }
  .oj-ev-result-title { justify-content: center; }
  .oj-ev-result dl { max-width: 400px; width: 100%; justify-self: center; }
  .oj-ev-editor-grid { grid-template-columns: 1fr 1fr; }
  .oj-ev-life-grid { gap: 35px; margin-top: 55px; }
}

@media (max-width: 767.98px) {
  .oj-ev-container, .oj-ev-narrow { width: calc(100% - 28px); }
  .oj-ev-hero { min-height: 620px; }
  .oj-ev-hero-copy { width: calc(100% - 30px); }
  .oj-ev-hero-copy h1 { font-size: 40px; }
  .oj-ev-hero-copy p { font-size: 16px; }
  .oj-ev-btn { min-height: 44px; padding: 9px 20px; }
  .oj-ev-anchor-shell { padding-top: 8px; }
  .oj-ev-anchor-nav { width: calc(100% - 20px); }
  .oj-ev-stats-grid, .oj-ev-three-benefits, .oj-ev-components-grid,
  .oj-ev-range-tips, .oj-ev-life-grid { grid-template-columns: 1fr; }
  .oj-ev-stats-grid { gap: 34px; }
  .oj-ev-explained { padding-top: 45px; }
  .oj-ev-three-benefits { gap: 42px; }
  .oj-ev-flow-grid { grid-template-columns: 1fr; gap: 35px; }
  .oj-ev-components-grid { gap: 38px; }
  .oj-ev-vehicle-card { grid-template-columns: 1fr; text-align: center; }
  .oj-ev-vehicle-card img { order: 3; }
  .oj-ev-saving-number strong { font-size: 64px; }
  .oj-ev-editor-grid { grid-template-columns: 1fr; }
  .oj-ev-range-tips { gap: 46px; }
  .oj-ev-charge-row { grid-template-columns: 28px 1fr; }
  .oj-ev-charge-row > strong { grid-column: 2; justify-self: start; margin-top: 7px; }
  .oj-ev-life-grid { margin-top: 50px; }
  .oj-ev-life-grid h3 { min-height: 0; }
  .oj-ev-faq > .oj-ev-container { gap: 35px; }
  .oj-ev-test-drive .oj-ev-container { gap: 35px; }
}