/* TSR v2 — Clean modern direction
   Extracted from the Claude Design v2 artifact (Apr 2026).
   - Single sans family (system stack)
   - Neutral palette + restrained automotive red accent
   - Generous whitespace, minimal hairlines
   - Imagery does the work
*/

:root {
  --v2-bg: #fafaf9;
  --v2-card: #ffffff;
  --v2-ink: #0a0a0a;
  --v2-ink-2: #404040;
  --v2-ink-3: #737373;
  --v2-ink-4: #a3a3a3;
  --v2-rule: #e7e5e4;
  --v2-rule-soft: #f0efed;
  --v2-accent: #dc2626;
  --v2-accent-soft: #fef2f2;
  --v2-success: #10b981;

  --v2-font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --v2-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --v2-shell-max: 1280px;
  --v2-shell-pad: 32px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--v2-bg);
}

.v2-root,
.v2-root * {
  box-sizing: border-box;
}

.v2-root {
  font-family: var(--v2-font);
  color: var(--v2-ink);
  background: var(--v2-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  /* Safety net against any rogue wide descendant escaping the viewport on
     phones. overflow-x: clip (vs hidden) preserves position: sticky on
     nested elements like the nav. Modern browsers only — same support
     window we already use for backdrop-filter. */
  overflow-x: clip;
}

.v2-root a {
  color: inherit;
  text-decoration: none;
}

.v2-mono {
  font-family: var(--v2-mono);
}

.v2-shell {
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  padding-left: var(--v2-shell-pad);
  padding-right: var(--v2-shell-pad);
}

.v2-section { padding-top: 96px; padding-bottom: 96px; }
.v2-section--card { background: var(--v2-card); border-top: 1px solid var(--v2-rule); }
.v2-section--narrow { padding-top: 64px; padding-bottom: 32px; }

/* ========== Buttons ========== */

.v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  text-decoration: none;
  white-space: nowrap;
}
/* Note: chained class selectors (.v2-btn.v2-btn-primary etc.) are intentional.
   Anchor-as-button needs specificity > .v2-root a { color: inherit } so the
   button colour wins instead of inheriting the surrounding text colour. */
.v2-btn.v2-btn-primary {
  background: var(--v2-ink);
  color: var(--v2-bg);
}
.v2-btn.v2-btn-primary:hover { background: #1f1f1f; }
.v2-btn.v2-btn-ghost {
  background: transparent;
  color: var(--v2-ink);
  border-color: var(--v2-rule);
}
.v2-btn.v2-btn-ghost:hover { border-color: var(--v2-ink); }
.v2-btn.v2-btn-on-ink {
  background: var(--v2-bg);
  color: var(--v2-ink);
}
.v2-btn.v2-btn-on-ink:hover { background: #ededec; }
.v2-btn-sm {
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 8px;
}
.v2-btn-md {
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 10px;
}

.v2-link {
  font-size: 14px;
  color: var(--v2-ink-2);
  cursor: pointer;
}
.v2-link:hover { color: var(--v2-ink); }
.v2-link--accent { color: var(--v2-accent); }

/* ========== Pills / chips ========== */

.v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 400;
  background: transparent;
  color: var(--v2-ink-2);
  border: 1px solid var(--v2-rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.v2-pill:hover { border-color: var(--v2-ink-3); }
.v2-pill.is-active {
  background: var(--v2-ink);
  color: var(--v2-bg);
  border-color: var(--v2-ink);
  font-weight: 500;
}
.v2-pill-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.v2-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
}
.v2-tag-verified {
  background: var(--v2-accent-soft);
  color: var(--v2-accent);
}
.v2-tag-status {
  background: var(--v2-ink);
  color: var(--v2-bg);
}
.v2-tag-status .dot {
  width: 6px;
  height: 6px;
  background: var(--v2-success);
  border-radius: 3px;
}

/* ========== Cards ========== */

.v2-card {
  background: var(--v2-card);
  border: 1px solid var(--v2-rule);
  border-radius: 16px;
  padding: 28px;
}
.v2-card--lg { padding: 40px; }
.v2-card--md { padding: 24px; }

/* ========== Eyebrow / mono micro-label ========== */

.v2-eyebrow {
  font-size: 13px;
  color: var(--v2-ink-3);
  font-family: var(--v2-mono);
}
.v2-eyebrow--sans { font-family: var(--v2-font); }

/* ========== Sticky frosted nav ========== */

.v2-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--v2-rule);
}
.v2-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--v2-shell-pad);
  max-width: var(--v2-shell-max);
  margin: 0 auto;
}
.v2-nav-brand {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink);
}
.v2-nav-brand:hover { color: var(--v2-ink-2); }
.v2-nav-brand img,
.v3-nav-brand img {
  display: block;
  height: 36px;
  width: auto;
}
.v2-nav-links {
  display: flex;
  gap: 32px;
}
.v2-nav-links a {
  font-size: 14px;
  font-weight: 400;
  color: var(--v2-ink-2);
}
.v2-nav-links a:hover { color: var(--v2-ink); }
.v2-nav-links a.is-active {
  color: var(--v2-ink);
  font-weight: 500;
}
.v2-nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v2-nav-signin {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: var(--v2-ink-2);
  cursor: pointer;
}
.v2-nav-signin:hover { color: var(--v2-ink); }

.v2-nav-mobile-toggle {
  display: none;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--v2-rule);
  border-radius: 8px;
  cursor: pointer;
  color: var(--v2-ink-2);
}

/* ========== Footer ========== */

.v2-footer {
  border-top: 1px solid var(--v2-rule);
  padding: 48px var(--v2-shell-pad);
  background: var(--v2-bg);
}
.v2-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--v2-shell-max);
  margin: 0 auto;
  gap: 24px;
}
.v2-footer-copy {
  font-size: 13px;
  color: var(--v2-ink-3);
}
.v2-footer-links {
  display: flex;
  gap: 24px;
}
.v2-footer-links a {
  font-size: 13px;
  color: var(--v2-ink-2);
}
.v2-footer-links a:hover { color: var(--v2-ink); }

/* ========== HOMEPAGE ========== */

.v2-hero {
  padding-top: 96px;
  padding-bottom: 64px;
}
.v2-hero-eyebrow {
  margin-bottom: 20px;
}
.v2-hero-h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 760px;
}
.v2-hero-h1-muted { color: var(--v2-ink-3); }
.v2-hero-lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--v2-ink-2);
  max-width: 580px;
  margin: 24px 0 36px;
}
.v2-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.v2-hero-image {
  margin-top: 72px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--v2-rule-soft);
}
.v2-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v2-stats-strip {
  padding-top: 24px;
  padding-bottom: 96px;
}
.v2-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.v2-stat-num {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v2-ink);
  line-height: 1;
}
.v2-stat-label {
  font-size: 14px;
  color: var(--v2-ink-3);
  margin-top: 8px;
}

.v2-howit-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: flex-start;
}
.v2-howit-side {
  position: sticky;
  top: 120px;
}
.v2-howit-h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
}
.v2-howit-step {
  padding: 32px 0;
  border-top: 1px solid var(--v2-rule);
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.v2-howit-step:first-child { border-top: 0; }
.v2-howit-step-n {
  font-size: 13px;
  color: var(--v2-ink-4);
  font-family: var(--v2-mono);
  padding-top: 6px;
  min-width: 32px;
}
.v2-howit-step-h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.v2-howit-step-p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--v2-ink-2);
  margin: 10px 0 0;
  max-width: 540px;
}

.v2-recent-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}
.v2-recent-head h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
}
.v2-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.v2-car-card { display: block; cursor: pointer; }
.v2-car-card-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v2-rule-soft);
  margin-bottom: 16px;
  position: relative;
}
.v2-car-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v2-car-card:hover .v2-car-card-img img {
  transform: scale(1.02);
}
.v2-car-card-frame {
  font-size: 12px;
  color: var(--v2-ink-3);
  font-family: var(--v2-mono);
  margin-bottom: 4px;
}
.v2-car-card-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.v2-car-card-meta {
  font-size: 14px;
  color: var(--v2-ink-3);
  margin-top: 2px;
}

.v2-marketplace-teaser {
  border-radius: 16px;
  overflow: hidden;
  background: var(--v2-ink);
  color: var(--v2-bg);
}
.v2-marketplace-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.v2-marketplace-teaser-text { padding: 56px; }
.v2-marketplace-teaser-h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
.v2-marketplace-teaser-eyebrow { color: #a3a3a3; margin-bottom: 16px; }
.v2-marketplace-teaser-p {
  font-size: 17px;
  line-height: 1.55;
  color: #d4d4d4;
  margin: 20px 0 32px;
  max-width: 460px;
}
.v2-marketplace-teaser-img { aspect-ratio: 5 / 4; }
.v2-marketplace-teaser-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== REGISTRY DIRECTORY ========== */

.v2-page-head {
  padding-top: 64px;
  padding-bottom: 32px;
}
.v2-page-head h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.05;
}
/* Compact h1 for form-focused / status pages (verification, status). */
.v2-page-h1-md {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
.v2-page-head-lede {
  font-size: 17px;
  color: var(--v2-ink-2);
  max-width: 640px;
  margin: 16px 0 0;
}
.v2-page-head-eyebrow { margin-bottom: 16px; }
.v2-page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.v2-search-row {
  padding-top: 24px;
  border-bottom: 1px solid var(--v2-rule);
}
.v2-search-row-inner {
  padding-bottom: 20px;
}
.v2-search {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.v2-search-input {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--v2-card);
  border: 1px solid var(--v2-rule);
  border-radius: 10px;
}
.v2-search-input input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: var(--v2-ink);
  min-width: 0;
}
.v2-search-input input::placeholder { color: var(--v2-ink-3); }
.v2-search-input .key {
  font-size: 12px;
  color: var(--v2-ink-4);
  font-family: var(--v2-mono);
}
.v2-search-icon { color: var(--v2-ink-3); flex-shrink: 0; }

.v2-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.v2-filter-label {
  font-size: 13px;
  color: var(--v2-ink-3);
  margin-right: 4px;
}

.v2-toolbar {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-toolbar-count { font-size: 13px; color: var(--v2-ink-3); }
.v2-segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--v2-rule-soft);
  border-radius: 10px;
}
.v2-segmented button {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--v2-ink-3);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.v2-segmented button.is-active {
  background: var(--v2-card);
  color: var(--v2-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.v2-directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 96px;
}
.v2-verified-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v2-accent);
}
.v2-load-more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* ========== CAR DETAIL ========== */

.v2-detail-head {
  padding-top: 48px;
  padding-bottom: 24px;
}
.v2-detail-h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.05;
}
.v2-detail-sub {
  font-size: 17px;
  color: var(--v2-ink-2);
  margin-top: 12px;
}
.v2-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.v2-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 540px;
}
.v2-gallery-main {
  grid-row: 1 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v2-rule-soft);
}
.v2-gallery-tile {
  border-radius: 12px;
  overflow: hidden;
  background: var(--v2-rule-soft);
  position: relative;
}
.v2-gallery-tile img,
.v2-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-gallery-viewall {
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.95);
  color: var(--v2-ink);
  border: 0;
  border-radius: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-family: inherit;
}

.v2-detail-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: flex-start;
  padding-top: 32px;
  padding-bottom: 96px;
}

.v2-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--v2-rule);
  margin-bottom: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tabs button {
  padding: 12px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--v2-ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
}
.v2-tabs button.is-active {
  font-weight: 500;
  color: var(--v2-ink);
  border-bottom-color: var(--v2-ink);
}

.v2-overview h2 {
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.v2-overview p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--v2-ink-2);
  margin: 0 0 16px;
  max-width: 680px;
}
.v2-overview p:last-child { margin-bottom: 0; }

.v2-spec-grid-h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 48px 0 20px;
}
.v2-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--v2-rule);
  border-radius: 12px;
  overflow: hidden;
}
.v2-spec-cell {
  padding: 20px 24px;
  border-right: 1px solid var(--v2-rule);
  border-top: 1px solid var(--v2-rule);
}
.v2-spec-cell:nth-child(3n) { border-right: 0; }
.v2-spec-cell:nth-child(-n + 3) { border-top: 0; }
.v2-spec-cell-k {
  font-size: 12px;
  color: var(--v2-ink-3);
  margin-bottom: 6px;
}
.v2-spec-cell-v {
  font-size: 17px;
  font-weight: 500;
  color: var(--v2-ink);
}

.v2-prov {
  margin-top: 48px;
}
.v2-prov-h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 20px;
}
.v2-prov-row {
  display: flex;
  gap: 24px;
  padding-bottom: 24px;
}
.v2-prov-row:last-child { padding-bottom: 0; }
.v2-prov-date {
  min-width: 88px;
  font-size: 13px;
  color: var(--v2-ink-3);
  font-family: var(--v2-mono);
  padding-top: 2px;
}
.v2-prov-body {
  position: relative;
  padding-left: 20px;
  flex: 1;
  padding-bottom: 8px;
}
.v2-prov-row:last-child .v2-prov-body { padding-bottom: 0; }
.v2-prov-dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--v2-ink);
  border-radius: 4px;
}
.v2-prov-dot--accent { background: var(--v2-accent); }
.v2-prov-line {
  position: absolute;
  left: 3.5px;
  top: 18px;
  bottom: -8px;
  width: 1px;
  background: var(--v2-rule);
}
.v2-prov-row:last-child .v2-prov-line { display: none; }
.v2-prov-t {
  font-size: 16px;
  font-weight: 500;
}
.v2-prov-b {
  font-size: 14px;
  color: var(--v2-ink-2);
  margin-top: 4px;
}

.v2-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v2-custodian {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
}
.v2-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--v2-ink);
  color: var(--v2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}
.v2-rarity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.v2-rarity-num {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--v2-accent);
  line-height: 1;
}
.v2-rarity-tag {
  font-size: 12px;
  color: var(--v2-ink-3);
  padding: 4px 10px;
  background: var(--v2-rule-soft);
  border-radius: 999px;
}
.v2-sister-row {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.v2-sister-thumb {
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--v2-rule-soft);
  flex-shrink: 0;
}
.v2-sister-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== MARKETPLACE ========== */

.v2-mp-featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  height: 420px;
}
.v2-mp-featured-tile {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
}
.v2-mp-featured-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-mp-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
}
.v2-mp-featured-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  color: #fff;
}
.v2-mp-featured-text--sm { padding: 24px; }
.v2-mp-featured-meta-mono { font-family: var(--v2-mono); font-size: 12px; opacity: 0.8; margin-bottom: 8px; }
.v2-mp-featured-text--sm .v2-mp-featured-meta-mono { font-size: 11px; margin-bottom: 6px; }
.v2-mp-featured-title { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.v2-mp-featured-title--sm { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; }
.v2-mp-featured-meta { font-size: 15px; opacity: 0.85; margin-top: 6px; }
.v2-mp-featured-text--sm .v2-mp-featured-meta { font-size: 13px; margin-top: 4px; }
.v2-mp-featured-price { font-size: 22px; font-weight: 500; margin-top: 16px; }
.v2-mp-featured-price--sm { font-size: 18px; font-weight: 500; margin-top: 12px; }

.v2-mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v2-mp-card { display: block; cursor: pointer; }
.v2-mp-card-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v2-rule-soft);
  margin-bottom: 16px;
  position: relative;
}
.v2-mp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v2-mp-card:hover .v2-mp-card-img img { transform: scale(1.02); }
.v2-mp-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 500;
  color: var(--v2-accent);
}
.v2-mp-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.v2-mp-card-price {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ========== VERIFICATION SUBMIT ========== */

.v2-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding-bottom: 24px;
  flex-wrap: wrap;
  row-gap: 16px;
}
.v2-stepper-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-stepper-circle {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--v2-mono);
  flex-shrink: 0;
}
.v2-stepper-circle.is-done {
  background: var(--v2-accent);
  color: var(--v2-bg);
}
.v2-stepper-circle.is-active {
  background: var(--v2-ink);
  color: var(--v2-bg);
}
.v2-stepper-circle.is-pending {
  background: var(--v2-rule-soft);
  color: var(--v2-ink-3);
}
.v2-stepper-label {
  font-size: 14px;
  color: var(--v2-ink-3);
}
.v2-stepper-item.is-active .v2-stepper-label {
  color: var(--v2-ink);
  font-weight: 500;
}
.v2-stepper-line {
  flex: 1;
  height: 1px;
  background: var(--v2-rule);
  margin: 0 20px;
  min-width: 24px;
}

