:root {
    --bg: #05080d;
    --bg-soft: #090e15;
    --panel: rgba(12, 18, 26, 0.78);
    --panel-strong: #0d131c;
    --line: rgba(141, 160, 182, 0.22);
    --text: #f5f7fa;
    --muted: #9ca7b5;
    --orange: #ff6a00;
    --orange-light: #ff8a1c;
    --cyan: #00d7ff;
    --green: #4bd66d;
    --radius: 18px;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 80% 12%, rgba(0, 130, 168, .08), transparent 30%),
        radial-gradient(circle at 28% 22%, rgba(255, 106, 0, .07), transparent 26%),
        var(--bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 65%);
}
a { color: inherit; text-decoration: none; }
button, a { transition: .22s ease; }
.container { width: min(1420px, calc(100% - 64px)); margin: 0 auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: rgba(4, 7, 11, .82);
    backdrop-filter: blur(20px);
}
.header-inner { min-height: 108px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; flex: 0 0 292px; align-items: center; }
.brand-full { width: 292px; height: auto; display: block; }
.brand-mark { display: none; height: 54px; width: auto; }
.main-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: clamp(22px, 2.3vw, 44px); color: #c5ccd5; }
.main-nav a { position: relative; white-space: nowrap; font-size: 15px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 1px; background: var(--orange); transition: .22s ease; }
.main-nav a:hover { color: white; }
.main-nav a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.button {
    min-height: 46px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: white;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.button-primary {
    border-color: var(--orange);
    background: linear-gradient(135deg, var(--orange-light), var(--orange));
    box-shadow: 0 12px 32px rgba(255, 106, 0, .24);
}
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(255,106,0,.36); }
.button-ghost { border-color: rgba(177, 194, 213, .35); background: rgba(8, 12, 18, .55); }
.button-ghost:hover { border-color: var(--orange); background: rgba(255,106,0,.08); }
.button-large { min-height: 56px; padding: 0 30px; }
.button:disabled { opacity: .62; cursor: not-allowed; transform: none; }
.menu-toggle { display: none; width: 46px; height: 42px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: white; }

.circuit-bg { position: relative; overflow: hidden; }
.circuit-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(90deg, transparent 0 10%, rgba(255,106,0,.36) 10.1% 10.25%, transparent 10.35% 100%),
        linear-gradient(0deg, transparent 0 34%, rgba(255,106,0,.18) 34.1% 34.25%, transparent 34.35% 100%);
    background-size: 210px 92px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
    animation: circuitDrift 18s linear infinite;
}
@keyframes circuitDrift { to { transform: translateX(210px); } }

