/* ============================================================
   DELIVAN - L2H3 All-Electric Commercial Van Landing Page
   1920 design, PC-only, rem = design px / 100 (resizeRoot)
   ============================================================ */

/* ---------- page basics ---------- */
body.l2h3-page {
  background: #000;
  font-family: 'OpenSans-Regular', Arial, sans-serif;
  color: #fff;
}

/* ---------- full-screen section base ---------- */
.l2h3 .l2-sec {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #030303;
}

.l2-sec .l2-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.l2-sec .l2-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.l2h3 .l2-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* typography helpers */
.l2-title {
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.42rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.l2-title .c-cyan { color: #58C1EC; }

.l2-kicker {
  font-family: 'OpenSans-SemiBold', Arial, sans-serif;
  font-size: 0.16rem;
  line-height: 1;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #58C1EC;
}

/* shared section headline container: every content section (02-08) uses
   .l2-head > h2.l2-title + (optional) p.l2-sub, centered at the section top */
.l2-head {
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}

.l2-body {
  font-size: 0.2rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.62);
}

.l2-body .hl { color: #fff; font-family: 'OpenSans-SemiBold', Arial, sans-serif; }

/* cyan divider used under titles */
.l2-divider {
  width: 0.6rem;
  height: 0.03rem;
  background: #58C1EC;
}

/* ============================================================
   SECTION 1 - BANNER
   ============================================================ */
.l2-banner {
  height: 100vh;
  background: #000;
}

/* banner artwork: inline --bg (PC) / --bg-m (mobile) */
.l2-banner .l2-bg {
  background-image: var(--bg);
}

.l2-banner .l2-mask {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.9) 17%, rgba(0, 0, 0, 0.1) 47%, rgba(0, 0, 0, 0) 74%, rgba(0, 0, 0, 0.92) 100%);
  opacity: 0.5;
}

/* banner headline is wrapped in the shared .l2-head (absolute, top 1.2rem,
   full-width centered) so its positioning matches every content section */

/* small cyan eyebrow above the model name */
.l2-banner .banner-subtitle {
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04rem;
  text-transform: uppercase;
  color: #58C1EC;
  margin-bottom: 0.2rem;
}

/* model name: two solid halves with a hard edge — left half #fff,
   right half #d2f0fa (no gradient) */