.v2-form-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: flex-start;
  padding-bottom: 96px;
}

.v2-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.v2-upload-tile {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1.5px dashed var(--v2-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--v2-ink-3);
  gap: 6px;
  cursor: pointer;
  padding: 8px;
  background: transparent;
}
.v2-upload-tile.is-empty { color: var(--v2-ink-4); }
.v2-upload-tile.is-special {
  border-color: var(--v2-accent);
  color: var(--v2-accent);
  background: var(--v2-accent-soft);
}
.v2-upload-tile.is-done {
  border: 0;
  padding: 0;
  background: var(--v2-rule-soft);
  position: relative;
  overflow: hidden;
}
.v2-upload-tile.is-done img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-upload-tile-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--v2-accent);
  color: var(--v2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-upload-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}
.v2-upload-tile-label--inline {
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  background: transparent;
  color: inherit;
  position: static;
  padding: 0;
}

.v2-callout {
  padding: 16px;
  background: var(--v2-rule-soft);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 32px;
}
.v2-callout-icon {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--v2-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--v2-ink-2);
}
.v2-callout-body { flex: 1; }
.v2-callout-t { font-size: 14px; font-weight: 500; }
.v2-callout-b { font-size: 13px; color: var(--v2-ink-2); margin-top: 2px; }

.v2-form-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--v2-rule);
  gap: 12px;
  flex-wrap: wrap;
}

.v2-summary-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-summary-row .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.v2-summary-row .k { color: var(--v2-ink-2); }
.v2-summary-row .v { color: var(--v2-ink-3); }
.v2-summary-row .v.is-done {
  color: var(--v2-accent);
  font-weight: 500;
}

/* ========== VERIFICATION STATUS ========== */

.v2-status-head-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.v2-status-card {
  margin-top: 32px;
}
.v2-status-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.v2-status-card-head .est {
  font-size: 13px;
  color: var(--v2-ink-3);
  margin-bottom: 4px;
}
.v2-status-card-head .est-h {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.v2-progress-bar {
  height: 6px;
  background: var(--v2-rule-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 32px;
}
.v2-progress-fill {
  height: 100%;
  background: var(--v2-ink);
  border-radius: 3px;
}

.v2-status-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.v2-status-step { position: relative; padding-right: 16px; }
.v2-status-step-head {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.v2-status-step-circle {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.v2-status-step-circle.is-done {
  background: var(--v2-accent);
  color: var(--v2-bg);
}
.v2-status-step-circle.is-active {
  background: var(--v2-ink);
  color: var(--v2-bg);
}
.v2-status-step-circle.is-pending {
  background: var(--v2-rule-soft);
  color: var(--v2-ink-3);
}
.v2-status-step-circle .pulse {
  width: 8px;
  height: 8px;
  background: var(--v2-bg);
  border-radius: 4px;
}
.v2-status-step-line {
  flex: 1;
  height: 2px;
  background: var(--v2-rule-soft);
  margin-left: 4px;
}
.v2-status-step-line.is-done { background: var(--v2-accent); }
.v2-status-step-l { font-size: 14px; font-weight: 500; }
.v2-status-step-l.is-pending { color: var(--v2-ink-3); }
.v2-status-step-d {
  font-size: 12px;
  color: var(--v2-ink-3);
  font-family: var(--v2-mono);
  margin-top: 2px;
}
.v2-status-step-desc {
  font-size: 13px;
  color: var(--v2-ink-2);
  margin-top: 8px;
  line-height: 1.5;
  padding-right: 8px;
}

.v2-status-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: flex-start;
  padding-top: 32px;
  padding-bottom: 96px;
}
.v2-status-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v2-activity-row {
  display: flex;
  gap: 16px;
  padding-bottom: 24px;
}
.v2-activity-row:last-child { padding-bottom: 0; }
.v2-activity-date {
  min-width: 120px;
  font-size: 12px;
  color: var(--v2-ink-3);
  font-family: var(--v2-mono);
  padding-top: 2px;
}
.v2-activity-body {
  position: relative;
  padding-left: 20px;
  flex: 1;
  padding-bottom: 8px;
}
.v2-activity-row:last-child .v2-activity-body { padding-bottom: 0; }
.v2-activity-dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background: var(--v2-ink-3);
  border-radius: 4px;
}
.v2-activity-dot.is-current { background: var(--v2-ink); }
.v2-activity-line {
  position: absolute;
  left: 3.5px;
  top: 18px;
  bottom: -8px;
  width: 1px;
  background: var(--v2-rule);
}
.v2-activity-row:last-child .v2-activity-line { display: none; }
.v2-activity-t { font-size: 15px; font-weight: 500; }
.v2-activity-who {
  font-size: 13px;
  color: var(--v2-ink-3);
  margin-top: 2px;
}
.v2-activity-b {
  font-size: 14px;
  color: var(--v2-ink-2);
  margin-top: 8px;
  line-height: 1.55;
}

.v2-submission-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.v2-submission-photo {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--v2-rule-soft);
}
.v2-submission-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-submission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--v2-rule);
  border-radius: 10px;
  overflow: hidden;
}
.v2-submission-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--v2-rule);
  border-top: 1px solid var(--v2-rule);
}
.v2-submission-cell:nth-child(3n) { border-right: 0; }
.v2-submission-cell:nth-child(-n + 3) { border-top: 0; }
.v2-submission-cell-k {
  font-size: 11px;
  color: var(--v2-ink-3);
  margin-bottom: 4px;
}
.v2-submission-cell-v {
  font-size: 14px;
  font-weight: 500;
}

.v2-once-verified {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v2-once-verified-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.v2-once-verified-bullet {
  width: 6px;
  height: 6px;
  background: var(--v2-accent);
  border-radius: 3px;
  margin-top: 7px;
  flex-shrink: 0;
}
.v2-once-verified-t { font-size: 14px; font-weight: 500; }
.v2-once-verified-b {
  font-size: 13px;
  color: var(--v2-ink-3);
  margin-top: 2px;
  line-height: 1.5;
}

/* ========== ACCESSIBILITY / RESPONSIVE / SAFE AREA ========== */

.v2-root :focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .v2-root *,
  .v2-root *::before,
  .v2-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (pointer: coarse) {
  .v2-btn { min-height: 44px; }
  .v2-pill { min-height: 36px; }
  .v2-pill-sm { min-height: 32px; padding: 8px 14px; font-size: 13px; }
  .v2-nav-links a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .v2-nav-signin { min-height: 44px; }
  .v2-tabs button { min-height: 44px; }
  .v2-segmented button { min-height: 36px; padding: 8px 14px; }
  .v2-search-input .key { display: none; }
  .v2-gallery-viewall { padding: 10px 14px; font-size: 14px; min-height: 40px; }
  .v2-link { min-height: 32px; display: inline-flex; align-items: center; }
}

@media (hover: none) {
  .v2-car-card:hover .v2-car-card-img img,
  .v2-mp-card:hover .v2-mp-card-img img { transform: none; }
}

.v2-nav-inner,
.v2-shell,
.v2-footer {
  padding-left: max(var(--v2-shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--v2-shell-pad), env(safe-area-inset-right));
}

/* ========== Tablet & smaller (1080) ========== */

@media (max-width: 1080px) {
  :root { --v2-shell-pad: 24px; }

  .v2-nav-inner { padding: 14px var(--v2-shell-pad); gap: 16px; }
  .v2-nav-links { gap: 20px; }

  .v2-section { padding-top: 64px; padding-bottom: 64px; }
  .v2-page-head { padding-top: 48px; padding-bottom: 24px; }

  .v2-hero { padding-top: 64px; }
  .v2-hero-image { aspect-ratio: 16 / 9; margin-top: 56px; }

  .v2-stats-strip { padding-bottom: 64px; }
  .v2-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .v2-howit-grid { grid-template-columns: 1fr; gap: 32px; }
  .v2-howit-side { position: static; }

  .v2-recent-grid { grid-template-columns: repeat(2, 1fr); }

  .v2-marketplace-teaser-grid { grid-template-columns: 1fr; }
  .v2-marketplace-teaser-text { padding: 40px 32px; }
  .v2-marketplace-teaser-img { aspect-ratio: 16 / 9; }

  .v2-directory-grid { grid-template-columns: repeat(3, 1fr); padding-bottom: 64px; }
  .v2-mp-grid { grid-template-columns: repeat(2, 1fr); }

  .v2-mp-featured-grid { grid-template-columns: 1fr; height: auto; }
  .v2-mp-featured-tile { aspect-ratio: 16 / 10; }
  .v2-mp-featured-tile + .v2-mp-featured-tile { aspect-ratio: 16 / 11; }

  .v2-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .v2-gallery-main { aspect-ratio: 16 / 10; }
  .v2-gallery-tile { aspect-ratio: 16 / 9; }

  .v2-detail-body { grid-template-columns: 1fr; gap: 32px; }
  .v2-aside { position: static; }

  .v2-form-grid { grid-template-columns: 1fr; gap: 32px; }

  .v2-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-spec-cell:nth-child(3n) { border-right: 1px solid var(--v2-rule); }
  .v2-spec-cell:nth-child(2n) { border-right: 0; }
  .v2-spec-cell:nth-child(-n + 2) { border-top: 0; }
  .v2-spec-cell:nth-child(3) { border-top: 1px solid var(--v2-rule); }
}

/* ========== Tablet portrait / large phone (768) ========== */

@media (max-width: 768px) {
  .v2-nav-links {
    display: none;
  }
  .v2-nav-mobile-toggle { display: inline-flex; }
  .v2-nav-signin {
    display: none;
  }

  .v2-hero { padding-top: 48px; padding-bottom: 32px; }
  .v2-hero-actions .v2-btn { flex: 1; justify-content: center; }
  .v2-hero-image { aspect-ratio: 4 / 3; margin-top: 40px; }

  .v2-section { padding-top: 48px; padding-bottom: 48px; }
  .v2-stats-strip { padding-bottom: 48px; }
  .v2-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .v2-recent-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v2-recent-grid { grid-template-columns: 1fr; }

  .v2-page-head-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .v2-page-head-row .v2-btn { align-self: flex-start; }

  .v2-marketplace-teaser-text { padding: 32px 24px; }

  .v2-directory-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-mp-grid { grid-template-columns: 1fr; }

  /* Filter chip rows scroll horizontally instead of wrapping into 3-4 ugly
     lines. Row is bled into the shell padding so the first chip aligns with
     content while the last few can scroll past the right edge. */
  .v2-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--v2-shell-pad) * -1);
    margin-right: calc(var(--v2-shell-pad) * -1);
    padding: 0 var(--v2-shell-pad) 4px;
  }
  .v2-filter-row::-webkit-scrollbar { display: none; }
  .v2-filter-row > .v2-pill,
  .v2-filter-row > .v2-pill-sm,
  .v2-filter-label { flex-shrink: 0; }

  .v2-detail-actions .v2-btn { padding: 10px 14px; font-size: 13px; }

  .v2-gallery-main { aspect-ratio: 4 / 3; }
  .v2-gallery-tile { aspect-ratio: 4 / 3; }
  .v2-gallery-viewall { bottom: 12px; right: 12px; }

  /* Provenance dot+line vestige stays visible when the row collapses to a
     vertical stack. Hide them on mobile and let the dates carry the
     temporal sense — same pattern as the activity timeline. */
  .v2-prov-row { padding-bottom: 20px; }
  .v2-prov-dot,
  .v2-prov-line { display: none; }
  .v2-prov-body { padding-left: 0; }

  /* Cards inside the cardetail aside can squeeze content too tight; allow
     long inline values (frame numbers, member meta) to wrap on any
     boundary if they otherwise can't break. */
  .v2-card,
  .v2-custodian,
  .v2-sister-row {
    min-width: 0;
  }
  .v2-card * { word-break: break-word; }
  .v2-mono { word-break: break-all; }

  .v2-spec-grid { grid-template-columns: 1fr; }
  .v2-spec-cell { border-right: 0 !important; border-top: 1px solid var(--v2-rule) !important; }
  .v2-spec-cell:first-child { border-top: 0 !important; }

  /* Stepper: lines hide and items wrap to one-per-row. Add bottom dividers
     so the steps still read as a sequence rather than four floating items. */
  .v2-stepper { gap: 0; flex-direction: column; align-items: stretch; }
  .v2-stepper-line { display: none; }
  .v2-stepper-item {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--v2-rule);
  }
  .v2-stepper-item:last-child { border-bottom: 0; }

  .v2-upload-grid { grid-template-columns: repeat(2, 1fr); }

  .v2-form-foot { flex-direction: column; align-items: stretch; }
  .v2-form-foot .v2-btn { width: 100%; justify-content: center; }

  .v2-footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v2-footer-links { flex-wrap: wrap; gap: 16px; }

  .v2-status-steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .v2-status-step-line { display: none; }
  .v2-status-step { padding-right: 0; }
  .v2-status-body { grid-template-columns: 1fr; gap: 24px; }

  /* Activity timeline collapses to flat date+content stack on mobile;
     the absolute-positioned dot and connecting line don't make visual
     sense once the row is vertical, so hide them. */
  .v2-activity-row { flex-direction: column; gap: 8px; padding-bottom: 20px; }
  .v2-activity-date { min-width: 0; padding-top: 0; }
  .v2-activity-body { padding-left: 0; }
  .v2-activity-dot,
  .v2-activity-line { display: none; }

  .v2-submission-photos { grid-template-columns: repeat(3, 1fr); }
  .v2-submission-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-submission-cell:nth-child(3n) { border-right: 1px solid var(--v2-rule); }
  .v2-submission-cell:nth-child(2n) { border-right: 0; }
  .v2-submission-cell:nth-child(-n + 2) { border-top: 0; }
  .v2-submission-cell:nth-child(3) { border-top: 1px solid var(--v2-rule); }
}

/* ========== Small phone (480) ========== */

