/* VIN decoder shares the home hero and its white cards on a grey band. */
body.sp .vin-page { padding: 0; }
body.sp .site-main:has(> .vin-page) { padding-top: 0; }
.vin-lead { margin: 0; }
body.sp .vin-header { margin: 0; text-align: center; }
.vin-header .sp-home-title { margin: 0 auto; }
body.sp .vin-intro { max-width: 52ch; margin: 18px auto 10px; line-height: var(--sp-lh-body); }
body.sp .vin-intro-small { max-width: 56ch; margin: 0 auto; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); }
.vin-intro-small em, .vin-disclaimer em { font-style: normal; }
body.sp .vin-search-wrap { margin-bottom: 0; padding: 0; background: none; }
body.sp .vin-search { max-width: none; }
body.sp .vin-input { min-width: 0; margin: 0; border: 0; background: transparent; color: var(--sp-ink); font-family: var(--sp-font-plate); }
body.sp .vin-input:focus, body.sp .vin-input:focus-visible { outline: none; box-shadow: none; }
.vin-result-band { margin-bottom: var(--sp-section); }
body.sp .vin-error, body.sp .vin-warning { margin-top: 12px; padding: 12px 16px; border: 0; border-radius: var(--sp-r-sm); font-size: var(--sp-fs-ui); }
body.sp .vin-error { color: var(--sp-bad); background: var(--sp-bad-bg); }
body.sp .vin-warning { color: var(--sp-warn); background: var(--sp-warn-bg); }
body.sp .vin-results { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.vin-selection { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--sp-r-card); background: var(--sp-paper); }
.vin-selection-car { display: flex; gap: 14px; align-items: center; min-width: 0; }
.vin-selection-car > div { min-width: 0; }
.vin-selection-car h2 { overflow-wrap: anywhere; }
.vin-selection-car .sp-car-glyph { width: 48px; height: 48px; background: var(--sp-surface); }
.vin-selection-id { margin: 4px 0 0; font-size: var(--sp-fs-sm); color: var(--sp-ink-soft); overflow-wrap: anywhere; letter-spacing: .025em; }
.vin-selection-action { display: grid; gap: 8px; justify-items: end; }
.vin-selection-action p { margin: 0; font-size: var(--sp-fs-xs); color: var(--sp-ink-soft); }
.vin-selection-error { flex: 1 1 100%; }
body.sp .vin-card { min-width: 0; padding: 28px; border: 0; border-radius: var(--sp-r-card); background: var(--sp-paper); }
body.sp .vin-card-title { margin: 0 0 20px; color: var(--sp-ink); font-size: var(--sp-fs-h3); font-weight: 600; letter-spacing: -.01em; text-align: left; }
body.sp .vin-card-sub { margin: 0 0 14px; color: var(--sp-ink-soft); font-size: var(--sp-fs-sm); }
body.sp .vin-info-table td { padding: 12px 0; color: var(--sp-ink); font-size: var(--sp-fs-ui); }
body.sp .vin-info-table tr:not(:last-child) td { border-bottom: 1px solid var(--sp-line); }
body.sp .vin-info-table .vin-info-label { width: 36%; padding-right: 16px; color: var(--sp-ink-soft); white-space: normal; overflow-wrap: anywhere; }
body.sp .vin-plate-wrap { display: block; width: 100%; }
.vin-equipment-card, .vin-factory-card { grid-column: 1 / -1; }
body.sp .vin-parts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
body.sp .vin-part-item { min-width: 0; gap: 16px; padding: 12px 0; background: transparent; border-radius: 0; border-bottom: 1px solid var(--sp-line); font-size: var(--sp-fs-ui); }
body.sp .vin-part-cat { color: var(--sp-ink); flex-shrink: 1; }
body.sp .vin-part-detail, body.sp .vin-part-code { color: var(--sp-ink-soft); font-size: var(--sp-fs-ui); }
.vin-factory-card { padding: 0 24px; border-radius: var(--sp-r-card); background: var(--sp-paper); }
.vin-factory-card .sp-disclosure-body { padding: 0 0 20px; }
body.sp .vin-features-table { font-size: var(--sp-fs-sm); }
body.sp .vin-features-table thead th { padding: 12px; background: var(--sp-surface); color: var(--sp-ink-soft); border-bottom: 1px solid var(--sp-line); font-size: var(--sp-fs-xs); text-transform: none; letter-spacing: 0; }
body.sp .vin-features-table tbody td { padding: 12px; border-bottom: 1px solid var(--sp-line); color: var(--sp-ink); }
body.sp .vin-features-table tbody tr:hover td { background: var(--sp-surface); }
body.sp .vin-features-table :is(.col-key, .col-filter, .col-code) { font-size: var(--sp-fs-xs); }
body.sp .vin-disclaimer { margin: 16px 0 0; color: var(--sp-ink-soft); font-size: var(--sp-fs-sm); }
body.sp .vin-copy { border-radius: var(--sp-r-sm); transition: background var(--sp-fast); }
body.sp .vin-copy:hover, body.sp .vin-copy:focus-visible { background: var(--sp-surface-2); }
body.sp .vin-copy:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; }
body.sp .vin-copy.vin-copied { background: var(--sp-ok-bg); }
body.sp .vin-copy[data-tip]::after { background: var(--sp-ink); color: var(--sp-paper); font-size: var(--sp-fs-xs); border-radius: var(--sp-r-sm); }
body.sp .vin-copy-toast { background: var(--sp-ink); color: var(--sp-paper); font-size: var(--sp-fs-ui); border-radius: var(--sp-r-pill); transition: opacity var(--sp-fast); }
@media (max-width: 900px) {
    body.sp .vin-results { grid-template-columns: 1fr; gap: 16px; }
    .vin-selection-action { justify-items: start; }
}
@media (max-width: 600px) {
    body.sp .vin-card, .vin-selection { padding: 20px; }
    .vin-factory-card { padding: 0 20px; }
    .vin-selection { display: grid; gap: 20px; }
    .vin-selection-action, .vin-selection-action .sp-btn { width: 100%; }
    .vin-selection-action .sp-btn { padding: 0 16px; font-size: var(--sp-fs-body); }
    .vin-selection-action p { max-width: 36ch; }
    body.sp .vin-parts-list { grid-template-columns: 1fr; }
    body.sp .vin-info-table .vin-info-label { width: 40%; }
    body.sp .vin-info-table td { font-size: var(--sp-fs-sm); }
    body.sp .vin-features-table :is(th, td) { padding: 10px 6px; }
}
@media (max-width: 359px) {
    .vin-page .sp-lookup--hero .sp-plate:not(.has-vin) input { font-size: var(--sp-fs-h2); }
}
@media (prefers-reduced-motion: reduce) {
    body.sp .vin-copy, body.sp .vin-copy-toast { transition: none; }
}