.l2-banner h1 {
  display: inline-block;
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 0.8;
  /* margin: 0.2rem 0 0; */
  color: transparent;
  background: linear-gradient(to left, #d2f0fa 0%, #d2f0fa 40%, #f3f5f6 60%, #f3f5f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* banner bottom spec bar */
.banner-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 1.92rem;
}

.banner-bar .bar-inner {
  width: 100%;
  max-width: 12.54rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.banner-bar .bar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16rem;
  text-align: center;
}

.banner-bar .bar-cell .l2-num {
  font-family: 'OpenSans-Regular', Arial, sans-serif;
  font-size: 0.4rem;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}

.banner-bar .bar-cell .l2-num.md {
  font-family: 'OpenSans-SemiBold', Arial, sans-serif;
}

/* reserve the final digit width while count-up runs, so the bar layout
   does not shift as each number grows from 0 to its target */
.banner-bar .bar-cell .l2-num .c {
  display: inline-block;
  min-width: 4ch;
  text-align: center;
}

.banner-bar .bar-cell .lbl {
  font-size: 0.16rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.banner-bar .vline {
  width: 2px;
  height: 0.66rem;
  background: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   SECTION 2 - DUAL SCENES (Built for Your Business)
   ============================================================ */
/* total section height = 8rem scene strip + 2.8rem bottom shadow */
.l2h3 .l2-dual {
  background: #000;
  height: 9.6rem;
}

/* dual keeps its headline above the expandable scene columns */
.l2-dual .l2-head { z-index: 9; }

/* shared section sub-title under .l2-title (reference: All-Season COMFORT) */
.l2-sub {
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.2rem;
  font-weight: 700;
  margin: 0.2rem auto 0;
  line-height: 1.4;
  color: #fff;
}

/* scene strip: a fixed 8rem-tall band anchored to the top of the section;
   the remaining 2.8rem below it is filled by the grey gradient shadow */
.l2-dual .duel-cols {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8rem;
  z-index: 2;
  display: flex;
}

/* hero vehicle sits centered above the five scene columns; its bottom rests
   inside the grey shadow band under the 8rem scene strip, never blocks hover */
.l2-dual .dual-car {
  position: absolute;
  left: calc(50% + 0.2rem);
  bottom: 0.6rem;
  transform: translateX(-50%);
  width: 10rem;
  height: auto;
  z-index: 5;
  pointer-events: none;
}

/* five equal vertical slices (fixed 20% each, no flex change / no push-pull).
   background-size: 500% 100% scales the scene image to 5x the column width
   (= the full section width), so a column only reveals the 20% band picked
   by background-position: 0% / 25% / 50% / 75% / 100%. */
.l2-dual .duel-col {
  position: relative;
  flex: 1 1 0%;
  cursor: pointer;
}

.l2-dual .duel-col::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* image path is supplied inline via the --col-bg custom property;
     the <=768px media query swaps in --col-bg-m for mobile */
  background-image: var(--col-bg);
  background-repeat: no-repeat;
  background-size: 500% 100%;
}

/* the 20% band each column reveals, picked by background-position */
.l2-dual .duel-col.col-1::before { background-position: 0% center; }
.l2-dual .duel-col.col-2::before { background-position: 25% center; }
.l2-dual .duel-col.col-3::before { background-position: 50% center; }
.l2-dual .duel-col.col-4::before { background-position: 75% center; }
.l2-dual .duel-col.col-5::before { background-position: 100% center; }

/* full-width layer: on hover the scene image fades in across the whole
   section (width = 5 x one column) with no push/pull movement. The left
   offset keeps that 5x-wide layer aligned with the section's left edge. */
.l2-dual .duel-col .col-full {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 500%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* same inline image as the slice, revealed at full width on hover */
  background-image: var(--col-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transition: opacity 0.6s ease;
}

/* left offset keeps the 5x-wide layer aligned with the section's left edge */
.l2-dual .duel-col.col-1 .col-full { left: 0; }
.l2-dual .duel-col.col-2 .col-full { left: -100%; }
.l2-dual .duel-col.col-3 .col-full { left: -200%; }
.l2-dual .duel-col.col-4 .col-full { left: -300%; }
.l2-dual .duel-col.col-5 .col-full { left: -400%; }

/* 2px divider line on the seam between every two adjacent slices */
.l2-dual .duel-col + .duel-col::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #878787;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* raise the hovered column so its full-width layer covers its siblings */
.l2-dual .duel-col:hover { z-index: 10; }

.l2-dual .duel-col:hover .col-full { opacity: 1; }

/* while any slice is expanded to full width, every seam divider must
   disappear so the expanded image reads as one clean photo */
.l2-dual .duel-cols:hover .duel-col::after { opacity: 0; }

/* caption sits inside each column, above the slice / full-width layers */
.l2-dual .col-txt {
  position: absolute;
  top: 2.4rem;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 0.18rem;
  text-align: center;
  pointer-events: none;
}

.l2-dual .col-txt .scene-tt {
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.26rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 0.15rem;
}

.l2-dual .col-txt .col-desc {
  margin: 0 auto;
  font-family: 'OpenSans-Regular', Arial, sans-serif;
  font-size: 0.16rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* soft gradient below the 8rem scene strip: light grey at the strip's
   bottom edge, fading down to white (kept subtle) */
.l2-dual .duel-cols::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.6rem;
  z-index: 0;
  pointer-events: none;
  /* background: linear-gradient(180deg, rgba(150, 150, 150, 0.06) 0%, rgba(255, 255, 255, 0.32) 100%); */
  background: linear-gradient(rgba(89, 92, 95, 1),rgba(114, 117, 121, 1), #ffffff)
}

/* seam shadow straddling the strip's bottom edge: a soft dark band that
   covers the lower part of the scene image and the top of the gradient */
.l2-dual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7.6rem;
  height: 0.6rem;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0) 100%);
}

/* ============================================================
   SECTION 3 - CHARGE
   ============================================================ */
.l2-charge { background: #000; }

.l2-charge .l2-bg {
  background-image: var(--bg);
}

.l2-charge .l2-mask {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.88) 100%);
}