@media (max-width: 480px) {
  :root { --v2-shell-pad: 20px; }
  .v2-root { font-size: 16px; }

  /* Section vertical padding tightens so a 360px viewport doesn't burn
     half the fold on whitespace. */
  .v2-section { padding-top: 40px; padding-bottom: 40px; }
  .v2-page-head { padding-top: 32px; padding-bottom: 20px; }
  .v2-search-row { padding-top: 16px; }
  .v2-toolbar { padding-top: 16px; }

  /* Typography — pull h1 floors down to fit a single line on a 360px column. */
  .v2-hero { padding-top: 32px; padding-bottom: 24px; }
  .v2-hero-h1 { font-size: clamp(32px, 10vw, 56px); margin-bottom: 24px; line-height: 1.06; }
  .v2-hero-lede { font-size: 16px; margin-bottom: 24px; }
  .v2-hero-image { aspect-ratio: 3 / 2; margin-top: 32px; border-radius: 12px; }
  .v2-hero-actions { flex-direction: column; gap: 10px; }
  .v2-hero-actions .v2-btn { width: 100%; }

  .v2-stats-strip { padding-bottom: 32px; }
  .v2-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .v2-stat-num { font-size: 26px; }
  .v2-stat-label { font-size: 13px; margin-top: 4px; }

  .v2-howit-step { padding: 24px 0; gap: 16px; }
  .v2-howit-step-h3 { font-size: 18px; }
  .v2-howit-step-p { font-size: 15px; }

  .v2-recent-head h2 { font-size: 28px; }
  .v2-recent-head { margin-bottom: 24px; }

  .v2-page-head h1 { font-size: clamp(26px, 8vw, 40px); line-height: 1.08; }
  .v2-page-head-eyebrow { margin-bottom: 12px; font-size: 12px; }
  .v2-page-head-lede { font-size: 16px; margin-top: 12px; }

  .v2-marketplace-teaser-img { aspect-ratio: 4 / 3; }
  .v2-marketplace-teaser-text { padding: 28px 20px; }
  .v2-marketplace-teaser-h2 { font-size: clamp(24px, 7vw, 32px); }
  .v2-marketplace-teaser-p { font-size: 15px; margin: 16px 0 24px; }

  .v2-directory-grid { grid-template-columns: 1fr; padding-bottom: 32px; gap: 16px; }
  .v2-car-card-img { aspect-ratio: 16 / 10; margin-bottom: 12px; }
  .v2-car-card-title { font-size: 16px; }

  .v2-mp-grid { gap: 20px; }
  .v2-mp-featured-grid { gap: 12px; }
  .v2-mp-featured-tile,
  .v2-mp-featured-tile + .v2-mp-featured-tile { aspect-ratio: 4 / 3; border-radius: 12px; }
  .v2-mp-featured-text { padding: 16px; }
  .v2-mp-featured-text--sm { padding: 14px; }
  /* Marketplace featured text uses class-controlled sizes so they scale on
     small phones (overrides Blade-extracted classes). */
  .v2-mp-featured-title { font-size: 20px; }
  .v2-mp-featured-title--sm { font-size: 17px; }
  .v2-mp-featured-meta { font-size: 13px; }
  .v2-mp-featured-price { font-size: 18px; margin-top: 12px; }
  .v2-mp-featured-price--sm { font-size: 15px; margin-top: 10px; }

  .v2-detail-head { padding-top: 32px; padding-bottom: 16px; }
  .v2-detail-h1 { font-size: clamp(26px, 8vw, 38px); line-height: 1.1; }
  .v2-detail-sub { font-size: 14px; margin-top: 8px; }
  .v2-page-head-row { gap: 20px; }
  /* Tag + Share button row: stack vertically so both have a generous tap
     target and don't fight for space on a 360px column. */
  .v2-detail-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  .v2-detail-actions .v2-tag { align-self: flex-start; }
  .v2-detail-actions .v2-btn {
    width: 100%;
    flex: none;
    justify-content: center;
    padding: 12px 14px;
    font-size: 14px;
  }

  .v2-gallery { gap: 6px; }
  .v2-gallery-main,
  .v2-gallery-tile { aspect-ratio: 4 / 3; border-radius: 10px; }
  .v2-gallery-viewall { padding: 8px 12px; font-size: 12px; min-height: 36px; }
  .v2-detail-body { padding-top: 24px; padding-bottom: 48px; gap: 24px; }

  /* Spec grid: trim the cell padding so 6 stacked rows aren't a wall. */
  .v2-spec-cell { padding: 14px 16px; }
  .v2-spec-cell-v { font-size: 16px; }

  /* Provenance — already collapses to a column stack at 768; tighten more. */
  .v2-prov-row { padding-bottom: 16px; gap: 4px; }
  .v2-prov-date { min-width: 0; padding-top: 0; }
  .v2-prov-body { padding-left: 0; }
  .v2-prov-t { font-size: 15px; }

  .v2-spec-grid-h3 { margin-top: 32px; }
  .v2-prov { margin-top: 32px; }

  .v2-card { padding: 20px; border-radius: 12px; }
  .v2-card--lg { padding: 20px; border-radius: 12px; }
  .v2-card--md { padding: 18px; }
  .v2-aside .v2-card { padding: 18px; }

  .v2-upload-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .v2-tabs { margin-bottom: 24px; gap: 20px; }

  .v2-page-h1-md { font-size: clamp(24px, 7vw, 36px); line-height: 1.12; }

  .v2-status-steps { grid-template-columns: 1fr; gap: 12px; }
  .v2-status-step-circle { width: 28px; height: 28px; }
  .v2-submission-photos { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .v2-submission-grid { grid-template-columns: 1fr; }
  .v2-submission-cell { border-right: 0 !important; border-top: 1px solid var(--v2-rule) !important; }
  .v2-submission-cell:first-child { border-top: 0 !important; }

  .v2-load-more { margin-top: 32px; }
}

/* ========== Tiny phone (375px and below — iPhone SE / mini) ========== */

@media (max-width: 380px) {
  :root { --v2-shell-pad: 16px; }
  .v2-hero-h1 { font-size: clamp(28px, 11vw, 44px); }
  .v2-page-head h1 { font-size: clamp(24px, 9vw, 36px); }
  .v2-detail-h1 { font-size: clamp(24px, 9vw, 36px); }
  .v2-stat-num { font-size: 22px; }
}

/* ============================================================
   V3 — Forest-green homepage (matches live site brand)
   Single screen — coexists with V2 in this bundle. Different
   palette (warm paper, deep forest, lime accent) and a couple
   of motifs (full-bleed gradient hero, in-hero stats strip,
   lime-on-forest pills); same type / spacing language as V2.
   ============================================================ */

.v3-root {
  --v3-paper: #f5f3ee;
  --v3-card: #ffffff;
  --v3-ink: #0a0a0a;
  --v3-ink-2: #3d3d3d;
  --v3-ink-3: #6b6b6b;
  --v3-ink-4: #9a9a9a;
  --v3-rule: #e2dfd7;
  --v3-rule-soft: #ece9e1;
  --v3-forest: #1a3c25;
  --v3-forest-deep: #0f2a18;
  --v3-forest-edge: #1b362f;
  --v3-lime: #aef359;
  --v3-lime-dim: #7fcf3a;
  --v3-lime-soft: #eaf8d6;

  --v3-shell-max: 1280px;
  --v3-shell-pad: 32px;

  font-family: var(--v2-font);
  color: var(--v3-ink);
  background: var(--v3-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow-x: clip;
}

.v3-root,
.v3-root * { box-sizing: border-box; }

.v3-root a { color: inherit; text-decoration: none; }
.v3-root :focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: 3px;
}

.v3-mono { font-family: var(--v2-mono); }

.v3-shell {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
}

/* Eyebrow — leading slash, mono caps, forest-on-paper */
.v3-eyebrow {
  font-size: 11px;
  font-family: var(--v2-mono);
  color: var(--v3-forest);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}
.v3-eyebrow--on-forest { color: var(--v3-lime); }

/* Buttons — uppercase, heavy weight, lime primary */
.v3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}
.v3-btn.v3-btn-lime {
  background: var(--v3-lime);
  color: var(--v3-forest);
  box-shadow: 0 8px 24px rgba(174, 243, 89, 0.25);
}
.v3-btn.v3-btn-lime:hover {
  background: var(--v3-lime-dim);
}
.v3-btn.v3-btn-glass {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v3-btn.v3-btn-glass:hover { background: rgba(255, 255, 255, 0.12); }
/* Secondary outlined variant — used for Cancel buttons inside
   modals on cream/light surfaces. */
.v3-btn.v3-btn-ghost {
  background: transparent;
  color: var(--v3-ink);
  border-color: var(--v3-rule);
}
.v3-btn.v3-btn-ghost:hover {
  background: var(--v3-rule-soft);
  border-color: var(--v3-ink-3);
}
.v3-btn.v3-btn-md { padding: 14px 26px; }
.v3-btn.v3-btn-sm {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
}

.v3-link {
  font-size: 14px;
  color: var(--v3-ink-2);
  cursor: pointer;
}
.v3-link:hover { color: var(--v3-ink); }

/* ========== V3 sticky frosted nav ========== */

.v3-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 243, 238, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--v3-rule);
}
.v3-nav-inner {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--v3-shell-pad);
}
.v3-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.v3-nav-brand-dot {
  width: 8px;
  height: 8px;
  background: var(--v3-lime);
  border-radius: 4px;
  flex-shrink: 0;
}
.v3-nav-links {
  display: flex;
  gap: 32px;
}
.v3-nav-links a {
  font-size: 14px;
  color: var(--v3-ink-2);
}
.v3-nav-links a:hover { color: var(--v3-ink); }
.v3-nav-links a.is-active { color: var(--v3-ink); font-weight: 500; }
.v3-nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.v3-nav-signin {
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: var(--v3-ink-2);
  cursor: pointer;
  font-family: inherit;
}
.v3-nav-signin:hover { color: var(--v3-ink); }

/* ============================================================
   V3 nav — Signed-in variant (avatar + dropdown menu)
   Triggered by ?preview=signed-in. Replaces Sign in + Register
   with a Garage CTA + circular avatar that opens a popover with
   account links via native <details>/<summary>.
   ============================================================ */
.v3-nav-user {
  position: relative;
}
.v3-nav-user summary {
  list-style: none;
  cursor: pointer;
}
.v3-nav-user summary::-webkit-details-marker { display: none; }
.v3-nav-user summary::marker { content: ''; }

.v3-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--v3-forest);
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 700;
  border: 2px solid var(--v3-forest);
  transition: border-color 160ms;
}
.v3-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3-nav-avatar:hover { border-color: var(--v3-lime-dim); }
details[data-user-menu][open] .v3-nav-avatar { border-color: var(--v3-lime); }

.v3-nav-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  padding: 6px;
  z-index: 60;
  box-shadow: 0 14px 32px rgba(15, 42, 24, 0.12);
}
.v3-nav-user-menu-head {
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--v3-rule);
  margin-bottom: 6px;
}
.v3-nav-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.v3-nav-user-mail {
  font-size: 12px;
  color: var(--v3-ink-3);
  margin-top: 2px;
}
.v3-nav-user-menu a[role="menuitem"] {
  display: block;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--v3-ink);
  border-radius: 6px;
  font-weight: 500;
}
.v3-nav-user-menu a[role="menuitem"]:hover { background: var(--v3-paper); }
/* Admin-panel link gets a forest accent so admins notice it's there
   but it doesn't shout — it's a tool for them, not a marketing pitch. */
.v3-nav-user-menu .v3-nav-user-menu-admin {
  color: var(--v3-forest);
  font-weight: 700;
}
.v3-nav-user-menu .v3-nav-user-menu-admin:hover { background: var(--v3-lime-soft); }
.v3-nav-user-menu hr {
  border: 0;
  border-top: 1px solid var(--v3-rule);
  margin: 6px 0;
}

@media (max-width: 768px) {
  .v3-nav-garage { display: none; }
  .v3-nav-user-menu { right: 0; min-width: 220px; }
}

/* ========== V3 hero ========== */

.v3-hero {
  position: relative;
  overflow: hidden;
  background: var(--v3-forest);
  color: #fff;
}
.v3-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.v3-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.55;
}
.v3-hero-photo::before,
.v3-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v3-hero-photo::before {
  background: linear-gradient(
    95deg,
    var(--v3-forest) 0%,
    rgba(26, 60, 37, 0.94) 35%,
    rgba(27, 54, 47, 0.7) 60%,
    rgba(15, 42, 24, 0.35) 100%
  );
}
.v3-hero-photo::after {
  background: linear-gradient(180deg, transparent 55%, rgba(15, 42, 24, 0.55) 100%);
}

.v3-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  padding: 120px var(--v3-shell-pad) 140px;
}
.v3-hero-block { max-width: 720px; }

.v3-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 6px 12px;
  background: rgba(174, 243, 89, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  border: 1px solid rgba(174, 243, 89, 0.28);
}
.v3-hero-pill-dot {
  width: 6px;
  height: 6px;
  background: var(--v3-lime);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--v3-lime);
}
.v3-hero-pill-text {
  font-size: 11px;
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.v3-hero-h1 {
  font-size: clamp(40px, 8vw, 84px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 0;
  color: #fff;
}
.v3-hero-h1-lime {
  color: var(--v3-lime);
  font-style: italic;
  font-weight: 400;
}
.v3-hero-h1-muted { color: rgba(255, 255, 255, 0.72); }

.v3-hero-lede {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 32px 0 40px;
}

.v3-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Stats strip — embedded at the bottom of hero, glassy */
.v3-hero-stats {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(174, 243, 89, 0.18);
  background: rgba(15, 42, 24, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.v3-hero-stats-grid {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.v3-hero-stat {
  padding: 24px 32px;
  border-right: 1px solid rgba(174, 243, 89, 0.12);
}
.v3-hero-stat:last-child { border-right: 0; }
.v3-hero-stat-num {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
.v3-hero-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}

/* ========== V3 quote / "What we do" ========== */

.v3-quote {
  padding: 64px var(--v3-shell-pad);
  background: var(--v3-paper);
}
.v3-quote-inner {
  max-width: 980px;
  margin: 0 auto;
}
.v3-quote-eyebrow { margin-bottom: 24px; }
.v3-quote-text {
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--v3-ink);
  margin: 0;
  max-width: 920px;
}
.v3-quote-mark {
  color: var(--v3-forest);
  font-weight: 600;
  padding: 0 6px;
  border-radius: 4px;
  /* Highlight rendered as a fixed-height linear-gradient image instead
     of a `background-color`, so the fill is tight to the text rather
     than filling the full line-box vertically. Without this, a "g"
     descender on the line above (e.g. "grade" / "which Supra") was
     getting clipped because the line-box-tall fill on the next line
     ate into its territory. The 1.05em fill leaves a small transparent
     strip top and bottom so descenders/ascenders pass through. */
  background-image: linear-gradient(var(--v3-lime-soft), var(--v3-lime-soft));
  background-size: 100% 1.05em;
  background-position: 0 0.18em;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.v3-quote-attrib {
  margin-top: 32px;
  font-size: 14px;
  color: var(--v3-ink-3);
  display: flex;
  gap: 14px;
  align-items: center;
}
.v3-quote-attrib-avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  object-fit: cover;
  flex-shrink: 0;
}
img.v3-quote-attrib-avatar {
  /* Image avatar variant — hide the text-fallback styling and let the
     photo fill the circle. */
  background: var(--v3-rule-soft);
}

/* ========== V3 How it works ========== */

.v3-howit {
  padding: 64px var(--v3-shell-pad);
  border-top: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.v3-howit-inner { max-width: var(--v3-shell-max); margin: 0 auto; }
.v3-howit-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: flex-start;
}
.v3-howit-side { position: sticky; top: 120px; }
.v3-howit-eyebrow { margin-bottom: 16px; }
.v3-howit-h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
}
.v3-howit-step {
  padding: 24px 0;
  border-top: 1px solid var(--v3-rule);
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.v3-howit-step:first-child { padding-top: 0; border-top: 0; }
.v3-howit-step:last-child { padding-bottom: 0; }
.v3-howit-step-n {
  font-size: 13px;
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-weight: 700;
  background: var(--v3-forest);
  height: 28px;
  min-width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.v3-howit-step-h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}
.v3-howit-step-p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--v3-ink-2);
  margin: 10px 0 0;
  max-width: 540px;
}

/* ========== V3 Recently verified ========== */

.v3-recent {
  padding: 64px var(--v3-shell-pad);
}
.v3-recent-inner { max-width: var(--v3-shell-max); margin: 0 auto; }
.v3-recent-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}
.v3-recent-head h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
}
.v3-recent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v3-car-card { display: block; cursor: pointer; }
.v3-car-card-img {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-rule-soft);
  margin-bottom: 16px;
  position: relative;
}
/* Carousel container — stacked imgs that crossfade. The container is
   absolutely positioned to fill .v3-car-card-img while leaving the
   verified badge as a sibling on top. */
