/* Three ways to give the right side a clear role. */
@media(min-width:1051px){
body.focus.balance-1 .road .backdrop{top:calc(100svh - 46vw - 110px)}
body.focus.balance-1 .road:after{background:linear-gradient(90deg,#080f17ed 0%,#080f1780 23%,transparent 51%),linear-gradient(180deg,#080f1722,transparent 60%,#080f1722)}
body.focus.balance-2 .road .backdrop{width:88%;right:3%;top:calc(100svh - 44vw - 145px)}
body.focus.balance-2 .road:after{background:linear-gradient(90deg,#080f17eb 0%,#080f1788 22%,transparent 50%),linear-gradient(180deg,#080f1766,transparent 45%,#080f1733)}
body.focus.balance-3 .road>.vehicle-status{top:145px;left:auto;right:65px;margin:0;display:flex;flex-direction:column;gap:24px;font-size:24px;min-width:220px}
body.focus.balance-3 .road>.vehicle-status small{font-size:16px;margin-top:5px}
body.focus.balance-3 .road .backdrop{top:calc(100svh - 46vw - 30px)}
}
@media(min-width:1051px) and (max-width:1600px){
body.focus.balance-1 .road .backdrop{width:80%;top:calc(100svh - 40vw - 105px)}
body.focus.balance-2 .road .backdrop{width:78%;right:1%;top:calc(100svh - 39vw - 140px)}
body.focus.balance-3 .road .backdrop{width:80%;top:calc(100svh - 40vw - 30px)}
}
@media(min-width:701px) and (max-width:1050px){body.focus.balance-3 .road>.vehicle-status{top:135px;left:auto;right:25px;flex-direction:column;font-size:19px}}
@media(max-width:700px){body.focus.balance-3 .road>.vehicle-status{position:relative;inset:auto;order:2;margin:26px 22px 0;font-size:19px}body.focus.balance-1 .road:after{background:linear-gradient(180deg,transparent 45%,#080f1711 80%,#080f1733)}body.focus.balance-2 .road .backdrop{width:108%;margin-left:-4%}}
@media(min-width:701px){body.focus.balance-1 .road>.vehicle-status{position:absolute;left:auto;right:5%;bottom:auto;margin:0;display:flex;flex-direction:row;gap:36px;font-size:21px;z-index:5}body.focus.balance-1 .road>.vehicle-status small{font-size:15px;margin-top:5px}}
@media(max-width:700px){body.focus.balance-1 .road>.vehicle-status{position:relative;inset:auto;order:2;margin:26px 22px 0;display:flex;flex-direction:row;font-size:19px}}
@media(min-width:701px){body.focus.balance-1 .road>.vehicle-status{right:auto;left:77%;transform:translate(-50%,-50%);gap:52px;font-size:30px;white-space:nowrap;text-align:center}body.focus.balance-1 .road>.vehicle-status>*{text-align:center}body.focus.balance-1 .road>.vehicle-status small{font-size:18px;margin-top:8px}}
@media(min-width:701px) and (max-width:1050px){body.focus.balance-1 .road>.vehicle-status{left:76%;gap:30px;font-size:24px}body.focus.balance-1 .road>.vehicle-status small{font-size:15px}}
/* A restrained frame groups the vehicle availability labels. */
body.focus.balance-1 .road>.vehicle-status{border:1px solid #9cabb85c;background:#080f177a;padding:23px 30px;gap:0}
body.focus.balance-1 .road>.vehicle-status>*{padding:0 27px}
body.focus.balance-1 .road>.vehicle-status>*+*{border-left:1px solid #9cabb84d}
@media(max-width:1050px) and (min-width:701px){body.focus.balance-1 .road>.vehicle-status{padding:18px 15px}body.focus.balance-1 .road>.vehicle-status>*{padding:0 18px}}
@media(max-width:700px){body.focus.balance-1 .road>.vehicle-status{padding:16px 0;margin:24px 22px 0;justify-content:stretch}body.focus.balance-1 .road>.vehicle-status>*{padding:0 16px;flex:1;text-align:center}body.focus.balance-1 .road>.vehicle-status small{font-size:13px}}
/* Match the two availability treatments to Download and Instruction. */
body.focus.balance-1 .road>.vehicle-status{padding:0;border:0;background:none;gap:12px;align-items:stretch}
body.focus.balance-1 .road>.vehicle-status>*{padding:22px 28px;min-width:205px;border:1px solid #d4dce1;background:#0c182166;color:#fff;text-align:center}
body.focus.balance-1 .road>.vehicle-status>a{background:#f1f4f5;color:#122431;border-color:#f1f4f5}
body.focus.balance-1 .road>.vehicle-status>a small{color:#415461}
body.focus.balance-1 .road>.vehicle-status>span small{color:#d4dfe6}
body.focus.balance-1 .road>.vehicle-status>*+*{border-left:1px solid #d4dce1}
@media(min-width:701px) and (max-width:1050px){body.focus.balance-1 .road>.vehicle-status>*{min-width:155px;padding:18px}}
@media(max-width:700px){body.focus.balance-1 .road>.vehicle-status{gap:12px}body.focus.balance-1 .road>.vehicle-status>*{min-width:0;padding:16px 10px;flex:1}}
/* A directional cue and interactive states distinguish the live Škoda link. */
body.focus.balance-1 .vehicle-status>a{position:relative;cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.focus.balance-1 .vehicle-status>a:after{content:'↗';position:absolute;right:12px;top:7px;font:400 23px/1.2 Exo,Arial,sans-serif;color:#122431;transition:transform .18s ease}
body.focus.balance-1 .vehicle-status>a:hover{background:#fff;text-decoration:none;box-shadow:0 4px 16px #0003;transform:translateY(-2px)}
body.focus.balance-1 .vehicle-status>a:hover:after{transform:translate(2px,-2px)}
body.focus.balance-1 .vehicle-status>a:focus-visible{outline:2px solid #fff;outline-offset:5px;background:#fff}
body.focus.balance-1 .vehicle-status>a:active{transform:translateY(0)}
@media(max-width:700px){body.focus.balance-1 .vehicle-status>a:after{font-size:19px;right:9px;top:5px}}
@media(prefers-reduced-motion:reduce){body.focus.balance-1 .vehicle-status>a,body.focus.balance-1 .vehicle-status>a:after{transition:none}}
/* Consistent interaction across the active hero controls. */
body.focus.balance-1 .actions>*,body.focus.balance-1 .partner{transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;color:inherit}
body.focus.balance-1 .actions .download{color:#122431}
body.focus.balance-1 .actions>* span,body.focus.balance-1 .partner span{display:inline-block;transition:transform .18s ease}
body.focus.balance-1 .actions>*:hover{filter:none;transform:translateY(-2px);box-shadow:0 4px 16px #0003}
body.focus.balance-1 .actions .download:hover{background:#fff}
body.focus.balance-1 .actions .instruction:hover{background:#233541e6;border-color:#fff}
body.focus.balance-1 .download:hover span{transform:translateY(3px)}
body.focus.balance-1 .instruction:hover span{transform:translateX(3px)}
body.focus.balance-1 .partner:hover{transform:translateY(-2px);color:#fff;text-shadow:0 0 1px currentColor}
body.focus.balance-1 .partner:hover span{transform:translate(2px,-2px)}
body.focus.balance-1 .actions>*:focus-visible,body.focus.balance-1 .partner:focus-visible{outline:2px solid #fff;outline-offset:5px}
body.focus.balance-1 .actions>*:active,body.focus.balance-1 .partner:active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){body.focus.balance-1 .actions>*,body.focus.balance-1 .actions>* span,body.focus.balance-1 .partner,body.focus.balance-1 .partner span{transition:none}}
body.focus.balance-1 .vehicle-status>.vw-versions{position:relative;font:inherit;line-height:inherit;cursor:pointer;border-radius:0;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.focus.balance-1 .vehicle-status>.vw-versions small{display:block;font-weight:400;color:#d4dfe6}
body.focus.balance-1 .vehicle-status>.vw-versions:after{content:'↗';position:absolute;right:12px;top:7px;font:400 23px/1.2 Exo,Arial,sans-serif;transition:transform .18s ease}
body.focus.balance-1 .vehicle-status>.vw-versions:hover{background:#233541e6;border-color:#fff;transform:translateY(-2px);box-shadow:0 4px 16px #0003}
body.focus.balance-1 .vehicle-status>.vw-versions:hover:after{transform:translate(2px,-2px)}
body.focus.balance-1 .vehicle-status>.vw-versions:focus-visible{outline:2px solid #fff;outline-offset:5px}
body.focus.balance-1 .vehicle-status>.vw-versions:active{transform:translateY(0)}
#vw-dialog{max-width:440px;width:calc(100% - 40px);padding:32px;background:#101b24;color:#f1f4f5;border:1px solid #8494a3;font-family:Exo,Arial,sans-serif}
#vw-dialog::backdrop{background:#02080dcc}#vw-dialog h2{font-size:30px;margin:0 0 12px}#vw-dialog p{margin:0 0 18px;line-height:1.6}#vw-dialog form button{padding:12px 24px;border:1px solid #d4dce1;background:#f1f4f5;color:#122431}
@media(max-width:700px){body.focus.balance-1 .vehicle-status>.vw-versions:after{font-size:19px;right:9px;top:5px}}
@media(prefers-reduced-motion:reduce){body.focus.balance-1 .vehicle-status>.vw-versions,body.focus.balance-1 .vehicle-status>.vw-versions:after{transition:none}}
#skoda-dialog{width:calc(100% - 36px);max-width:580px;max-height:calc(100dvh - 36px);overflow:auto;padding:30px;background:#101b24;color:#f1f4f5;border:1px solid #8494a3;font:16px/1.6 Exo,Arial,sans-serif}
#skoda-dialog::backdrop{background:#02080ddd}.compat-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}#skoda-dialog h2{font-size:27px;margin:0}#skoda-dialog h3{font-size:18px;margin:20px 0 8px}#skoda-dialog p{margin:14px 0}.compat-heading button{font-size:28px;background:transparent;color:white;border:1px solid #71818e;width:42px;height:42px;cursor:pointer}#skoda-dialog dl{display:grid;grid-template-columns:110px 1fr;border-block:1px solid #40505c;padding:15px 0;gap:10px;font-size:15px}#skoda-dialog dd{margin:0}#skoda-dialog dt{color:#bac8d2}#skoda-dialog code{font-size:14px;overflow-wrap:anywhere}.compat-note{color:#c7d4dc;font-size:14px}.compat-guide{display:flex;justify-content:space-between;gap:20px;background:#f1f4f5;color:#122431;padding:13px 17px;margin-top:22px;font-weight:600}
@media(max-width:500px){#skoda-dialog{padding:22px}#skoda-dialog h2{font-size:23px}#skoda-dialog dl{grid-template-columns:1fr;gap:4px}#skoda-dialog dd{margin-bottom:9px}}