.l2-charge .l2-stats,
.l2-cargo .l2-stats {
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding-left: 2.94rem;
}

.l2-charge .l2-stats .stat-cell,
.l2-cargo .l2-stats .stat-cell {
  padding: 0;
  text-align: left;
}

.l2-charge .l2-stats .stat-cell .lbl,
.l2-cargo .l2-stats .stat-cell .lbl {
  margin: 0 0 0.05rem 0;
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}

.l2-charge .l2-stats .stat-cell .l2-num,
.l2-cargo .l2-stats .stat-cell .l2-num {
  font-size: 0.69rem;
  line-height: 1.1;
}
.l2-charge .l2-stats .stat-cell .l2-num>p+p,
.l2-cargo .l2-stats .stat-cell .l2-num>p+p {
  font-size: 0;
}
.l2-charge .l2-stats .stat-cell .l2-num>p+p .unit,
.l2-cargo .l2-stats .stat-cell .l2-num>p+p .unit{
  font-size: .18rem;
}
.l2-charge .l2-stats .stat-cell .l2-num .unit,
.l2-cargo .l2-stats .stat-cell .l2-num .unit {
  font-size: 0.3rem;
  color: #fff;
}

.l2-charge .l2-stats .stat-cell .l2-num .slash {
  display: inline-block;
  font-size: 0.7rem;
  line-height: 1;
  margin: 0 0.04em;
  color: #fff;
}


.l2-charge .l2-stats .stat-cell+.stat-cell{
  margin-top: .48rem;
}
.l2-cargo .l2-stats .stat-cell+.stat-cell{
  margin-top: .64rem;
}

.l2-charge .l2-desc,
.l2-cargo .l2-desc { bottom: 1rem; }

.l2-charge .l2-desc {
  left: 0;
  right: 0;
  width: 10.74rem;
  max-width: 94%;
  margin: 0 auto;
  transform: none;
}

.l2-cargo .l2-desc {
  left: 0;
  right: 0;
  width: 16.65rem;
  max-width: 94%;
  margin: 0 auto;
  transform: none;
}

.l2-charge .l2-desc .l2-body,
.l2-cargo .l2-desc .l2-body {
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* design: m³ unit sits at the same size as the figure */
.l2-cargo .l2-stats .stat-cell-1 .l2-num .unit {
  font-size: 0.3rem;
  margin-left: 0.03em;
}

/* design: the cube exponent is split off the m and raised to its top-right,
   sized like the regular unit instead of the figure */
.l2-cargo .l2-stats .stat-cell-1 .l2-num .unit .cube {
  display: inline-block;
  font-size: 0.3rem;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.01em;
}

/* ============================================================
   generic stat layout used by charge / cargo
   ============================================================ */
.l2-stats {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.l2-stats .stat-row {
  display: flex;
  align-items: center;
}

.l2-stats .stat-cell {
  text-align: center;
  padding: 0 1.05rem;
}

.l2-stats .stat-cell .l2-num {
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.l2-stats .stat-cell .l2-num .unit {
  font-size: 0.3rem;
  color: #58C1EC;
  letter-spacing: 0;
}

.l2-stats .stat-cell .lbl {
  margin-top: 0.22rem;
  font-size: 0.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 4.2rem;
  margin-left: auto;
  margin-right: auto;
}

.l2-stats .stat-div {
  width: 1px;
  height: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}

/* bottom description paragraph inside stat screens */
.l2-desc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.28rem;
  z-index: 4;
  width: 10.4rem;
  text-align: center;
}

.l2-desc .l2-body { font-size: 0.17rem; }

/* ============================================================
   SECTION 4 - CARGO
   ============================================================ */
.l2-cargo { background: #000; }

.l2-cargo .l2-bg { background-image: var(--bg); }

.l2-cargo .l2-mask {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.05) 52%, rgba(0, 0, 0, 0.85) 100%);
}

/* ============================================================
   SECTION 5 - V2L
   ============================================================ */
.l2-v2l { background: #000; }

.l2-v2l .l2-bg { background-image: var(--bg); }

.l2-v2l .l2-mask {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0.18) 62%, rgba(2, 8, 16, 0.92) 100%);
}