.v3-car-card-imgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: pointer;
}
.v3-car-card-imgs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 800ms ease;
}
.v3-car-card-imgs img.is-active { opacity: 1; }
/* Single-image cards (no [data-carousel] attribute on the container) keep
   the lone img visible at all times. */
.v3-car-card-imgs:not([data-carousel]) img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v3-car-card-imgs img { transition: none; }
}
.v3-car-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--v3-lime);
  color: var(--v3-forest);
  font-size: 11px;
  font-family: var(--v2-mono);
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.v3-car-card-frame {
  font-size: 12px;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  margin-bottom: 4px;
}
.v3-car-card-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.v3-car-card-meta {
  font-size: 14px;
  color: var(--v3-ink-3);
  margin-top: 2px;
}

/* ========== V3 Marketplace teaser ========== */

.v3-mp {
  padding: 0 var(--v3-shell-pad) 96px;
}
.v3-mp-inner {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--v3-forest);
  color: var(--v3-paper);
}
.v3-mp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.v3-mp-text { padding: 56px; }
.v3-mp-coming-soon {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--v3-lime);
  color: var(--v3-forest);
  border-radius: 999px;
  font-family: var(--v2-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(174, 243, 89, 0.18);
}
.v3-mp-eyebrow { margin-bottom: 16px; }
.v3-mp-h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.05;
  color: #fff;
}
.v3-mp-h2-lime {
  color: var(--v3-lime);
  font-style: italic;
  font-weight: 400;
}
.v3-mp-p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 24px 0 32px;
  max-width: 460px;
}
.v3-mp-img {
  position: relative;
  aspect-ratio: 5 / 4;
}
.v3-mp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3-mp-img-chip {
  position: absolute;
  bottom: 24px;
  left: 24px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--v3-ink);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.v3-mp-img-chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--v3-forest);
  font-size: 12px;
  font-weight: 700;
}
.v3-mp-img-chip-meta { font-size: 13px; }

/* ========== V3 footer ========== */

.v3-footer {
  border-top: 1px solid var(--v3-rule);
  padding: 56px var(--v3-shell-pad) 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  background: var(--v3-paper);
}
.v3-footer-grid {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--v3-rule);
}
.v3-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v3-footer-logo {
  display: block;
  height: 56px;
  width: auto;
}
.v3-footer-tagline {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v3-ink-2);
  max-width: 380px;
}
.v3-footer-col h3 {
  font-size: 11px;
  font-family: var(--v2-mono);
  color: var(--v3-forest);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px;
}
.v3-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v3-footer-col a {
  font-size: 14px;
  color: var(--v3-ink-2);
}
.v3-footer-col a:hover { color: var(--v3-ink); }
.v3-footer-col p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--v3-ink-2);
}
.v3-footer-col p:last-child { margin-bottom: 0; }
.v3-footer-contact-blurb {
  color: var(--v3-ink-3) !important;
  line-height: 1.5;
}

.v3-footer-bar {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.v3-footer-copy { font-size: 13px; color: var(--v3-ink-3); }
.v3-footer-legal { display: flex; gap: 24px; }
.v3-footer-legal a { font-size: 13px; color: var(--v3-ink-2); }
.v3-footer-legal a:hover { color: var(--v3-ink); }

/* ========== V3 a11y / motion ========== */

@media (prefers-reduced-motion: reduce) {
  .v3-root *,
  .v3-root *::before,
  .v3-root *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (pointer: coarse) {
  .v3-btn { min-height: 44px; }
  .v3-btn.v3-btn-sm { min-height: 40px; }
  .v3-nav-links a { min-height: 36px; display: inline-flex; align-items: center; }
  .v3-nav-signin { min-height: 44px; }
  .v3-link { min-height: 32px; display: inline-flex; align-items: center; }
}

@media (hover: none) {
  .v3-car-card:hover .v3-car-card-img img { transform: none; }
}

/* ========== V3 responsive cascade — 1080 / 768 / 480 / 380 ========== */

@media (max-width: 1080px) {
  .v3-root { --v3-shell-pad: 24px; }
  .v3-nav-inner { padding: 14px var(--v3-shell-pad); gap: 16px; }
  .v3-nav-links { gap: 20px; }

  .v3-hero-content { padding: 80px var(--v3-shell-pad) 96px; }

  .v3-hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-hero-stat:nth-child(2n) { border-right: 0; }
  .v3-hero-stat:nth-child(-n + 2) { border-bottom: 1px solid rgba(174, 243, 89, 0.12); }

  .v3-howit { padding: 48px var(--v3-shell-pad); }
  .v3-howit-grid { grid-template-columns: 1fr; gap: 24px; }
  .v3-howit-side { position: static; }

  .v3-quote { padding: 48px var(--v3-shell-pad); }

  .v3-recent { padding: 48px var(--v3-shell-pad); }
  .v3-recent-grid { grid-template-columns: repeat(2, 1fr); }

  .v3-mp-grid { grid-template-columns: 1fr; }
  .v3-mp-text { padding: 40px var(--v3-shell-pad); }
  .v3-mp-img { aspect-ratio: 16 / 9; }

  .v3-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v3-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  /* Same nav-collapse strategy as V2: hide nav links and sign-in on
     small phones, keep brand + primary lime CTA only. */
  .v3-nav-links,
  .v3-nav-signin { display: none; }

  .v3-hero-content { padding: 56px var(--v3-shell-pad) 64px; }
  .v3-hero-h1 { font-size: clamp(36px, 10vw, 64px); }
  .v3-hero-lede { font-size: 17px; max-width: none; margin: 24px 0 28px; }
  .v3-hero-actions .v3-btn { flex: 1; justify-content: center; padding: 14px 18px; font-size: 13px; }

  .v3-quote { padding: 40px var(--v3-shell-pad); }
  .v3-quote-text { font-size: clamp(20px, 4.5vw, 28px); line-height: 1.3; }

  .v3-howit { padding: 40px var(--v3-shell-pad); }
  .v3-howit-step { padding: 20px 0; gap: 20px; }
  .v3-howit-step-h3 { font-size: 20px; }

  .v3-recent { padding: 40px var(--v3-shell-pad); }
  .v3-recent-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Recently verified becomes a horizontal scroll-snap carousel on mobile.
     Cards land at 80% viewport width so the next card peeks past the
     right edge of the shell as a hint that more content scrolls into
     view. The negative margins bleed the carousel into the shell padding
     so the first card aligns with content while later cards can flow
     past the gutter. */
  .v3-recent-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: calc(var(--v3-shell-pad) * -1);
    margin-right: calc(var(--v3-shell-pad) * -1);
    padding: 0 var(--v3-shell-pad) 4px;
    scroll-padding-left: var(--v3-shell-pad);
    gap: 16px;
  }
  .v3-recent-grid::-webkit-scrollbar { display: none; }
  .v3-recent-grid > .v3-car-card {
    flex: 0 0 80%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .v3-mp { padding: 0 var(--v3-shell-pad) 64px; }
  .v3-mp-text { padding: 32px var(--v3-shell-pad); }

  .v3-footer { padding-top: 40px; }
  .v3-footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
  .v3-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
  }
  .v3-footer-legal { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 480px) {
  .final-section { padding: 24px var(--v3-shell-pad) 20px; }
  .final-page-head { gap: 20px; }
  .final-dir-card-img { aspect-ratio: 16 / 11; }
}

/* ============================================================
   FINAL — Car detail (V1 layout, V3 skin)
   ============================================================ */

/* Outer is full-bleed (paper bg + bottom rule); the v3-shell child
   is what actually constrains the trail/actions to 1280px and adds
   the breadcrumb's vertical rhythm. Same outer-bleed / inner-shell
   pattern the registry uses. */
.final-car-breadcrumb {
  border-bottom: 1px solid var(--v3-rule-soft);
  background: var(--v3-paper);
}
.final-car-breadcrumb > .v3-shell {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.final-car-breadcrumb-trail {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--v3-ink-3);
}
.final-car-breadcrumb-trail .sep { margin: 0 8px; }
.final-car-breadcrumb-trail .last { color: var(--v3-ink); }
.final-car-breadcrumb-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Outer: vertical padding + card bg + bottom rule (full-bleed).
   Inner shell: the title + aside grid lives here so it's centred at
   1280px on desktop. */
.final-car-title-row {
  padding-top: 32px;
  padding-bottom: 36px;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
}
/* Title row sits as a flex layout — main title block on the left
   takes all available width, the action stack on the right (Upload
   Images, etc.) hugs the top-right and shrinks to its content. The
   headline still gets the full available width because
   .final-car-title-main is the flex-grow:1 child. */
.final-car-title-row > .v3-shell {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.final-car-title-main {
  flex: 1 1 auto;
  min-width: 0;
}
.final-car-title-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  padding-top: 8px;
}
.final-car-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.final-car-upload-btn svg { display: block; }
.final-car-upload-signed-out {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink-3);
}
.final-car-upload-signed-out a {
  color: var(--v3-forest);
  font-weight: 600;
  text-decoration: underline;
}
.final-car-upload-signed-out a:hover { color: var(--v3-forest-deep); }
/* Tighter chip-strip margin so the chips don't push the headline
   down a second time. */
.final-car-title-chips { margin-bottom: 14px; }
.final-car-title-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.final-car-title-h1 {
  font-size: clamp(56px, 7.5vw, 116px);
  margin: 0;
  line-height: 0.93;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.final-car-title-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-car-title-sub {
  margin-top: 22px;
  font-size: 17px;
  color: var(--v3-ink-2);
  line-height: 1.5;
  max-width: 720px;
}
.final-car-title-sub-em { color: var(--v3-forest); font-weight: 600; }

.final-car-aside {
  border-left: 1px solid var(--v3-rule);
  padding-left: 36px;
}
.final-car-aside-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 14px 0 20px;
}
.final-car-aside-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--v3-rule-soft);
  border: 2px solid var(--v3-forest);
  box-shadow: 0 0 0 3px var(--v3-lime-soft);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.final-car-aside-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.final-car-aside-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.final-car-hero-plate-wrap { padding-bottom: 48px; }
.final-car-hero-plate {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--v3-rule-soft);
  border-radius: 12px;
  border-top: 1px solid var(--v3-rule);
  border-bottom: 1px solid var(--v3-rule);
}
.final-car-hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Diagonal-hatch fallback when a chassis has no approved photo on
   file yet — same affordance the registry cards use. */
.final-car-hero-plate-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--v3-ink-2);
}
.final-car-hero-plate-noimg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--v3-rule-soft),
    var(--v3-rule-soft) 14px,
    var(--v3-rule) 14px,
    var(--v3-rule) 15px
  );
}
.final-car-hero-plate-noimg > span:first-child {
  position: relative;
  font-family: var(--v2-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink);
}
.final-car-hero-plate-noimg-sub {
  position: relative;
  font-size: 13px;
  color: var(--v3-ink-3);
  max-width: 360px;
  line-height: 1.5;
}

/* Initials fallback for the aside / comment avatars when the user
   has no photo on file. */
.final-car-aside-avatar--placeholder,
.final-car-comment-avatar--placeholder {
  background-image: none !important;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.final-car-hero-plate-corners {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  mix-blend-mode: difference;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.final-car-hero-plate-actions {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.final-car-hero-plate-counter {
  background: rgba(15, 42, 24, 0.85);
  color: var(--v3-lime);
  padding: 8px 14px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 700;
}
.final-car-thumbs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.final-car-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v3-rule-soft);
  border: 1px solid var(--v3-rule);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.final-car-thumb.is-active { border: 2px solid var(--v3-forest); }
.final-car-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "+N" overlay on the last visible thumb when there are more
   photos than fit in the strip — clicking still cycles into the
   lightbox to see the rest. */
.final-car-thumb-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 42, 24, 0.75);
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.final-car-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-car-tabs-row {
  display: flex;
  padding: 0 var(--v3-shell-pad);
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.final-car-tabs-row::-webkit-scrollbar { display: none; }
.final-car-tabs-row a {
  padding: 20px 24px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 160ms;
}
.final-car-tabs-row a.is-active {
  color: var(--v3-forest);
  border-bottom-color: var(--v3-forest);
}
.final-car-tabs-row a:hover { color: var(--v3-ink); }

/* Section split: 300px label / 1fr content. Outer is full-bleed
   for the bottom rule + optional card bg; inner v3-shell holds the
   grid so it's centred at 1280px. */
.final-car-block {
  padding-top: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-car-block > .v3-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
}
.final-car-block--card { background: var(--v3-card); }
.final-car-block-h2 {
  font-size: clamp(36px, 5vw, 52px);
  margin: 14px 0 0;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
.final-car-block-p {
  font-size: 14px;
  color: var(--v3-ink-2);
  margin-top: 18px;
  line-height: 1.55;
}

/* Grouped Build Sheet — three sections (Identity / Build &
   Drivetrain / History & Status) mirroring the live registry
   record. Each group is a white panel card on the cream section
   bg, with a denser 4-column field grid so a long spec list reads
   as a structured spec sheet rather than a wall of label/value
   pairs. `is-wide` fields span 2 columns for VIN, accident dates,
   factory options, etc. */
.final-car-spec-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.final-car-spec-group {
  margin: 0;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  padding: 24px 28px 28px;
}
.final-car-spec-group-label {
  display: flex;
  align-items: center;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v3-rule);
}
/* Lime accent dash before each group label so the eye can pick out
   each card at a glance. */
.final-car-spec-group-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 12px;
  background: var(--v3-lime);
  flex-shrink: 0;
}
.final-car-spec-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 28px;
  margin: 0;
}
.final-car-spec-field { margin: 0; min-width: 0; }
.final-car-spec-field.is-wide { grid-column: span 2; }
.final-car-spec-field dt {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  margin: 0 0 6px;
}
.final-car-spec-field dd {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink);
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
}

.final-car-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.final-car-specs-table tr { border-bottom: 1px solid var(--v3-rule-soft); }
.final-car-specs-table tr:first-child { border-top: 1px solid var(--v3-rule); }
.final-car-specs-table td {
  padding: 16px 0;
  font-size: 16px;
  color: var(--v3-ink);
}
.final-car-specs-table td:first-child {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  width: 32%;
}

