/* The public website (templates/site/). Light and dark follow the visitor's device. */
:root { --site-brand: #1d4ed8; --site-brand-ink: #ffffff; --site-soft: #eef2ff; --site-line: #e3e6eb; }
[data-bs-theme="dark"] { --site-brand: #6f95ff; --site-brand-ink: #0d121b; --site-soft: #1b2440; --site-line: #2a3342; }

body.site { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; }
.site .navbar { border-bottom: 1px solid var(--site-line); }
.site .navbar-brand { font-weight: 800; letter-spacing: -.02em; color: var(--site-brand); }
.site .btn-brand { background: var(--site-brand); color: var(--site-brand-ink); border: 0; font-weight: 700; padding: .65rem 1.25rem; min-height: 44px; }
.site .btn-brand:hover { filter: brightness(.92); color: var(--site-brand-ink); }
.site .btn-outline-brand { border: 2px solid var(--site-brand); color: var(--site-brand); font-weight: 700; padding: .6rem 1.2rem; min-height: 44px; }
.site .btn-outline-brand:hover { background: var(--site-brand); color: var(--site-brand-ink); }

.hero { padding: 72px 0 56px; text-align: center; background: var(--site-soft); }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.hero .lead { max-width: 680px; margin: 1rem auto 1.75rem; color: var(--bs-secondary-color); }
.section { padding: 56px 0; }
.section h2 { font-weight: 800; letter-spacing: -.01em; text-align: center; margin-bottom: .5rem; }
.section .sub { text-align: center; color: var(--bs-secondary-color); max-width: 640px; margin: 0 auto 2rem; }

.tile { height: 100%; border: 1px solid var(--site-line); border-radius: 16px; padding: 24px; background: var(--bs-body-bg); }
.tile i { font-size: 1.8rem; color: var(--site-brand); }
.tile h3 { font-size: 1.15rem; font-weight: 700; margin: .75rem 0 .35rem; }
.tile p { margin: 0; color: var(--bs-secondary-color); font-size: .95rem; }
.tile.choice { display: flex; flex-direction: column; gap: .75rem; padding: 32px; }
.tile.choice h2 { text-align: left; font-size: 1.5rem; margin: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 16px; }
.steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; }
.steps li::before { content: counter(step); flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--site-brand); color: var(--site-brand-ink); display: grid; place-items: center; font-weight: 800; }

.cta-band { background: var(--site-brand); color: var(--site-brand-ink); text-align: center; padding: 56px 0; }
.cta-band .btn { background: var(--site-brand-ink); color: var(--site-brand); font-weight: 700; min-height: 44px; }

.site footer { border-top: 1px solid var(--site-line); padding: 32px 0; color: var(--bs-secondary-color); font-size: .9rem; }
.site footer a { color: inherit; }
.site .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.site .faq-item summary { cursor: pointer; font-weight: 600; padding: 1rem 0; }
.site .legal h2 { text-align: left; font-size: 1.25rem; margin-top: 2rem; }

/* the marketplace header is a slim bar: its buttons are small, not the large sales-site buttons */
.site .mp-nav .btn { padding: .3rem .85rem; min-height: 34px; font-size: .9rem; }
.site .mp-nav .btn-outline-brand { border-width: 1px; padding: .28rem .8rem; }

/* the light / dark switch: a sun outline in the light theme, a moon in the dark one */
.theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--site-line); border-radius: 999px; background: transparent; color: var(--bs-body-color); cursor: pointer; font-size: 1.05rem; }
.theme-toggle:hover { background: rgba(128, 128, 128, .15); }
.theme-toggle .tt-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .tt-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .tt-moon { display: inline; }

/* an uploaded body-style icon is a dark drawing: it is light on a dark page */
[data-bs-theme="dark"] .vph-img { mix-blend-mode: screen !important; filter: invert(1) grayscale(1) !important; }

/* the built-in grey vehicle drawing (shown where there is no photo and no uploaded icon): lighter on a dark page so it stays visible */
[data-bs-theme="dark"] svg.vph [fill="#626a72"] { fill: #9aa5b1; }
[data-bs-theme="dark"] svg.vph [fill="#eef1f3"] { fill: #1b2229; }
[data-bs-theme="dark"] svg.vph [stroke="#eef1f3"] { stroke: #1b2229; }

/* a body style can have its own icon for each theme: only the one for the current theme shows */
.vph-dark-only { display: none; }
[data-bs-theme="dark"] .vph-dark-only { display: inline-block; }
[data-bs-theme="dark"] .vph-light-only { display: none; }