/* V2L section layout tuned to design 221_145 (headline + sub-headline block
   sits 0.2rem higher than other sections) */

/* bottom glass cards */
.l2-v2l .v2l-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.64rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  /* align-items: flex-start; */
  gap: 0.23rem;
}

.l2-v2l .v2l-card {
  /* height: 2rem; */
  padding: 0.2rem 0.24rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.l2-v2l .v2l-card.c1 { width: 9.2rem; }
.l2-v2l .v2l-card.c2 { width: 8.4rem; }
/* .l2-v2l .v2l-card.c3 { width: 5.98rem; } */

.l2-v2l .v2l-card .ic {
  position: relative;
  height: 0.62rem;
  margin-bottom: 0.12rem;
  overflow: hidden;
}

.l2-v2l .v2l-card .ic img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

/* .l2-v2l .v2l-card.c1 .ic { height: 0.62rem; } */

.l2-v2l .v2l-card.c1 .ic img {
  position: static;
  width: 0.62rem;
  height: 0.62rem;
   /* margin-top: .06rem; */
}

.l2-v2l .v2l-card.c2 .ic img.i1 {
  left: 0.02rem;
  top: 0;
  width: 0.62rem;
  height: 0.54rem;
}

.l2-v2l .v2l-card.c2 .ic img.i2 {
  left: 0.15rem;
  top: 0.14rem;
  width: 0.32rem;
  height: 0.27rem;
}

.l2-v2l .v2l-card.c3 .ic img.i1 {
  left: 0.14rem;
  top: 0.06rem;
  width: 0.47rem;
  height: 0.63rem;
}

.l2-v2l .v2l-card.c3 .ic img.i2 {
  left: 0.293rem;
  top: 0.1125rem;
  width: 0.17rem;
  height: 0.04rem;
}

.l2-v2l .v2l-card.c3 .ic img.i3 {
  left: 0.3422rem;
  top: 0.5883rem;
  width: 0.07rem;
  height: 0.07rem;
}

.l2-v2l .v2l-card p {
  font-size: 0.2rem;
  line-height: 1.25;
  color: #fff;
}

/* ============================================================
   SECTION 6 - USB / MULTIPLE CHARGING OPTIONS  (dark design 221_112)
   ============================================================ */
.l2-usb { background: #030303; }

/* keeps the blurred img wrapper at its original oversized box (base
   .l2-sec .l2-bg is now section-fitted); .l2-usb .l2-bg img offsets
   are % of this box, so its size must stay locked */
.l2-usb .l2-bg {
  position: absolute;
  inset: 0;
  width: 106%;
  height: 112%;
  overflow: hidden;
  z-index: 0;
}

.l2-usb .l2-bg img {
  position: absolute;
  left: -8.1%;
  top: -33%;
  width: 112.8%;
  height: 150.5%;
  display: block;
  filter: blur(0.18rem);
}

.l2-usb .l2-mask {
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0) 0%, rgba(3, 3, 3, 0) 46%, rgba(3, 3, 3, 0.22) 72%, rgba(3, 3, 3, 0.45) 100%);
}

/* light-section (bright photo sits behind the headline): headline must keep
   dark ink, everything else inherits the shared .l2-head/.l2-title/.l2-sub */
