/* A compact daily driver, making a relaxed lap around the neighborhood. */
.hero { padding-bottom: 118px; }
.car-lane { --car-width: 190px; --park-x: calc(84vw - var(--car-width)); --lap-time: 18s; position: absolute; inset: auto 0 100%; height: 130px; overflow: hidden; pointer-events: none; }
.car-traveler { position: absolute; left: 0; bottom: -6px; width: var(--car-width); transform: translateX(var(--park-x)); }
.car-lane[data-arrival="waiting"] .car-traveler { transform: translateX(-220px); }
.daily-driver { position: relative; display: block; width: 100%; }
.car-art { display: block; width: 100%; overflow: visible; }
.dust { position: absolute; left: -8px; bottom: 9px; width: 44px; height: 30px; opacity: 0; transform-origin: right center; pointer-events: none; }
.dust-two { width: 36px; bottom: 14px; }.dust-three { width: 29px; bottom: 8px; }
.car-wheel { transform-box: fill-box; transform-origin: center; }
.car-body { transform-origin: 140px 115px; }
@media(prefers-reduced-motion:no-preference) {
 .car-lane.is-cruising .car-traveler { animation: neighborhood-lap var(--lap-time) linear infinite both; }
 .car-lane.is-cruising .car-wheel { animation: lap-wheels var(--lap-time) linear infinite both; }
 .car-lane.is-cruising .car-body { animation: lap-suspension var(--lap-time) linear infinite both; }
 .car-lane.is-cruising .dust { animation: comic-puffs var(--lap-time) linear infinite both; }
 .car-lane.is-cruising .dust-two { animation-delay: .28s; }.car-lane.is-cruising .dust-three { animation-delay: .56s; }
 .car-lane[data-paused="true"] .car-traveler,.car-lane[data-paused="true"] .car-wheel,.car-lane[data-paused="true"] .car-body,.car-lane[data-paused="true"] .dust { animation-play-state: paused; }
 .key-set.is-swinging { animation: key-swing .85s cubic-bezier(.22,.8,.3,1) both; }
}
@keyframes neighborhood-lap {
 0% { transform: translateX(-220px); animation-timing-function: cubic-bezier(.2,.65,.35,1); }
 22%,68% { transform: translateX(var(--park-x)); }
 68% { animation-timing-function: cubic-bezier(.55,0,.8,.5); }
 86%,100% { transform: translateX(calc(100vw + 220px)); }
}
@keyframes lap-wheels {
 0% { transform: rotate(0); animation-timing-function: cubic-bezier(.2,.65,.35,1); }
 22%,68% { transform: rotate(1440deg); }
 68% { animation-timing-function: cubic-bezier(.55,0,.8,.5); }
 86%,100% { transform: rotate(2520deg); }
}
@keyframes lap-suspension {
 0%,8%,16%,22%,68%,76%,86%,100% { translate: 0 0; }
 4%,12%,72%,80% { translate: 0 -2px; }
 20% { translate: 0 -1px; }
}
@keyframes comic-puffs {
 0%,8%,16%,68%,76% { opacity: 0; transform: translate(0,0) scale(.4); }
 1%,9%,17%,69%,77% { opacity: .85; transform: translate(-9px,-3px) scale(.65); }
 7%,15%,22%,75%,83%,100% { opacity: 0; transform: translate(-86px,-24px) scale(1.25); }
}
@keyframes key-swing { 0% { transform: rotate(4deg); } 24% { transform: rotate(-6deg); } 53% { transform: rotate(7deg); } 77% { transform: rotate(2deg); } 100% { transform: rotate(4deg); } }