/* Rarity panel — forest with lime accents */
/* Forest-bg rarity panel — outer full-bleed (with the radial-glow
   ::before extending beyond the shell), inner v3-shell holds the
   grid so the content lines up with the page's other sections at
   1280px. */
.final-car-rarity {
  background: var(--v3-forest);
  color: #fff;
  padding-top: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--v3-rule);
  position: relative;
  overflow: hidden;
}
.final-car-rarity::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(174, 243, 89, 0.12), transparent 60%);
  pointer-events: none;
}
.final-car-rarity > .v3-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
}
.final-car-rarity-num {
  font-size: clamp(56px, 7vw, 80px);
  margin: 14px 0 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.final-car-rarity-num em {
  color: var(--v3-lime);
  font-style: normal;
}
.final-car-rarity-blurb {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
/* `a.` selector wins the specificity battle against the global
   `.v3-root a { color: inherit }` rule (which would otherwise let
   the surrounding forest panel's white text bleed through). */
a.final-car-rarity-cta,
.final-car-rarity-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--v3-lime);
  color: var(--v3-forest);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(174, 243, 89, 0.2);
  font-family: inherit;
  text-decoration: none;
}
a.final-car-rarity-cta:hover,
.final-car-rarity-cta:hover {
  background: var(--v3-lime-dim);
  color: var(--v3-forest);
}
.final-car-rarity-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
  font-weight: 700;
}
.final-car-rarity-row {
  display: grid;
  grid-template-columns: 70px 1fr 100px 60px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.final-car-rarity-row .code {
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.final-car-rarity-row .name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
}
.final-car-rarity-row .bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.final-car-rarity-row .bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
}
.final-car-rarity-row .pct {
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}
.final-car-rarity-row.is-this .code,
.final-car-rarity-row.is-this .pct { color: var(--v3-lime); }
.final-car-rarity-row.is-this .name {
  color: #fff;
  font-style: italic;
  font-weight: 600;
}
.final-car-rarity-row.is-this .bar-fill { background: var(--v3-lime); }
.final-car-rarity-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.final-car-rarity-stat-num {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.final-car-rarity-stat-label {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
}

/* Ownership chain timeline */
.final-car-owners {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.final-car-owners::before {
  content: '';
  position: absolute;
  left: 96px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--v3-rule);
}
.final-car-owner-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v3-rule-soft);
  position: relative;
}
.final-car-owner-row:last-child { border-bottom: 0; }
.final-car-owner-dates {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v3-ink-3);
  line-height: 1.5;
}
.final-car-owner-body {
  position: relative;
  padding-left: 26px;
}
.final-car-owner-dot {
  position: absolute;
  left: -7px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--v3-paper);
  border: 2px solid var(--v3-forest);
}
.final-car-owner-dot.is-current {
  background: var(--v3-lime);
  box-shadow: 0 0 0 4px var(--v3-lime-soft);
}
.final-car-owner-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.final-car-owner-name {
  font-size: 26px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.final-car-owner-current {
  color: var(--v3-forest);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
}
.final-car-owner-loc {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v3-ink-3);
}
.final-car-owner-note {
  font-size: 14px;
  color: var(--v3-ink-2);
  margin: 8px 0 0;
  line-height: 1.55;
}

/* Documented history */
.final-car-history-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  padding: 22px 0;
  border-top: 1px solid var(--v3-rule);
}
.final-car-history-date {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-forest);
}
.final-car-history-title {
  font-size: 24px;
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.final-car-history-body {
  font-size: 14px;
  color: var(--v3-ink-2);
  margin: 0;
  line-height: 1.55;
}

/* Comments */
.final-car-comment-input {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--v3-rule);
  margin-bottom: 28px;
  align-items: center;
  border-radius: 10px;
  background: var(--v3-card);
}

/* Real comment composer (signed-in path) — wraps an avatar
   alongside a labelled textarea and submit row. */
.final-car-comment-form {
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  background: var(--v3-card);
  padding: 18px;
  margin-bottom: 28px;
}
.final-car-comment-form-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.final-car-comment-form-body { min-width: 0; }
.final-car-comment-textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  color: var(--v3-ink);
  resize: vertical;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.final-car-comment-textarea:focus {
  border-color: var(--v3-forest);
  box-shadow: 0 0 0 3px rgba(174, 243, 89, 0.32);
}
.final-car-comment-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.final-car-comment-form-hint {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  font-weight: 600;
}
.final-car-comment-form-hint.is-error {
  color: #b3261e;
}
.final-car-comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v3-rule-soft);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.final-car-comment-row {
  padding: 24px 0;
  border-top: 1px solid var(--v3-rule-soft);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
}
.final-car-comment-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.final-car-comment-author {
  font-weight: 600;
  font-size: 14px;
}
.final-car-comment-time {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--v3-ink-3);
}
.final-car-comment-text {
  margin: 0;
  font-size: 15px;
  color: var(--v3-ink);
  line-height: 1.6;
}
.final-car-comment-actions {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 700;
}
.final-car-comment-actions a { color: var(--v3-ink-3); cursor: pointer; }
.final-car-comment-actions a:hover { color: var(--v3-ink); }

/* Cardetail responsive cascade. Outer .final-car-* keeps full-bleed
   bg/border with vertical padding only; the inner > .v3-shell is
   what carries the grid layout. */
@media (max-width: 1080px) {
  .final-car-title-row { padding-top: 40px; padding-bottom: 28px; }
  .final-car-title-row > .v3-shell { grid-template-columns: 1fr; gap: 32px; }
  .final-car-aside { border-left: 0; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--v3-rule); }
  .final-car-block { padding-top: 56px; padding-bottom: 56px; }
  .final-car-block > .v3-shell { grid-template-columns: 1fr; gap: 28px; }
  .final-car-rarity { padding-top: 56px; padding-bottom: 56px; }
  .final-car-rarity > .v3-shell { grid-template-columns: 1fr; gap: 32px; }
  .final-car-thumbs { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 768px) {
  .final-car-breadcrumb > .v3-shell { padding-top: 12px; padding-bottom: 12px; }
  .final-car-breadcrumb-actions { gap: 8px; }
  .final-car-title-h1 { font-size: clamp(40px, 11vw, 80px); }
  .final-car-hero-plate { aspect-ratio: 16 / 10; }
  .final-car-thumbs { grid-template-columns: repeat(4, 1fr); }
  .final-car-block { padding-top: 40px; padding-bottom: 40px; }
  .final-car-block > .v3-shell { gap: 20px; }
  .final-car-rarity { padding-top: 48px; padding-bottom: 48px; }
  .final-car-rarity-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .final-car-owners::before { display: none; }
  .final-car-owner-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .final-car-owner-body { padding-left: 0; }
  .final-car-owner-dot { display: none; }
  .final-car-history-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 480px) {
  .final-car-title-h1 { font-size: clamp(32px, 12vw, 60px); }
  .final-car-rarity-num { font-size: clamp(44px, 14vw, 64px); }
  .final-car-rarity-row { grid-template-columns: 56px 1fr 60px; }
  .final-car-rarity-row .bar { display: none; }
  .final-car-thumbs { grid-template-columns: repeat(3, 1fr); }
  .final-car-tabs-row a { padding: 16px 16px; font-size: 10px; }
}

/* ============================================================
   Cardetail — Photo lightbox
   Native <dialog> centred over a forest-tinted backdrop. Image
   sits inset from the viewport edge with prev / next chevrons
   and a small mono counter at the bottom. Body scroll is
   manually locked while the dialog is open (registry.blade.php
   pattern); keyboard arrows + Esc are wired in the cardetail
   <script>.
   ============================================================ */
.final-car-lightbox {
  /* Fill the viewport so the image inside (which uses inset/object-
     fit to scale) is centred inside it. The previous `margin: 0` +
     fixed-width combo pinned the dialog to the left edge. */
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  inset: 0;
  color: var(--v3-paper);
}
.final-car-lightbox::backdrop {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(6px);
}
.final-car-lightbox-img {
  position: absolute;
  inset: 56px 80px 64px 80px;
  width: calc(100% - 160px);
  height: calc(100% - 120px);
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.final-car-lightbox-close,
.final-car-lightbox-arrow {
  position: absolute;
  background: rgba(245, 243, 238, 0.10);
  color: var(--v3-paper);
  border: 1px solid rgba(245, 243, 238, 0.28);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--v2-mono);
  transition: background 160ms, border-color 160ms;
}
.final-car-lightbox-close {
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  z-index: 2;
}
.final-car-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  font-size: 28px;
  line-height: 1;
  z-index: 2;
  border-radius: 8px;
}
.final-car-lightbox-arrow--prev { left: 18px; }
.final-car-lightbox-arrow--next { right: 18px; }
.final-car-lightbox-close:hover,
.final-car-lightbox-arrow:hover {
  background: rgba(245, 243, 238, 0.20);
  border-color: rgba(245, 243, 238, 0.5);
}
.final-car-lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.72);
  font-weight: 700;
  z-index: 2;
}

/* On phones, the viewer fills the screen edge-to-edge — arrows
   pull in tighter so they don't overlap the photo. */
@media (max-width: 768px) {
  .final-car-lightbox-img {
    inset: 50px 12px 56px 12px;
    width: calc(100% - 24px);
    height: calc(100% - 106px);
  }
  .final-car-lightbox-arrow { width: 40px; height: 56px; }
  .final-car-lightbox-arrow--prev { left: 8px; }
  .final-car-lightbox-arrow--next { right: 8px; }
}

/* ============================================================
   Upload Images dialog — modal with drag-drop, thumbs, submit.
   Mirrors the live cardetails Upload Images modal with V3
   styling.
   ============================================================ */
.final-car-upload {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  inset: 0;
  color: var(--v3-ink);
}
.final-car-upload[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-car-upload::backdrop {
  background: rgba(20, 30, 26, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.final-car-upload-card {
  position: relative;
  background: var(--v3-card);
  border-radius: 16px;
  width: min(620px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 32px 32px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  margin: 16px;
}
.final-car-upload-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-paper);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  color: var(--v3-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-car-upload-close:hover { background: var(--v3-rule-soft); }

.final-car-upload-head { margin-bottom: 22px; }
.final-car-upload-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.final-car-upload-head p {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}

.final-car-upload-drop {
  display: block;
  position: relative;
  border: 1.5px dashed var(--v3-rule);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  background: var(--v3-paper);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.final-car-upload-drop:hover,
.final-car-upload-drop.is-dragging {
  border-color: var(--v3-forest);
  background: var(--v3-rule-soft);
}
.final-car-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.final-car-upload-drop-inner svg {
  color: var(--v3-forest);
  margin-bottom: 10px;
}
.final-car-upload-drop-cta {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--v3-ink);
}
.final-car-upload-drop-cta span {
  color: var(--v3-forest);
  font-weight: 700;
  text-decoration: underline;
}
.final-car-upload-drop-hint {
  margin: 0;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
}

.final-car-upload-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.final-car-upload-thumbs:empty { display: none; }
.final-car-upload-thumb {
  position: relative;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
}
.final-car-upload-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.final-car-upload-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 30, 26, 0.78);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-car-upload-thumb-remove:hover { background: rgba(20, 30, 26, 0.92); }
.final-car-upload-thumb-name {
  display: none; /* Filename tooltip on hover only — keep tile clean. */
}

.final-car-upload-error {
  margin: 14px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.22);
  border-radius: 8px;
}

.final-car-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 600px) {
  .final-car-upload-card {
    padding: 24px 22px 22px;
    width: calc(100% - 16px);
    margin: 8px;
    border-radius: 14px;
  }
  .final-car-upload-head h3 { font-size: 19px; }
  .final-car-upload-actions { flex-direction: column-reverse; }
  .final-car-upload-actions .v3-btn { width: 100%; justify-content: center; }
  .final-car-upload-drop { padding: 26px 18px; }
  .final-car-title-actions { width: 100%; align-items: stretch; }
  .final-car-upload-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Certificate Request — title-row button states + modal.
   The button itself uses .v3-btn variants; these rules are just
   for the disabled-status pill and the muted explanatory notes
   (maintenance / needs-upload / unverified) that sit in the
   title-row action stack.
   ============================================================ */
.final-car-cert-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.final-car-cert-btn svg { display: block; }
.final-car-cert-btn.is-disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}
.final-car-cert-note {
  margin: 0;
  max-width: 280px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--v3-ink-3);
  text-align: right;
}

/* ============================================================
   Certificate Request modal — same shell pattern as the upload
   dialog (full-viewport <dialog> with a centred white card),
   but wider and with a 2-col form grid.
   ============================================================ */
.final-car-cert {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  inset: 0;
  color: var(--v3-ink);
}
.final-car-cert[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-car-cert::backdrop {
  background: rgba(20, 30, 26, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.final-car-cert-card {
  position: relative;
  background: var(--v3-card);
  border-radius: 16px;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 32px 32px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  margin: 16px;
}
.final-car-cert-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-paper);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  color: var(--v3-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-car-cert-close:hover { background: var(--v3-rule-soft); }

.final-car-cert-head { margin-bottom: 22px; padding-right: 36px; }
.final-car-cert-head h3 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.final-car-cert-head p {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}

.final-car-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.final-car-cert-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.final-car-cert-field.is-wide { grid-column: 1 / -1; }
.final-car-cert-field > span {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-car-cert-field > span em {
  color: var(--v3-forest);
  font-style: normal;
  margin-left: 2px;
}
.final-car-cert-field input,
.final-car-cert-field select {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  background: var(--v3-card);
  color: var(--v3-ink);
  width: 100%;
  min-width: 0;
}
.final-car-cert-field input[type="file"] {
  padding: 8px 12px;
  background: var(--v3-paper);
}
.final-car-cert-field input:focus,
.final-car-cert-field select:focus {
  outline: 2px solid var(--v3-forest);
  outline-offset: -1px;
  border-color: var(--v3-forest);
}
.final-car-cert-field input.is-invalid,
.final-car-cert-field select.is-invalid {
  border-color: #b3261e;
  background: rgba(179, 38, 30, 0.04);
}
.final-car-cert-hint {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--v3-ink-3);
  margin-top: -2px;
}

.final-car-cert-error {
  margin: 16px 0 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.22);
  border-radius: 8px;
}

.final-car-cert-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@media (max-width: 600px) {
  .final-car-cert-card {
    padding: 24px 22px 22px;
    width: calc(100% - 16px);
    margin: 8px;
    border-radius: 14px;
  }
  .final-car-cert-head h3 { font-size: 19px; }
  .final-car-cert-grid { grid-template-columns: 1fr; gap: 12px; }
  .final-car-cert-field.is-wide { grid-column: 1; }
  .final-car-cert-actions { flex-direction: column-reverse; }
  .final-car-cert-actions .v3-btn { width: 100%; justify-content: center; }
  .final-car-cert-btn { width: 100%; justify-content: center; }
  .final-car-cert-note { max-width: none; text-align: left; }
}

/* The mono spec table is no longer rendered (replaced with
   grouped fields), but the styles stay in case other surfaces
   reuse them. */

/* Build-sheet groups — gradually collapse the 4-col field grid as
   the viewport narrows so the cards never feel cramped. */
@media (max-width: 1100px) {
  .final-car-spec-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .final-car-spec-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
  .final-car-spec-group { padding: 20px 20px 22px; border-radius: 12px; }
  .final-car-spec-groups { gap: 14px; }
}
@media (max-width: 480px) {
  .final-car-spec-fields { grid-template-columns: 1fr; gap: 14px; }
  .final-car-spec-field.is-wide { grid-column: 1; }
}

/* Comment composer textarea fits the inline avatar column on
   phones. */
@media (max-width: 480px) {
  .final-car-comment-form-row { grid-template-columns: 36px 1fr; gap: 10px; }
  .final-car-comment-textarea { min-height: 72px; }
}

/* ============================================================
   FINAL — Marketplace (V1 layout, V3 skin)
   ============================================================ */

.final-mp-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 48px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-card);
}
.final-mp-stat {
  padding: 24px 28px;
  border-right: 1px solid var(--v3-rule);
}
.final-mp-stat:last-child { border-right: 0; }
.final-mp-stat-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.final-mp-stat-num {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v3-ink);
  line-height: 1;
}

