@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(../fonts/montserrat-400.ttf) format("truetype")}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url(../fonts/montserrat-500.ttf) format("truetype")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url(../fonts/montserrat-700.ttf) format("truetype")}
@font-face{font-family:"Montserrat";font-weight:900;font-display:swap;src:url(../fonts/montserrat-900.ttf) format("truetype")}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: model tabs, then showroom stage (photo + view strip) left and build sheet right; stacks on phones.
   Follows the Leapmotor Brand Identity Guidelines 2024: Montserrat throughout, main colour Pantone 2427C green,
   highlight online R0 G145 B0, secondaries White C / 423 C / Black C, and the cut corner taken from the LP symbol. */
:root{
  --bg:#f1f1f1; --surface:#ffffff; --fg:#2a2927; --muted:#5f5f62; --line:#dcdcdd; --good:#009100;
  --brand:#084828; --highlight:#009100; --grey423:#9a9a9c;
  --accent:#084828; --fill:#084828; --ink:#ffffff; --soft:#e3ece6;
  --display:"Montserrat", "Arial Black", system-ui, sans-serif;
  --body:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cut:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1c1c1b; --surface:#262624; --fg:#f1f1f1; --muted:#b4b4b6; --line:#3a3a38; --good:#3ccf3c;
  --accent:#4fbf74; --fill:#0e6b39; --ink:#ffffff; --soft:#1f3328; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1c1b; --surface:#262624; --fg:#f1f1f1; --muted:#b4b4b6; --line:#3a3a38; --good:#3ccf3c;
  --accent:#4fbf74; --fill:#0e6b39; --ink:#ffffff; --soft:#1f3328; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:2px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,46px);line-height:1;margin:0;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
h1 span{font-weight:400;color:var(--accent)}
.logos{display:flex;align-items:center;gap:18px}
.logos .lp{height:38px;width:auto}
.logos .dh{height:28px;width:auto;background:#fff;padding:6px 8px;border-radius:6px}
.lp-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-light{display:none}:root:not([data-theme="light"]) .lp-dark{display:block}}
:root[data-theme="dark"] .lp-light{display:none}:root[data-theme="dark"] .lp-dark{display:block}

.models{display:flex;gap:8px;flex-wrap:wrap}
.models a{display:flex;flex-direction:column;gap:0;padding:10px 16px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;min-width:150px}
.models a strong{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.02em}
.models a small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.models a strong em.soon{font-style:normal;font-size:10px;font-weight:700;background:var(--highlight);color:#fff;padding:1px 6px;border-radius:99px;vertical-align:2px;margin-left:4px;letter-spacing:.04em;text-transform:uppercase}
.models a[aria-current="page"]{border-color:var(--accent);background:var(--soft)}
.models a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:880px){.grid{grid-template-columns:1fr}}

/* stage: photos are studio shots on white, so the stage stays white in both themes */
.stage{background:#fff;border-radius:18px;overflow:hidden;border:1px solid var(--line);position:sticky;top:max(12px,env(safe-area-inset-top,0px))}
@media (max-width:880px){.stage{position:static}}
.stage,.panel.price{border-radius:4px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.photo{position:relative;aspect-ratio:1400/946;max-width:100%;background:#fff}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.photo .pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#5f5f62;text-align:center;padding:24px}
.photo .pending i{width:120px;height:120px;border-radius:50%;box-shadow:inset 0 -12px 24px rgba(0,0,0,.12)}
.photo.spin{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.photo.spin.dragging{cursor:grabbing}
.photo img{-webkit-user-drag:none;pointer-events:none}
.photo:focus-visible{outline:2px solid #2a2927;outline-offset:-4px}
.spinhint{position:absolute;right:12px;top:12px;font:600 12px var(--body);color:#2a2927;background:rgba(255,255,255,.9);border:1px solid #dcdcdd;padding:5px 10px;border-radius:99px;display:flex;align-items:center;gap:6px;transition:opacity .3s}
.spinhint svg{width:16px;height:16px}
.spinbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:5px}
.spinbar i{width:7px;height:7px;border-radius:50%;background:#cfcfd1}
.spinbar i.on{background:#2a2927}
.caption{position:absolute;left:14px;bottom:12px;font-size:12px;color:#5f5f62;background:rgba(255,255,255,.85);padding:3px 9px;border-radius:99px}
.views{display:flex;gap:6px;padding:10px;border-top:1px solid #e6e6e6;background:#f7f7f7;overflow-x:auto}
.views button{flex:0 0 auto;width:92px;border:2px solid transparent;border-radius:10px;background:#fff;padding:2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font:500 11px var(--body);color:#5f5f62}
.views button img{width:100%;aspect-ratio:1400/946;object-fit:contain}
.views button[aria-pressed="true"]{border-color:#2a2927;color:#2a2927}
.views button:focus-visible{outline:2px solid #2a2927;outline-offset:2px}

.sheet{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px}
.step{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.step h2{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0}
.step .val{font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--soft);color:var(--fg);font-variant-numeric:tabular-nums}
.chip b{font-weight:600}
.trims{display:flex;flex-direction:column;gap:8px}
.trim{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:11px 14px;cursor:pointer;text-align:left;font:inherit;width:100%}
.trim[aria-pressed="true"]{border-color:var(--accent)}
.trim:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trim strong{font-family:var(--display);font-weight:500;font-size:14px}
.trim small{display:block;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.trim .tp{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.sw{border:2px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:500 12px/1.25 var(--body);color:var(--fg);text-align:center}
.sw i{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 -6px 10px rgba(0,0,0,.14);display:block}
.sw small{font-size:10px;color:var(--muted);font-weight:400}
.sw[aria-pressed="true"]{border-color:var(--accent)}
.sw:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{font-size:12px;color:var(--muted);margin:0}
.intphoto{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#e6e6e6;display:block}
.interior{display:flex;gap:12px;align-items:center}
.material{width:44px;height:44px;border-radius:10px;flex:none;border:1px solid var(--line)}
.material.fabric{background:#1f1f22 repeating-linear-gradient(45deg,#2a2a2e 0 2px,transparent 2px 5px)}
.material.leather{background:radial-gradient(circle at 30% 25%,#3a3a3e,#151517 70%)}
.interior p{margin:0;font-size:13px;color:var(--muted)}
.interior b{color:var(--fg);font-weight:600;display:block;font-size:14px}

.price{border-color:var(--accent)}
.rows{display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.row.minus span:last-child{color:var(--good)}
.row.total{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;align-items:baseline}
.row.total span:first-child{font-weight:600}
.row.total span:last-child{font-family:var(--display);font-weight:700;font-size:28px;color:var(--accent)}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{flex:1 1 140px;border-radius:10px;padding:11px 14px;font:600 14px var(--body);cursor:pointer;border:2px solid var(--fill);background:var(--fill);color:var(--ink)}
.btn.wide{flex-basis:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}

.features{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 6px}
.features h2{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 4px}
.features>p{margin:0 0 10px;color:var(--muted);font-size:13px}
.fcols{columns:3 260px;column-gap:24px}
details{break-inside:avoid;border-top:1px solid var(--line);padding:10px 0}
summary{cursor:pointer;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:8px;list-style:none}
summary::-webkit-details-marker{display:none}
summary span{color:var(--muted);font-weight:400;font-size:12px;font-variant-numeric:tabular-nums}
details.extra summary{color:var(--accent)}
details ul{margin:8px 0 2px;padding-left:18px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:2px}

.summary{background:var(--surface);border:1px solid var(--accent);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.summary h2{font-family:var(--display);font-weight:500;font-size:15px;margin:0}
.summary pre{margin:0;white-space:pre-wrap;font:13px/1.55 var(--body);background:var(--soft);border-radius:10px;padding:12px;overflow-x:auto}
.send{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.send h3{margin:0;font:900 12px var(--display);text-transform:uppercase;letter-spacing:.06em}
.send .f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.send .f2{grid-template-columns:1fr}}
.send label.t{display:grid;gap:3px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.send select,.send input[type=text],.send input[type=email],.send input[type=tel]{font:500 14px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px;width:100%}
.send select:focus-visible,.send input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.send label.c{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--fg)}
.send label.c input{margin-top:3px;accent-color:var(--fill)}
.send .err{color:#b3261e;font-size:12.5px;min-height:1em;margin:0}
.toast{font-size:12px;color:var(--good);min-height:1em}
footer{font-size:12px;color:var(--muted)}

/* Running costs: merged from the Fuel VS BEV calculator. Fuel side in Black C, electric side in brand green. */
.rc{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:18px;display:grid;gap:16px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.rc h2{font-family:var(--display);font-weight:900;font-size:18px;text-transform:uppercase;letter-spacing:.02em;margin:0}
.rc>p{margin:0;color:var(--muted);font-size:13px;max-width:70ch}
.rc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px}
@media (max-width:980px){.rc-grid{grid-template-columns:1fr 1fr}.rc-res{grid-column:1/-1}}
@media (max-width:620px){.rc-grid{grid-template-columns:1fr}}
.rc-box{display:grid;gap:14px;align-content:start;min-width:0;border-top:3px solid var(--fuelc,var(--fg));padding-top:10px}
.rc-box.ev{--fuelc:var(--highlight)}
.rc-box h3{margin:0;font:900 13px var(--display);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;gap:8px}
.rc .field{display:grid;gap:5px}
.rc .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rc label,.rc .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.rc .val{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc select,.rc input[type=number]{font:500 13px var(--body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px;width:100%}
.rc .note{font-size:11.5px;color:var(--muted);margin:0}
.rc input[type=range]{width:100%;accent-color:var(--rcc,var(--fg))}
.rc .ev input[type=range]{--rcc:var(--highlight)}
.rc .seg{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.rc .seg button{font:700 11px var(--body);border:0;background:transparent;color:var(--muted);padding:5px 10px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.rc .seg button[aria-pressed=true]{background:var(--fg);color:var(--surface)}
.rc-res{display:grid;gap:10px;align-content:start;background:var(--soft);border-radius:4px;padding:14px;min-width:0}
.rc-big{font:900 clamp(30px,5vw,42px)/1 var(--display);font-variant-numeric:tabular-nums}
.rc-big.save{color:var(--highlight)} .rc-big.cost{color:var(--fg)}
.rc-sub{margin:0;font-size:12.5px;color:var(--muted)}
.rc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-tile{background:var(--surface);border-radius:4px;padding:10px;display:grid;gap:1px}
.rc-tile b{font:900 18px var(--display);font-variant-numeric:tabular-nums}
.rc-tile span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-tile .t{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg)}
.rc-tile.ev .t{color:var(--highlight)}
.rc svg{width:100%;height:auto;display:block}
.rc svg text{fill:var(--muted);font:500 10px var(--body)}
.rc details{border-top:1px solid var(--line);padding-top:8px}
.rc details summary{font-size:12px}
.rc table{width:100%;border-collapse:collapse;font-size:12px}
.rc th,.rc td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.rc th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rc .tablewrap{overflow-x:auto}
.rc a{color:var(--accent)}