.vehicles { padding-block: 78px; overflow: hidden; }
.vehicles-inner { grid-template-columns: 1.2fr 1fr; gap: 70px; }
.vehicle-check { padding: 24px 0 0; margin-top: 24px; border-left: 0; border-top: 1px solid #c8c5bb; max-width: 390px; }
.vehicle-check #vehicle-result { min-height: 40px; }
.key-tag-stage { position: relative; min-height: 460px; display: grid; place-items: center; padding: 52px 25px 14px; }
.key-tag-caption { position: absolute; top: 0; left: 0; color: var(--red); font: 800 20px/1.05 var(--display); transform: rotate(-7deg); }
.key-set { position: relative; width: 275px; transform: rotate(4deg); transform-origin: 50% 8px; }
.shop-key-tag { position: relative; padding: 2px; background: var(--ink); clip-path: polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 24px); }
.tag-face { min-height: 337px; padding: 53px 22px 17px; display: flex; flex-direction: column; align-items: center; background: var(--cream); clip-path: polygon(23px 0,calc(100% - 23px) 0,100% 23px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 23px); transition: background .25s; }
.key-set.is-selected .tag-face { background: var(--yellow); }
.tag-eyelet { position: absolute; top: 14px; left: calc(50% - 9px); height: 18px; width: 18px; border: 3px solid #bdb098; box-shadow: 0 0 0 1px #796e59; background: #e9e6dc; border-radius: 50%; z-index: 2; }
.tag-wordmark { width: 146px; height: 36px; overflow: hidden; margin-bottom: 21px; }
.tag-wordmark img { width: 146px; height: auto; max-width: none; }
.tag-label { font: 400 8px/1.5 var(--body); letter-spacing: 1.8px; }
.tag-make { display: grid; align-items: center; min-height: 71px; padding-block: 8px; font: 800 40px/1 var(--display); letter-spacing: -.7px; text-transform: uppercase; text-align: center; width: 100%; overflow-wrap: anywhere; }
.tag-make.is-long { font-size: 31px; letter-spacing: -.4px; }
.tag-rule { width: 100%; border-top: 1px solid #24251f55; margin: 3px 0 16px; }
.tag-message { white-space: pre-line; font: 800 23px/1.05 var(--display); color: var(--red); text-align: center; min-height: 49px; display: grid; align-items: center; }
.tag-footer { margin-top: 26px; border-top: 1px dashed #24251f55; padding-top: 14px; display: flex; justify-content: space-between; width: 100%; gap: 8px; font: 400 7px/1 var(--body); letter-spacing: 1px; }
.tag-footer>span:nth-child(2) { color: var(--red); font-size: 12px; line-height: .7; }
.key-ring { position: absolute; top: -46px; left: calc(50% - 28px); width: 63px; height: 88px; pointer-events: none; }
.car-key { position: absolute; top: -45px; left: calc(50% - 37px); width: 73px; height: 175px; transform: rotate(43deg); transform-origin: 37px 18px; filter: drop-shadow(2px 3px 0 #24251f20); }
.key-set { filter: drop-shadow(7px 9px 0 #24251f12); }
@media(max-width:1100px) { .vehicles-inner { gap: 40px; }.key-tag-stage { padding-inline: 8px; }.key-tag-caption { font-size: 18px; } }
@media(max-width:800px) {
 .hero { padding-bottom: 105px; }.car-lane { --car-width: 160px; --park-x: calc(88vw - var(--car-width)); height: 110px; }
 .vehicles-inner { gap: 28px; }.key-set { width: 240px; }.tag-face { padding-inline: 18px; }.tag-make { font-size: 36px; }.tag-make.is-long { font-size: 27px; }.key-tag-caption { font-size: 16px; }
 .vehicles h2 { font-size: 38px; }.vehicle-check { padding-top: 22px; }.key-tag-stage { min-height: 440px; }
}
@media(max-width:620px) {
 .vehicles-inner { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }.vehicles { padding-block: 48px 42px; }.vehicles h2 { font-size: 40px; }.vehicle-check { max-width: none; }
 .key-tag-stage { min-height: 435px; padding-top: 65px; }.key-tag-caption { top: 5px; left: 9px; font-size: 18px; }.key-set { width: 258px; }.tag-make { font-size: 39px; }.tag-make.is-long { font-size: 29px; }
}
@media(max-width:360px) { .car-lane { --car-width: 145px; }.key-set { width: 230px; }.tag-face { padding-inline: 15px; }.tag-make.is-long { font-size: 26px; }.key-tag-caption { font-size: 16px; left: 0; } }
@media(prefers-reduced-motion:reduce) { .dust { display: none; }.tag-face { transition: none; } }