.final-mp-filter-rail {
  padding: 20px var(--v3-shell-pad);
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.final-mp-filter-rail-sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.final-mp-section {
  padding: 56px var(--v3-shell-pad) 32px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-mp-section--bottom { padding: 56px var(--v3-shell-pad) 96px; border-bottom: 0; }
.final-mp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 24px;
  flex-wrap: wrap;
}
.final-mp-section-h2 {
  font-size: 28px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.final-mp-section-h2-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}

.final-mp-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--v3-rule);
  background: var(--v3-card);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms;
}
.final-mp-card:hover { border-color: var(--v3-ink-3); }
.final-mp-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v3-rule-soft);
  position: relative;
}
.final-mp-card.is-large .final-mp-card-img { aspect-ratio: 16 / 9; }
.final-mp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-mp-card-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.final-mp-card-frame-tag {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(15, 42, 24, 0.82);
  color: var(--v3-lime);
  padding: 6px 11px;
  font-size: 11px;
  font-family: var(--v2-mono);
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 4px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.final-mp-card-body { padding: 22px 24px; }
.final-mp-card.is-large .final-mp-card-body { padding: 32px 36px; }
.final-mp-card-meta {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  gap: 12px;
  flex-wrap: wrap;
}
.final-mp-card-headline {
  font-size: 21px;
  margin: 0 0 18px;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.final-mp-card.is-large .final-mp-card-headline { font-size: 30px; }
.final-mp-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--v3-rule);
  padding-top: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.final-mp-card-foot-label {
  font-size: 10px;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.final-mp-card-price {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 4px;
  color: var(--v3-forest);
}
.final-mp-card.is-large .final-mp-card-price { font-size: 38px; }
.final-mp-card-foot-right { text-align: right; }
.final-mp-card-foot-right .meta-mono {
  font-size: 12px;
  color: var(--v3-ink-2);
  font-family: var(--v2-mono);
  font-weight: 600;
}
.final-mp-card-foot-right .seller {
  font-size: 11px;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.final-mp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.final-mp-coming-soon-banner {
  margin-top: 56px;
  padding: 36px 44px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-card);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.final-mp-coming-soon-banner p {
  margin: 10px 0 0;
  max-width: 680px;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}

/* Marketplace responsive */
@media (max-width: 1080px) {
  .final-mp-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .final-mp-stat { border-right: 1px solid var(--v3-rule); }
  .final-mp-stat:nth-child(2n) { border-right: 0; }
  .final-mp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--v3-rule); }
  .final-mp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .final-mp-stat-num { font-size: 24px; }
  .final-mp-stat { padding: 18px 20px; }
  .final-mp-grid { grid-template-columns: 1fr; }
  .final-mp-filter-rail { padding: 16px var(--v3-shell-pad); gap: 12px; }
  .final-mp-filter-rail-sort { margin-left: 0; width: 100%; }
  .final-mp-coming-soon-banner { padding: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 480px) {
  .final-mp-stats-strip { grid-template-columns: 1fr; }
  .final-mp-stat { border-right: 0 !important; border-bottom: 1px solid var(--v3-rule); }
  .final-mp-stat:last-child { border-bottom: 0; }
  .final-mp-card-headline { font-size: 18px !important; }
  .final-mp-card-price { font-size: 22px !important; }
  .final-mp-card.is-large .final-mp-card-headline { font-size: 22px !important; }
  .final-mp-card.is-large .final-mp-card-price { font-size: 28px !important; }
}

/* ============================================================
   FINAL — Verify submission (V1 layout, V3 skin)
   ============================================================ */

/* Stepper outer-bleed wraps the shell so the bg + bottom rule
   span the full viewport while content stays centred at 1280px
   like the registry page. */
.final-verify-stepper-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.final-verify-stepper {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.final-verify-h1 {
  font-size: clamp(40px, 6.5vw, 80px);
  margin: 14px 0 0;
  line-height: 0.97;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.final-verify-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1;
  min-width: 180px;
}
.final-verify-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--v3-ink-3);
}
.final-verify-step-circle.is-done {
  background: var(--v3-forest);
  color: var(--v3-lime);
  border-color: transparent;
}
.final-verify-step-circle.is-active {
  background: var(--v3-lime);
  color: var(--v3-forest);
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--v3-lime-soft);
}
.final-verify-step-label-small {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-verify-step-label {
  font-size: 14px;
  color: var(--v3-ink-3);
  margin-top: 2px;
}
.final-verify-step.is-active .final-verify-step-label {
  color: var(--v3-ink);
  font-weight: 600;
}
.final-verify-step.is-done .final-verify-step-label { color: var(--v3-ink); }

/* Form + sidebar — outer section handles padding-y/bg, inner
   shell centres content to 1280px max, the form-grid then splits
   the available width 1fr / 380px. */
.final-verify-form-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-verify-form {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
}
.final-verify-form-h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.final-verify-form-p {
  font-size: 14px;
  color: var(--v3-ink-2);
  margin-bottom: 36px;
  line-height: 1.55;
  max-width: 620px;
}
.final-verify-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.final-verify-field { margin-bottom: 0; }
.final-verify-field-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-verify-field-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--v2-mono);
  font-size: 14px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  color: var(--v3-ink);
  outline: none;
  border-radius: 8px;
  box-sizing: border-box;
}
.final-verify-field-input:focus { border-color: var(--v3-forest); }
.final-verify-field-input.is-readonly { background: var(--v3-rule-soft); }
.final-verify-field-hint {
  font-size: 12px;
  color: var(--v3-ink-3);
  margin-top: 8px;
}
.final-verify-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.final-verify-option {
  padding: 10px 16px;
  border: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--v3-ink-2);
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.final-verify-option.is-on {
  background: var(--v3-forest);
  color: var(--v3-lime);
  border-color: var(--v3-forest);
}
.final-verify-form-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  gap: 12px;
  flex-wrap: wrap;
}

.final-verify-aside-card {
  border: 1px solid var(--v3-rule);
  padding: 24px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--v3-card);
}
.final-verify-aside-card.is-forest {
  background: var(--v3-forest);
  color: #fff;
}
.final-verify-aside-card.is-forest p { color: rgba(255, 255, 255, 0.8); }
.final-verify-aside-illustration {
  aspect-ratio: 4 / 3;
  background: var(--v3-rule-soft);
  position: relative;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-verify-aside-illustration::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--v3-rule-soft),
    var(--v3-rule-soft) 10px,
    var(--v3-rule) 10px,
    var(--v3-rule) 11px
  );
}
.final-verify-aside-illustration-text {
  position: relative;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

@media (max-width: 1080px) {
  .final-verify-form-section { padding: 40px 0; }
  .final-verify-form { grid-template-columns: 1fr; gap: 32px; }
  .final-verify-fields { grid-template-columns: 1fr; gap: 16px; }
  .final-verify-stepper-section { padding: 20px 0; }
  .final-verify-stepper { gap: 20px; }
}
@media (max-width: 768px) {
  .final-verify-step { flex-direction: column; gap: 8px; min-width: 0; flex: 0 0 calc(50% - 10px); }
  .final-verify-step-circle { width: 32px; height: 32px; font-size: 11px; }
  .final-verify-form-foot { flex-direction: column; align-items: stretch; }
  .final-verify-form-foot .v3-btn,
  .final-verify-form-foot .final-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .final-verify-step { flex: 1 1 100%; flex-direction: row; }
}

/* Section group header inside the verification form. Each section
   (Identify / Photographs / Notes) gets its own labelled head + a
   thin top rule so the form reads as three distinct chunks. */
.final-verify-section { margin-bottom: 36px; }
.final-verify-section + .final-verify-section { padding-top: 32px; border-top: 1px solid var(--v3-rule); }
.final-verify-section-head { margin-bottom: 18px; }
.final-verify-section-h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.final-verify-section-p {
  font-size: 13px;
  color: var(--v3-ink-2);
  margin: 8px 0 0;
  line-height: 1.55;
}
.final-verify-field.is-wide { grid-column: 1 / -1; }
.final-verify-field-label em {
  color: var(--v3-forest);
  font-style: normal;
  margin-left: 2px;
}
.final-verify-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.55;
}

/* Photo dropzones — two side-by-side cards for the door-tag and
   firewall-stamp uploads. Click anywhere to open the picker; the
   preview takes over once a file is chosen. */
.final-verify-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.final-verify-photo {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1.5px dashed var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-paper);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color 0.15s, background 0.15s;
}
.final-verify-photo:hover { border-color: var(--v3-forest); background: var(--v3-rule-soft); }
.final-verify-photo input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.final-verify-photo-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.final-verify-photo.is-filled .final-verify-photo-inner { display: none; }
.final-verify-photo-icon {
  font-size: 28px;
  margin-bottom: 12px;
}
.final-verify-photo-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  margin-bottom: 4px;
}
.final-verify-photo-label em {
  color: var(--v3-forest);
  font-style: normal;
  margin-left: 2px;
}
.final-verify-photo-hint {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-verify-photo-preview {
  position: absolute;
  inset: 0;
}
.final-verify-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-verify-photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 30, 26, 0.78);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-verify-photo-clear:hover { background: rgba(20, 30, 26, 0.92); }

/* Form footer — submit button + helper note, right-aligned on
   wide, stacked on mobile. */
.final-verify-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--v3-rule);
}
.final-verify-form-foot-note {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  max-width: 360px;
  line-height: 1.55;
}

.final-verify-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 13px;
  color: #b3261e;
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.22);
  border-radius: 8px;
}

/* Guest gate inside the form column. */
.final-verify-gate {
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  background: var(--v3-card);
  padding: 36px 32px;
}
.final-verify-gate-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* Aside-card text helpers (used on both the verify form sidebar
   and the status-detail sidebar). */
.final-verify-aside-text {
  font-size: 13px;
  color: var(--v3-ink-2);
  margin: 0;
  line-height: 1.6;
}
.final-verify-aside-text-lime {
  font-size: 13px;
  margin: 12px 0 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.final-verify-aside-code { color: var(--v3-forest); font-weight: 700; }
.final-verify-aside-link {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-forest);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}
.final-verify-aside-link.is-lime { color: var(--v3-lime); }
.final-verify-aside-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .final-verify-photos { grid-template-columns: 1fr; }
  .final-verify-section + .final-verify-section { padding-top: 24px; }
  .final-verify-form-foot { flex-direction: column; align-items: stretch; }
  .final-verify-form-foot-note { max-width: none; }
  .final-verify-gate { padding: 28px 24px; }
}

/* ============================================================
   FINAL — Verify status (V1 layout, V3 skin)
   ============================================================ */

/* Status section/body wraps — outer-bleed + inner-shell pattern
   so the page is centred at 1280px like the rest of V3. */
.final-status-section {
  padding: 36px 0;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
}
.final-status-body-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-status-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
}
.final-status-list-section {
  padding: 40px 0 80px;
}

.final-status-stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-paper);
}
.final-status-stages--two { grid-template-columns: repeat(2, 1fr); }
.final-status-stage {
  padding: 24px 26px;
  border-right: 1px solid var(--v3-rule);
}
.final-status-stage:last-child { border-right: 0; }
.final-status-stage.is-active {
  background: var(--v3-forest);
  color: #fff;
}
.final-status-stage-num {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-status-stage.is-active .final-status-stage-num { color: rgba(255, 255, 255, 0.6); }
.final-status-stage-label {
  font-size: 19px;
  font-weight: 500;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.015em;
}
.final-status-stage-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.final-status-stage-icon.is-done {
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
}
.final-status-stage-icon.is-active {
  background: var(--v3-lime);
  color: var(--v3-forest);
}
.final-status-stage-date {
  font-family: var(--v2-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--v3-ink-3);
}
.final-status-stage.is-active .final-status-stage-date { color: rgba(255, 255, 255, 0.7); }
.final-status-meta-row {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--v3-ink-2);
}
.final-status-meta-strong { color: var(--v3-forest); font-weight: 700; }
.final-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  background: #fef0e0;
  color: #a4451d;
}
.final-status-pill .dot {
  width: 7px;
  height: 7px;
  background: #a4451d;
  border-radius: 50%;
}
.final-status-pill.is-done {
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
}
.final-status-pill.is-done .dot { background: var(--v3-forest); }
.final-status-meta-link {
  color: var(--v3-forest);
  font-weight: 700;
  text-decoration: underline;
}

/* Detail view — photos + notes + sidebar summary. */
.final-status-photos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 32px;
}
.final-status-photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
}
.final-status-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.final-status-photo figcaption {
  padding: 12px 14px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  border-top: 1px solid var(--v3-rule);
}
.final-status-notes {
  padding: 24px 26px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-card);
}
.final-status-notes p {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--v3-ink);
  line-height: 1.6;
  white-space: pre-wrap;
}
.final-status-summary { margin: 14px 0 0; }
.final-status-summary > div {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--v3-rule);
  gap: 12px;
}
.final-status-summary dt {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  margin: 0;
}
.final-status-summary dd {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink);
  font-weight: 600;
  text-align: right;
}

/* List view — clickable rows with thumb + frame + status pill. */
.final-status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.final-status-row {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.final-status-row:hover {
  border-color: var(--v3-forest);
  box-shadow: 0 4px 16px rgba(20, 30, 26, 0.08);
}
.final-status-row-thumb {
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--v3-rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-status-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-status-row-thumb-fallback {
  font-size: 22px;
  opacity: 0.4;
}
.final-status-row-frame {
  font-size: 16px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.final-status-row-meta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  margin-top: 4px;
}
.final-status-row-arrow {
  font-size: 20px;
  color: var(--v3-ink-3);
}
.final-status-row:hover .final-status-row-arrow { color: var(--v3-forest); }

.final-status-empty {
  border: 1px dashed var(--v3-rule);
  border-radius: 14px;
  padding: 56px 32px;
  text-align: center;
  background: var(--v3-card);
}
.final-status-empty h2 {
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.final-status-empty p {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .final-status-photos-grid { grid-template-columns: 1fr; }
  .final-status-row {
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
  }
  .final-status-row-thumb { width: 72px; height: 60px; }
  .final-status-row-arrow { display: none; }
  .final-status-list-section { padding: 28px 0 60px; }
}

/* Old standalone .final-status-body is now superseded by
   .final-status-body-section + .final-status-body inside v3-shell.
   Keeping the heading style only. */
.final-status-h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* Activity timeline */
.final-status-tl-row {
  display: grid;
  grid-template-columns: 96px 32px 1fr;
  gap: 0;
  position: relative;
}
.final-status-tl-date {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  padding-top: 6px;
  line-height: 1.5;
}
.final-status-tl-date .time { color: var(--v3-ink-4); }
.final-status-tl-rail { position: relative; }
.final-status-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 9px;
  background: var(--v3-ink-3);
}
.final-status-tl-dot.is-current { background: var(--v3-forest); }
.final-status-tl-dot.is-changes {
  background: #a4451d;
  box-shadow: 0 0 0 3px #fef0e0;
}
.final-status-tl-line {
  position: absolute;
  left: 15px;
  top: 26px;
  bottom: -36px;
  width: 1px;
  background: var(--v3-rule);
}
.final-status-tl-row:last-child .final-status-tl-line { display: none; }
.final-status-tl-body { padding-bottom: 36px; }
.final-status-tl-row:last-child .final-status-tl-body { padding-bottom: 0; }
.final-status-tl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 12px;
  flex-wrap: wrap;
}
.final-status-tl-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.final-status-tl-who {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v3-ink-3);
}
.final-status-tl-text {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}
.final-status-tl-attachments {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.final-status-tl-attachment {
  padding: 6px 12px;
  border: 1px solid var(--v3-rule);
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-2);
  letter-spacing: 0.06em;
  border-radius: 6px;
  background: var(--v3-card);
}