.hero { min-height: 720px; padding: 72px 0 48px; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 46px; }
.eyebrow {
    display: inline-flex;
    padding: 8px 16px;
    border: 1px solid rgba(255,106,0,.65);
    border-radius: 999px;
    color: var(--orange-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.hero h1 { margin: 28px 0 24px; font-size: clamp(50px, 5vw, 84px); line-height: 1.03; letter-spacing: -.045em; }
.hero h1 strong { display: inline-block; color: var(--orange); font-weight: 800; }
.hero-copy > p { max-width: 690px; margin: 0 0 32px; color: #c6ccd4; font-size: clamp(18px, 1.35vw, 23px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 18px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 38px; color: #a9b2be; font-size: 13px; }

.hero-visual { position: relative; min-height: 570px; }
.device {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(218, 230, 243, .42);
    border-radius: 40px;
    background: #020407;
    box-shadow: 0 36px 75px rgba(0,0,0,.58);
}
.device-main { z-index: 3; left: 8%; top: 0; width: 330px; height: 610px; padding: 10px; transform: rotate(4deg); }
.device-secondary { z-index: 2; right: 4%; top: 22px; width: 300px; height: 570px; padding: 10px; transform: rotate(-4deg); opacity: .92; }
.device-screen { position: relative; height: 100%; overflow: hidden; padding: 24px 17px 17px; border-radius: 31px; background: linear-gradient(160deg, #111820, #070b11 55%, #0a1018); }
.device-notch { position: absolute; z-index: 4; top: 10px; left: 50%; width: 96px; height: 22px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #020407; }
.app-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.app-topline em { font-size: 20px; font-weight: 800; font-style: italic; }
.app-topline em span { color: var(--orange); }
.app-topline b { font-size: 12px; font-weight: 600; }
.vehicle-card, .system-card, .metrics > div, .history-item {
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.vehicle-card { position: relative; min-height: 180px; padding: 14px; border-radius: 15px; }
.vehicle-card small, .vehicle-card strong, .vehicle-card span, .vehicle-card i { display: block; }
.vehicle-card strong { margin-top: 2px; font-size: 13px; }
.vehicle-card span { color: #8d98a6; font-size: 10px; }
.vehicle-card i { position: absolute; bottom: 13px; left: 14px; color: var(--green); font-size: 9px; font-style: normal; }
.car-silhouette { margin: 22px 4px 0; padding: 17px 0; border-radius: 10px; color: rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,106,0,.07)); text-align: center; letter-spacing: .2em; font-size: 10px; }
.system-card { margin: 12px 0; padding: 13px; border-radius: 14px; }
.system-card span, .metrics span { display: block; color: #9ca7b5; font-size: 9px; }
.system-card strong { color: var(--green); font-size: 9px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.metrics > div { min-height: 78px; padding: 11px; border-radius: 13px; }
.metrics strong { display: block; margin-top: 5px; font-size: 19px; }
.ok { color: var(--green); }
.accent { color: var(--orange); }
.bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; padding: 17px; border-top: 1px solid rgba(255,255,255,.06); color: #8f9aa7; text-align: center; font-size: 15px; }

.history-screen { padding-top: 37px; }
.history-title { display: flex; justify-content: space-between; margin: 4px 6px 25px; font-size: 18px; font-style: italic; }
.history-item { display: grid; grid-template-columns: 24px 1fr 12px; align-items: center; gap: 8px; margin: 10px 0; padding: 15px 12px; border-radius: 12px; }
.history-item i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font-size: 10px; font-style: normal; }
.history-item b, .history-item small { display: block; }
.history-item b { font-size: 10px; }
.history-item small { color: var(--green); font-size: 8px; }
.history-item.warning i { border-color: var(--orange); color: var(--orange); }
.history-item.warning small { color: var(--orange); }

.cloud-orb { position: absolute; z-index: 4; right: -4%; bottom: 20px; width: 170px; text-align: center; filter: drop-shadow(0 0 22px rgba(0,215,255,.28)); }
.cloud-orb > span { display: grid; width: 124px; height: 82px; place-items: center; margin: 0 auto 8px; border: 2px solid var(--cyan); border-radius: 55% 55% 45% 45%; color: var(--cyan); font-size: 38px; background: rgba(0,64,82,.2); }
.cloud-orb strong, .cloud-orb small { display: block; }
.cloud-orb small { margin-top: 4px; color: #a9c8d0; }

.section { padding: 62px 0; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(13,20,29,.86), rgba(7,12,18,.88)); box-shadow: var(--shadow); }
.feature-card { min-height: 260px; padding: 30px 24px; border-right: 1px solid var(--line); }
.feature-card:last-child { border-right: none; }
.feature-card:hover { background: rgba(255,106,0,.045); }
.feature-icon { display: block; margin-bottom: 24px; color: var(--orange); font-size: 32px; }
.feature-icon.cyan, .cyan { color: var(--cyan) !important; }
.feature-card h2 { margin: 0 0 12px; font-size: 18px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }

.stats-section { padding-top: 0; }
.stats-panel { position: relative; z-index: 1; display: grid; grid-template-columns: 1.7fr repeat(4, .78fr); min-height: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(12,18,27,.88), rgba(6,10,15,.94)); }
.vehicle-outline { position: relative; display: grid; place-items: center; min-height: 220px; border-right: 1px solid var(--line); color: rgba(255,106,0,.45); }
.vehicle-line { width: 78%; height: 92px; border: 2px solid rgba(255,255,255,.12); border-top-left-radius: 55% 70%; border-top-right-radius: 48% 60%; border-bottom: none; transform: skewX(-8deg); }
.vehicle-outline span { position: absolute; color: rgba(255,106,0,.68); font-weight: 800; letter-spacing: .1em; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--line); text-align: center; }
.stat:last-child { border-right: none; }
.stat > span { color: var(--orange); font-size: 30px; }
.stat strong { margin: 8px 0 4px; color: var(--orange); font-size: 30px; }
.stat small { color: var(--muted); }

.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 42px; border: 1px solid rgba(255,106,0,.28); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,106,0,.09), rgba(7,12,18,.9)); }
.download-panel h2 { margin: 16px 0 10px; font-size: clamp(28px, 3vw, 44px); }
.download-panel p { max-width: 790px; margin: 0; color: var(--muted); }

.site-footer { margin-top: 34px; padding: 64px 0 24px; border-top: 1px solid var(--line); background: #03060a; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 58px; }
.footer-logo { width: 250px; }
.footer-grid p { max-width: 460px; color: var(--muted); }
.footer-grid h3 { margin: 0 0 18px; color: white; font-size: 15px; }
.footer-grid a { display: block; margin: 10px 0; color: var(--muted); font-size: 14px; }
.footer-grid a:hover { color: var(--orange); }
.copyright { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); color: #697583; font-size: 13px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1240px) {
    .container { width: min(1160px, calc(100% - 40px)); }
    .brand { flex-basis: 220px; }
    .brand-full { width: 220px; }
    .main-nav { gap: 18px; }
    .main-nav a { font-size: 13px; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-card { border-bottom: 1px solid var(--line); }
    .feature-card:nth-child(3n) { border-right: none; }
    .feature-card:nth-child(n+4) { border-bottom: none; }
}

@media (max-width: 980px) {
    .header-inner { min-height: 82px; }
    .brand { flex: 1; }
    .brand-full { width: 220px; }
    .menu-toggle { display: block; }
    .main-nav {
        position: absolute;
        top: 82px;
        left: 20px;
        right: 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(5,8,13,.98);
        box-shadow: var(--shadow);
    }
    .main-nav.open { display: flex; }
    .main-nav a { padding: 13px 10px; }
    .header-actions { display: none; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { text-align: center; }
    .hero-copy > p { margin-left: auto; margin-right: auto; }
    .hero-actions, .trust-row { justify-content: center; }
    .hero-visual { width: min(720px, 100%); margin: 0 auto; }
    .stats-panel { grid-template-columns: repeat(4, 1fr); }
    .vehicle-outline { display: none; }
}

@media (max-width: 680px) {
    .container { width: min(100% - 24px, 1420px); }
    .brand-full { display: none; }
    .brand-mark { display: block; }
    .hero { min-height: auto; padding-top: 54px; }
    .hero h1 { font-size: clamp(42px, 13vw, 62px); }
    .hero-copy > p { font-size: 17px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .trust-row { align-items: flex-start; flex-direction: column; gap: 12px; text-align: left; }
    .hero-visual { min-height: 520px; transform: scale(.86); transform-origin: top center; margin-bottom: -70px; }
    .device-main { left: 0; width: 300px; height: 560px; }
    .device-secondary { right: -46px; width: 255px; height: 515px; }
    .cloud-orb { right: -30px; bottom: 35px; transform: scale(.8); }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card, .feature-card:nth-child(3n), .feature-card:nth-child(n+4) { min-height: auto; border-right: none; border-bottom: 1px solid var(--line); }
    .feature-card:last-child { border-bottom: none; }
    .stats-panel { grid-template-columns: repeat(2, 1fr); }
    .stat { min-height: 170px; border-bottom: 1px solid var(--line); }
    .stat:nth-child(2n) { border-right: none; }
    .stat:nth-last-child(-n+2) { border-bottom: none; }
    .download-panel { align-items: stretch; flex-direction: column; padding: 30px 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}


.section-heading{max-width:850px;margin:0 auto 38px;text-align:center}
.section-heading h2{margin:18px 0 12px;font-size:clamp(32px,4vw,54px);letter-spacing:-.035em}
.section-heading p{margin:0;color:var(--muted);font-size:18px}
.product-preview{padding-top:88px}
.dashboard-demo{display:grid;grid-template-columns:72px 1fr;min-height:560px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:radial-gradient(circle at 72% 20%,rgba(0,215,255,.07),transparent 28%),linear-gradient(145deg,#0c121b,#070b11);box-shadow:0 35px 100px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.04)}
.demo-sidebar{display:flex;align-items:center;flex-direction:column;gap:22px;padding:20px 12px;border-right:1px solid var(--line);background:rgba(3,6,10,.65)}
.demo-sidebar img{width:42px;height:42px;object-fit:contain;margin-bottom:18px}
.demo-sidebar span{display:grid;width:40px;height:40px;place-items:center;border-radius:10px;color:#768291}
.demo-sidebar span.active{color:var(--orange);background:rgba(255,106,0,.11);box-shadow:inset 0 0 0 1px rgba(255,106,0,.2)}
.demo-content{padding:34px}.demo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.demo-head small{color:var(--muted)}.demo-head h3{margin:3px 0 0;font-size:28px}
.cloud-online{padding:10px 14px;border:1px solid rgba(0,215,255,.22);border-radius:10px;color:var(--cyan);background:rgba(0,215,255,.055);font-size:13px}
.demo-grid{display:grid;grid-template-columns:1.55fr .8fr;gap:18px}
.demo-car,.demo-side article,.sensor-row article{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.demo-car{padding:22px}.demo-car-top{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.demo-car-top b{color:var(--green);font-weight:600}
.demo-car h4{margin:18px 0 2px;font-size:24px}.demo-car p{margin:0;color:var(--muted);font-size:13px}
.demo-car-art{display:grid;height:150px;place-items:center;margin:22px 0;border-radius:13px;color:rgba(255,106,0,.38);background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,106,0,.07));font-weight:900;letter-spacing:.32em}
.demo-car-meta{display:flex;gap:34px;color:var(--muted);font-size:12px}.demo-car-meta strong{display:block;margin-top:2px;color:white;font-size:16px}
.demo-side{display:grid;gap:12px}.demo-side article{display:flex;justify-content:center;flex-direction:column;padding:18px}.demo-side small,.demo-side span{color:var(--muted);font-size:11px}
.demo-side strong{display:block;margin:5px 0;font-size:15px}.health-bar{height:4px;margin-top:10px;overflow:hidden;border-radius:99px;background:#1b2430}.health-bar i{display:block;width:96%;height:100%;background:var(--green)}
.demo-side .cloud-card{border-color:rgba(0,215,255,.18);background:rgba(0,215,255,.035)}.demo-side .cloud-card strong{color:var(--cyan)}
.sensor-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.sensor-row article{padding:16px}.sensor-row span{display:block;color:var(--muted);font-size:11px}.sensor-row strong{display:block;margin:4px 0 13px;font-size:18px}
.sensor-row i{display:block;width:var(--v);height:3px;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--orange-light));box-shadow:0 0 12px rgba(255,106,0,.4)}
.inner-hero{padding:110px 0 80px;text-align:center}.inner-hero .container{position:relative;z-index:1}.inner-hero h1{max-width:1000px;margin:22px auto 18px;font-size:clamp(44px,6vw,78px);line-height:1.04;letter-spacing:-.045em}.inner-hero p{max-width:820px;margin:0 auto;color:var(--muted);font-size:19px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.detail-card{min-height:260px;padding:32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(15,22,32,.82),rgba(7,11,17,.92))}
.detail-card>span{color:var(--orange);font-size:28px}.detail-card.cyan-card>span{color:var(--cyan)}.detail-card h2{margin:20px 0 10px;font-size:25px}.detail-card p{color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(7,auto);align-items:center;justify-content:center;gap:16px;margin:40px 0}.flow-box{min-width:150px;padding:24px 18px;border:1px solid var(--line);border-radius:15px;background:var(--panel);text-align:center}.flow-box strong,.flow-box small{display:block}.flow-box small{color:var(--muted)}.flow-arrow{color:var(--orange);font-size:24px}.flow-box.cloudbox{border-color:rgba(0,215,255,.3);color:var(--cyan)}
@media(max-width:820px){.dashboard-demo{grid-template-columns:1fr}.demo-sidebar{display:none}.demo-grid{grid-template-columns:1fr}.sensor-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center}}
@media(max-width:520px){.demo-content{padding:20px 14px}.demo-head{align-items:flex-start;flex-direction:column;gap:14px}.cloud-online{width:100%}.demo-car-top{gap:10px;flex-direction:column}}

.feature-link { display:block; }
.feature-link b { display:block; margin-top:20px; color:var(--orange); font-size:13px; }

.content-shell { max-width: 980px; margin: 0 auto; }
.content-card {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15,22,32,.84), rgba(7,11,17,.94));
}
.content-card + .content-card { margin-top: 18px; }
.content-card h2 { margin: 0 0 14px; font-size: 25px; }
.content-card h3 { margin: 26px 0 10px; font-size: 18px; }
.content-card p, .content-card li { color: var(--muted); }
.content-card ul { padding-left: 20px; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.plan-card {
    position: relative;
    display: flex;
    min-height: 460px;
    flex-direction: column;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15,22,32,.86), rgba(7,11,17,.96));
}
.plan-card.featured {
    border-color: rgba(255,106,0,.65);
    box-shadow: 0 25px 70px rgba(255,106,0,.13);
}
.plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--orange);
    background: rgba(255,106,0,.1);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.plan-card h2 { margin: 10px 0 4px; font-size: 27px; }
.plan-card .plan-price { margin: 14px 0 24px; color: white; font-size: 36px; font-weight: 800; }
.plan-card .plan-price small { color: var(--muted); font-size: 13px; font-weight: 500; }
.plan-card ul { margin: 0 0 28px; padding: 0; list-style: none; }
.plan-card li { margin: 12px 0; color: #b8c1cc; font-size: 14px; }
.plan-card li::before { margin-right: 9px; color: var(--green); content: "✓"; }
.plan-card .button { margin-top: auto; }

.auth-wrap {
    width: min(520px, calc(100% - 24px));
    margin: 78px auto 100px;
}
.auth-card {
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(14,21,30,.94), rgba(6,10,15,.98));
    box-shadow: 0 32px 90px rgba(0,0,0,.45);
}
.auth-logo { display: block; width: 235px; margin: 0 auto 28px; }
.auth-card h1 { margin: 0 0 8px; text-align: center; font-size: 30px; }
.auth-card > p { margin: 0 0 28px; color: var(--muted); text-align: center; }
.form-field { margin: 17px 0; }
.form-field label { display: block; margin-bottom: 7px; color: #cbd3dc; font-size: 13px; font-weight: 700; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    color: white;
    background: rgba(255,255,255,.025);
    font: inherit;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255,106,0,.09);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-card .button { width: 100%; margin-top: 10px; }
.form-note { margin-top: 20px !important; font-size: 13px; }
.form-note a { color: var(--orange); }
.api-note {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(0,215,255,.18);
    border-radius: 10px;
    color: #9ecbd4;
    background: rgba(0,215,255,.035);
    font-size: 12px;
}

.support-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 20px; }
.support-options { display: grid; gap: 14px; }
.support-option {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}
.support-option span { color: var(--orange); font-size: 24px; }
.support-option h3 { margin: 10px 0 5px; }
.support-option p { margin: 0; color: var(--muted); font-size: 14px; }
.support-option a { display: inline-block; margin-top: 12px; color: var(--orange); font-size: 13px; }

.faq-list details {
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}
.faq-list summary { padding: 17px 18px; cursor: pointer; font-weight: 700; }
.faq-list p { padding: 0 18px 18px; margin: 0; color: var(--muted); }

.legal-meta { margin-bottom: 22px; color: #697583; font-size: 13px; }

@media (max-width: 900px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .auth-card, .content-card, .plan-card { padding: 24px 18px; }
    .form-row { grid-template-columns: 1fr; }
}

.form-message {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
}
.form-message.error { border: 1px solid rgba(255,88,88,.28); color: #ffaaaa; background: rgba(255,70,70,.07); }
.form-message.success { border: 1px solid rgba(75,214,109,.28); color: #9be8ad; background: rgba(75,214,109,.07); }

.account-hero { padding-bottom: 52px; }
.account-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.account-card {
    min-height:250px; padding:28px; border:1px solid var(--line); border-radius:18px;
    background:linear-gradient(145deg,rgba(15,22,32,.86),rgba(7,11,17,.96));
}
.account-card small { display:block; margin-top:14px; color:var(--muted); }
.account-card h2 { margin:6px 0 12px; font-size:24px; }
.account-card p { color:var(--muted); }
.account-card a { color:var(--orange); font-size:13px; font-weight:700; }
.account-icon { color:var(--orange); font-size:27px; }
.cloud-account-card { border-color:rgba(0,215,255,.18); }
.account-status { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.account-status span { padding:8px 10px; border-radius:8px; font-size:12px; }
.status-ok { color:#9be8ad; background:rgba(75,214,109,.08); border:1px solid rgba(75,214,109,.18); }
.status-warn { color:#ffc28f; background:rgba(255,106,0,.08); border:1px solid rgba(255,106,0,.18); }
@media(max-width:720px){.account-grid{grid-template-columns:1fr}}

.account-header .main-nav a.active-account-link {
    color: var(--orange);
}
.account-header .main-nav a.active-account-link::after {
    right: 0;
}
.account-card-link {
    display: block;
}
.account-card-link:hover {
    transform: translateY(-3px);
    border-color: rgba(255,106,0,.35);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.account-card-link b {
    display: block;
    margin-top: 18px;
    color: var(--orange);
    font-size: 13px;
}
.garage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.garage-card, .garage-loading {
    min-height: 260px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15,22,32,.86), rgba(7,11,17,.96));
}
.garage-loading {
    display: grid;
    place-items: center;
    color: var(--muted);
}
.garage-card .vehicle-state {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(75,214,109,.18);
    border-radius: 8px;
    color: #9be8ad;
    background: rgba(75,214,109,.06);
    font-size: 11px;
}
.garage-card h2 { margin: 18px 0 4px; font-size: 23px; }
.garage-card .vehicle-sub { color: var(--muted); font-size: 13px; }
.garage-card .vehicle-vin { margin-top: 22px; color: #738091; font-size: 12px; word-break: break-all; }
.garage-empty {
    grid-column: 1 / -1;
    padding: 48px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    color: var(--muted);
    text-align: center;
}
.empty-state { text-align: center; }
.empty-state .account-icon { display:block; margin-bottom:14px; }
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }
.settings-row span { color: var(--muted); }
.compact-footer { margin-top: 30px; padding-top: 8px; }
@media(max-width:1000px){.garage-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
    .garage-grid{grid-template-columns:1fr}
    .account-header .main-nav{max-height:70vh;overflow:auto}
    .settings-row{align-items:flex-start;flex-direction:column;gap:6px}
}

.fox-cloud-main {
    padding-top: 92px;
}
.fox-cloud-main .section-heading {
    margin-bottom: 48px;
}
@media (max-width: 680px) {
    .fox-cloud-main {
        padding-top: 58px;
    }
}


/* AutoFox v7 — VIN garage flow */
.garage-hero-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.garage-add-button {
    flex: 0 0 auto;
    margin-bottom: 8px;
}
.modal-backdrop[hidden] { display: none !important; }
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(1, 4, 8, .82);
    backdrop-filter: blur(12px);
}
.modal-card {
    position: relative;
    width: min(100%, 610px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background: linear-gradient(145deg, #101720, #070b11);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.vehicle-preview-modal { width: min(100%, 850px); }
.modal-card h2 { margin: 8px 0 10px; font-size: 30px; }
.modal-description { margin: 0 0 26px; color: var(--muted); line-height: 1.6; }
.modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    color: #aab4c0;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,.09); color: #fff; }
.vin-form { position: relative; }
.vin-form label {
    display: block;
    margin-bottom: 9px;
    color: #cdd5df;
    font-size: 13px;
    font-weight: 700;
}
.vin-form input {
    width: 100%;
    height: 56px;
    padding: 0 62px 0 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    outline: none;
    background: #080d13;
    color: #fff;
    font: 600 16px/1 monospace;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.vin-form input:focus {
    border-color: rgba(255,106,0,.65);
    box-shadow: 0 0 0 3px rgba(255,106,0,.09);
}
.vin-counter {
    position: absolute;
    top: 45px;
    right: 16px;
    color: #697583;
    font-size: 12px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 26px;
}
.vehicle-preview {
    display: grid;
    grid-template-columns: minmax(250px, 340px) 1fr;
    gap: 28px;
    margin-top: 24px;
}
.vehicle-preview-image {
    min-height: 245px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,106,0,.08), transparent 45%),
        #080d13;
}
.vehicle-preview-image img {
    width: 100%;
    height: 100%;
    min-height: 245px;
    object-fit: cover;
}
.vehicle-placeholder {
    display: grid;
    place-items: center;
    gap: 8px;
    color: #53606e;
}
.vehicle-placeholder span { font-size: 62px; color: #394552; }
.vehicle-placeholder small { text-transform: uppercase; letter-spacing: 2px; }
.vehicle-preview-content h3 {
    margin: 0 0 5px;
    font-size: 27px;
}
.preview-vin {
    margin-bottom: 20px;
    color: #758291;
    font: 500 12px/1.5 monospace;
}
.vehicle-specs {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
}
.vehicle-specs .spec-row {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.vehicle-specs dt { color: #758291; font-size: 12px; }
.vehicle-specs dd { margin: 0; color: #d8dee6; font-size: 13px; }
.image-processing-note {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(67,193,255,.14);
    border-radius: 10px;
    background: rgba(67,193,255,.05);
    color: #8ba5b8;
    font-size: 12px;
    line-height: 1.5;
}
.button[disabled] { opacity: .55; cursor: wait; }
body.modal-open { overflow: hidden; }

@media (max-width: 760px) {
    .garage-hero-row { align-items: stretch; flex-direction: column; }
    .garage-add-button { width: 100%; margin-bottom: 0; }
    .vehicle-preview { grid-template-columns: 1fr; }
    .vehicle-preview-image { min-height: 210px; }
    .modal-card { padding: 26px 20px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .button { width: 100%; }
}


/* AutoFox v8 — manual garage fallback and live vehicle images */
.garage-hero-row {
    align-items: center;
}
.manual-entry-link {
    display: inline-block;
    margin-top: 11px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--orange);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.manual-entry-link:hover { text-decoration: underline; }

.manual-reference-note {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(0,215,255,.12);
    border-radius: 10px;
    background: rgba(0,215,255,.035);
    color: #8094a4;
    font-size: 12px;
    line-height: 1.5;
}

.garage-card {
    overflow: hidden;
    padding: 0;
}
.garage-card-image {
    position: relative;
    height: 190px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 50% 45%, rgba(255,106,0,.07), transparent 42%),
        #080d13;
}
.garage-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    padding: 8px;
}
.garage-card-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: #4e5a67;
}
.garage-card-placeholder span {
    color: #36414d;
    font-size: 46px;
}
.garage-card-placeholder small {
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}
.garage-card-body {
    padding: 22px;
}
.garage-card .vehicle-state {
    margin-bottom: 3px;
}
.garage-card-image-status {
    position: absolute;
    right: 11px;
    bottom: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 7px;
    background: rgba(4,8,12,.78);
    color: #778594;
    font-size: 10px;
    backdrop-filter: blur(6px);
}


/* AutoFox v9 — remove vehicle from garage */
.garage-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.vehicle-delete-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(255,94,94,.18);
    border-radius: 8px;
    background: rgba(255,64,64,.035);
    color: #bd7777;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.vehicle-delete-button:hover {
    border-color: rgba(255,94,94,.42);
    background: rgba(255,64,64,.08);
    color: #ff9c9c;
}
.button-danger {
    border-color: #b94848;
    background: linear-gradient(135deg, #c84444, #9f3030);
    color: #fff;
    box-shadow: 0 12px 30px rgba(190,55,55,.18);
}
.button-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(190,55,55,.27);
}
.danger-eyebrow {
    border-color: rgba(255,94,94,.45);
    color: #ff8585;
}
.delete-warning {
    margin: 20px 0 6px;
    padding: 13px 14px;
    border: 1px solid rgba(255,94,94,.13);
    border-radius: 10px;
    background: rgba(255,60,60,.045);
    color: #ab8585;
    font-size: 12px;
    line-height: 1.55;
}
.delete-vehicle-modal {
    width: min(100%, 560px);
}


/* AutoFox v10 — show full vehicle photo in garage cards */
.garage-card-image {
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.035), transparent 55%),
        #080d13;
}
.garage-card-image img {
    background: transparent;
}


/* AutoFox v11 — compact garage cards + editing */
.garage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.garage-card {
    min-height: 0;
    border-radius: 15px;
}

.garage-card-image {
    height: 165px;
    background: #090e14;
}

.garage-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    padding: 2px;
}

.garage-card-body {
    padding: 17px 18px 15px;
}

.garage-card h2 {
    margin: 13px 0 3px;
    font-size: 19px;
    line-height: 1.2;
}

.garage-card .vehicle-sub {
    min-height: 36px;
    font-size: 11px;
    line-height: 1.45;
}

.garage-card .vehicle-vin {
    margin-top: 13px;
    font-size: 10px;
}

.garage-card-actions {
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
}

.vehicle-edit-button,
.vehicle-delete-button {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 10px;
}

.vehicle-edit-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,106,0,.20);
    border-radius: 8px;
    background: rgba(255,106,0,.04);
    color: #d79767;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.vehicle-edit-button:hover {
    border-color: rgba(255,106,0,.45);
    background: rgba(255,106,0,.09);
    color: #ffad72;
}

.edit-vehicle-modal {
    width: min(100%, 650px);
}

@media (max-width: 1120px) {
    .garage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .garage-grid {
        grid-template-columns: 1fr;
    }
    .garage-card-image {
        height: 190px;
    }
}


/* AutoFox v12 — approved garage card layout */
.account-page .section:has(.garage-grid) .container {
    width: min(1180px, calc(100% - 40px));
}

.garage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.garage-card {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(155deg, #0c131c, #080d13);
}

.garage-card-image {
    width: calc(100% - 22px);
    height: 200px;
    margin: 11px 11px 0;
    overflow: hidden;
    border: 0;
    border-radius: 9px;
    background: #0a0f15;
}

.garage-card-image img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 9px;
    background: #0a0f15;
}

.garage-card-body {
    display: flex;
    min-height: 390px;
    flex-direction: column;
    padding: 15px 16px 16px;
}

.garage-card .vehicle-state {
    align-self: flex-start;
    margin: 0 0 13px;
    padding: 6px 9px;
}

.garage-card h2 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.2;
}

.garage-spec-table {
    width: 100%;
    margin-bottom: 18px;
}

.garage-spec-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.garage-spec-row:last-child {
    border-bottom: 0;
}

.garage-spec-row span {
    color: #8793a1;
    font-size: 12px;
    font-weight: 400;
}

.garage-spec-row strong {
    min-width: 0;
    color: #dce3ea;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.garage-card-actions {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: 9px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 0;
}

.vehicle-edit-button,
.vehicle-delete-button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    border-radius: 9px;
    font-size: 11px;
}

.vehicle-edit-button {
    border-color: rgba(185,198,211,.22);
    background: rgba(255,255,255,.018);
    color: #e5e9ee;
}

.vehicle-edit-button:hover {
    border-color: rgba(255,106,0,.42);
    background: rgba(255,106,0,.07);
    color: #fff;
}

.vehicle-delete-button {
    border-color: rgba(255,72,72,.38);
    background: rgba(255,50,50,.025);
    color: #ff6969;
}

.vehicle-delete-button:hover {
    border-color: rgba(255,72,72,.72);
    background: rgba(255,50,50,.07);
    color: #ff8b8b;
}

@media (max-width: 1080px) {
    .garage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .account-page .section:has(.garage-grid) .container {
        width: min(100% - 24px, 1180px);
    }

    .garage-grid {
        grid-template-columns: 1fr;
    }

    .garage-card-image {
        height: 220px;
    }

    .garage-card-body {
        min-height: 0;
    }
}


/* AutoFox v13 — garage layout matched to approved mockup */
.account-page .account-hero {
    padding: 34px 0 18px;
    min-height: auto;
}

.account-page .account-hero .garage-hero-row {
    width: min(1320px, calc(100% - 44px));
    align-items: center;
}

.account-page .account-hero h1 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.account-page .account-hero p {
    margin: 0;
    font-size: 15px;
}

.account-page .garage-add-button {
    min-height: 52px;
    padding: 0 26px;
    margin: 0;
}

/* Wider usable canvas, but each card remains relatively narrow. */
.account-page .section:has(.garage-grid) {
    padding-top: 18px;
}

.account-page .section:has(.garage-grid) .container {
    width: min(1320px, calc(100% - 44px));
}

.garage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/* Approved card proportions */
.garage-card {
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(145,160,177,.22);
    background: linear-gradient(155deg, #0c131c, #080d13);
}

/*
 * The image box uses the full inner width of the card.
 * We do not crop the vehicle: contain is preserved.
 * The height is selected to closely match common 16:9 / 3:2 vehicle photos,
 * minimizing unused bars while retaining the complete car.
 */
.garage-card-image {
    width: calc(100% - 16px);
    height: 210px;
    margin: 8px 8px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #090e14;
}

.garage-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 8px;
    object-fit: contain;
    object-position: center center;
    background: #090e14;
}

.garage-card-body {
    min-height: 430px;
    padding: 12px 14px 14px;
}

.garage-card .vehicle-state {
    margin-bottom: 13px;
}

.garage-card h2 {
    margin-bottom: 11px;
    font-size: 20px;
}

.garage-spec-row {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 1px;
}

.garage-spec-row span,
.garage-spec-row strong {
    font-size: 12px;
}

.garage-card-actions {
    grid-template-columns: 1.08fr .92fr;
    gap: 8px;
    padding-top: 16px;
}

.vehicle-edit-button,
.vehicle-delete-button {
    min-height: 43px;
    font-size: 11px;
}

/* Ensure the real photo area looks like the approved render even for portrait-ish source images. */
.garage-card-image:has(img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 1150px) {
    .garage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .garage-card-image {
        height: 230px;
    }
}

@media (max-width: 720px) {
    .account-page .account-hero .garage-hero-row,
    .account-page .section:has(.garage-grid) .container {
        width: min(100% - 24px, 1320px);
    }

    .account-page .account-hero .garage-hero-row {
        align-items: stretch;
    }

    .account-page .garage-add-button {
        width: 100%;
    }

    .garage-grid {
        grid-template-columns: 1fr;
    }

    .garage-card-image {
        height: 230px;
    }

    .garage-card-body {
        min-height: 0;
    }
}


/* AutoFox v14 — garage photo uses full card width without cropping */
.garage-card-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #090e14;
}

.garage-card-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    object-fit: initial;
    object-position: initial;
    background: transparent;
}

.garage-card-body {
    min-height: 0;
}

/* Cards keep their own natural height; no artificial empty body space. */
.garage-grid {
    align-items: start;
}

@media (max-width: 1150px) {
    .garage-card-image {
        height: auto;
    }
}

@media (max-width: 720px) {
    .garage-card-image {
        height: auto;
    }
}


/* AutoFox v15 — extended vehicle edit fields */
.field-hint {
    display: block;
    margin-top: 5px;
    color: #657281;
    font-size: 11px;
}


/* AutoFox v16 — editable vehicle color */
#edit-color {
    text-transform: none;
}