.vehicle-showcase{position:relative;overflow:hidden;padding:120px 0;background:radial-gradient(circle at 80% 45%,rgba(169,238,0,.12),transparent 31%),#edf0e8}
.vehicle-showcase-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);align-items:center;gap:70px}
.vehicle-showcase-copy h2{margin:18px 0 20px;font-size:clamp(40px,5vw,62px);line-height:1.04;letter-spacing:-.055em}
.vehicle-showcase-copy>p{color:#59665d;font-size:15px;line-height:1.8}
.vehicle-showcase-copy>p strong{color:#203018}
.vehicle-steps{display:grid;gap:13px;margin:30px 0;padding:0;list-style:none}
.vehicle-steps li{display:flex;align-items:center;gap:15px;padding:15px 17px;border:1px solid #d8e0d6;border-radius:16px;background:rgba(255,255,255,.72)}
.vehicle-steps li>span{width:34px;height:34px;display:grid;flex:0 0 34px;place-items:center;border-radius:10px;background:#0a170e;color:#a9ee00;font-size:12px;font-weight:800}
.vehicle-steps b,.vehicle-steps small{display:block}.vehicle-steps b{font-size:13px}.vehicle-steps small{margin-top:2px;color:#718076;font-size:11px}
.vehicle-tip{padding:17px 19px;border-left:3px solid #8fd000;border-radius:0 13px 13px 0;background:#e5f3c8!important;font-size:12px!important}
.app-visual{position:relative;min-height:610px;display:flex;align-items:center;justify-content:center;gap:22px;padding:40px 20px}
.visual-glow{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(169,238,0,.24),rgba(169,238,0,0) 65%)}
.phone{position:relative;z-index:2;width:255px;min-height:500px;overflow:hidden;border:8px solid #142019;border-radius:34px;background:#f8faf6;box-shadow:0 30px 70px rgba(13,35,20,.23)}
.phone-settings{transform:translateY(-28px) rotate(-2.2deg)}.phone-calculate{transform:translateY(32px) rotate(2.2deg)}
.phone-top{height:70px;display:flex;align-items:center;justify-content:space-between;padding:18px 16px 0;background:#07110b;color:#fff;font-size:10px}.phone-top>b{font-size:11px}
.phone-body{padding:23px 17px}.screen-label{color:#659313;font-size:8px;font-weight:800;letter-spacing:.14em}.phone h3{margin:7px 0 20px;font-size:20px;letter-spacing:-.04em}
.vehicle-row{display:grid;grid-template-columns:35px 1fr 16px;align-items:center;gap:9px;margin-bottom:9px;padding:12px;border:1px solid #e0e7df;border-radius:13px;background:#fff}.vehicle-row.selected{border-color:#9ed73c;background:#eff9da}.vehicle-icon{font-size:17px}.vehicle-row b,.vehicle-row small{display:block}.vehicle-row b{font-size:10px}.vehicle-row small{margin-top:3px;color:#7a867d;font-size:8px}
.phone button{width:100%;margin-top:15px;padding:12px;border:0;border-radius:11px;background:#a9ee00;color:#14200e;font:800 9px Manrope,sans-serif}.phone button span{font-size:13px}
.visual-route{position:absolute;z-index:4;top:265px;left:50%;width:150px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border:1px solid rgba(169,238,0,.35);border-radius:999px;background:#07110b;color:#dbe4dc;box-shadow:0 10px 25px rgba(0,0,0,.28);font-size:7px;font-weight:800;text-transform:uppercase}.visual-route i{color:#a9ee00;font-size:15px;font-style:normal}
.input-preview{position:relative;padding:13px;border:1px solid #9ed73c;border-radius:13px;background:#fff}.input-preview span,.input-preview b{display:block}.input-preview span{color:#77837a;font-size:8px}.input-preview b{margin-top:4px;font-size:11px}.input-preview i{position:absolute;right:13px;bottom:13px;color:#659313;font-style:normal}
.consumption-result{margin-top:13px;padding:18px;border-radius:15px;background:#0a170e;color:#fff}.consumption-result span,.consumption-result small{display:block;color:#95a098;font-size:8px}.consumption-result strong{display:inline-block;margin:6px 4px 2px 0;color:#a9ee00;font-size:30px}.ready-pill{margin-top:14px;padding:10px;border-radius:10px;background:#eaf7d0;color:#42640c;font-size:9px;font-weight:800;text-align:center}
@media(max-width:1050px){.vehicle-showcase-grid{grid-template-columns:1fr;gap:35px}.vehicle-showcase-copy{max-width:720px}.app-visual{min-height:570px}}
@media(max-width:620px){.vehicle-showcase{padding:82px 0}.app-visual{min-height:780px;flex-direction:column;gap:5px;padding:20px 0}.phone{width:min(270px,86vw);min-height:480px}.phone-settings,.phone-calculate{transform:none}.visual-route{position:relative;top:auto;left:auto;width:auto;transform:none;margin:1px 0;padding:8px 13px}.vehicle-showcase-grid{display:block}.vehicle-showcase-copy{margin-bottom:34px}}

.real-app-visual{min-height:670px;align-items:center;gap:24px}
.real-phone{position:relative;z-index:2;width:258px;margin:0}
.real-phone-government{transform:translateY(-26px) rotate(-2deg)}
.real-phone-custom{transform:translateY(30px) rotate(2deg)}
.real-phone-screen{height:520px;overflow:hidden;border:8px solid #111a14;border-radius:34px;background:#111315;box-shadow:0 30px 70px rgba(13,35,20,.25)}
.real-phone-screen img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center}
.real-phone figcaption{width:calc(100% - 20px);margin:-52px auto 0;position:relative;z-index:3;padding:15px 16px;border:1px solid rgba(169,238,0,.25);border-radius:16px;background:rgba(7,17,11,.94);box-shadow:0 18px 40px rgba(0,0,0,.25);color:#fff}
.real-phone figcaption span,.real-phone figcaption b,.real-phone figcaption small{display:block}
.real-phone figcaption span{color:#a9ee00;font-size:8px;font-weight:800;letter-spacing:.14em}
.real-phone figcaption b{margin-top:5px;font-size:11px}.real-phone figcaption small{margin-top:4px;color:#9eaaa0;font-size:8px;line-height:1.5}
.real-app-visual .visual-route{top:290px}
@media(max-width:620px){.real-app-visual{min-height:auto;gap:22px}.real-phone{width:min(285px,88vw)}.real-phone-government,.real-phone-custom{transform:none}.real-phone-screen{height:570px}.real-app-visual .visual-route{top:auto}}

/* Give the genuine app captures enough space to remain readable and sharp. */
.vehicle-showcase-grid{grid-template-columns:1fr;gap:48px}
.vehicle-showcase-copy{max-width:820px}
.real-app-visual{width:100%;min-height:790px;gap:46px;padding:35px 0 70px}
.real-phone{width:min(390px,38vw)}
.real-phone-government{transform:translateY(-18px) rotate(-1.25deg)}
.real-phone-custom{transform:translateY(28px) rotate(1.25deg)}
.real-phone-screen{height:700px;border-width:10px;border-radius:42px}
.real-phone-screen img{image-rendering:auto;object-fit:cover;object-position:center top;transform:translateZ(0);backface-visibility:hidden}
.real-phone figcaption{width:calc(100% - 34px);margin:-64px auto 0;padding:18px 20px;border-radius:18px}
.real-phone figcaption span{font-size:9px}.real-phone figcaption b{font-size:14px}.real-phone figcaption small{font-size:10px}
.real-app-visual .visual-route{top:345px;width:184px;padding:10px 12px;font-size:8px}
@media(max-width:820px){.real-app-visual{min-height:720px;gap:20px}.real-phone{width:min(345px,43vw)}.real-phone-screen{height:640px}}
@media(max-width:620px){.real-app-visual{min-height:auto;gap:28px;padding-bottom:20px}.real-phone{width:min(335px,92vw)}.real-phone-government,.real-phone-custom{transform:none}.real-phone-screen{height:650px;border-width:8px;border-radius:36px}.real-phone figcaption{margin-top:-54px}.real-app-visual .visual-route{top:auto;width:auto}}