.final-status-reply {
  border: 1px solid var(--v3-forest);
  margin-top: 16px;
  margin-left: 128px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-card);
  box-shadow: 0 0 0 4px var(--v3-lime-soft);
}
.final-status-reply-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--v3-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--v3-paper);
  gap: 12px;
  flex-wrap: wrap;
}
.final-status-reply-textarea {
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border: 0;
  outline: none;
  resize: vertical;
  font-family: var(--v3-font);
  font-size: 14px;
  color: var(--v3-ink);
  background: var(--v3-card);
  box-sizing: border-box;
  line-height: 1.55;
}
.final-status-reply-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--v3-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1080px) {
  .final-status-body-section { padding: 40px 0; }
  .final-status-body { grid-template-columns: 1fr; gap: 32px; }
  .final-status-stages { grid-template-columns: repeat(2, 1fr); }
  .final-status-stage { border-right: 1px solid var(--v3-rule); }
  .final-status-stage:nth-child(2n) { border-right: 0; }
  .final-status-stage:nth-child(-n+2) { border-bottom: 1px solid var(--v3-rule); }
}
@media (max-width: 768px) {
  .final-status-stages { grid-template-columns: 1fr; }
  .final-status-stage { border-right: 0 !important; border-bottom: 1px solid var(--v3-rule); }
  .final-status-stage:last-child { border-bottom: 0; }
  .final-status-tl-row { grid-template-columns: 1fr; }
  .final-status-tl-rail { display: none; }
  .final-status-tl-body { padding-left: 0; padding-bottom: 24px; }
  .final-status-reply { margin-left: 0; }
}

@media (max-width: 480px) {
  .v3-root { --v3-shell-pad: 20px; font-size: 16px; }

  .v2-nav-brand img,
  .v3-nav-brand img { height: 32px; }

  .v3-hero-content { padding: 40px var(--v3-shell-pad) 48px; }
  .v3-hero-pill { margin-bottom: 20px; padding: 5px 10px; }
  .v3-hero-pill-text { font-size: 10px; letter-spacing: 0.12em; }
  .v3-hero-h1 { font-size: clamp(32px, 11vw, 56px); line-height: 1.04; }
  .v3-hero-lede { font-size: 16px; margin: 20px 0 24px; }
  .v3-hero-actions { flex-direction: column; gap: 10px; }
  .v3-hero-actions .v3-btn { width: 100%; flex: none; }

  .v3-hero-stat { padding: 18px var(--v3-shell-pad); }
  .v3-hero-stat-num { font-size: 22px; }
  .v3-hero-stat-label { font-size: 12px; margin-top: 4px; }

  .v3-quote { padding: 32px var(--v3-shell-pad); }
  .v3-quote-text { font-size: 18px; line-height: 1.4; }

  .v3-howit { padding: 32px var(--v3-shell-pad); }
  .v3-howit-h2 { font-size: 26px; }
  .v3-howit-step { padding: 18px 0; gap: 16px; }
  .v3-howit-step-h3 { font-size: 18px; }
  .v3-howit-step-p { font-size: 15px; }

  .v3-recent { padding: 32px var(--v3-shell-pad); }
  .v3-recent-head h2 { font-size: 26px; }
  .v3-recent-head { margin-bottom: 24px; }

  .v3-mp { padding: 0 var(--v3-shell-pad) 40px; }
  .v3-mp-text { padding: 24px var(--v3-shell-pad); }
  .v3-mp-h2 { font-size: clamp(22px, 7vw, 32px); }
  .v3-mp-p { font-size: 15px; margin: 16px 0 24px; }
  .v3-mp-img { aspect-ratio: 4 / 3; }
  .v3-mp-img-chip { bottom: 12px; left: 12px; padding: 8px 12px; gap: 8px; }
  .v3-mp-img-chip-meta { font-size: 12px; }

  .v3-footer { padding: 32px var(--v3-shell-pad); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .v3-footer-grid { gap: 24px; padding-bottom: 24px; }
  .v3-footer-logo { height: 44px; }
  .v3-footer-tagline { font-size: 14px; }
}

@media (max-width: 380px) {
  .v3-root { --v3-shell-pad: 16px; }
  .v3-hero-h1 { font-size: clamp(28px, 12vw, 48px); }
  .v3-hero-stat-num { font-size: 20px; }
}

/* ============================================================
   FINAL — V1 layouts in V3 visual language
   Shared chip / button / eyebrow / page-head primitives used by the
   Final-skinned registry, cardetail, marketplace, verification, and
   verification-status pages.
   ============================================================ */

/* Eyebrow with leading "/" prefix — mono caps in forest green */
.final-eyebrow {
  font-size: 11px;
  font-family: var(--v2-mono);
  color: var(--v3-forest);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}
.final-eyebrow--lime { color: var(--v3-lime); }
.final-eyebrow--ink { color: var(--v3-ink-3); }

/* Mono micro-labels at three sizes (10/11px) */
.final-mono-10 {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-mono-11 {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v3-ink-3);
}

/* Chips: verified / pending / rare / soft / forestSoft / featured */
.final-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.final-chip-verified { background: var(--v3-forest); color: var(--v3-lime); border-color: var(--v3-forest); }
.final-chip-pending { background: var(--v3-lime-soft); color: var(--v3-forest); border-color: var(--v3-forest); }
.final-chip-rare { background: var(--v3-lime); color: var(--v3-forest); }
.final-chip-soft { background: var(--v3-rule-soft); color: var(--v3-ink-2); }
.final-chip-forest-soft { background: var(--v3-lime-soft); color: var(--v3-forest); }
.final-chip-featured { background: var(--v3-lime); color: var(--v3-forest); }

/* Buttons: primary (forest), lime, ghost — V3 dialect */
.final-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.final-btn.final-btn-primary { background: var(--v3-forest); color: #fff; }
.final-btn.final-btn-primary:hover { background: var(--v3-forest-deep); }
.final-btn.final-btn-lime { background: var(--v3-lime); color: var(--v3-forest); font-weight: 700; }
.final-btn.final-btn-lime:hover { background: var(--v3-lime-dim); }
.final-btn.final-btn-ghost {
  background: transparent;
  color: var(--v3-ink);
  border: 1px solid var(--v3-rule);
}
.final-btn.final-btn-ghost:hover { border-color: var(--v3-ink); }
.final-btn.final-btn-tiny {
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--v2-mono);
  font-weight: 700;
}

@media (pointer: coarse) {
  .final-btn { min-height: 44px; }
  .final-btn.final-btn-tiny { min-height: 36px; }
}

/* Section + page-head primitives shared across Final pages */
.final-section {
  padding: 72px var(--v3-shell-pad) 48px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-section--card { background: var(--v3-card); }
.final-section--paper { background: var(--v3-paper); }

.final-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.final-page-head-text {
  flex: 1;
  min-width: 0;
  max-width: 820px;
}
.final-page-head h1 {
  font-size: clamp(48px, 7.5vw, 96px);
  margin: 18px 0 0;
  line-height: 0.93;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.final-page-head-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-page-head-lede {
  font-size: 18px;
  color: var(--v3-ink-2);
  margin: 24px 0 0;
  max-width: 680px;
  line-height: 1.55;
}
.final-page-head-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mono-caps filter chip — used on registry + marketplace filter rails */
.final-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--v3-ink-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.final-filter-chip:hover { border-color: var(--v3-ink-3); }
.final-filter-chip.is-active {
  border-color: var(--v3-forest);
  background: var(--v3-forest);
  color: var(--v3-lime);
}
.final-filter-chip-count { opacity: 0.65; }

@media (pointer: coarse) {
  .final-filter-chip { min-height: 36px; }
}

/* Search + select inputs used on Final filter rails */
.final-input,
.final-select {
  padding: 9px 14px;
  font-family: var(--v2-mono);
  font-size: 12px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  color: var(--v3-ink);
  outline: none;
  border-radius: 6px;
}
.final-input { width: 260px; max-width: 100%; }
.final-input::placeholder { color: var(--v3-ink-3); }
.final-select {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--v3-ink-3) 50%),
                    linear-gradient(135deg, var(--v3-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 1px), calc(100% - 11px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

@media (pointer: coarse) {
  .final-input { font-size: 14px; padding: 12px 14px; }
  .final-select { font-size: 13px; padding: 12px 32px 12px 14px; min-height: 44px; }
}

/* ============================================================
   FINAL — Registry directory (V1 layout, V3 skin)
   ============================================================ */

.final-dir-filters {
  padding: 20px var(--v3-shell-pad);
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.final-dir-filters-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  /* Overflow stays *visible* on the row so the sort popover (and any
     other absolutely-positioned child) can extend below it.  If the
     overall content is too wide for narrow desktops, the chip strip
     below absorbs the horizontal scroll; the search-row controls keep
     their natural widths. */
}
.final-dir-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  /* Chip strip is the only piece that scrolls horizontally — keeps
     the popover unclipped while still letting the rail collapse
     gracefully when chip counts get long. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.final-dir-filter-chips::-webkit-scrollbar { height: 4px; }
.final-dir-search { flex-shrink: 0; }
/* The form holding the rail shouldn't allow its inner row to break
   the overall page layout, so cap its width at the shell. */
.final-dir-form { width: 100%; }
.final-dir-filter-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 8px;
}
.final-dir-search {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.final-dir-grid-wrapper { padding: 40px var(--v3-shell-pad) 96px; }
.final-dir-count {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 24px;
}
.final-dir-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--v3-rule);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
}
.final-dir-card {
  background: var(--v3-card);
  padding: 18px;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 200ms;
}
.final-dir-card:hover { background: var(--v3-paper); }
.final-dir-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--v3-rule-soft);
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 6px;
}
.final-dir-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-dir-card-state-tl { position: absolute; top: 8px; left: 8px; }
.final-dir-card-state-tr { position: absolute; top: 8px; right: 8px; }

/* Diagonal-hatch placeholder for chassis without a photo on file —
   mirrors the chassis-tag illustration in the verification flow.  Honest
   about what's archived; when an owner uploads a photo it replaces this. */
.final-dir-card-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--v3-rule-soft);
  overflow: hidden;
  text-align: center;
  padding: 12px;
}
.final-dir-card-noimg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    var(--v3-rule-soft),
    var(--v3-rule-soft) 10px,
    var(--v3-rule) 10px,
    var(--v3-rule) 11px
  );
}
.final-dir-card-noimg-label,
.final-dir-card-noimg-sub {
  position: relative;
  font-family: var(--v2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.final-dir-card-noimg-label {
  font-size: 11px;
  color: var(--v3-ink-2);
}
.final-dir-card-noimg-sub {
  font-size: 9px;
  color: var(--v3-ink-3);
  letter-spacing: 0.18em;
}
.final-dir-card-frame {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.final-dir-card-title {
  font-size: 22px;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.final-dir-card-trans {
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 600;
}
.final-dir-card-color {
  font-size: 14px;
  color: var(--v3-forest);
  font-style: italic;
  margin-top: 4px;
}
.final-dir-card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--v3-rule-soft);
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.final-dir-card-foot-arrow { color: var(--v3-forest); }

.final-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.final-pagination-btn {
  padding: 10px 14px;
  min-width: 44px;
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--v3-rule);
  background: var(--v3-card);
  color: var(--v3-ink-2);
  cursor: pointer;
  border-radius: 6px;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.final-pagination-btn:hover { border-color: var(--v3-ink-3); }
.final-pagination-btn.is-active {
  border-color: var(--v3-forest);
  background: var(--v3-forest);
  color: var(--v3-lime);
}

/* Responsive cascade for Final directory */
@media (max-width: 1080px) {
  .final-section { padding: 56px var(--v3-shell-pad) 36px; }
  .final-page-head h1 { font-size: clamp(40px, 7vw, 72px); }
  .final-dir-grid { grid-template-columns: repeat(3, 1fr); }
  .final-dir-grid-wrapper { padding: 32px var(--v3-shell-pad) 64px; }
}

@media (max-width: 768px) {
  .final-section { padding: 40px var(--v3-shell-pad) 28px; }
  .final-page-head { flex-direction: column; align-items: stretch; gap: 24px; }
  .final-page-head-cta { justify-content: flex-start; }
  /* Card grid switches to 2 columns with visible gaps and per-card borders.
     The desktop "1px gap on a rule background = clean tile divider" trick
     reads as no separation at all on a phone, so each card stands on its
     own outline instead. */
  .final-dir-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .final-dir-card {
    border: 1px solid var(--v3-rule);
    border-radius: 10px;
  }
  /* Filter row restacks one control per row on mobile.  The horizontal
     chip rail with negative-margin breakout was unusable (no slide
     indicator + scroll fought the page's vertical scroll); instead,
     visual-fixture chips (USDM, JDM, etc.) are hidden on phones — only
     the functional Verified / All toggles stay — and they wrap onto
     the same line without a scroller. The Sort select gets its own
     full-width row so "Recently verified" no longer truncates inside
     a 50%-width container. */
  .final-dir-filters-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .final-dir-filter-chips {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 8px;
  }
  .final-dir-filter-chips > button.final-filter-chip { display: none; }
  .final-dir-search {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .final-dir-search > .final-input,
  .final-dir-search > .final-dir-allfilters,
  .final-dir-search > .final-select {
    width: 100%;
    min-width: 0;
  }
  .final-input { width: 100%; flex: 1; }
}

@media (max-width: 480px) {
  .final-section { padding: 32px var(--v3-shell-pad) 24px; }
  .final-page-head h1 { font-size: clamp(32px, 11vw, 56px); }
  .final-page-head-lede { font-size: 16px; }
  .final-dir-grid { grid-template-columns: 1fr; gap: 12px; }
  .final-dir-grid-wrapper { padding: 24px var(--v3-shell-pad) 48px; }
  .final-dir-card { padding: 14px; }
  .final-dir-card-title { font-size: 18px; }
  .final-pagination-btn { padding: 8px 10px; min-width: 36px; font-size: 11px; }
}

/* ============================================================
   FINAL — Registry generation tabs (MK I → MK V switcher)
   Mirrors the live `/tsr/directory` tab strip, but uses the V3
   forest/lime palette and gives each tab a 3-line layout:
   gen label, chassis-code + production years, count.
   ============================================================ */
.final-gen-tabs-wrap {
  padding: 0 var(--v3-shell-pad) 28px;
}
.final-gen-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--v3-rule);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
}
.final-gen-tab {
  background: var(--v3-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms;
  min-height: 110px;
}
.final-gen-tab:hover { background: var(--v3-paper); }
.final-gen-tab.is-active {
  background: var(--v3-forest);
  color: var(--v3-paper);
}
.final-gen-tab-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.final-gen-tab.is-active .final-gen-tab-label { color: var(--v3-lime); }
.final-gen-tab-code {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 700;
}
.final-gen-tab.is-active .final-gen-tab-code { color: rgba(174, 243, 89, 0.78); }
.final-gen-tab-count {
  margin-top: auto;
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--v3-ink);
  padding-top: 10px;
  border-top: 1px solid var(--v3-rule-soft);
}
.final-gen-tab.is-active .final-gen-tab-count {
  color: var(--v3-paper);
  border-top-color: rgba(174, 243, 89, 0.25);
}

/* "All filters" trigger sits beside the search input; needs to stay on
   one line so it doesn't wrap awkwardly inside the search row. */
.final-dir-allfilters { white-space: nowrap; position: relative; }
/* Tiny lime indicator dot when one or more advanced filters are
   active — same affordance the live registry's filter button uses. */
.final-dir-allfilters-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--v3-lime);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   FINAL — Compact sort popover
   Native <details>/<summary> drives open/close. The trigger is
   icon-only on desktop so the filter rail stays a single band;
   on mobile it expands to a full-width labelled button so a
   solitary icon doesn't look out of place.
   ============================================================ */
.final-dir-sort {
  position: relative;
  flex-shrink: 0;
}
.final-dir-sort summary { list-style: none; cursor: pointer; }
.final-dir-sort summary::-webkit-details-marker { display: none; }
.final-dir-sort summary::marker { content: ''; }

.final-dir-sort-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  min-height: 38px;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
/* Default desktop look: icon only, no text. */
.final-dir-sort-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--v3-ink-2);
}
.final-dir-sort-label { display: none; }
/* Non-default sort selected → trigger flips to the same anchored
   forest+lime treatment the Verified chip uses. With the indicator
   dot gone, this fill is the entire affordance — needs to be
   unmissable on a busy filter rail. */
