/* Site appearance inspired by the car's driving modes. Vehicle facts stay fixed. */
html[data-drive-mode="eco"] {
  --accent: #08704e; --accent-2: #08704e; --mode-glow: rgba(62,211,157,.18);
  --accent-soft: rgba(8,112,78,.12); --accent-line: rgba(8,112,78,.4); --mode-bright: #7ee7bd;
}
html[data-drive-mode="standard"] {
  --accent: #425b76; --accent-2: #425b76; --mode-glow: rgba(138,177,211,.17);
  --accent-soft: rgba(66,91,118,.12); --accent-line: rgba(66,91,118,.4); --mode-bright: #c0d4e7;
}
html[data-drive-mode="sport"] {
  --accent: #a63e0a; --accent-2: #a63e0a; --mode-glow: rgba(255,143,56,.2);
  --accent-soft: rgba(166,62,10,.12); --accent-line: rgba(166,62,10,.4); --mode-bright: #ffba7d;
}
html[data-drive-mode="n"] {
  --accent: #b51932; --accent-2: #b51932; --mode-glow: rgba(120,197,234,.24);
  --accent-soft: rgba(181,25,50,.12); --accent-line: rgba(181,25,50,.4); --mode-bright: #a9def6;
}
.drive-mode-panel {
  margin: 0 0 24px; padding: 16px; max-width: 520px;
  background: rgba(8,13,20,.88); border: 1px solid var(--accent-line); border-radius: 18px;
  box-shadow: 0 12px 48px var(--mode-glow);
}
.drive-mode-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font:700 .7rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mode-bright); }
.drive-mode-heading span:last-child { color:#b7c2d0; font-weight:400; }
.drive-mode-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.drive-mode-buttons button {
  min-width:0; min-height:44px; padding:9px 6px; border:1px solid #4a5665;
  background:#151e2a; color:#eef4fc; border-radius:10px; cursor:pointer; font-weight:750;
}
.drive-mode-buttons button[aria-pressed="true"] { background:var(--mode-bright); color:#101924; border-color:var(--mode-bright); }
.drive-mode-buttons button:focus-visible { outline:3px solid white; outline-offset:3px; }
.drive-mode-description { min-height:2.5em; margin:10px 0 0; color:#c5d0dc; font-size:.82rem; }
html[data-drive-mode] .btn-primary { box-shadow:0 12px 30px var(--mode-glow); }
html[data-drive-mode] .hero-card { border-color:var(--accent-line); box-shadow:0 24px 80px var(--mode-glow); }
html[data-drive-mode] .brand-mark { background:var(--accent); }
html[data-drive-mode] .motion-card figcaption span { color:var(--mode-bright); }
html[data-drive-mode="n"] .drive-mode-panel { border-top:3px solid #a9def6; border-bottom:3px solid #b51932; }
html[data-drive-mode="eco"] { scroll-behavior:auto; }
html[data-drive-mode="eco"] .hero::before { transform:none; }
html[data-drive-mode="eco"] .reveal-target { opacity:1; transform:none; transition:none; }
html[data-drive-mode="eco"] .brand-mark, html[data-drive-mode="eco"] .status-dot { animation:none; }
html[data-drive-mode="eco"] .motion-stage { perspective:none; }
/* ECO presents the same photos as a quiet grid, with no scroll-driven transforms. */
html[data-drive-mode="eco"] .motion-section { height:auto; min-height:0; }
html[data-drive-mode="eco"] .motion-sticky { position:relative; height:auto; min-height:0; padding:60px 0; }
html[data-drive-mode="eco"] .motion-stage { height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
html[data-drive-mode="eco"] .motion-layout { min-height:0; grid-template-columns:1fr; padding-top:0; padding-bottom:0; }
html[data-drive-mode="eco"] .motion-stage { width:100%; aspect-ratio:auto; }
html[data-drive-mode="eco"] .motion-card { position:relative; inset:auto; width:100%; height:260px; margin:0; transform:none !important; opacity:1 !important; pointer-events:auto !important; }
html[data-drive-mode="eco"] .motion-hint { display:none; }
@media(max-width:620px) {
  .drive-mode-panel { padding:12px; margin-bottom:20px; }
  .drive-mode-buttons button { font-size:.82rem; }
  html[data-drive-mode="eco"] .motion-stage { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-drive-mode] *, html[data-drive-mode] *::before, html[data-drive-mode] *::after { animation:none !important; scroll-behavior:auto !important; }
}
@media print { .drive-mode-panel { display:none; } }

#marketOffers .market-row { border-bottom:1px solid var(--line); }
#marketOffers small { display:block; max-width:220px; font-size:.7rem; color:#bac4d2; }
.mode-sound-row { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:.72rem; color:#bac4d2; }
.mode-sound-row button { min-height:44px; flex-shrink:0; background:#151e2a; color:#eef4fc; border:1px solid #4a5665; border-radius:10px; padding:8px 12px; cursor:pointer; }
.mode-sound-row a { text-decoration:underline; text-underline-offset:3px; }