/* ─── car-search.ai home: the few things the page adds to the shared system (csai-site.css). Tokens only. ─────── */
.home-hero-poster { position: relative; }
.home-hero-poster .art { margin: 0; }
.home-hero-poster .art svg.ill, .home-hero-poster .art img.ill { border: 0; border-radius: 0; }

/* The marketing row: three cards, each with its own illustration on top */
.mk-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 960px) { .mk-grid { grid-template-columns: repeat(3, 1fr); } }
.mk-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.mk-card .art { margin: 0; border-bottom: 1px solid var(--line); background: var(--mist); }
.mk-card .art img.ill { border: 0; border-radius: 0; }
.mk-card .art figcaption { padding: 6px 12px 8px; }
.mk-card .art .vid { border: 0; border-radius: 0; }
.mk-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mk-body h3 { font-size: 1.08rem; }
.mk-body p { color: var(--muted); font-size: 14.5px; }
.mk-body .cs-pill { align-self: flex-start; margin-bottom: 4px; }

/* The partner band: a dark split */
.partner-band { background: radial-gradient(900px 420px at 85% -10%, var(--blue-glow-soft), transparent 60%), radial-gradient(620px 380px at 5% 100%, var(--amber-glow), transparent 60%), linear-gradient(160deg, var(--navy), var(--ink-deep) 70%); color: var(--hero-fg); }
.partner-band .eyebrow { color: var(--amber-2); }
.partner-band h2 { color: var(--hero-fg); }
.partner-band .lead { color: var(--hero-muted); }
.partner-band .cs-ticks li { color: var(--hero-fg); }
.partner-band .cs-ticks li::before { background: var(--hero-card-hover); }
.partner-band .cs-ticks li::after { border-color: var(--amber-2); }
.partner-band .device { border-color: var(--hero-line); box-shadow: var(--shadow-lg); }

/* Contact: words one side, the form the other */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 48px; } }
.form-done { text-align: center; padding: 24px 8px; }
.form-done .cs-ico { margin: 0 auto 14px; background: var(--blue-wash); color: var(--ok); }
.form-done p { color: var(--muted); margin-top: 8px; }

/* The lead product: the complete dealer website, with its ten reasons (the same grid as /websites/) */
.site-lead .cs-split { margin-bottom: 8px; }
.why-head { margin-top: 44px; }
.why-head h3 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.02em; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; counter-reset: why; }
@media (min-width: 700px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-grid a { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--text); text-decoration: none; box-shadow: var(--shadow); counter-increment: why; }
.why-grid a:hover { border-color: var(--blue-2); }
.why-grid a::before { content: counter(why); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-weight: 800; font-size: 17px; color: var(--on-blue); background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 24px -8px var(--blue-glow); }
.why-grid a:nth-child(-n+6)::before { background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: var(--on-amber); }
.why-grid b, .why-grid span { grid-column: 2; }
.why-grid b { display: block; font-size: 16.5px; color: var(--text); letter-spacing: -.01em; }
.why-grid span { display: block; color: var(--muted); font-size: 14.5px; margin-top: -8px; }
.why-more { justify-content: center; margin-top: 28px; }
.lead-card { border-color: var(--amber); box-shadow: 0 12px 32px -14px var(--amber-glow-strong); }

/* The presentation headlines the hero (owner 2026-10-14): our guide beside a real slide, as on /presentation; a click opens it */
:root { --stage-slide: #1b1c1f; --stage-panel: #e2e0df; }
.btn-ico { width: 15px; height: 15px; fill: currentColor; stroke: none; flex: none; }
.pres-feature { display: block; color: inherit; text-decoration: none; }
.pres-feature .device { transition: transform .25s ease, box-shadow .25s ease; }
.pres-feature:hover .device, .pres-feature:focus-visible .device { transform: translateY(-3px); }
.pres-stage { position: relative; display: grid; grid-template-columns: 1fr 34%; aspect-ratio: 16 / 10; background: var(--stage-slide); overflow: hidden; }
.pres-stage .pres-slide { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.pres-panel { position: relative; background: var(--stage-panel); border-left: 1px solid var(--hero-line); overflow: hidden; }
.pres-stage .pres-her { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }   /* head to feet: the panel crops only the sides */
.pres-play { position: absolute; left: 33%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: var(--on-amber); box-shadow: 0 0 0 10px var(--amber-wash), 0 18px 40px -10px var(--amber-glow-strong); transition: transform .2s ease; }
.pres-play svg { width: 34px; height: 34px; fill: currentColor; stroke: none; margin-left: 4px; }
.pres-feature:hover .pres-play, .pres-feature:focus-visible .pres-play { transform: translate(-50%, -50%) scale(1.07); }
.pres-feature .cs-hero-tag { color: var(--hero-fg); }
@media (max-width: 599px) { .pres-stage { aspect-ratio: 4 / 3; grid-template-columns: 1fr 38%; } .pres-play { width: 68px; height: 68px; } .pres-play svg { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .pres-feature .device, .pres-play { transition: none; } }
@media (max-width: 899px) { .pres-feature { order: -1; } }   /* on a phone or tablet the presentation comes first (audit 2026-10-14: it began 700px down) */
@media (max-width: 599px) { .cs-hero-cta .btn { width: 100%; } }   /* the two hero buttons, equal and full width */