.l2-usb .l2-title { color: #011E50; }
.l2-usb .l2-sub { color: #011E50; }

/* two-photo gallery stage (tuned to canvas 221_112) */
.l2-usb .usb-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6rem;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.28rem;
}

.l2-usb .usb-panel {
  position: relative;
  overflow: hidden;
}

.l2-usb .usb-main { width: 16.42rem; }
.l2-usb .usb-detail { width: 4.86rem; }

.l2-usb .usb-panel .usb-photo {
  display: block;
  width: 100%;
  height: auto;
}

.l2-usb .usb-main .usb-dec {
  position: absolute;
  left: -0.365rem;
  top: -2.725rem;
  display: block;
  max-width: none;
  pointer-events: none;
}

.l2-usb .usb-main p {
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.48rem;
  margin: 0;
  font-size: 0.2rem;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

.l2-usb .usb-detail p {
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.48rem;
  margin: 0;
  font-size: 0.2rem;
  line-height: 1.3;
  color: #fff;
}

/* ============================================================
   SECTION 7 - ALL-SEASON COMFORT  (canvas 221_176)
   ============================================================ */
.l2-comfort { background: #000; }

.l2-comfort .l2-bg { background-image: url('/data/tms/website/html/images/vehicles/l2h3/comfort-bg.png'); }

.l2-comfort .l2-bg .l2-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.l2-comfort .comfort-bot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 4;
  text-align: center;
}

.l2-comfort .comfort-note {
  width: 13.93rem;
  margin: 0 auto;
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* ============================================================
   SECTION 8 - PARAMETERS
   ============================================================ */
.l2-params { background: #000; }

.l2-params .l2-bg { background-image: url('/data/tms/website/html/images/vehicles/l2h3/params-bg.png'); }

.l2-params .l2-bg .l2-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* one glass card (canvas 221_191): categories inside the card, data rows
   expand below the active category; card right edge sits at the design
   position (right edge of 1920 canvas = x1754, leaving a 166px gutter) */
.l2-params .params-panel {
  position: absolute;
  right: 1.66rem;
  top: 2rem;
  z-index: 4;
  width: 10.22rem;
  max-width: calc(100% - 1.66rem - 0.5rem);
  box-sizing: border-box;
  border-radius: 0.18rem;
  background: linear-gradient(180deg, rgba(54, 88, 115, 0.44), rgba(7, 18, 32, 0.36));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 0.16rem 0.6rem rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.l2-params .p-brand {
  padding: 0.1rem 0.28rem 0;
  font-family: 'OpenSans-Bold', Arial, sans-serif;
  font-size: 0.34rem;
  line-height: 1;
  color: #fff;
}

.l2-params .p-groups { padding: 0.1rem 0 0.18rem; }

.l2-params .p-group + .p-group { margin-top: 0.1rem; }

/* category rows: every row (expanded or collapsed) is a white band inset by
   the same left/right gap as the brand row above (0.28rem each side) */
.l2-params .p-group .anc {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  box-sizing: border-box;
  width: calc(100% - 0.56rem);
  margin: 0 0.28rem;
  padding: 0.1rem 0.16rem;
  border: 0;
  background: #fff;
  text-align: left;
  font-family: 'OpenSans-SemiBold', Arial, sans-serif;
  font-size: 0.2rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #6C879B;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.l2-params .p-group .anc .mark {
  flex: none;
  width: 0.24rem;
  text-align: center;
  font-family: 'OpenSans-SemiBold', Arial, sans-serif;
  font-size: 0.2rem;
  line-height: 1;
  color: #1E7FB0;
  opacity: 0.85;
}

.l2-params .p-group .anc:hover { box-shadow: 0 0.04rem 0.12rem rgba(20, 45, 68, 0.28); }

/* expanded row keeps the same white band, only highlighted a bit more */
.l2-params .p-group.on .anc { box-shadow: 0 0.05rem 0.14rem rgba(20, 45, 68, 0.32); }

.l2-params .p-group.on .anc .mark {
  opacity: 1;
}

.l2-params .p-content {
  display: none;
  padding: 0.04rem 0.66rem 0;
}

.l2-params .p-group.on .p-content {
  display: block;
  animation: pContentOpen 0.35s ease both;
}

@keyframes pContentOpen {
  from { opacity: 0; transform: translateY(-0.04rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* data rows: name and value sit in left/right halves, each centered
   horizontally inside its own column */
.l2-params .p-row {
  display: flex;
  align-items: baseline;
  padding: 0.05rem 0;
  border-bottom: 1px solid #fff;
}

.l2-params .p-row:last-child { border-bottom: none; }

.l2-params .p-row.no-split { border-bottom: none; }

.l2-params .p-row.compact { padding: 0.02rem 0; }

.l2-params .p-row.g-first { padding-top: 0.075rem; }
.l2-params .p-row.g-last { padding-bottom: 0.075rem; }

/* merged rows: name spans the vertical centre of the grouped rows */
.l2-params .p-merge { position: relative; }
.l2-params .p-merge .p-merge-k {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 50%;
  text-align: center;
  font-size: 0.16rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.l2-params .p-row .p-k {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.16rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l2-params .p-row .p-k small,
.l2-params .p-row .p-v small {
  font-family: 'OpenSans-Regular', Arial, sans-serif;
  font-size: 0.13rem;
  color: rgba(255, 255, 255, 0.55);
}

.l2-params .p-row .p-v {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: 'OpenSans-SemiBold', Arial, sans-serif;
  font-size: 0.16rem;
  color: #fff;
  white-space: nowrap;
}

.l2-params .p-content .p-empty {
  margin: 0;
  padding: 0.14rem 0.1rem;
  text-align: left;
  font-size: 0.16rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   SECTION 9 - BOTTOM BANNER (closing image)
   ============================================================ */
.l2-bottom {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #000;
}

.l2-bottom img { width: 100%; height: auto; display: block; }

/* ============================================================
   entrance animation pre-state (antAnimate)
   ============================================================ */
.l2h3 .ant {
  opacity: 1;
}

@media (max-width: 768px) {
  .l2-banner .banner-subtitle { font-size: 0.3rem; }
  .l2-banner h1 { font-size: 0.8rem; }

  /* banner core spec bar: two cells per row on phones */
  .l2-banner .banner-bar {
    height: auto;
    padding: 0.24rem 0.2rem 1rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  .l2-banner .bar-inner {
    height: auto;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.12rem;
    row-gap: 0.34rem;
    padding: 0 .6rem;
    box-sizing: border-box;
  }
  .l2-banner .vline { display: none; }
  .l2-banner .bar-cell { gap: 0.06rem; }
  .l2-banner .bar-cell:first-child{
    width: 100%;
  }
  .l2-banner .bar-cell .l2-num { font-size: 0.36rem; }
  .l2-banner .bar-cell .lbl {
    font-size: 0.24rem;
    line-height: 1.3;
    white-space: normal;
  }

  .l2-sub { font-size: 0.24rem;}
  .l2-head {
    padding: 0 0.2rem;
    box-sizing: border-box;
    top: 1.6rem;
  }
  .l2-title{
    line-height: 1.1;
  }
  /* mobile uses the dedicated portrait scene image per slice */
  .l2-dual .duel-col::before,
  .l2-dual .duel-col .col-full {
    background-image: var(--col-bg-m);
  }

/* zheli  */
  .l2h3 .l2-dual {
    height: 11.4rem;
  }
  .l2-dual .l2-head{
    top: 1.2rem;
  }
 
  .l2-dual .duel-cols {
    height: 10rem;
  }

  .l2-dual .duel-cols::after {
    height: 1.4rem;
  }
  .l2-dual::after {
    top: 7.6rem;
    height: 0.6rem;
  }
  .l2-dual .dual-car{
    width: 100%;
    left: 5%;
    bottom: 0.6rem;
    transform: translate(0);
  }
/* 这里 */

  .l2-dual .col-txt {
    top: 2.8rem;
    padding: 0 0.1rem;
  }
  .l2-dual .col-txt .scene-tt {
    font-size: 0.24rem;
    margin-bottom: 0.08rem;
  }
  .l2-dual .col-txt .col-desc{
    white-space: normal;
    font-size: 0.22rem;
    line-height: 1.3;
  }
  .l2-charge .l2-desc .l2-body, .l2-cargo .l2-desc .l2-body {
    font-size: 0.24rem;
  }
  .l2-body {
    padding: 0 1.2rem;
  }
  .l2-charge .l2-stats, .l2-cargo .l2-stats {
    padding-left: 0;
    justify-content: space-between;
    flex-direction: row;
    top: auto;
    flex-wrap: wrap;
    bottom: 3rem;
    padding: 0 0.4rem;
  }
  .l2-cargo .l2-stats{
    bottom: 4.6rem;
  }
  /* .l2-charge .l2-stats .stat-cell-2, .l2-cargo .l2-stats .stat-cell-2{
    margin-top: 0;
  } */

  .l2-charge .l2-stats .stat-cell+.stat-cell{
    margin-top: 0;
  }
  .l2-cargo .l2-stats .stat-cell+.stat-cell{
    margin-top: 0;
  }

  .l2-charge .l2-stats .stat-cell-3,
  .l2-cargo .l2-stats .stat-cell-3 { margin-top: 0.56rem!important; }

  .l2-charge .l2-stats .stat-cell-3{
    width: 100%;
  }
  /* .l2-charge .l2-stats .stat-cell-2, .l2-cargo .l2-stats .stat-cell-2 {
    margin-top: 0;
  } */
  

  .l2-charge .l2-bg{
    background-position: 74% center;
  }
  /* mobile artwork for the banner / cargo / v2l sections */
  .l2-banner .l2-bg,
  .l2-cargo .l2-bg,
  .l2-v2l .l2-bg, .l2-charge .l2-bg {
    background-image: var(--bg-m);
  }
  .l2-v2l .v2l-cards{
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 .4rem;
    bottom: .4rem;
  }
  .l2-v2l .v2l-cards .v2l-card{
    width: 100%;
    display: flex;
    height: auto;
    align-items: center;
  }
  .l2-v2l .v2l-card .ic{
    width: .62rem;
    flex-shrink: 0;
    margin-right: .2rem;
    margin-bottom: 0;
  }
  .l2-v2l .v2l-card p{
    font-size: .24rem;
  }
  .l2-usb .usb-stage{
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 .4rem;
    overflow: hidden;
  }
  .l2-usb .l2-head{
    top: 1.2rem;
  }
  .l2-usb .usb-main, .l2-usb .usb-detail{
    width: 100%;
    height: 8rem;
  }
  .l2-usb .usb-panel .usb-photo{
    height: 100%;
    width: auto;
    margin-left: -118%;
  }
  .l2-usb .usb-main p, .l2-usb .usb-detail p{
    font-size: .24rem;
    bottom: .3rem;
  }
  .l2-usb .usb-panel{
    overflow: visible;
    margin-top: -.8rem;
  }
  .l2-usb .usb-main p{
    bottom: auto;
    color: var(--text-gray);
    top: calc(100% + .3rem);
  }
  .l2-comfort .l2-bg{
    background-position: 64% center;
  }
  .l2-comfort .comfort-note{
    width: 100%;
    padding: 0 .4rem;
    box-sizing: border-box;
    font-size: .24rem;
  }
  .l2-params .l2-bg{
    background-position: 64% center;
  }
  .l2-params .params-panel{
    width: 90%;
    left: 5%;
    top: 4.2rem;
    right: auto;
    max-width: 100%;
  }
  .l2-params .p-brand{
    font-size: .4rem;
  }
  .l2-params .p-group .anc .mark{
    font-size: .24rem;
  }
  .l2-params .p-group .anc{
    font-size: .24rem;
  }
  .l2-params .p-row.compact{
    padding: 0.04rem 0;
  }
  .l2-params .p-row .p-k, .l2-params .p-row .p-v{
    font-size: .22rem;
  }

  .l2-usb .usb-detail{
    height: 5rem;
  }
  .l2-usb .usb-detail .usb-photo{
    height: 100%;
    object-fit: cover;
  }
}