.final-dir-sort-trigger.is-active {
  background: var(--v3-forest);
  border-color: var(--v3-forest);
  color: var(--v3-lime);
}
.final-dir-sort-trigger.is-active .final-dir-sort-icon { color: var(--v3-lime); }

/* Down-caret on the open state, just for the visual hint */
details[open] .final-dir-sort-trigger { border-color: var(--v3-ink); }

.final-dir-sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  padding: 6px;
  z-index: 50;
  box-shadow: 0 12px 28px rgba(15, 42, 24, 0.10);
}
.final-dir-sort-menu-head {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  padding: 8px 12px 6px;
}
.final-dir-sort-option {
  display: block;
  padding: 9px 12px;
  font-family: var(--v2-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--v3-ink);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.final-dir-sort-option:hover { background: var(--v3-paper); }
.final-dir-sort-option.is-active {
  background: var(--v3-forest);
  color: var(--v3-lime);
  font-weight: 700;
}

/* Mobile: trigger spans the full row and shows the active sort
   label so the bar doesn't read as just a stray icon button. */
@media (max-width: 768px) {
  .final-dir-sort { width: 100%; }
  .final-dir-sort-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0 14px;
    gap: 10px;
  }
  .final-dir-sort-label {
    display: inline;
    font-family: var(--v2-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--v3-ink-2);
  }
  .final-dir-sort-trigger.is-active .final-dir-sort-label {
    color: var(--v3-lime);
  }
  .final-dir-sort-menu {
    left: 0;
    right: 0;
    width: 100%;
  }
}

/* Disabled pagination chevrons / ellipses keep their footprint but
   render dimmed, no pointer. */
.final-pagination-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* Empty-state CTA wrapper */
.final-dir-empty-cta { margin-top: 22px; }

/* Plain-language list of what's currently filtering the result set —
   shown above the Clear button on empty-state pads so the user can
   see exactly why their grid is empty. */
.final-dir-empty-list {
  margin: 14px auto 0;
  padding: 12px 16px;
  list-style: none;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  display: inline-block;
  text-align: left;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--v3-ink);
  font-weight: 600;
}
.final-dir-empty-list li { padding: 3px 0; }
.final-dir-empty-list li::before {
  content: '·';
  color: var(--v3-forest);
  font-weight: 900;
  margin-right: 8px;
}

/* Inline hint above the grid — used when the user typed a too-short
   search term that the server silently ignored. */
.final-dir-hint {
  background: var(--v3-lime-soft);
  border: 1px solid var(--v3-forest);
  color: var(--v3-forest);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  font-weight: 500;
}

/* Soft loading state for the AJAX swap target while a filter change is
   in flight. Keeps the previous content visible underneath so the page
   doesn't visually "blink" — just dims it slightly so the user knows
   we're working. */
[data-registry-target] {
  position: relative;
  transition: opacity 160ms;
}
[data-registry-target].is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* Empty-state pad shown when a generation has no chassis with photos
   yet (the older A40/A60 tables can be sparser than MK4/5). */
.final-dir-empty {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  padding: 48px 32px;
  text-align: center;
  color: var(--v3-ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .final-gen-tab { padding: 16px; min-height: 100px; }
  .final-gen-tab-label { font-size: 16px; }
}

@media (max-width: 768px) {
  /* On mobile the 5-tab strip becomes a full-bleed horizontal scroller —
     no rounded corners, no shell padding, edge-to-edge with the viewport
     so it lines up with the rest of the homepage's mobile language.  The
     first/last tabs carry the shell-pad inside their padding so labels
     don't kiss the screen edges. */
  .final-gen-tabs-wrap {
    padding: 0 0 24px;
  }
  .final-gen-tabs-wrap > .v3-shell {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  .final-gen-tabs {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .final-gen-tabs::-webkit-scrollbar { display: none; }
  .final-gen-tab { padding: 14px; min-height: auto; }
  .final-gen-tab:first-child { padding-left: var(--v3-shell-pad); }
  .final-gen-tab:last-child { padding-right: var(--v3-shell-pad); }
  .final-gen-tab-count { margin-top: 6px; padding-top: 8px; }
}

@media (max-width: 480px) {
  .final-gen-tabs-wrap { padding: 0 0 20px; }
  .final-gen-tab { padding: 12px; gap: 4px; }
  .final-gen-tab:first-child { padding-left: var(--v3-shell-pad); }
  .final-gen-tab:last-child { padding-right: var(--v3-shell-pad); }
  .final-gen-tab-label { font-size: 14px; }
  .final-gen-tab-code { font-size: 9px; letter-spacing: 0.1em; }
  .final-gen-tab-count { font-size: 11px; padding-top: 6px; }
}

/* ============================================================
   FINAL — Advanced filters dialog (drawer)
   Native <dialog> popping centred with a forest-tinted backdrop.
   Mirrors the live `/tsr/directory` filter modal's field set,
   but pulls real distinct values from the active gen's table.
   ============================================================ */
.final-filter-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  border-radius: 12px;
  color: var(--v3-ink);
}
.final-filter-dialog::backdrop {
  background: rgba(15, 42, 24, 0.55);
  backdrop-filter: blur(4px);
}
.final-filter-dialog-inner {
  background: var(--v3-card);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
}
.final-filter-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-filter-dialog-title {
  margin: 6px 0 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.final-filter-dialog-close {
  background: transparent;
  border: 1px solid var(--v3-rule);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  color: var(--v3-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.final-filter-dialog-close:hover {
  border-color: var(--v3-ink);
  color: var(--v3-ink);
}
.final-filter-dialog-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}
.final-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.final-filter-field { display: flex; flex-direction: column; gap: 6px; }
.final-filter-field-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-filter-field .final-select { width: 100%; }
.final-filter-dialog-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 22px;
  border-top: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}

@media (max-width: 768px) {
  /* Full-screen drawer on narrow viewports. `inset: 0` (and 100dvh on
     supporting browsers) is what actually makes the <dialog> box
     coincide with the viewport — without it iOS Safari leaves a sliver
     of pass-through area where touches and scrolls leak to the page
     behind the modal.  The body-scroll lock in the registry view's
     <script> block belts-and-braces the same fix. */
  .final-filter-dialog {
    inset: 0;
    max-width: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .final-filter-dialog-inner {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .final-filter-grid { grid-template-columns: 1fr; gap: 14px; }
  .final-filter-dialog-head { padding: 20px var(--v3-shell-pad); }
  .final-filter-dialog-body { padding: 20px var(--v3-shell-pad); }
  .final-filter-dialog-foot {
    padding: 16px var(--v3-shell-pad) calc(16px + env(safe-area-inset-bottom));
    flex-direction: column-reverse;
  }
  .final-filter-dialog-foot .final-btn { width: 100%; }
}

/* ============================================================
   FINAL — Sign In / Register page (Final 09)
   Split-pane: editorial hero photo on the left (60% on desktop),
   form panel on the right. Mobile collapses to stacked layout
   with the hero serving as a 30vh banner above the form.
   ============================================================ */
.final-auth-root {
  min-height: 100vh;
  min-height: 100dvh;
}
.final-auth {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--v3-paper);
}

/* ----- Editorial side ----- */
.final-auth-hero {
  position: relative;
  overflow: hidden;
  background: var(--v3-forest);
  color: var(--v3-paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
}
.final-auth-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-auth-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 42, 24, 0.10) 0%, rgba(15, 42, 24, 0.55) 60%, rgba(15, 42, 24, 0.85) 100%);
}
.final-auth-brand {
  position: absolute;
  top: 36px;
  left: 56px;
  z-index: 2;
  display: inline-block;
}
.final-auth-brand img {
  width: 200px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.final-auth-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.final-auth-hero-h2 {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 16px 0 0;
  color: var(--v3-paper);
}
.final-auth-hero-h2-em {
  color: var(--v3-lime);
  font-style: italic;
  font-weight: 400;
}
.final-auth-hero-lede {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245, 243, 238, 0.86);
  max-width: 480px;
}
.final-auth-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 0;
  max-width: 480px;
}
.final-auth-hero-stats > div {
  border-top: 1px solid rgba(174, 243, 89, 0.28);
  padding-top: 12px;
}
.final-auth-hero-stats dt {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.62);
  font-weight: 700;
  margin: 0;
}
.final-auth-hero-stats dd {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  color: var(--v3-paper);
}

/* Eyebrow modifier with lime accent — inherits the .final-eyebrow base */
.final-eyebrow--lime { color: var(--v3-lime); }

/* ----- Form side ----- */
.final-auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px clamp(24px, 5vw, 72px);
  background: var(--v3-paper);
  position: relative;
}
.final-auth-back-mobile {
  display: none;
}
.final-auth-form-inner {
  width: 100%;
  max-width: 440px;
}
.final-auth-back-link {
  display: inline-block;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  margin-bottom: 28px;
}
.final-auth-back-link:hover { color: var(--v3-forest); }

.final-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 32px;
}
.final-auth-tab {
  text-align: center;
  padding: 10px 14px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  border-radius: 6px;
  transition: background 160ms, color 160ms;
}
.final-auth-tab:hover { color: var(--v3-ink); }
.final-auth-tab.is-active {
  background: var(--v3-forest);
  color: var(--v3-lime);
}

/* Pane visibility — only one pane is shown at a time. The default
   server-rendered state matches whichever ?tab= the request had; JS
   then handles client-side swaps without a page reload. */
.final-auth-pane { display: none; }
.final-auth-pane.is-active { display: block; }

/* The forgot-password pane has its own back link, so the main tab
   bar hides while it's active to keep the screen focused. */
.final-auth-tabs.is-hidden { display: none; }

/* Inline validation errors returned by the auth endpoints (422). One
   row per failing field, plus a top-of-form banner for non-field
   errors and network failures. */
.final-auth-error {
  font-size: 12px;
  color: #b3261e;
  margin-top: 6px;
  line-height: 1.4;
}
/* When attached to a top-of-form banner, give it more presence. */
form > .final-auth-error[data-auth-error]:first-child {
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.3);
  color: #8b1f1a;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.final-auth-field.has-error input {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

/* Success card shown after register / forgot-password complete —
   replaces the form with a brand-styled "check your inbox" panel
   so the user sees exactly what happened next. */
.final-auth-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--v3-lime-soft);
  border: 1px solid var(--v3-forest);
  border-radius: 12px;
  padding: 28px 24px;
  margin-top: 8px;
  color: var(--v3-forest);
}
.final-auth-success-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}
.final-auth-success-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--v3-forest);
  font-weight: 500;
}

.final-auth-form-h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
  color: var(--v3-ink);
}
.final-auth-form-sub {
  margin: 14px 0 28px;
  color: var(--v3-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.final-auth-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.final-auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.final-auth-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-auth-field-aside {
  font-size: 10px;
  color: var(--v3-forest);
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.final-auth-field-aside:hover { text-decoration: underline; }
.final-auth-field input {
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  color: var(--v3-ink);
  border-radius: 8px;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
}
.final-auth-field input:focus {
  border-color: var(--v3-forest);
  box-shadow: 0 0 0 3px rgba(174, 243, 89, 0.32);
}
.final-auth-field-hint {
  font-size: 11px;
  color: var(--v3-ink-3);
  margin-top: 2px;
}

.final-auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.5;
  cursor: pointer;
}
.final-auth-checkbox input {
  margin-top: 2px;
  accent-color: var(--v3-forest);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.final-auth-checkbox a {
  color: var(--v3-forest);
  font-weight: 600;
  text-decoration: underline;
}

.final-auth-submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  font-size: 14px;
}

.final-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-4);
}
.final-auth-divider::before,
.final-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--v3-rule);
}

.final-auth-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.final-auth-social-btn {
  width: 100%;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
}
.final-auth-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--v3-ink);
}

.final-auth-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--v3-ink-2);
}
.final-auth-foot a {
  color: var(--v3-forest);
  font-weight: 600;
  margin-left: 4px;
}
.final-auth-foot a:hover { text-decoration: underline; }

/* ----- Mobile: stack the panes, banner-style hero, scrollable form ----- */
@media (max-width: 880px) {
  .final-auth {
    grid-template-columns: 1fr;
    grid-template-rows: 30vh auto;
  }
  .final-auth-hero {
    padding: 32px var(--v3-shell-pad);
    justify-content: flex-end;
  }
  .final-auth-brand {
    top: 20px;
    left: var(--v3-shell-pad);
  }
  .final-auth-brand img { width: 140px; }
  .final-auth-hero-h2 { font-size: clamp(28px, 7vw, 40px); }
  .final-auth-hero-lede { font-size: 14px; max-width: none; }
  .final-auth-hero-stats { display: none; }

  .final-auth-form {
    padding: 32px var(--v3-shell-pad) calc(40px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .final-auth { grid-template-rows: 24vh auto; }
  .final-auth-hero { padding: 24px var(--v3-shell-pad); }
  .final-auth-hero-h2 { font-size: clamp(24px, 8vw, 34px); }
  .final-auth-hero-lede { display: none; }
  .final-auth-form-h1 { font-size: clamp(26px, 6vw, 34px); }
  .final-auth-form-sub { font-size: 14px; margin-bottom: 24px; }
  .final-auth-tabs { margin-bottom: 24px; }
}