:root{--bg:#101315;--panel:#1a1f22;--line:#333a3d;--text:#f0f1ed;--muted:#a6b0b2;--accent:#d4f35b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}header{max-width:1320px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font-weight:900;letter-spacing:2px;font-size:20px}.logo i{color:var(--accent);font-style:normal;letter-spacing:-5px;margin-right:14px;font-size:30px}.logo span{display:block;font-size:8px;letter-spacing:3px;margin-left:42px;color:var(--muted)}nav{display:flex;align-items:center;gap:30px;font-size:12px}nav a:hover{color:var(--accent)}.pill{font-size:9px;letter-spacing:1px;border:1px solid var(--line);padding:7px 10px;border-radius:20px;color:var(--muted)}main{max-width:1240px;margin:auto;padding:0 40px}.hero{display:grid;grid-template-columns:1.4fr 1fr;align-items:center;min-height:470px;gap:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--accent)}h1{font-size:clamp(36px,4.5vw,62px);line-height:1.09;letter-spacing:-2.6px;margin:22px 0}em{font-style:normal;color:var(--accent)}p{color:var(--muted)}.hero p{font-size:15px;margin-bottom:26px}.primary{display:inline-flex;justify-content:space-between;gap:32px;background:var(--accent);color:#111810;border:0;border-radius:4px;padding:14px 20px;font-weight:700;font-size:13px}.primary:hover{background:#e6ff91}.dial{width:310px;height:310px;position:relative;justify-self:center;border-radius:50%;background:repeating-conic-gradient(from 220deg,#65743c 0deg 1deg,transparent 1deg 6deg);padding:20px;transform:rotate(-8deg)}.dial:after{content:'';position:absolute;inset:6px;border:3px solid var(--accent);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}.dial-inner{height:100%;background:var(--bg);border:1px solid #38412a;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(8deg)}.dial small,.dial-inner span{font-size:8px;letter-spacing:2px;color:var(--muted)}.dial strong{font-size:36px;line-height:1.1;margin:18px 0;text-align:center;letter-spacing:-1px}.dial-tag{position:absolute;bottom:-15px;left:65px;background:var(--panel);border:1px solid var(--line);padding:10px 25px;font-size:10px;letter-spacing:2px;transform:rotate(8deg)}.dial-tag span{color:var(--accent);margin:0 10px}.config{border:1px solid var(--line);background:#161a1c;padding:30px;border-radius:8px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}h2{font-size:25px;letter-spacing:-.7px;margin:8px 0 22px;line-height:1.25}.text-btn{background:none;border:0;color:var(--muted);font-size:11px;padding:10px}.text-btn:hover{color:var(--accent)}.search{display:flex;gap:14px;align-items:center;border:1px solid var(--line);padding:10px 16px;border-radius:4px}.search>span:first-child{font-size:25px;color:var(--accent)}input{width:100%;color:var(--text);background:transparent;border:0;outline:0}#count{white-space:nowrap;color:var(--muted);font-size:10px}.selects{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}label{font-size:10px;letter-spacing:1px;color:var(--muted)}select{display:block;width:100%;margin-top:8px;padding:13px 9px;background:#22282b;color:white;border:1px solid #41494c;border-radius:4px;font-size:12px}select:disabled{opacity:.4}.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.brand{background:#1d2225;border:1px solid var(--line);color:var(--text);padding:22px 8px;border-radius:4px;font-weight:bold;font-size:13px}.brand:hover{border-color:var(--accent);color:var(--accent)}.demo-note{font-size:10px;margin:24px 0 0;max-width:850px}.result-head{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center}.result-head h3{font-size:25px;margin:0}.result-head p{font-size:12px;margin:3px 0 18px}.tabs{display:flex;gap:8px}.tabs button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:9px 18px}.tabs button.active{background:var(--accent);color:#17210c}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:15px 0}.metric{background:#202628;padding:24px;border-radius:5px}.metric small{font-size:11px;color:var(--muted)}.metric strong{font-size:42px;letter-spacing:-2px}.metric .arrow{color:#687376;margin:0 12px}.metric b{color:var(--accent);font-size:11px;display:block}.result-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px}.price{font-size:27px;font-weight:700}.price small{display:block;font-size:10px;font-weight:400;color:var(--muted)}.bars{height:5px;background:#3b454a;margin:16px 0 4px;border-radius:3px;overflow:hidden}.bars span{display:block;background:var(--accent);height:100%}#stufen{padding:65px 0}.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.stages article{border-top:1px solid var(--line);padding-top:20px}.stages article>span{font-size:12px;color:var(--accent)}h3{font-size:20px;margin:15px 0 5px}.stages p{font-size:13px;max-width:290px}footer{border-top:1px solid var(--line);padding:25px 0 35px;display:flex;align-items:center;justify-content:space-between}footer>span:last-child{font-size:10px;color:var(--muted)}#searchResults button{display:block;text-align:left;background:var(--panel);border:1px solid var(--line);color:var(--text);padding:12px;width:100%;font-size:12px}#searchResults button:hover{color:var(--accent)}dialog{max-width:500px;width:calc(100% - 32px);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:32px}dialog::backdrop{background:#000b}.close{float:right;background:none;border:0;color:white;font-size:25px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:750px){header{padding:18px 20px}nav a{display:none}nav{gap:0}.logo{font-size:15px}.logo span{font-size:6px}main{padding:0 20px}.hero{min-height:390px;grid-template-columns:1fr}.dial{display:none}h1{font-size:44px}.config{padding:20px}.section-head{align-items:flex-start}.section-head h2{font-size:22px}.text-btn{max-width:100px}.selects{grid-template-columns:1fr 1fr}.brand-grid{grid-template-columns:repeat(3,1fr)}.brand{font-size:11px}.result-head{display:block}.metrics{grid-template-columns:1fr}.metric strong{font-size:36px}.result-bottom{gap:15px}.result-bottom .primary{gap:10px;padding:12px;font-size:11px}.stages{grid-template-columns:1fr;gap:18px}.stages p{max-width:none}footer{display:block}footer>span:last-child{display:block;margin-top:10px}#count{display:none}.pill{font-size:7px}}
/* Guided catalog selection, matching the reference's browsing flow. */
.selects{display:block}.choose-title{margin:28px 0 20px}.brand-grid{grid-template-columns:repeat(3,1fr)}.brand{min-height:115px;text-align:center}.brand-word{display:block;font-size:23px;letter-spacing:-.7px}.brand small{display:block;font-size:10px;font-weight:normal;color:var(--muted);margin-top:12px}.selection-top{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:20px}.selection-top>span{font-size:11px;color:var(--muted)}.selection-top .text-btn{color:var(--accent);padding-left:0;white-space:nowrap}.selection-columns{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:18px}.selection-column{background:#1c2124;border:1px solid var(--line);border-radius:4px;overflow:hidden;align-self:start;min-height:170px}.selection-column h3{margin:0;background:#282f32;padding:14px 16px;font-size:16px}.selection-column>p{font-size:11px;margin:12px 16px}.selection-column h4{color:var(--accent);font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:0 16px;margin:17px 0 8px}.choice{width:100%;border:0;border-top:1px solid #30383b;display:flex;justify-content:space-between;gap:10px;text-align:left;background:transparent;color:var(--text);padding:13px 16px;font-size:13px}.choice small{white-space:nowrap;color:var(--muted)}.choice:hover{background:#303b30}.choice.chosen{background:#d4f31f15;color:var(--accent);box-shadow:inset 3px 0 var(--accent)}.choice.chosen small{color:var(--accent)}.chart-panel{border:1px solid var(--line);background:#121719;padding:22px;margin:20px 0;border-radius:5px}.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.chart-heading h3{font-size:17px;margin-top:7px}.chart-panel svg{display:block;width:100%;max-height:390px;margin:15px auto 0}.chart-panel svg text{fill:#a6b0b2;font-size:11px;font-family:Arial,sans-serif}.gridline{stroke:#30383b;stroke-width:1}.curve{fill:none;stroke-width:2.5;stroke-linejoin:round}.curve.stock{stroke:#9aa8b0}.curve.tune{stroke:var(--accent)}.curve.dashed{stroke-dasharray:7 5}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 25px;font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:22px;border-top:2px solid #9aa8b0;vertical-align:middle;margin-right:6px}.legend .tune{border-color:var(--accent)}.legend .dashed{border-top-style:dashed}.chart-panel>p{font-size:10px;text-align:center;margin-bottom:0}@media(max-width:750px){.selection-columns{grid-template-columns:1fr}.selection-column{min-height:0}.selection-top{display:block}.selection-top>span{display:block}.selection-top .text-btn{max-width:none}.brand-grid{grid-template-columns:repeat(2,1fr)}.brand-word{font-size:20px}.chart-panel{padding:12px}.chart-heading{display:block}.chart-heading .pill{display:inline-block;margin-top:9px}.chart-panel svg{min-height:200px}}
.original-graph{display:block;max-width:100%;max-height:600px;width:auto;height:auto;margin:20px auto;background:#fff}.source-note{font-size:11px}.source-note a{color:var(--accent);text-decoration:underline}.missing-graph{padding:35px 15px}.tabs{flex-wrap:wrap}.selection-column{max-height:470px;overflow-y:auto}.brand-grid:empty{display:none}.metrics b{margin-top:16px}.brand-word{overflow-wrap:anywhere}.searchResults{max-height:400px;overflow:auto}
.extra-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:var(--panel);font-size:12px}.extra-specs dt{color:var(--muted)}.extra-specs dd{margin:0;text-align:right}.original-graph{border-radius:3px}@media(max-width:750px){header .pill{max-width:125px;white-space:normal;text-align:center}header .logo{letter-spacing:1px}.result-head h3{font-size:22px}.result-bottom{flex-wrap:wrap}.selection-column{max-height:340px}}
.engine-status{display:block;font-size:10px;color:#e9c16d;font-style:normal;margin-top:4px}
.price{max-width:65%}.price-text{font-size:16px;line-height:1.5;font-weight:600}@media(max-width:750px){.price{max-width:100%}}
.chart-link{color:var(--accent);text-decoration:underline}
@media(min-width:1051px){.brand-grid{grid-template-columns:repeat(6,1fr)}.brand-word{font-size:17px}.brand{min-height:100px}.brand small{font-size:9px}}@media(min-width:751px) and (max-width:1050px){.brand-grid{grid-template-columns:repeat(4,1fr)}.brand-word{font-size:18px}}

/* Prominent absolute and relative gains, wrapping naturally on small screens. */
.metric .gain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.gain-absolute{font-size:26px;font-weight:750;color:var(--accent);line-height:1.25}
.gain-percent{font-size:19px;font-weight:700;color:var(--accent);background:#d4f31f14;border:1px solid #d4f31f40;border-radius:6px;padding:5px 10px;white-space:nowrap}
.gain-caption{flex-basis:100%;font-size:12px;color:var(--muted)}
.gain.unavailable{font-size:14px;color:var(--muted)}
.curve{stroke-linecap:round}
@media(max-width:400px){.gain-absolute{font-size:23px}.gain-percent{font-size:17px}}

/* Manufacturer logo, brand name, then the existing discovery action. */
.brand{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:180px;padding:18px 10px;gap:12px}
.brand-logo-wrap{display:flex;align-items:center;justify-content:center;width:112px;max-width:100%;height:76px;flex-shrink:0;background:transparent;border-radius:0;overflow:hidden}
.brand-logo{display:block;width:100%;height:100%;object-fit:contain;padding:5px}
.brand .brand-word{font-size:17px;line-height:1.25;letter-spacing:0}
.brand small{margin-top:auto;line-height:1.4}
@media(max-width:450px){.brand{min-height:175px}.brand .brand-word{font-size:16px}.brand small{font-size:10px}}
/* Preserve the coloured marks; improve dark outlines on the dark cards. */
.brand-logo{filter:drop-shadow(0 0 .6px #d9dfe5)}
.brand-logo[src$="/audi.png"],.brand-logo[src$="/cupra.png"],.brand-logo[src$="/mini.png"]{filter:brightness(0) invert(.92)}
.brand-logo[src$="/genesis.png"]{filter:grayscale(1) invert(1);mix-blend-mode:screen}
.brand-logo[src$="/mpm.png"]{filter:none;mix-blend-mode:screen}
.brand-logo[src$="/secma.jpg"]{clip-path:ellipse(46% 43% at 50% 50%);filter:none}
.brand-logo[src$="/piaggio.png"]{clip-path:inset(35% 23% 35% 23% round 2px);transform:scale(1.8);filter:none}
/* Mercedes emblem only; the separate brand label remains below the logo. */
.brand-logo-wrap:has(img[src$="/mercedes-benz.png"]){position:relative}
.brand-logo[src$="/mercedes-benz.png"]{position:absolute;width:223px;max-width:none;height:125px;left:50%;top:-10px;transform:translateX(-50%);padding:0;object-fit:contain;filter:none}
/* Use the existing transparent KTM silhouette in its orange brand colour. */
.brand-logo-wrap:has(img[src$="/ktm.png"]){background:#ff6600;-webkit-mask:url('brand-logos/ktm.png') center/contain no-repeat;mask:url('brand-logos/ktm.png') center/contain no-repeat}
.brand-logo[src$="/ktm.png"]{opacity:0}