/* 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;
  /* V3 nav effective rendered height. The header itself has
     padding: 18px top/bottom + a ~24px logo line + 1px bottom rule
     ≈ 61px. Anything that wants to stick directly below the nav
     should reference this. */
  --v3-nav-h: 61px;

  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;
  /* WCAG 2.5.5 (AAA) recommends a 44×44px minimum touch target;
     2.5.8 (AA) recommends 24×24px. Setting min-height: 44px on
     the small variant keeps it pressable on touch without
     changing the rendered height for purely-visual cases — the
     padding-derived height (~36px) already satisfies the 24px
     AA floor; this raises it to AAA across the board. */
  min-height: 44px;
}

.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;
  /* Reset button defaults — the avatar is now a <button> that opens the
     drawer (the prior <details>/<summary> dropdown was redundant once
     the drawer's Account section surfaces every link). */
  padding: 0;
  cursor: pointer;
  font-style: normal;
}
.v3-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v3-nav-avatar:hover { border-color: var(--v3-lime-dim); }
.v3-nav-avatar[aria-expanded="true"] { border-color: var(--v3-lime); }
.v3-nav-avatar:focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: 2px;
}

.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 nav drawer trigger ("Browse" hamburger button) ========== */

.v3-nav-drawer-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: transparent;
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  color: var(--v3-ink-2);
  font-family: var(--v2-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.v3-nav-drawer-trigger:hover {
  border-color: var(--v3-forest);
  color: var(--v3-forest);
}
.v3-nav-drawer-trigger:focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: 2px;
}
/* Hamburger icon — three thin bars stacked, brand-aware. */
.v3-nav-drawer-trigger-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
  height: 12px;
  justify-content: center;
}
.v3-nav-drawer-trigger-icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 768px) {
  /* On phones the visible nav-links collapse — the trigger label can
     stay (helps discoverability) but the button compacts. */
  .v3-nav-drawer-trigger { padding: 7px 12px 7px 10px; font-size: 12px; }
}

/* ========== V3 nav drawer (slide-in panel) ========== */
/* Visual language mirrors the admin Backstage drawer in
   public/admin_assets/css/admin-v3.css — deep-forest panel, lime
   accents, mono-uppercase labels — but lives in v2.css so the public
   site doesn't pull the admin stylesheet. */

.v3-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.v3-drawer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.v3-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  cursor: pointer;
}
.v3-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 360px;
  max-width: 88vw;
  background: var(--v3-forest-deep);
  color: #fff;
  border-right: 1px solid var(--v3-forest);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(174, 243, 89, 0.25) transparent;
  /* Honor iOS notches. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.v3-drawer.is-open .v3-drawer-panel { transform: translateX(0); }
.v3-drawer-panel::-webkit-scrollbar { width: 6px; }
.v3-drawer-panel::-webkit-scrollbar-thumb { background: rgba(174, 243, 89, 0.25); border-radius: 3px; }

/* Brand head — same treatment as admin Backstage. */
.v3-drawer-head {
  position: relative;
  padding: 28px 28px 24px;
  border-bottom: 1px solid rgba(174, 243, 89, 0.15);
}
.v3-drawer-eyebrow {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-lime);
  font-weight: 700;
}
.v3-drawer-wordmark {
  font-size: 32px;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
}
.v3-drawer-wordmark-dot { color: var(--v3-lime); }
.v3-drawer-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.v3-drawer-close:hover {
  background: rgba(174, 243, 89, 0.06);
  border-color: var(--v3-lime);
  color: var(--v3-lime);
}
.v3-drawer-close:focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: 2px;
}

.v3-drawer-nav {
  flex: 1 1 auto;
  /* No vertical padding here — each child (.v3-drawer-flat,
     .v3-drawer-section, .v3-drawer-section-toggle, .v3-drawer-flatlink)
     owns its own padding, so adding more on the nav stacks gaps that
     read as dead space. Drawer head's padding-bottom + first child's
     padding-top is enough breathing room. */
  padding: 0;
}
/* Section header — button that toggles the section open/closed.
   Eyebrow + chevron live inline; chevron rotates 90° on open. */
.v3-drawer-section { padding: 0; }
.v3-drawer-section + .v3-drawer-section {
  border-top: 1px solid rgba(174, 243, 89, 0.08);
}
.v3-drawer-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.12s, background 0.12s;
}
.v3-drawer-section-toggle:hover { color: #fff; background: rgba(174, 243, 89, 0.04); }
.v3-drawer-section-toggle:focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: -2px;
}
.v3-drawer-section.is-open .v3-drawer-section-toggle { color: #fff; }
.v3-drawer-section-eyebrow {
  display: inline-block;
}
.v3-drawer-section-eyebrow--lime { color: var(--v3-lime); }
/* Chevron — points right when collapsed, down when open. CSS arrow
   triangle so we don't need to load an icon font. */
.v3-drawer-section-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  margin-left: 12px;
  flex-shrink: 0;
  opacity: 0.65;
}
.v3-drawer-section.is-open .v3-drawer-section-chevron {
  transform: rotate(45deg);
  opacity: 1;
}
/* List collapses smoothly via max-height. Closed = 0; open = a generous
   max so longer lists still fit without measuring at runtime. */
.v3-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}
.v3-drawer-section.is-open .v3-drawer-list {
  max-height: 720px;
  padding-bottom: 8px;
}

/* Flat link (no section header) — used for the Admin Panel shortcut
   at the top of the drawer. Visually aligned with the section toggles
   below it: same padding, same font-size, same letter-spacing. The
   wrapper div carries only the bottom border so spacing matches. */
.v3-drawer-flat {
  border-bottom: 1px solid rgba(174, 243, 89, 0.15);
}
.v3-drawer-flatlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.12s;
}
.v3-drawer-flatlink:hover {
  background: rgba(174, 243, 89, 0.06);
  color: var(--v3-lime);
  text-decoration: none;
}
.v3-drawer-flatlink-arrow {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
}
.v3-drawer-flatlink--lime { color: var(--v3-lime); }
.v3-drawer-link {
  display: block;
  padding: 11px 28px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--v2-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.12s, background 0.12s, border-left-color 0.12s;
}
.v3-drawer-link:hover {
  color: #fff;
  background: rgba(174, 243, 89, 0.05);
  text-decoration: none;
}
.v3-drawer-link:focus-visible {
  outline: 2px solid var(--v3-lime);
  outline-offset: -2px;
}
.v3-drawer-link--lime {
  color: var(--v3-lime);
}
.v3-drawer-link--lime:hover {
  color: var(--v3-lime);
  background: rgba(174, 243, 89, 0.1);
}

/* User pane at the bottom — mirrors the admin Backstage user identification. */
.v3-drawer-user {
  border-top: 1px solid rgba(174, 243, 89, 0.15);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.v3-drawer-user:hover { background: rgba(174, 243, 89, 0.04); text-decoration: none; }
.v3-drawer-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--v3-lime);
  color: var(--v3-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.v3-drawer-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.v3-drawer-user-text { min-width: 0; flex: 1; }
.v3-drawer-user-name {
  display: block;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3-drawer-user-action {
  display: block;
  font-family: var(--v2-mono);
  font-size: 9px;
  color: var(--v3-lime);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

@media (max-width: 480px) {
  .v3-drawer-panel { width: 100vw; max-width: 100vw; }
  .v3-drawer-head { padding: 24px 22px 20px; }
  .v3-drawer-wordmark { font-size: 28px; }
  /* Both the section header and the link content must share the same
     horizontal padding so eyebrow and link text align on the left edge.
     The previous rule put 22px on the eyebrow ON TOP of the toggle's
     own 28px, which left it offset by ~28px from the links. */
  .v3-drawer-section-toggle { padding: 14px 22px; }
  .v3-drawer-flatlink { padding: 14px 22px; }
  .v3-drawer-link { padding: 11px 22px; }
  .v3-drawer-user { padding: 16px 22px; }
}

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

.v3-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(174, 243, 89, 0.18), transparent 30%),
    linear-gradient(115deg, #173523 0%, #315341 46%, #111d16 100%);
  color: #fff;
}
.v3-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 78% 28%, rgba(174, 243, 89, 0.18), transparent 30%),
    linear-gradient(115deg, #173523 0%, #315341 46%, #111d16 100%);
}
.v3-hero-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.v3-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.55;
}
.hero-image-js .v3-hero-photo img {
  opacity: 0;
  transition: opacity 260ms ease-out;
}
.hero-image-js .v3-hero-photo img.is-loaded {
  opacity: 0.55;
}
.hero-image-js img[data-load-fade] {
  opacity: 0;
  transition: opacity 260ms ease-out;
}
.hero-image-js img[data-load-fade].is-loaded {
  opacity: 1;
}
.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; }
.hero-image-js .v3-car-card-imgs img[data-load-fade].is-loaded {
  opacity: 0;
}
.hero-image-js .v3-car-card-imgs img[data-load-fade].is-active.is-loaded {
  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;
  background:
    radial-gradient(circle at 70% 30%, rgba(174, 243, 89, 0.14), transparent 34%),
    linear-gradient(135deg, #173523 0%, #315341 50%, #111d16 100%);
}
.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 flows vertically: a top "head" strip with chips on the
   left and the action buttons (Upload Images / Cert Request) on
   the right inline, then the H1 + sub take the full shell width
   below. Reads as a single horizontal band of metadata + actions
   instead of a left-aligned column of stacked widgets. */
.final-car-title-row > .v3-shell { display: block; }
.final-car-title-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.final-car-title-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.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); }
.final-car-title-chips {
  display: flex;
  gap: 8px;
  margin: 0;
  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-top: 16px; 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-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;
}

/* Preview ribbon — full-bleed strip above the marketplace hero,
   forest band with lime "Preview" pill so the coming-soon framing
   reads before any sample listings do. The bottom banner repeats
   the message in fuller prose for readers who skip the top. */
.final-mp-preview-ribbon {
  background: var(--v3-forest);
  color: var(--v3-paper);
  border-bottom: 1px solid var(--v3-forest-deep, #0f2c1c);
}
.final-mp-preview-ribbon-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.final-mp-preview-ribbon-text {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}
.final-mp-preview-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--v3-lime);
  color: var(--v3-forest);
  border-radius: 999px;
  flex-shrink: 0;
}
.final-mp-preview-ribbon-cta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-lime);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.final-mp-preview-ribbon-cta:hover { border-bottom-color: var(--v3-lime); }

/* Sample-listing card state — visually present as a normal card but
   communicate non-clickability. Cursor stays default (not pointer)
   since the element is no longer an <a>; aria-disabled handles AT. */
.final-mp-card.is-preview {
  cursor: default;
}
.final-mp-card.is-preview:hover {
  border-color: var(--v3-rule);
  transform: none;
}

/* 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; }
  .final-mp-preview-ribbon-inner { gap: 12px; }
  .final-mp-preview-ribbon-text { font-size: 13px; gap: 10px; }
}
@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 — Marketplace lockdown (preview / coming-soon placeholder)
   ============================================================
   Replaces the prior preview-page version of /marketplace. Visitors
   see only this hero + a modal on load — never the actual marketplace
   UI — so no expectations form before the listings backend ships.
*/
.final-mp-locked {
  padding: 80px 0 120px;
  background: var(--v3-paper);
  min-height: calc(100vh - var(--v3-nav-h, 61px));
  display: flex;
  align-items: center;
}
.final-mp-locked-inner {
  text-align: left;
  max-width: 720px;
}
.final-mp-locked-eyebrow { color: var(--v3-forest); }
.final-mp-locked-h1 {
  font-size: clamp(56px, 9vw, 120px);
  margin: 18px 0 0;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--v3-ink);
}
.final-mp-locked-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-mp-locked-lede {
  font-size: 17px;
  color: var(--v3-ink-2);
  margin: 28px 0 0;
  max-width: 580px;
  line-height: 1.55;
}
.final-mp-locked-actions {
  display: flex;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Modal — full-bleed backdrop + centered card. */
.final-mp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-left));
}
.final-mp-modal[hidden] { display: none !important; }
.final-mp-modal.is-open { display: flex; }
.final-mp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  cursor: pointer;
}
.final-mp-modal-card {
  position: relative;
  background: var(--v3-card);
  border-radius: 16px;
  padding: 36px 36px 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.28);
  border: 1px solid var(--v3-rule);
}
.final-mp-modal-h2 {
  font-size: clamp(36px, 5vw, 52px);
  margin: 12px 0 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v3-ink);
}
.final-mp-modal-p {
  font-size: 15px;
  color: var(--v3-ink-2);
  margin: 18px 0 0;
  line-height: 1.55;
}
.final-mp-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .final-mp-locked { padding: 56px 0 88px; }
  .final-mp-locked-h1 { font-size: clamp(48px, 14vw, 72px); }
  .final-mp-locked-actions { width: 100%; }
  .final-mp-locked-actions .v3-btn { flex: 1 1 auto; justify-content: center; }
  .final-mp-modal-card { padding: 28px 22px 22px; }
  .final-mp-modal-actions .v3-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   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:
    radial-gradient(circle at 68% 24%, rgba(174, 243, 89, 0.16), transparent 30%),
    linear-gradient(140deg, #173523 0%, #36513f 48%, #111d16 100%);
  color: var(--v3-paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 56px;
  padding-bottom: 56px;
  /* Hero hugs the left edge of the viewport — keep generous 56px
     base padding for the design but honour notch insets on landscape. */
  padding-left: max(56px, env(safe-area-inset-left));
  padding-right: 56px;
}
.final-auth-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}
.final-auth-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-image-js .final-auth-hero-img {
  opacity: 0;
  transition: opacity 260ms ease-out;
}
.hero-image-js .final-auth-hero-img.is-loaded {
  opacity: 1;
}
.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-top: 56px;
  padding-bottom: 56px;
  padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
  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-top: 32px;
    padding-bottom: 32px;
    padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
    padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
    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-top: 32px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
    padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
    padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
  }
}

@media (max-width: 480px) {
  .final-auth { grid-template-rows: 24vh auto; }
  .final-auth-hero {
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
    padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
  }
  .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; }
}

/* ============================================================
   FINAL — VIN Decoder
   ============================================================
   Single-page tool. Hero with the search input on top, decoded
   panels stacked below when a query is present, supported-format
   reference card always at the bottom. Outer-bleed/inner-shell
   pattern matches the rest of V3 so content centres at 1280px.
*/

.final-vin-h1 {
  font-size: clamp(40px, 6.5vw, 80px);
  margin: 14px 0 0;
  line-height: 0.97;
  font-weight: 500;
  letter-spacing: -0.04em;
}

/* Search row — white panel, edge-to-edge bg, content centred. */
.final-vin-search-section {
  padding: 28px 0 36px;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
}
.final-vin-search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.final-vin-search-input {
  position: relative;
  flex: 1 1 360px;
  min-width: 240px;
}
.final-vin-search-input input {
  width: 100%;
  padding: 16px 44px 16px 48px;
  font-family: var(--v2-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--v3-ink);
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  outline: none;
  text-transform: uppercase;
}
.final-vin-search-input input:focus {
  border-color: var(--v3-forest);
  background: var(--v3-card);
}
.final-vin-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--v3-ink-3);
  pointer-events: none;
}
.final-vin-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--v3-rule);
  color: var(--v3-ink-2);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.final-vin-search-clear:hover { background: var(--v3-ink-3); color: var(--v3-paper); }
.final-vin-search-submit {
  flex: 0 0 auto;
  padding: 16px 32px;
}
.final-vin-search-hint {
  margin: 14px 0 0;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
}
.final-vin-search-hint code {
  background: var(--v3-rule-soft);
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0 2px;
  font-size: 11px;
  color: var(--v3-ink);
}

/* Result section — outer-bleed wrap; inner shell now hosts a 2-col
   grid (main result panels + sidebar with cross-checks +
   related-tools links). Sidebar collapses below the main column on
   tablet/phone. */
.final-vin-result-section {
  padding: 40px 0 24px;
}
.final-vin-result-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
.final-vin-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.final-vin-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 88px; /* sit below the V3 nav */
}

/* Top status strip card — large mono normalized + chips. */
.final-vin-result-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.final-vin-result-head { flex: 1 1 auto; min-width: 0; }
.final-vin-result-norm {
  margin-top: 8px;
  font-family: var(--v2-mono);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--v3-ink);
  word-break: break-all;
}
.final-vin-result-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Status pill — colour-coded by validation result. */
.final-vin-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
}
.final-vin-status--valid       { background: var(--v3-forest); color: var(--v3-lime); }
.final-vin-status--plausible   { background: var(--v3-lime-soft); color: var(--v3-forest); border-color: var(--v3-forest); }
.final-vin-status--invalid     { background: rgba(179, 38, 30, 0.10); color: #b3261e; border-color: rgba(179, 38, 30, 0.4); }
.final-vin-status--unsupported { background: var(--v3-rule-soft); color: var(--v3-ink-3); border-color: var(--v3-rule); }

/* Generic result card — shared by Validation issues / Decoded
   build / Registry results. */
.final-vin-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  padding: 28px 32px;
}
.final-vin-card-head { margin-bottom: 18px; }
.final-vin-card-h2 {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.final-vin-card-h2-sub {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Eyebrow warning variant for validation issues. */
.final-eyebrow--warn { color: #b3261e; }

.final-vin-error-list {
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 14px;
  color: var(--v3-ink);
  line-height: 1.6;
}
.final-vin-error-list li { margin-bottom: 4px; }

/* Decoded build — desktop table + mobile card list. */
.final-vin-decode-table {
  width: 100%;
  border-collapse: collapse;
}
.final-vin-decode-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  border-bottom: 1px solid var(--v3-rule);
}
.final-vin-decode-table tbody td {
  padding: 14px;
  font-size: 14px;
  color: var(--v3-ink);
  border-bottom: 1px solid var(--v3-rule-soft);
}
.final-vin-decode-table tbody tr:last-child td { border-bottom: 0; }
.final-vin-decode-value { font-weight: 700; }

.final-vin-decode-cards { display: none; }
.final-vin-decode-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--v3-rule-soft);
}
.final-vin-decode-card:last-child { border-bottom: 0; }
.final-vin-decode-card-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.final-vin-decode-card-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-vin-decode-card-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--v3-ink);
  margin-bottom: 4px;
}
.final-vin-decode-card-decoded {
  font-size: 14px;
  color: var(--v3-ink);
}

/* Registry results — desktop table + mobile clickable card list. */
.final-vin-results-table {
  width: 100%;
  border-collapse: collapse;
}
.final-vin-results-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  border-bottom: 1px solid var(--v3-rule);
}
.final-vin-results-table tbody td {
  padding: 14px;
  font-size: 14px;
  color: var(--v3-ink);
  border-bottom: 1px solid var(--v3-rule-soft);
  vertical-align: middle;
}
.final-vin-results-table tbody tr:last-child td { border-bottom: 0; }
.final-vin-results-table a { color: var(--v3-forest); font-weight: 700; }
.final-vin-results-cta { text-align: right; width: 1px; white-space: nowrap; }

.final-vin-results-cards { display: none; }
.final-vin-results-card {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--v3-paper);
  text-decoration: none;
  color: inherit;
}
.final-vin-results-card:last-child { margin-bottom: 0; }
.final-vin-results-card:hover { border-color: var(--v3-forest); }
.final-vin-results-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.final-vin-results-card-gen {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-vin-results-card-frame { font-size: 16px; font-weight: 700; color: var(--v3-forest); }
.final-vin-results-card-vin { font-size: 12px; color: var(--v3-ink-3); margin-top: 4px; }

.final-vin-empty {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}
.final-vin-empty a { color: var(--v3-forest); font-weight: 700; }

/* Suggested-action panel — primary CTA + tagline. */
.final-vin-cta {
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  padding: 28px 32px;
  text-align: center;
}
.final-vin-cta p {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--v3-ink-3);
  line-height: 1.55;
}

/* Supported-formats reference. */
.final-vin-formats-section {
  padding: 56px 0 80px;
  border-top: 1px solid var(--v3-rule);
}
.final-vin-formats-head { margin-bottom: 24px; }
.final-vin-formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.final-vin-formats-card {
  padding: 22px 24px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
}
.final-vin-formats-card-label {
  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: 10px;
}
.final-vin-formats-card-example {
  display: block;
  background: var(--v3-paper);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: var(--v2-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--v3-forest);
  font-weight: 700;
  margin-bottom: 10px;
  word-break: break-all;
}
.final-vin-formats-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}

/* Match hero — forest panel with lime accent + "Open record" CTA.
   Mirrors the mockup: dark green bg, lime eyebrow, big light
   headline, mono frame chip, lime button on the right. */
.final-vin-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px 36px;
  background: var(--v3-forest);
  border-radius: 14px;
  color: var(--v3-paper);
  position: relative;
  overflow: hidden;
}
.final-vin-match::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(174, 243, 89, 0.10), transparent 60%);
  pointer-events: none;
}
.final-vin-match-body { flex: 1 1 auto; min-width: 0; position: relative; }
.final-vin-match-h2 {
  margin: 8px 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--v3-paper);
}
.final-vin-match-frame {
  font-family: var(--v2-mono);
  font-size: 0.92em;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.final-vin-match-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.7);
  font-weight: 700;
}
.final-vin-match-meta .dot { color: rgba(245, 243, 238, 0.4); }
.final-vin-match-cta {
  flex: 0 0 auto;
  position: relative;
}

/* Visual VIN-tile breakdown — character-by-character grid coloured
   by section. Six-colour palette cycles when a decoder returns >6
   sections (rare). Section legend below the tiles uses matching
   dot colours so the eye can map tile → field.
   Tiles stay on a single row at every breakpoint: each is a flex
   child with a max width of 44px that shrinks uniformly when the
   container can't accommodate full-size tiles (e.g. 17-character
   USDM VINs on a tablet-width main column). */
.final-vin-tiles {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 18px 0 14px;
}
.final-vin-tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: clamp(13px, 2.2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 8px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-card);
  color: var(--v3-ink);
  text-transform: uppercase;
}
.final-vin-tile--gap {
  flex: 0 0 12px;
  max-width: 12px;
  height: 56px;
  border: 0;
  background: transparent;
  color: var(--v3-ink-3);
  font-size: 22px;
}
.final-vin-tile--neutral { background: var(--v3-rule-soft); }
.final-vin-tile--s0 { background: var(--v3-forest); color: var(--v3-lime); border-color: var(--v3-forest); }
.final-vin-tile--s1 { background: var(--v3-lime-soft); color: var(--v3-forest); border-color: var(--v3-lime-soft); }
.final-vin-tile--s2 { background: var(--v3-lime); color: var(--v3-forest); border-color: var(--v3-lime); }
.final-vin-tile--s3 { background: #d8e9c4; color: var(--v3-forest); border-color: #c2d9a8; } /* sage */
.final-vin-tile--s4 { background: var(--v3-rule-soft); color: var(--v3-ink-2); border-color: var(--v3-rule); }
.final-vin-tile--s5 { background: var(--v3-card); color: var(--v3-ink); border-color: var(--v3-rule); }

/* Tile → table row connection. The pill legend that used to sit
   below the tiles wrapped to two messy rows on MK4 USDM (9 fields).
   Instead, every table row carries a small coloured swatch in a
   dedicated narrow column matching the tile colour; mobile cards
   get the same colour on a left-edge border. */
.final-vin-tiles { margin-bottom: 22px; }
.final-vin-decode-swatch-col {
  width: 14px;
  padding-right: 0 !important;
}
.final-vin-decode-swatch {
  display: inline-block;
  width: 4px;
  height: 28px;
  border-radius: 999px;
  background: var(--v3-rule);
  vertical-align: middle;
}
.final-vin-decode-swatch--s0 { background: var(--v3-forest); }
.final-vin-decode-swatch--s1 { background: var(--v3-lime-soft); }
.final-vin-decode-swatch--s2 { background: var(--v3-lime); }
.final-vin-decode-swatch--s3 { background: #c2d9a8; }
.final-vin-decode-swatch--s4 { background: var(--v3-ink-3); }
.final-vin-decode-swatch--s5 { background: var(--v3-ink); }
/* Mobile card swatch — leading colored dot maps each card to its
   swatch in the diagram above. Replaces the prior decorative side-
   stripe (banned anti-pattern) with a smaller, more semantic dot. */
.final-vin-decode-card {
  position: relative;
  padding-left: 18px;
}
.final-vin-decode-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v3-rule);
}
.final-vin-decode-card--s0::before { background: var(--v3-forest); }
.final-vin-decode-card--s1::before { background: var(--v3-lime-soft); }
.final-vin-decode-card--s2::before { background: var(--v3-lime); }
.final-vin-decode-card--s3::before { background: #c2d9a8; }
.final-vin-decode-card--s4::before { background: var(--v3-ink-3); }
.final-vin-decode-card--s5::before { background: var(--v3-ink); }

/* Cross-checks card — checklist of validation/detection signals,
   each with ✓ / ✗ / · icon by state. */
.final-vin-aside-card {
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 14px;
  padding: 22px 24px;
}
.final-vin-checks {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.final-vin-check {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--v3-rule-soft);
  font-size: 13px;
}
.final-vin-check:first-child { border-top: 0; padding-top: 4px; }
.final-vin-check-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--v3-rule-soft);
  color: var(--v3-ink-3);
  align-self: center;
}
.final-vin-check--pass .final-vin-check-icon { background: var(--v3-lime-soft); color: var(--v3-forest); }
.final-vin-check--fail .final-vin-check-icon { background: rgba(179, 38, 30, 0.10); color: #b3261e; }
.final-vin-check-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-vin-check-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--v3-ink);
  text-align: right;
  word-break: break-word;
}

/* Related-tools list — clean rows with chevron. */
.final-vin-tools {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.final-vin-tools li { border-top: 1px solid var(--v3-rule-soft); }
.final-vin-tools li:first-child { border-top: 0; }
.final-vin-tools-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 14px;
  color: var(--v3-ink);
  text-decoration: none;
  font-weight: 500;
}
.final-vin-tools-link:hover { color: var(--v3-forest); }
.final-vin-tools-arrow { color: var(--v3-ink-3); }
.final-vin-tools-link:hover .final-vin-tools-arrow { color: var(--v3-forest); }

/* Mobile breakpoints. */
@media (max-width: 1080px) {
  .final-vin-result-grid { grid-template-columns: 1fr; }
  .final-vin-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .final-vin-aside-card { flex: 1 1 280px; }
}
/* ============================================================
   FINAL — Member shell (sidebar + main pane)
   ============================================================
   Shared layout for the auth-only member surfaces: My Profile /
   Garage / Settings / Notifications / Messages / Member directory
   / Certificates. Sidebar pinned on the left with the active link
   highlighted; main pane on the right hosts the page content.
*/
.final-member-shell {
  padding: 32px 0 80px;
}
.final-member-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
.final-member-sidebar {
  position: sticky;
  top: calc(var(--v3-nav-h) + 24px);
}
.final-member-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--v3-card);
  border-radius: 12px;
}
.final-member-sidebar-link {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--v3-ink-2);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.final-member-sidebar-link:hover { background: var(--v3-paper); color: var(--v3-forest); }
.final-member-sidebar-link.is-active {
  background: var(--v3-forest);
  color: var(--v3-lime);
  font-weight: 600;
}
.final-member-main {
  background: var(--v3-card);
  border-radius: 14px;
  padding: 32px 36px 36px;
  min-width: 0;
}
.final-member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.final-member-h1 {
  margin: 8px 0 0;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.final-member-h1-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-forest);
  background: var(--v3-lime-soft);
  border-radius: 999px;
  vertical-align: middle;
}

/* Notifications list */
.final-notification-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.final-notification-row {
  display: grid;
  grid-template-columns: 14px 1fr 18px;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--v3-paper);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.final-notification-row:hover { background: var(--v3-rule-soft); }
.final-notification-row.is-unread { background: var(--v3-card); border: 1px solid var(--v3-forest); }
.final-notification-row.is-unread:hover { background: var(--v3-lime-soft); }
.final-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  margin-top: 6px;
}
.final-notification-row.is-unread .final-notification-dot { background: var(--v3-forest); }
.final-notification-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  margin-bottom: 4px;
}
.final-notification-text {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}
.final-notification-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-notification-meta .dot { color: var(--v3-ink-4); }
.final-notification-arrow {
  color: var(--v3-ink-3);
  font-size: 16px;
  margin-top: 2px;
}
.final-notification-row:hover .final-notification-arrow { color: var(--v3-forest); }

@media (max-width: 900px) {
  .final-member-grid { grid-template-columns: 1fr; gap: 16px; }
  .final-member-sidebar { position: static; }
  /* Wrap on mobile instead of horizontal-scrolling — hidden chips
     past the right edge are non-discoverable. flex-wrap keeps
     every link visible across multiple rows. */
  .final-member-sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .final-member-sidebar-link { white-space: nowrap; }
  .final-member-main { padding: 22px 22px 26px; border-radius: 12px; }
}

/* Public member profile (/members/{handle}) — hero with avatar +
   identity, stat strip, then sections that reuse the cardetail
   block pattern (300px label / 1fr content). */
.final-member-hero {
  padding-top: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.final-member-hero-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
}
.final-member-hero-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.final-member-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-member-hero-body { min-width: 0; }
.final-member-hero-name {
  margin: 6px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.final-member-hero-handle {
  margin-top: 4px;
  font-family: var(--v2-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  font-weight: 600;
}
.final-member-hero-cta { white-space: nowrap; }

.final-member-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--v3-paper);
}
.final-member-stat {
  padding: 18px 22px;
  border-right: 1px solid var(--v3-rule);
}
.final-member-stat:last-child { border-right: 0; }
.final-member-stat-num {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--v3-forest);
}
.final-member-stat-cap {
  display: block;
  margin-top: 4px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

.final-member-cars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.final-member-car-card {
  display: flex;
  flex-direction: column;
  background: var(--v3-card);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}
.final-member-car-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 30, 26, 0.10);
}
.final-member-car-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--v3-rule-soft);
  overflow: hidden;
}
.final-member-car-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-member-car-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
}
.final-member-car-meta { padding: 12px 14px 14px; }
.final-member-car-frame {
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v3-forest);
}
.final-member-car-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--v3-ink-3);
  line-height: 1.4;
}

.final-member-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.final-member-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--v3-rule-soft);
}
.final-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .final-member-hero-grid { grid-template-columns: auto 1fr; }
  .final-member-hero-cta { grid-column: 1 / -1; }
  .final-member-stats { grid-template-columns: 1fr 1fr; }
  .final-member-stat:nth-child(2) { border-right: 0; }
  .final-member-stat:nth-child(-n+2) { border-bottom: 1px solid var(--v3-rule); }
}

/* Settings — preference sections + grids + toggles. Each
   section is a labelled bordered block; the form-foot pinned
   at the bottom of each form. */
.final-settings-form { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.final-settings-section {
  padding: 24px 26px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-paper);
}
.final-settings-section + .final-settings-section { margin-top: 0; }
.final-settings-section-head { margin-bottom: 18px; }
.final-settings-section-h2 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.final-settings-section-lede {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
  max-width: 560px;
}
.final-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.final-settings-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.final-settings-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-settings-label em { color: var(--v3-forest); font-style: normal; }
.final-settings-input {
  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%;
}
.final-settings-input:focus {
  outline: 2px solid var(--v3-forest);
  outline-offset: -1px;
  border-color: var(--v3-forest);
}
.final-settings-hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--v3-ink-3);
  line-height: 1.45;
}
.final-settings-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.final-settings-toggle {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 10px;
  cursor: pointer;
}
.final-settings-toggle span { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.final-settings-toggle strong { font-size: 13px; font-weight: 600; color: var(--v3-ink); }
.final-settings-toggle small { font-size: 12px; color: var(--v3-ink-3); line-height: 1.45; }
.final-settings-toggle input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--v3-forest);
}
.final-settings-foot { display: flex; gap: 10px; justify-content: flex-end; }
.final-settings-error {
  margin: 12px 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;
}

@media (max-width: 600px) {
  .final-settings-grid { grid-template-columns: 1fr; }
  .final-settings-section { padding: 18px 18px; }
  .final-settings-foot .v3-btn { width: 100%; justify-content: center; }
}

/* Certificate request list — shared member-shell page. */
.final-cert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.final-cert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--v3-paper);
  border-radius: 10px;
  flex-wrap: wrap;
}
.final-cert-row-main { flex: 1 1 280px; min-width: 0; }
.final-cert-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.final-cert-row-frame {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.final-cert-row-meta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-cert-row-reason {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b3261e;
  line-height: 1.5;
}
.final-cert-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ============================================================
   FINAL — Events
   ============================================================
   Listing page (status + country filter rails, card grid) +
   detail page (hero photo, register CTA, description). Cards
   show the date as a stacked month/day pill in the corner of the
   hero photo, plus location and registration state below.
*/
.final-events-filter-section {
  padding: 12px 0;
  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);
  position: sticky;
  top: var(--v3-nav-h);
  z-index: 5;
}
.final-events-country-rail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--v3-rule-soft);
}
.final-events-grid-section { padding: 36px 0 80px; }
.final-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.final-events-card {
  display: flex;
  flex-direction: column;
  background: var(--v3-card);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}
.final-events-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 30, 26, 0.12);
}
.final-events-card.is-past { opacity: 0.78; }
.final-events-card.is-past:hover { opacity: 1; }
.final-events-card.is-featured { box-shadow: 0 0 0 2px var(--v3-forest), 0 4px 12px rgba(20, 30, 26, 0.08); }
.final-events-card.is-featured:hover { box-shadow: 0 0 0 2px var(--v3-forest), 0 12px 28px rgba(20, 30, 26, 0.18); }

.final-events-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--v3-rule-soft);
  overflow: hidden;
}
.final-events-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.final-events-card-date {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: var(--v3-card);
  color: var(--v3-forest);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-family: var(--v2-mono);
}
.final-events-card-date-month {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-events-card-date-day {
  font-size: 22px;
  font-weight: 700;
  color: var(--v3-forest);
  line-height: 1;
  margin-top: 2px;
}
.final-events-card-date-range {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  margin-top: 4px;
}

.final-events-card-flag,
.final-events-card-past {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}
.final-events-card-flag { background: var(--v3-lime); color: var(--v3-forest); }
.final-events-card-past { background: rgba(13, 22, 17, 0.78); color: var(--v3-paper); }
/* When a card is both Featured and Past (rare, but happens with
   archived flagship events), stack the Past pill directly below
   the Featured pill instead of overlapping in the same corner.
   Markup order is Featured → Past, so the adjacent-sibling
   combinator hits Past only when Featured precedes it. */
.final-events-card-flag + .final-events-card-past { top: 44px; }

.final-events-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.final-events-card-name {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
  line-height: 1.3;
}
.final-events-card-meta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-events-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.final-events-card-cta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-forest);
}

/* Detail page hero. */
.final-event-hero-wrap { padding: 16px 0 0; }
.final-event-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--v3-rule-soft);
}
.final-event-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-event-detail-body p {
  margin: 0;
  font-size: 15px;
  color: var(--v3-ink);
  line-height: 1.7;
  max-width: 680px;
  white-space: pre-wrap;
}
.final-event-register-error {
  margin: 16px auto;
  max-width: var(--v3-shell-max);
  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;
}

@media (max-width: 600px) {
  .final-events-grid { grid-template-columns: 1fr; gap: 14px; }
  .final-event-hero { aspect-ratio: 16 / 10; }
}

/* ============================================================
   FINAL — Color Charts
   ============================================================
   Visual paint-chip grid: each colour is a swatch + clean name +
   chassis count + share-of-total bar. Two-tab market filter (All /
   USDM) reuses .final-gallery-filters + .final-gallery-chip from
   the gallery page. */
.final-color-disclaimer {
  display: block;
  margin-top: 8px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-ink-3);
  font-style: italic;
}
.final-color-filter-section {
  padding: 20px 0;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
  position: sticky;
  top: var(--v3-nav-h);
  z-index: 5;
}
.final-color-filter-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.final-color-view-toggle {
  display: inline-flex;
  border: 1px solid var(--v3-rule);
  border-radius: 999px;
  padding: 3px;
  background: var(--v3-paper);
}
.final-color-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  cursor: pointer;
}
.final-color-view-btn svg { display: block; }
.final-color-view-btn:hover { color: var(--v3-forest); }
.final-color-view-btn.is-active {
  background: var(--v3-forest);
  color: var(--v3-lime);
}
.final-color-filter-meta {
  margin-left: auto;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-color-grid-section {
  padding: 36px 0 80px;
}
.final-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.final-color-card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--v3-card);
  transition: transform 0.15s, box-shadow 0.15s;
  /* No outer border — the cream paper/white card contrast handles
     the silhouette already, and a 1px border read as a white gutter
     around the swatch on both desktop and mobile. */
}
.final-color-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(20, 30, 26, 0.14);
}
.final-color-swatch {
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--v3-rule);
}
.final-color-swatch-code {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(20, 30, 26, 0.78);
  color: var(--v3-paper);
  padding: 5px 10px;
  border-radius: 999px;
}
.final-color-meta {
  padding: 18px 20px 20px;
}
.final-color-name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.final-color-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.final-color-count {
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--v3-ink);
  letter-spacing: 0.04em;
}
.final-color-share {
  font-family: var(--v2-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--v3-ink-3);
  letter-spacing: 0.06em;
}
.final-color-bar {
  height: 4px;
  background: var(--v3-rule-soft);
  border-radius: 999px;
  overflow: hidden;
}
.final-color-bar-fill {
  display: block;
  height: 100%;
  background: var(--v3-forest);
  border-radius: 999px;
}
/* Small provenance note at the bottom of the card — flags codes
   that aren't strictly factory MKIV (post-2000 Toyota repaints,
   cross-platform Lexus codes, transcription typos). Quiet mono
   italic so it reads as a footnote, not a primary stat. */
.final-color-card-note {
  margin: 10px 0 0;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--v3-ink-3);
  line-height: 1.45;
  font-style: italic;
}

/* Cards are buttons (clickable) — strip default button chrome.
   The padding reset is the important one: browsers add a couple
   of px of padding inside <button> by default, which left a white
   gutter around the swatch. */
button.final-color-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  padding: 0;
}

/* CHART VIEW — same data, horizontal bar layout. The grid container
   becomes a vertical flex stack; each card flips to a row layout
   with a small square swatch on the left and an elongated bar on
   the right. */
[data-active-view="chart"] .final-color-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-active-view="chart"] .final-color-card {
  flex-direction: row;
  align-items: stretch;
  border-radius: 10px;
}
[data-active-view="chart"] .final-color-swatch {
  aspect-ratio: 1;
  width: 64px;
  border-bottom: 0;
  border-right: 1px solid var(--v3-rule);
  flex-shrink: 0;
}
[data-active-view="chart"] .final-color-swatch-code {
  bottom: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  padding: 3px 6px;
}
[data-active-view="chart"] .final-color-meta {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 16px;
  padding: 12px 18px;
  align-items: center;
}
[data-active-view="chart"] .final-color-name {
  margin: 0;
  grid-column: 1;
  grid-row: 1;
  font-size: 14px;
}
[data-active-view="chart"] .final-color-stats {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  gap: 14px;
}
[data-active-view="chart"] .final-color-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  margin-top: 6px;
}

/* MODAL — paint detail. Big swatch, name, stats, registry CTA. */
.final-color-modal {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  inset: 0;
}
.final-color-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-color-modal::backdrop {
  background: rgba(20, 30, 26, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.final-color-modal-card {
  position: relative;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--v3-card);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
  margin: 16px;
}
.final-color-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(20, 30, 26, 0.55);
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.final-color-modal-close:hover { background: rgba(20, 30, 26, 0.78); }
.final-color-modal-swatch {
  position: relative;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--v3-rule);
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-color-modal-swatch-code {
  font-family: var(--v2-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(20, 30, 26, 0.78);
  color: var(--v3-paper);
  padding: 8px 16px;
  border-radius: 999px;
}
.final-color-modal-body {
  padding: 28px 32px 32px;
}
.final-color-modal-name {
  margin: 8px 0 22px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.final-color-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--v3-rule);
}
.final-color-modal-stats > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--v3-rule);
  border-right: 1px solid var(--v3-rule);
  padding-right: 16px;
  padding-left: 0;
}
.final-color-modal-stats > div:first-child { padding-left: 0; }
.final-color-modal-stats > div:last-child { border-right: 0; padding-right: 0; padding-left: 16px; }
.final-color-modal-stats > div:nth-child(2) { padding-left: 16px; }
.final-color-modal-stats 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-color-modal-stats dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--v3-ink);
}
/* Modal version of the provenance note. Italic mono, sits below
   the stats grid and above the registry CTA. */
.final-color-modal-note {
  margin: 0 0 18px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--v3-ink-3);
  line-height: 1.5;
  font-style: italic;
}

@media (max-width: 600px) {
  [data-active-view="chart"] .final-color-swatch { width: 48px; }
  .final-color-modal-body { padding: 22px 22px 24px; }
  .final-color-modal-stats { grid-template-columns: 1fr; }
  .final-color-modal-stats > div {
    border-right: 0 !important;
    padding: 14px 0 !important;
  }
}

/* ============================================================
   FINAL — Resources
   ============================================================
   File-list page: search + type-chip filter + downloadable rows.
   Reuses .final-gallery-chip and .final-vin-search-input. */
.final-resources-filter-section {
  padding: 24px 0 20px;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
}
.final-resources-search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}
.final-resources-search .final-vin-search-input { flex: 1 1 360px; }
.final-resources-list-section {
  padding: 36px 0 80px;
}
.final-resources-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.final-resources-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  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-resources-row:hover {
  border-color: var(--v3-forest);
  box-shadow: 0 4px 16px rgba(20, 30, 26, 0.08);
  transform: translateY(-1px);
}
.final-resources-row-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.final-resources-row-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.final-resources-row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.final-resources-row-filetype {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-resources-row-cta {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-forest);
  white-space: nowrap;
}
.final-resources-row:hover .final-resources-row-cta { color: var(--v3-forest-deep); }
.final-resources-row.is-previewable { cursor: pointer; }
.final-resources-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.final-resources-row-filetype--preview {
  color: var(--v3-forest);
  background: var(--v3-lime-soft);
  padding: 2px 8px;
  border-radius: 999px;
}
.final-resources-summary {
  margin: 0 0 18px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

/* Pagination — Prev / 1 2 … 7 / Next, with windowed pages and
   ellipsis between non-contiguous ranges. */
.final-resources-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--v3-rule);
}
.final-resources-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}
.final-resources-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-2);
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  text-decoration: none;
}
.final-resources-page:hover {
  border-color: var(--v3-forest);
  color: var(--v3-forest);
}
.final-resources-page.is-active {
  background: var(--v3-forest);
  color: var(--v3-lime);
  border-color: var(--v3-forest);
}
.final-resources-page.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.final-resources-page-gap {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  padding: 0 4px;
}

/* PDF preview modal — full-viewport with the file rendered in a
   single iframe. The download button stays visible in the header
   so the visitor can grab the file after reading. */
.final-resources-preview {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--v3-paper);
  inset: 0;
  /* Closed-state display stays the browser default (none) so a
     non-open dialog doesn't claim viewport space and block clicks
     on the page underneath. flex-column kicks in only when opened. */
}
.final-resources-preview[open] {
  display: flex;
  flex-direction: column;
}
.final-resources-preview::backdrop {
  background: rgba(20, 30, 26, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.final-resources-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
  flex-shrink: 0;
}
.final-resources-preview-name {
  margin: 4px 0 0;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.final-resources-preview-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.final-resources-preview-body {
  flex: 1;
  background: var(--v3-rule-soft);
  position: relative;
  overflow: hidden;
}
.final-resources-preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--v3-paper);
}

@media (max-width: 600px) {
  .final-resources-pagination { flex-direction: column; gap: 12px; }
  .final-resources-page-numbers { order: -1; flex-wrap: wrap; justify-content: center; }
  .final-resources-preview-head { padding: 12px 16px; flex-wrap: wrap; }
  .final-resources-preview-name { font-size: 14px; }
}

@media (max-width: 600px) {
  .final-color-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .final-color-meta { padding: 14px 16px 16px; }
  .final-resources-row { grid-template-columns: 40px 1fr; padding: 14px 16px; gap: 14px; }
  .final-resources-row-icon { width: 40px; height: 40px; }
  .final-resources-row-cta { grid-column: 1 / -1; text-align: right; }
}

/* ============================================================
   FINAL — Gallery / "The Supra Museum"
   ============================================================
   Single-page editorial gallery. Type-chip filter rail, masonry-ish
   uniform 4:3 tile grid, and a full-viewport <dialog> lightbox
   with prev/next nav + keyboard support. Tile hover gives a quick
   visual confirmation; featured items get a lime corner flag.
*/
.final-gallery-filter-section {
  padding: 12px 0;
  /* Match the V3 nav's translucent paper bg + blur so the nav and
     filter rail read as one continuous stuck strip when scrolling
     (instead of a translucent nav over a solid-white chip strip,
     which left a visible seam between them). */
  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);
  position: sticky;
  top: var(--v3-nav-h);
  z-index: 5;
}
.final-gallery-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.final-gallery-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 999px;
  color: var(--v3-ink-2);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.final-gallery-chip:hover { border-color: var(--v3-forest); color: var(--v3-forest); }
.final-gallery-chip.is-active {
  background: var(--v3-forest);
  border-color: var(--v3-forest);
  color: var(--v3-lime);
}
.final-gallery-chip-count {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--v3-ink-3);
  padding: 2px 8px;
  background: var(--v3-rule-soft);
  border-radius: 999px;
}
.final-gallery-chip:hover .final-gallery-chip-count { background: var(--v3-paper); color: var(--v3-forest); }
.final-gallery-chip.is-active .final-gallery-chip-count {
  background: rgba(174, 243, 89, 0.18);
  color: var(--v3-lime);
}

/* Hero — editorial title on the left, large total stat on the right. */
.final-gallery-hero {
  background: var(--v3-paper);
}
.final-gallery-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
}
.final-gallery-h1 {
  font-size: clamp(48px, 8vw, 96px);
  margin: 14px 0 0;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.final-gallery-hero-stat { text-align: right; }
.final-gallery-hero-num {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--v3-forest);
  line-height: 1;
}
.final-gallery-hero-cap {
  margin-top: 8px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

.final-gallery-grid-section {
  padding: 36px 0 80px;
}
/* Masonry-style grid: every 7th tile (1st, 8th, 15th, …) is a 2×2
   feature; surrounding tiles fill via grid-auto-flow:dense so there
   are no holes. Featured tiles set their own row span; regulars
   keep aspect-ratio 4:3. */
.final-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: minmax(180px, auto);
  gap: 14px;
}
.final-gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: var(--v3-rule-soft);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 0;
  transition: transform 0.18s, box-shadow 0.18s;
}
button.final-gallery-tile {
  font: inherit;
  text-align: left;
  appearance: none;
}
.final-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.final-gallery-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 30, 26, 0.18);
}
.final-gallery-tile:hover img { transform: scale(1.04); }

/* Every 7th tile is a 2×2 feature. Aspect-ratio is dropped because
   the row span dictates height. */
.final-gallery-tile:nth-child(7n+1) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.final-gallery-tile-overlay {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(13, 22, 17, 0) 0%, rgba(13, 22, 17, 0.78) 100%);
  pointer-events: none;
}
.final-gallery-tile-meta {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.final-gallery-tile-meta-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.final-gallery-tile-meta-right { text-align: right; flex-shrink: 0; }
.final-gallery-tile-frame {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: var(--v3-lime);
  background: rgba(13, 22, 17, 0.55);
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
  white-space: nowrap;
}
.final-gallery-tile-user {
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.final-gallery-tile-loc {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  font-weight: 700;
  color: rgba(245, 243, 238, 0.78);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.final-gallery-loadmore {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--v3-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.final-gallery-loadmore-meta {
  margin: 0;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 700;
}

.final-gallery-tile-flag,
.final-gallery-tile-type {
  position: absolute;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  pointer-events: none;
}
.final-gallery-tile-flag {
  top: 12px;
  left: 12px;
  background: var(--v3-lime);
  color: var(--v3-forest);
}
.final-gallery-tile-type {
  bottom: 12px;
  left: 12px;
  background: rgba(20, 30, 26, 0.78);
  color: var(--v3-paper);
}

/* Full-viewport <dialog> lightbox. */
.final-gallery-lightbox {
  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-gallery-lightbox::backdrop {
  background: rgba(13, 22, 17, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.final-gallery-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-gallery-lightbox-frame {
  position: absolute;
  /* Bottom inset leaves room for the foot strip (CTA + counter). */
  inset: 70px 80px 110px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.final-gallery-lightbox-img {
  max-width: 100%;
  max-height: calc(100% - 60px);
  object-fit: contain;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.final-gallery-lightbox-caption {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 243, 238, 0.86);
  text-align: center;
  max-width: 720px;
}
/* Lightbox foot — counter + optional View-profile CTA, stacked
   in the same bottom-center column so the CTA reads like an
   action attached to the current photograph. */
.final-gallery-lightbox-foot {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  pointer-events: none;
}
.final-gallery-lightbox-cta {
  pointer-events: auto;
}
.final-gallery-lightbox-counter {
  text-align: center;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 243, 238, 0.55);
}
.final-gallery-lightbox-close,
.final-gallery-lightbox-arrow {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(245, 243, 238, 0.3);
  border-radius: 999px;
  color: var(--v3-paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  z-index: 2;
  transition: background 0.15s, border-color 0.15s;
}
.final-gallery-lightbox-close {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 28px;
}
.final-gallery-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 80px;
  font-size: 30px;
}
.final-gallery-lightbox-arrow--prev { left: 18px; }
.final-gallery-lightbox-arrow--next { right: 18px; }
.final-gallery-lightbox-close:hover,
.final-gallery-lightbox-arrow:hover {
  background: rgba(245, 243, 238, 0.16);
  border-color: rgba(245, 243, 238, 0.6);
}

@media (max-width: 1100px) {
  .final-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .final-gallery-tile:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 768px) {
  .final-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); }
  .final-gallery-tile:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
  .final-gallery-hero-grid { grid-template-columns: 1fr; align-items: stretch; }
  .final-gallery-hero-stat { text-align: left; }
}
@media (max-width: 600px) {
  .final-gallery-grid { grid-template-columns: 1fr; gap: 10px; grid-auto-rows: auto; }
  .final-gallery-tile { aspect-ratio: 4 / 3; }
  /* Drop the 2×2 feature on phones — tiles are already full width. */
  .final-gallery-tile:nth-child(7n+1) { grid-column: auto; grid-row: auto; }
  .final-gallery-filter-section { padding: 8px 0; }
  .final-gallery-grid-section { padding: 24px 0 56px; }
  .final-gallery-lightbox-frame { inset: 56px 12px 96px 12px; }
  .final-gallery-lightbox-arrow { width: 40px; height: 56px; font-size: 24px; }
  .final-gallery-lightbox-arrow--prev { left: 8px; }
  .final-gallery-lightbox-arrow--next { right: 8px; }
}

@media (max-width: 768px) {
  .final-vin-search-section { padding: 20px 0 28px; }
  .final-vin-search-submit { width: 100%; justify-content: center; }
  .final-vin-result-card { padding: 22px 22px; }
  .final-vin-card { padding: 22px 22px; }
  .final-vin-match { padding: 24px 22px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .final-vin-match-cta { width: 100%; justify-content: center; }
  .final-vin-tile { max-width: 36px; height: 46px; }
  .final-vin-tile--gap { flex: 0 0 8px; max-width: 8px; height: 46px; }
  .final-vin-decode-table,
  .final-vin-results-table { display: none; }
  .final-vin-decode-cards,
  .final-vin-results-cards { display: block; }
  .final-vin-cta { padding: 22px 22px; }
  .final-vin-formats-section { padding: 40px 0 60px; }
  .final-vin-aside { flex-direction: column; }
}

/* ──────────────────────────────────────────────────────────────
   Garage (/garage) — member-shell page that lists every chassis
   claim the signed-in member has filed. Each card is a status-
   coloured row with cover photo, frame ID, status pill, and meta
   strip (ownership / submitted / reviewed / verified). The first
   pass is read-only; withdraw / gallery / rarity actions still
   live on the legacy garage view.
   ────────────────────────────────────────────────────────────── */
.final-garage-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 24px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-card);
  overflow: hidden;
}
.final-garage-count {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border-right: 1px solid var(--v3-rule);
}
.final-garage-count:last-child { border-right: 0; }
.final-garage-count-num {
  font-family: var(--v2-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--v3-forest);
  letter-spacing: -0.01em;
}
.final-garage-count-cap {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

.final-garage-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.final-garage-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  background: var(--v3-card);
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  overflow: hidden;
}
.final-garage-card-image {
  position: relative;
  background: var(--v3-rule-soft);
  min-height: 180px;
}
.final-garage-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-garage-card-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  text-align: center;
  padding: 0 16px;
}
.final-garage-card-body {
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.final-garage-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.final-garage-card-frame {
  font-family: var(--v2-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--v3-forest);
}
.final-garage-card-frame a {
  color: inherit;
  text-decoration: none;
}
.final-garage-card-frame a:hover {
  text-decoration: underline;
}
.final-garage-card-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--v3-ink-3);
  line-height: 1.5;
}
.final-garage-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 32px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--v3-rule-soft);
}
.final-garage-card-meta div { display: flex; flex-direction: column; gap: 3px; }
.final-garage-card-meta dt {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-garage-card-meta dd {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink);
}
.final-garage-card-meta dd.is-verified {
  color: var(--v3-forest);
  font-weight: 600;
}
.final-garage-card-note {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  border-radius: 8px;
  background: var(--v3-rule-soft);
  color: var(--v3-ink-2);
}
.final-garage-card-note strong { color: var(--v3-ink); }
.final-garage-card-note--warn {
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.22);
  color: #b3261e;
}
.final-garage-card-note--warn strong { color: #b3261e; }
.final-garage-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.final-garage-foot {
  margin: 24px 0 0;
  padding: 14px 18px;
  font-size: 12px;
  color: var(--v3-ink-3);
  line-height: 1.5;
  border-radius: 8px;
  background: var(--v3-rule-soft);
}

/* Status-pill modifiers used by the garage page (the base lives
   higher up — these add the rejected + withdrawn variants). */
.final-status-pill.is-warn {
  background: rgba(179, 38, 30, 0.10);
  color: #b3261e;
}
.final-status-pill.is-warn .dot { background: #b3261e; }
.final-status-pill.is-muted {
  background: var(--v3-rule-soft);
  color: var(--v3-ink-3);
}
.final-status-pill.is-muted .dot { background: var(--v3-ink-3); }

@media (max-width: 768px) {
  .final-garage-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-garage-count:nth-child(2) { border-right: 0; }
  .final-garage-count:nth-child(-n+2) { border-bottom: 1px solid var(--v3-rule); }
  .final-garage-card { grid-template-columns: 1fr; }
  .final-garage-card-image { min-height: 200px; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .final-garage-card-body { padding: 18px 18px 20px; }
  .final-garage-card-meta { gap: 14px 24px; }
  .final-garage-card-actions .v3-btn { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────
   Members directory (/members/finder) — Final 15. Outer-bleed
   header with huge serif-display H1 + lede + actions, large
   search bar, sticky-ish filter row, and a 2-col body (rail +
   member rows). GET-form search so URLs are shareable.
   ────────────────────────────────────────────────────────────── */

/* Header band */
.final-fm-header {
  padding: 52px 0 32px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-fm-eyebrow { color: var(--v3-forest); }
.final-fm-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.final-fm-header-text { min-width: 0; flex: 1 1 480px; }
.final-fm-h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  margin: 0;
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--v3-ink);
}
.final-fm-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fm-lede {
  font-size: 17px;
  color: var(--v3-ink-2);
  margin: 18px 0 0;
  max-width: 640px;
  line-height: 1.55;
}
.final-fm-lede-strong {
  color: var(--v3-forest);
  font-weight: 700;
}
.final-fm-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Search bar */
.final-fm-search {
  margin-top: 32px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.final-fm-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--v3-forest);
  background: var(--v3-paper);
  padding: 0 20px;
  border-radius: 10px;
}
.final-fm-search-input-wrap:focus-within {
  outline: 2px solid var(--v3-lime);
  outline-offset: 1px;
}
/* Suppress the global .v3-root :focus-visible lime ring on the
   input itself — the wrapper already shows the focus state, and
   doubling them up renders as a "double box" inside the search bar. */
.final-fm-search-input:focus,
.final-fm-search-input:focus-visible { outline: none; }
.final-fm-search-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-forest);
  margin-right: 16px;
}
.final-fm-search-input {
  flex: 1;
  padding: 18px 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 18px;
  color: var(--v3-ink);
  background: transparent;
  letter-spacing: -0.01em;
  font-weight: 500;
  min-width: 0;
}
.final-fm-search-count {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-forest);
  letter-spacing: 0.1em;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 12px;
}
.final-fm-search-submit { align-self: stretch; padding: 0 22px; }

/* Filter row — outer-bleed, white card. */
.final-fm-filterbar {
  padding: 18px 0;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.final-fm-filterbar-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.final-fm-filterbar-spacer { flex: 1; }
.final-fm-chip {
  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);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.final-fm-chip:hover { border-color: var(--v3-ink-3); color: var(--v3-ink); }
.final-fm-chip.is-active {
  border-color: var(--v3-forest);
  background: var(--v3-forest);
  color: var(--v3-lime);
}
.final-fm-chip[disabled],
.final-fm-chip[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.final-fm-chip[disabled]:hover,
.final-fm-chip[aria-disabled="true"]:hover {
  border-color: var(--v3-rule);
  color: var(--v3-ink-2);
}
.final-fm-chip span { opacity: 0.7; font-weight: 600; }
.final-fm-sort {
  padding: 8px 12px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--v3-rule);
  background: var(--v3-paper);
  color: var(--v3-ink);
  border-radius: 6px;
  cursor: pointer;
}

/* Body — sidebar rail + members list. */
.final-fm-body {
  padding: 48px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fm-body-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
}

/* Rail. */
.final-fm-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.final-fm-rail-card {
  padding: 22px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-card);
  border-radius: 12px;
}
.final-fm-rail-card-p {
  margin: 10px 0 16px;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}
.final-fm-rail-stack {
  display: flex;
  margin-top: 4px;
}
.final-fm-rail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--v3-card);
  overflow: hidden;
  flex-shrink: 0;
}
.final-fm-rail-avatar:not(:first-child) { margin-left: -10px; }
.final-fm-rail-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.final-fm-cta {
  padding: 22px;
  background: var(--v3-forest);
  color: #fff;
  border-radius: 12px;
}
.final-fm-cta-eyebrow {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-lime);
  font-weight: 700;
  margin-bottom: 10px;
}
.final-fm-cta-p {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
}
.final-fm-cta-btn { width: 100%; justify-content: center; }

/* Members list. */
.final-fm-list-col { min-width: 0; }
.final-fm-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.final-fm-list-h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v3-ink);
}
.final-fm-list-h2-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fm-list-hint {
  border: 1px dashed var(--v3-rule);
  border-radius: 12px;
  padding: 32px 28px;
  background: var(--v3-card);
}
.final-fm-list-hint p {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}
.final-fm-list-hint strong { color: var(--v3-ink); }

/* Row layout — avatar | name | badge | bio | actions. */
.final-fm-rows {
  border-top: 1px solid var(--v3-rule);
}
.final-fm-row {
  display: grid;
  grid-template-columns: 64px 1.5fr 1fr 1.4fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fm-row-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.final-fm-row-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-fm-row-avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: var(--v3-lime);
  border: 2px solid var(--v3-paper);
  border-radius: 50%;
}
.final-fm-row-name-col { min-width: 0; }
.final-fm-row-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: block;
  overflow-wrap: anywhere;
}
.final-fm-row-name:hover { color: var(--v3-forest); }
.final-fm-row-handle {
  margin-top: 4px;
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.final-fm-row-badge-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.final-fm-row-chip {
  font-family: var(--v2-mono);
  font-size: 10px;
  padding: 3px 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--v3-ink-2);
  white-space: nowrap;
}
.final-fm-row-chip.is-custodian { color: var(--v3-ink-2); border-color: var(--v3-rule); }
.final-fm-row-chip.is-buddy { background: var(--v3-lime-soft); color: var(--v3-forest); border-color: var(--v3-forest); }
.final-fm-row-chip.is-incoming { background: rgba(179, 38, 30, 0.08); color: #b3261e; border-color: rgba(179, 38, 30, 0.4); }
.final-fm-row-chip.is-pending,
.final-fm-row-chip.is-following { background: var(--v3-rule-soft); color: var(--v3-ink-2); }
.final-fm-row-since {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.final-fm-row-bio {
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.5;
  min-width: 0;
}
.final-fm-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .final-fm-header { padding: 40px 0 28px; }
  .final-fm-filterbar { padding: 14px 0; }
  .final-fm-body { padding: 36px 0; }
  .final-fm-body-grid { grid-template-columns: 240px 1fr; gap: 36px; }
  .final-fm-row { grid-template-columns: 52px 1.4fr 1fr auto; gap: 18px; }
  .final-fm-row-bio { display: none; }
}
@media (max-width: 768px) {
  .final-fm-header { padding: 32px 0 20px; }
  .final-fm-filterbar { padding: 14px 0; }
  .final-fm-body { padding: 28px 0; }
  .final-fm-body-grid { grid-template-columns: 1fr; gap: 28px; }
  .final-fm-search { flex-direction: column; }
  .final-fm-search-submit { padding: 14px 22px; }
  .final-fm-row { grid-template-columns: 52px 1fr auto; gap: 14px; padding: 18px 0; }
  .final-fm-row-badge-col { display: none; }
  .final-fm-row-bio { display: none; }
  .final-fm-rail { order: 2; }
}
@media (max-width: 600px) {
  .final-fm-header-row { flex-direction: column; align-items: stretch; }
  .final-fm-header-actions .v3-btn { width: 100%; justify-content: center; }
  .final-fm-row { grid-template-columns: 44px 1fr; gap: 12px; }
  .final-fm-row-actions { grid-column: 1 / -1; }
  .final-fm-row-actions .v3-btn { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────
   My profile (/my-profile) — Final 04 (Garage / Profile).
   V1 layout reskinned in V3 forest/lime visual language.
   Outer-bleed sections, no v3-shell wrapper.
   ────────────────────────────────────────────────────────────── */

/* Setup gate (unverified Forum ID) — outer-bleed lime band. */
.final-fp-setup {
  background: var(--v3-lime-soft);
  border-bottom: 1px solid var(--v3-rule);
  padding: 28px 0;
}
.final-fp-setup-inner {
  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));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.final-fp-setup-h2 {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
}
.final-fp-setup-p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--v3-ink-2);
  max-width: 640px;
}

/* Hero — 3-col grid: avatar | identity | actions. */
.final-fp-hero {
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
  padding: 72px 0 48px;
}
.final-fp-hero-grid {
  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));
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 48px;
  align-items: center;
}
.final-fp-hero-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--v3-rule-soft);
  border: 3px solid var(--v3-forest);
  box-shadow: 0 0 0 6px var(--v3-lime-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.final-fp-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-fp-hero-avatar span {
  font-family: var(--v2-mono);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-forest);
}
.final-fp-hero-body { min-width: 0; }
.final-fp-hero-name {
  font-size: clamp(48px, 6vw, 76px);
  margin: 12px 0 0;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--v3-ink);
  /* Long display names (no-space usernames, hyphenated handles)
     must break gracefully on narrow viewports. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.final-fp-hero-name-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fp-hero-meta {
  font-size: 16px;
  color: var(--v3-ink-2);
  margin-top: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.final-fp-hero-meta-sep { color: var(--v3-ink-4); }
.final-fp-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
  font-weight: 600;
  font-size: 13px;
}
.final-fp-hero-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--v3-forest);
}
.final-fp-hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.final-fp-hero-stat { display: flex; flex-direction: column; }
.final-fp-hero-stat-num {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
  line-height: 1;
}
.final-fp-hero-stat-cap {
  font-size: 11px;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 600;
}
.final-fp-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.final-fp-hero-cta { min-width: 180px; justify-content: center; }

/* Forest button variant — used for primary actions on the white
   hero card (Follow / View public). Distinct from lime which we
   reserve for the +Claim CTA. */
.v3-btn.v3-btn-forest {
  background: var(--v3-forest);
  color: #fff;
  border-color: var(--v3-forest);
}
.v3-btn.v3-btn-forest:hover {
  background: var(--v3-forest-deep);
  border-color: var(--v3-forest-deep);
}

/* Tabs row — sits between hero and content. The inner uses
   scroll-padding so when overflow-x kicks in on narrow viewports
   the active tab snaps clear of the gutter, and scrollbar-width:
   none hides the OS scroll-track for a cleaner look. The first/
   last tabs carry the gutter padding directly so the scroll track
   itself still bleeds visually to the edge. */
.final-fp-tabs {
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-rule);
}
.final-fp-tabs-inner {
  max-width: var(--v3-shell-max);
  margin: 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
  scroll-padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
}
.final-fp-tabs-inner::-webkit-scrollbar { display: none; }
.final-fp-tabs-inner > .final-fp-tab:first-child {
  margin-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
}
.final-fp-tabs-inner > .final-fp-tab:last-child {
  margin-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
}
.final-fp-tab {
  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;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.final-fp-tab:hover { color: var(--v3-ink); }
.final-fp-tab.is-active {
  color: var(--v3-forest);
  border-bottom-color: var(--v3-forest);
}

/* Section — outer-bleed, single max-width inner column. */
.final-fp-section {
  padding-top: 56px;
  padding-bottom: 80px;
  padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
  max-width: var(--v3-shell-max);
  margin: 0 auto;
}
.final-fp-edit-section {
  border-top: 1px solid var(--v3-rule);
}
.final-fp-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.final-fp-section-h2 {
  font-size: clamp(32px, 4vw, 44px);
  margin: 8px 0 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v3-ink);
}
.final-fp-section-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}

/* Empty state inside the garage section. */
.final-fp-empty {
  border: 1px dashed var(--v3-rule);
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
  background: var(--v3-card);
}
.final-fp-empty p {
  margin: 0 auto 24px;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.55;
  max-width: 480px;
}

/* Cars list — image | body | actions, hairline rules between. */
.final-fp-cars {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.final-fp-car {
  display: grid;
  grid-template-columns: 340px 1fr auto;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid var(--v3-rule);
  align-items: stretch;
}
.final-fp-car:last-child {
  border-bottom: 1px solid var(--v3-rule);
}
.final-fp-car-image {
  aspect-ratio: 4 / 3;
  background: var(--v3-rule-soft);
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}
.final-fp-car-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final-fp-car-image-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  text-align: center;
  padding: 0 16px;
}
.final-fp-car-body { min-width: 0; }
.final-fp-car-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.final-fp-chip {
  font-family: var(--v2-mono);
  font-size: 10px;
  padding: 4px 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid transparent;
}
.final-fp-chip.is-verified {
  background: var(--v3-forest);
  color: var(--v3-lime);
  border-color: var(--v3-forest);
}
.final-fp-chip.is-pending {
  background: transparent;
  color: var(--v3-ink);
  border-color: var(--v3-ink);
}
.final-fp-chip.is-gen {
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
}
.final-fp-chip.is-past {
  background: var(--v3-rule-soft);
  color: var(--v3-ink-2);
}
.final-fp-car-frame {
  font-size: 11px;
  color: var(--v3-ink-3);
  font-family: var(--v2-mono);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
  font-weight: 600;
}
.final-fp-car-title {
  font-size: clamp(28px, 3vw, 38px);
  margin: 0 0 10px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v3-ink);
}
.final-fp-car-title-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fp-car-since {
  font-size: 14px;
  color: var(--v3-ink-2);
  margin-bottom: 20px;
}
.final-fp-car-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
}
.final-fp-car-cta { min-width: 160px; justify-content: center; }

/* Edit panel — same outer-bleed pattern. */
.final-fp-edit-form { display: flex; flex-direction: column; gap: 22px; }
.final-fp-edit-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid var(--v3-rule);
  border-bottom: 1px solid var(--v3-rule);
}
.final-fp-edit-avatar-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.final-fp-edit-avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--v3-rule-soft);
  border: 3px solid var(--v3-forest);
  box-shadow: 0 0 0 6px var(--v3-lime-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.final-fp-edit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-fp-edit-avatar span {
  font-family: var(--v2-mono);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--v3-forest);
}
.final-fp-edit-avatar-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.final-fp-edit-avatar-upload input[type="file"] {
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  background: var(--v3-card);
}
.final-fp-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.final-fp-edit-bio { width: 100%; }
.final-fp-edit-foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.final-settings-field--wide { grid-column: 1 / -1; }
.final-settings-input.is-readonly {
  background: var(--v3-rule-soft);
  color: var(--v3-ink-3);
  cursor: not-allowed;
}
.final-settings-success {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--v3-forest);
  background: var(--v3-lime-soft);
  border: 1px solid var(--v3-lime);
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .final-fp-hero { padding-top: 56px; padding-bottom: 36px; }
  .final-fp-section { padding-top: 48px; padding-bottom: 64px; }
  .final-fp-setup { padding-top: 24px; padding-bottom: 24px; }
  .final-fp-hero-grid { grid-template-columns: 140px 1fr; gap: 32px; }
  .final-fp-hero-avatar { width: 140px; height: 140px; }
  .final-fp-hero-avatar span { font-size: 44px; }
  .final-fp-hero-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .final-fp-hero-cta { min-width: 0; flex: 1 1 auto; }
}

@media (max-width: 768px) {
  .final-fp-hero-grid { grid-template-columns: 96px 1fr; gap: 20px; }
  .final-fp-hero-avatar { width: 96px; height: 96px; box-shadow: 0 0 0 4px var(--v3-lime-soft); }
  .final-fp-hero-avatar span { font-size: 32px; }
  .final-fp-hero-name { margin-top: 8px; }
  .final-fp-hero-stats { gap: 24px; margin-top: 22px; }
  .final-fp-hero-stat-num { font-size: 24px; }
  .final-fp-car { grid-template-columns: 1fr; gap: 18px; }
  .final-fp-car-image { width: 100%; max-width: 100%; }
  .final-fp-car-actions { flex-direction: row; flex-wrap: wrap; align-self: flex-start; }
  .final-fp-car-cta { width: 100%; }
  .final-fp-edit-grid { grid-template-columns: 1fr; gap: 24px; }
  .final-fp-edit-avatar { width: 140px; height: 140px; }
  .final-fp-edit-avatar span { font-size: 44px; }
}

@media (max-width: 600px) {
  .final-fp-hero { padding-top: 40px; padding-bottom: 28px; }
  .final-fp-section { padding-top: 36px; padding-bottom: 56px; }
  .final-fp-setup { padding-top: 20px; padding-bottom: 20px; }
  .final-fp-section-head { flex-direction: column; align-items: stretch; }
  .final-fp-section-head .v3-btn { width: 100%; justify-content: center; }
  .final-fp-edit-foot { flex-direction: column-reverse; }
  .final-fp-edit-foot .v3-btn { width: 100%; justify-content: center; }
}

/* Forum activity panel — list of recent threads + posts. */
.final-fp-forum-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--v3-rule);
}
.final-fp-forum-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v3-rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.final-fp-forum-row:hover { background: var(--v3-rule-soft); }
.final-fp-forum-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.final-fp-forum-type { color: var(--v3-forest); }
.final-fp-forum-cat { color: var(--v3-ink-2); }
.final-fp-forum-date { color: var(--v3-ink-4); }
.final-fp-forum-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.final-fp-forum-snippet {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.55;
}

/* Notes (CarComments) panel */
.final-fp-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--v3-rule);
}
.final-fp-note-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fp-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  align-items: center;
}
.final-fp-note-car {
  color: var(--v3-forest);
  text-decoration: none;
}
.final-fp-note-car:hover { text-decoration: underline; }
.final-fp-note-gen { color: var(--v3-ink-2); }
.final-fp-note-date { color: var(--v3-ink-4); }
.final-fp-note-body {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink);
  line-height: 1.6;
  white-space: pre-line;
}

/* Connections panel — 3 columns (Buddies / Followers / Following). */
.final-fp-conn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.final-fp-conn-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.final-fp-conn-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fp-conn-count {
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--v3-forest);
}
.final-fp-conn-empty {
  margin: 0;
  font-size: 13px;
  color: var(--v3-ink-3);
  font-style: italic;
}
.final-fp-conn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.final-fp-conn-list li + li { border-top: 1px solid var(--v3-rule-soft); }
.final-fp-conn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s;
}
.final-fp-conn-row:hover { color: var(--v3-forest); }
.final-fp-conn-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow: hidden;
  flex-shrink: 0;
}
.final-fp-conn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-fp-conn-text { display: flex; flex-direction: column; min-width: 0; }
.final-fp-conn-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.final-fp-conn-handle {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .final-fp-conn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .final-fp-conn-grid { grid-template-columns: 1fr; gap: 24px; }
  .final-fp-forum-title { font-size: 16px; }
}

/* Profile-edit page (/my-profile/edit) — dedicated single-purpose
   form shell, separate from the Final 04 profile shell so the
   public-facing identity page stays focused on display. */
.final-fpe-shell {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: 80px;
  padding-left: max(var(--v3-shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--v3-shell-pad), env(safe-area-inset-right));
}
.final-fpe-trail {
  margin-bottom: 18px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.final-fpe-trail a {
  color: var(--v3-ink-3);
  text-decoration: none;
}
.final-fpe-trail a:hover { color: var(--v3-forest); }
.final-fpe-head { margin-bottom: 28px; }
.final-fpe-h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  margin: 8px 0 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--v3-ink);
}
.final-fpe-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fpe-lede {
  font-size: 15px;
  color: var(--v3-ink-2);
  margin: 16px 0 0;
  max-width: 560px;
  line-height: 1.55;
}
.final-fpe-lede a {
  color: var(--v3-forest);
  font-weight: 600;
  text-decoration: underline;
}
.final-fpe-setup {
  margin: 0 0 28px;
  padding: 22px 26px;
  background: var(--v3-lime-soft);
  border: 1px solid var(--v3-lime);
  border-radius: 12px;
}

@media (max-width: 600px) {
  .final-fpe-shell {
    padding-top: 28px;
    padding-bottom: 56px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ──────────────────────────────────────────────────────────────
   Community / Forum (Final 13 + Final 14).
   - .final-fc-hero — outer-bleed header band
   - .final-fc-section — content section, gutters via inner v3-shell
   - .final-fc-cat-grid — categories 2-col card grid
   - .final-fc-threads — thread list rows (avatar | body | author | replies | views | last)
   - .final-fc-thread-* — single-thread view: posts + sidebar
   ────────────────────────────────────────────────────────────── */

/* Hero band (forum index + category page header). The .v3-shell
   inside controls the 1280px max-width + 32px gutters. */
.final-fc-hero {
  padding: 52px 0 32px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-fc-eyebrow { color: var(--v3-forest); }
.final-fc-eyebrow .final-fc-crumb {
  color: var(--v3-ink-3);
  text-decoration: none;
  margin-right: 4px;
}
.final-fc-eyebrow .final-fc-crumb:hover { color: var(--v3-forest); }
.final-fc-eyebrow .final-fc-crumb-current { color: var(--v3-forest); }

.final-fc-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.final-fc-hero-text { flex: 1 1 480px; min-width: 0; }
.final-fc-h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  margin: 0;
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--v3-ink);
}
.final-fc-h1--cat { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -0.025em; }
.final-fc-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fc-lede {
  font-size: 17px;
  color: var(--v3-ink-2);
  margin: 18px 0 0;
  max-width: 620px;
  line-height: 1.55;
}

.final-fc-hero-stats {
  display: flex;
  gap: 32px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.final-fc-stat { text-align: right; min-width: 80px; }
.final-fc-stat-num {
  display: block;
  font-family: var(--v2-mono);
  font-size: 28px;
  color: var(--v3-forest);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.final-fc-stat-cap {
  display: block;
  margin-top: 4px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

/* Sections (categories, recent threads, etc.). The .v3-shell
   inside controls the 1280px max-width + 32px gutters. */
.final-fc-section {
  padding: 40px 0 8px;
}
.final-fc-section--categories { padding-top: 40px; padding-bottom: 16px; }
.final-fc-section + .final-fc-section { padding-top: 40px; }
.final-fc-section:last-child { padding-bottom: 80px; }
.final-fc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  gap: 18px;
  flex-wrap: wrap;
}
.final-fc-section-h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v3-ink);
}
.final-fc-section-h2--start { line-height: 1; margin-top: 8px; }

/* Categories grid. */
.final-fc-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.final-fc-cat-card {
  display: block;
  background: var(--v3-card);
  padding: 24px 24px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.final-fc-cat-card:hover {
  border-color: var(--v3-forest);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 30, 26, 0.08);
}
.final-fc-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.final-fc-cat-name {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--v3-ink);
}
.final-fc-cat-icon { color: var(--v3-forest); margin-right: 8px; }
.final-fc-cat-last {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  white-space: nowrap;
}
.final-fc-cat-meta {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--v2-mono);
  font-size: 12px;
  color: var(--v3-ink-2);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.final-fc-cat-sep { color: var(--v3-ink-4); }

/* Thread list (forum index recent threads + category threads). */
.final-fc-threads {
  border-top: 1px solid var(--v3-rule);
}
.final-fc-thread-row {
  display: grid;
  grid-template-columns: 40px 1fr 130px 110px 110px 100px;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--v3-rule);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.final-fc-thread-row:hover { background: var(--v3-rule-soft); }
.final-fc-thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  font-family: var(--v2-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.final-fc-thread-body { min-width: 0; }
.final-fc-thread-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.final-fc-chip {
  font-family: var(--v2-mono);
  font-size: 9px;
  padding: 3px 8px;
  background: var(--v3-rule-soft);
  color: var(--v3-ink-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
.final-fc-chip.is-pinned { background: var(--v3-lime); color: var(--v3-forest); }
.final-fc-chip.is-locked { background: var(--v3-rule-soft); color: var(--v3-ink-3); }
.final-fc-chip.is-cat { background: var(--v3-lime-soft); color: var(--v3-forest); letter-spacing: 0.14em; }
.final-fc-thread-title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
  line-height: 1.3;
  /* User-generated thread titles can be arbitrarily long. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.final-fc-thread-author,
.final-fc-thread-stat {
  font-family: var(--v2-mono);
  font-size: 12px;
  color: var(--v3-ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.final-fc-thread-author { color: var(--v3-ink-2); }
.final-fc-thread-last {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-forest);
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* Pagination — Laravel uses Bootstrap-5 paginator (page-item /
   page-link). Style the .page-link pills, with active + disabled
   variants on the wrapping .page-item. */
.final-fc-pagination {
  margin-top: 28px;
  font-family: var(--v2-mono);
  font-size: 12px;
}
.final-fc-pagination nav { display: flex; justify-content: center; }
.final-fc-pagination .pagination {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
}
.final-fc-pagination .page-item { list-style: none; }
.final-fc-pagination .page-link {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--v3-rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--v3-ink-2);
  background: var(--v3-card);
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
}
.final-fc-pagination .page-link:hover { border-color: var(--v3-ink-3); color: var(--v3-ink); }
.final-fc-pagination .page-item.active .page-link {
  background: var(--v3-forest);
  color: var(--v3-lime);
  border-color: var(--v3-forest);
}
.final-fc-pagination .page-item.disabled .page-link {
  opacity: 0.4;
  background: transparent;
  cursor: not-allowed;
}

/* Start-a-thread inline form. */
.final-fc-section--start {
  border-top: 1px solid var(--v3-rule);
  margin-top: 24px;
}
.final-fc-start {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
  max-width: 880px;
}
.final-fc-file-input {
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  background: var(--v3-card);
}
.final-fc-start-foot {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ─── Single thread (Final 14) ─── */

.final-fc-thread-head {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-fc-thread-h1 {
  font-size: clamp(32px, 4.5vw, 56px);
  margin: 14px 0 14px;
  line-height: 1.04;
  max-width: 980px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v3-ink);
  /* User-generated thread titles can be arbitrarily long. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.final-fc-thread-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fc-thread-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.final-fc-thread-meta-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.final-fc-mini-form { display: inline; margin: 0; }
.final-fc-mini-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--v3-ink-3);
  cursor: pointer;
  letter-spacing: inherit;
  font-family: inherit;
}
.final-fc-mini-btn.is-on,
.final-fc-mini-btn:hover { color: var(--v3-forest); }

.final-fc-thread-body {
  padding: 48px 0 80px;
}
.final-fc-thread-body-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
}

/* Posts column. */
.final-fc-posts { min-width: 0; }
.final-fc-post {
  padding: 32px 0;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fc-post.is-starter { border-top: 1px solid var(--v3-rule); }
.final-fc-post-grid {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
}
.final-fc-post-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  overflow: hidden;
}
.final-fc-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.final-fc-post-avatar.is-op { background: var(--v3-forest); color: var(--v3-lime); }
.final-fc-post-avatar.is-archivist { background: var(--v3-ink); color: var(--v3-lime); }
.final-fc-post-avatar.is-member { background: var(--v3-lime-soft); color: var(--v3-forest); }
.final-fc-post-body { min-width: 0; }
.final-fc-post-byline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.final-fc-post-author {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--v3-ink);
  text-decoration: none;
}
.final-fc-post-author:hover { color: var(--v3-forest); }
.final-fc-post-time {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  font-weight: 600;
}
.final-fc-role-chip {
  font-family: var(--v2-mono);
  font-size: 9px;
  padding: 3px 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
}
.final-fc-role-chip.is-op { background: var(--v3-lime); color: var(--v3-forest); }
.final-fc-role-chip.is-archivist { background: var(--v3-ink); color: var(--v3-lime); }
.final-fc-role-chip.is-member { background: var(--v3-forest); color: var(--v3-lime); }

.final-fc-post-text {
  font-size: 16px;
  color: var(--v3-ink);
  line-height: 1.65;
  margin: 14px 0;
  word-wrap: break-word;
}
.final-fc-post-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.final-fc-post-attachment {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--v3-rule-soft);
  border-radius: 10px;
}
.final-fc-post-attachment img { width: 100%; height: 100%; object-fit: cover; }
.final-fc-post-actions {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 700;
}
.final-fc-action-pill {
  color: var(--v3-ink-3);
  text-decoration: none;
  cursor: pointer;
}
.final-fc-action-pill:hover { color: var(--v3-forest); }
.final-fc-action-pill.is-on { color: var(--v3-forest); }

/* Reply form. */
.final-fc-reply {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-card);
}
.final-fc-reply-input {
  width: 100%;
  min-height: 110px;
  padding: 16px;
  margin-top: 12px;
  font-family: var(--v3-font, inherit);
  font-size: 14px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  color: var(--v3-ink);
  outline: none;
  resize: vertical;
  border-radius: 8px;
  box-sizing: border-box;
  line-height: 1.55;
}
.final-fc-reply-input:focus { border-color: var(--v3-forest); }
.final-fc-reply-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.final-fc-reply-hint {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

/* Sidebar. */
.final-fc-thread-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.final-fc-rail-card {
  border: 1px solid var(--v3-rule);
  padding: 22px;
  border-radius: 12px;
  background: var(--v3-card);
}
.final-fc-rail-card--rules {
  background: var(--v3-forest);
  color: #fff;
  border-color: var(--v3-forest);
}
.final-fc-rail-card--rules p {
  margin: 12px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}
.final-fc-rail-author {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  text-decoration: none;
  color: inherit;
}
.final-fc-rail-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.final-fc-rail-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.final-fc-rail-author-text { display: flex; flex-direction: column; min-width: 0; }
.final-fc-rail-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.final-fc-rail-author-handle {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  font-weight: 600;
}
.final-fc-rail-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.final-fc-rail-row {
  padding: 10px 0;
  border-top: 1px solid var(--v3-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--v3-ink);
  text-decoration: none;
  line-height: 1.4;
}
.final-fc-rail-row:hover { color: var(--v3-forest); }
.final-fc-rail-row-title { flex: 1; }
.final-fc-rail-row-stat {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .final-fc-hero { padding: 40px 0 28px; }
  .final-fc-section { padding: 32px 0 8px; }
  .final-fc-thread-head { padding: 32px 0 24px; }
  .final-fc-thread-body { padding: 36px 0 72px; }
  .final-fc-thread-body-grid { gap: 36px; grid-template-columns: 1fr 280px; }
  .final-fc-cat-grid { grid-template-columns: 1fr; }
  .final-fc-thread-row { grid-template-columns: 40px 1fr 100px 90px; gap: 14px; }
  .final-fc-thread-row > .final-fc-thread-stat:nth-of-type(2),
  .final-fc-thread-row > .final-fc-thread-last { display: none; }
}
@media (max-width: 768px) {
  .final-fc-hero { padding: 32px 0 20px; }
  .final-fc-section { padding: 28px 0 8px; }
  .final-fc-thread-head { padding: 24px 0 20px; }
  .final-fc-thread-body { padding: 28px 0 56px; }
  .final-fc-thread-body-grid { grid-template-columns: 1fr; }
  .final-fc-thread-rail { order: 2; }
  .final-fc-hero-stats { gap: 18px; }
  .final-fc-stat { text-align: left; }
}
@media (max-width: 600px) {
  .final-fc-thread-row { grid-template-columns: 36px 1fr; gap: 12px; }
  .final-fc-thread-row > .final-fc-thread-author,
  .final-fc-thread-row > .final-fc-thread-stat,
  .final-fc-thread-row > .final-fc-thread-last { display: none; }
  .final-fc-post-grid { grid-template-columns: 48px 1fr; gap: 14px; }
  .final-fc-post-avatar { width: 48px; height: 48px; }
}

/* ──────────────────────────────────────────────────────────────
   Messages (Final 16) — 3-col messaging UI.
   - .final-fmsg-head — page header
   - .final-fmsg-shell — 3-col grid (rail / thread / contact rail)
   - .final-fmsg-rail — left + right rails
   - .final-fmsg-thread — middle column (header + stream + composer)
   ────────────────────────────────────────────────────────────── */

.final-fmsg-head {
  padding: 32px 0 22px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-fmsg-eyebrow { color: var(--v3-forest); }
.final-fmsg-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
  gap: 18px;
  flex-wrap: wrap;
}
.final-fmsg-h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--v3-ink);
}
.final-fmsg-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  margin-left: 8px;
}
.final-fmsg-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Three-col body. */
.final-fmsg-shell {
  display: grid;
  grid-template-columns: 360px 1fr 320px;
  border-bottom: 1px solid var(--v3-rule);
  height: calc(100vh - 200px);
  min-height: 600px;
  max-height: 880px;
  background: var(--v3-paper);
}

/* Generic rail (used for left + right). */
.final-fmsg-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--v3-card);
}
.final-fmsg-rail--left { border-right: 1px solid var(--v3-rule); }
.final-fmsg-rail--right {
  border-left: 1px solid var(--v3-rule);
  padding: 24px;
  overflow-y: auto;
  background: var(--v3-paper);
}

/* Left rail: search + filters + scrolling list. */
.final-fmsg-rail-search {
  padding: 14px 20px;
  border-bottom: 1px solid var(--v3-rule);
  display: flex;
  align-items: center;
  gap: 10px;
}
.final-fmsg-rail-search-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-forest);
  font-weight: 700;
  flex-shrink: 0;
}
.final-fmsg-rail-search-input {
  flex: 1;
  padding: 6px 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--v3-ink);
  font-family: inherit;
  min-width: 0;
}
.final-fmsg-rail-search-input:focus,
.final-fmsg-rail-search-input:focus-visible { outline: none; }

.final-fmsg-rail-filters {
  padding: 10px 20px;
  border-bottom: 1px solid var(--v3-rule);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.final-fmsg-filter-chip {
  padding: 6px 11px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--v3-ink-2);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.final-fmsg-filter-chip span { opacity: 0.7; font-weight: 600; }
.final-fmsg-filter-chip.is-active {
  border-color: var(--v3-forest);
  background: var(--v3-forest);
  color: var(--v3-lime);
}

/* Conversation list. */
.final-fmsg-conv-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.final-fmsg-conv {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-bottom: 1px solid var(--v3-rule);
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.15s;
}
.final-fmsg-conv:hover { background: var(--v3-rule-soft); }
/* Active conversation — full-tint background instead of a left
   side-stripe. Lime-soft + forest-leaning text on the name reads
   as "selected" without the banned-by-design accent stripe. */
.final-fmsg-conv.is-active {
  background: var(--v3-lime-soft);
}
.final-fmsg-conv.is-active .final-fmsg-conv-name { color: var(--v3-forest); }
.final-fmsg-conv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.final-fmsg-conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.final-fmsg-conv-avatar.is-archivist { background: var(--v3-ink); color: var(--v3-lime); }
.final-fmsg-conv-online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: var(--v3-lime);
  border: 2px solid var(--v3-card);
  border-radius: 50%;
}
.final-fmsg-conv-body { min-width: 0; }
.final-fmsg-conv-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.final-fmsg-conv-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.final-fmsg-conv.is-unread .final-fmsg-conv-name { font-weight: 700; }
.final-fmsg-conv-time {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-ink-3);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  font-weight: 600;
}
.final-fmsg-conv.is-unread .final-fmsg-conv-time {
  color: var(--v3-forest);
  font-weight: 700;
}
.final-fmsg-conv-role {
  font-family: var(--v2-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  margin-bottom: 4px;
  font-weight: 700;
}
.final-fmsg-conv-preview {
  font-size: 13px;
  color: var(--v3-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.final-fmsg-conv.is-unread .final-fmsg-conv-preview {
  color: var(--v3-ink);
  font-weight: 500;
}
.final-fmsg-conv-dot {
  align-self: center;
  width: 8px;
  height: 8px;
  background: var(--v3-forest);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Empty state. */
.final-fmsg-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--v3-ink-2);
}
.final-fmsg-empty p { margin: 0 0 8px; font-size: 14px; }
.final-fmsg-empty-sub { color: var(--v3-ink-3); font-size: 13px; }
.final-fmsg-empty .v3-btn { margin-top: 14px; }

/* Middle column: thread. */
.final-fmsg-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--v3-card);
}
.final-fmsg-thread-empty {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
  color: var(--v3-ink-2);
  max-width: 480px;
}
.final-fmsg-thread-empty-h2 {
  font-size: clamp(28px, 3vw, 38px);
  margin: 12px 0 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--v3-ink);
  line-height: 1.05;
}
.final-fmsg-thread-empty p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; }

.final-fmsg-thread-head {
  padding: 18px 28px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
  display: grid;
  grid-template-columns: auto 44px 1fr auto;
  gap: 14px;
  align-items: center;
}
.final-fmsg-thread-back {
  display: none;
  font-size: 22px;
  color: var(--v3-ink-2);
  text-decoration: none;
  padding: 0 4px;
}
.final-fmsg-thread-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.final-fmsg-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.final-fmsg-thread-online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  background: var(--v3-lime);
  border: 2px solid var(--v3-paper);
  border-radius: 50%;
}
.final-fmsg-thread-name-col { min-width: 0; }
.final-fmsg-thread-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.final-fmsg-thread-role {
  font-family: var(--v2-mono);
  font-size: 10px;
  color: var(--v3-forest);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}
.final-fmsg-thread-action { white-space: nowrap; }

.final-fmsg-thread-subject {
  padding: 12px 28px;
  background: var(--v3-lime-soft);
  border-bottom: 1px solid var(--v3-rule);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--v3-ink-2);
}
.final-fmsg-pin {
  font-family: var(--v2-mono);
  font-size: 9px;
  padding: 4px 10px;
  background: var(--v3-forest);
  color: var(--v3-lime);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Message stream. */
.final-fmsg-stream {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 8px;
  min-height: 0;
}
.final-fmsg-stream-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--v3-ink-3);
}
.final-fmsg-day {
  text-align: center;
  margin: 12px 0 20px;
}
.final-fmsg-day-pill {
  display: inline-block;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  padding: 4px 12px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 999px;
  font-weight: 700;
}
.final-fmsg-bubble {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  max-width: 64%;
}
.final-fmsg-bubble.is-mine {
  align-self: flex-end;
  margin-left: auto;
  align-items: flex-end;
}
.final-fmsg-bubble.is-theirs { align-self: flex-start; }
.final-fmsg-bubble-time {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  margin-bottom: 6px;
  font-weight: 700;
}
.final-fmsg-bubble-body {
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 14px;
  word-wrap: break-word;
}
.final-fmsg-bubble.is-mine .final-fmsg-bubble-body {
  background: var(--v3-forest);
  color: #fff;
  border: 1px solid var(--v3-forest);
  border-top-right-radius: 4px;
}
.final-fmsg-bubble.is-theirs .final-fmsg-bubble-body {
  background: var(--v3-paper);
  color: var(--v3-ink);
  border: 1px solid var(--v3-rule);
  border-top-left-radius: 4px;
}

/* Composer. */
.final-fmsg-composer {
  padding: 16px 20px;
  border-top: 1px solid var(--v3-rule);
  background: var(--v3-paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.final-fmsg-composer-input {
  width: 100%;
  min-height: 56px;
  max-height: 200px;
  padding: 14px 16px;
  border: 1px solid var(--v3-forest);
  border-radius: 10px;
  background: var(--v3-paper);
  color: var(--v3-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  outline: none;
  resize: none;
  box-sizing: border-box;
}
.final-fmsg-composer-input:focus,
.final-fmsg-composer-input:focus-visible { outline: none; border-color: var(--v3-forest); }
.final-fmsg-composer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.final-fmsg-composer-hint {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-3);
  font-weight: 700;
}

/* Right rail: contact card + meta. */
.final-fmsg-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--v3-rule);
}
.final-fmsg-contact-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--v3-forest);
  color: var(--v3-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-mono);
  font-size: 28px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
.final-fmsg-contact-avatar img { width: 100%; height: 100%; object-fit: cover; }
.final-fmsg-contact-avatar.is-archivist { background: var(--v3-ink); color: var(--v3-lime); }
.final-fmsg-contact-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--v3-lime);
  border: 3px solid var(--v3-paper);
  border-radius: 50%;
}
.final-fmsg-contact-name {
  font-size: 19px;
  font-weight: 600;
  margin-top: 14px;
  letter-spacing: -0.015em;
  color: var(--v3-ink);
}
.final-fmsg-contact-handle {
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-ink-3);
  letter-spacing: 0.08em;
  margin-top: 4px;
  font-weight: 600;
}
.final-fmsg-contact-badge {
  margin-top: 10px;
  font-family: var(--v2-mono);
  font-size: 10px;
  padding: 3px 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  background: var(--v3-lime-soft);
  color: var(--v3-forest);
  border: 1px solid var(--v3-forest);
}
.final-fmsg-rail-section { margin-top: 22px; }
.final-fmsg-rail-about {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}
.final-fmsg-rail-stats {
  margin: 10px 0 0;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.final-fmsg-rail-stat {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--v3-rule);
  margin: 0;
}
.final-fmsg-rail-stat dt {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--v3-ink-3);
  text-transform: uppercase;
  font-weight: 700;
}
.final-fmsg-rail-stat dd {
  margin: 0;
  font-family: var(--v2-mono);
  font-size: 12px;
  color: var(--v3-ink);
  font-weight: 700;
}
.final-fmsg-rail-chassis {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.final-fmsg-rail-car {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  background: var(--v3-card);
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.final-fmsg-rail-car:hover { border-color: var(--v3-forest); }
.final-fmsg-rail-car-image {
  width: 56px;
  height: 42px;
  background: var(--v3-rule-soft);
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 4px;
}
.final-fmsg-rail-car-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.final-fmsg-rail-car-text { min-width: 0; }
.final-fmsg-rail-car-frame {
  display: block;
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v3-forest);
  font-weight: 700;
}
.final-fmsg-rail-car-label {
  display: block;
  font-size: 11px;
  color: var(--v3-ink-3);
  margin-top: 2px;
}

/* Responsive — collapse to single-column on tablet/phone. The
   left rail and middle column are mutually exclusive; right
   rail hides entirely on small screens. */
@media (max-width: 1100px) {
  .final-fmsg-shell { grid-template-columns: 320px 1fr; }
  .final-fmsg-rail--right { display: none; }
}
@media (max-width: 768px) {
  .final-fmsg-head { padding-top: 24px; padding-bottom: 16px; }
  .final-fmsg-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 160px);
  }
  .final-fmsg-rail--left.is-collapsed-on-mobile { display: none; }
  .final-fmsg-thread.is-collapsed-on-mobile { display: none; }
  .final-fmsg-thread-back { display: inline-flex; }
  .final-fmsg-thread-head { padding: 14px 18px; gap: 10px; grid-template-columns: auto 40px 1fr auto; }
  .final-fmsg-stream { padding: 16px 18px 8px; }
  .final-fmsg-composer { padding: 12px 16px; }
  .final-fmsg-bubble { max-width: 80%; }
}

/* ──────────────────────────────────────────────────────────────
   CMS pages — terms, privacy, faqs, who-we-are, where-it-started,
   why-supra-registry, get-in-touch. Shared chrome with body
   variants (rich text / informations / faq accordion / contact).
   ────────────────────────────────────────────────────────────── */

.final-cms-hero {
  padding: 64px 0 36px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-cms-hero-inner {
  max-width: 980px;
  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));
}
.final-cms-eyebrow { color: var(--v3-forest); }
.final-cms-h1 {
  font-size: clamp(48px, 6vw, 80px);
  margin: 14px 0 0;
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--v3-ink);
}
.final-cms-h1--override { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1.04; }
.final-cms-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-cms-lede {
  font-size: 17px;
  color: var(--v3-ink-2);
  margin: 18px 0 0;
  max-width: 720px;
  line-height: 1.55;
}

.final-cms-body {
  padding: 56px 0 96px;
}
.final-cms-body-inner {
  max-width: 980px;
  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));
}
.final-cms-section + .final-cms-section { margin-top: 48px; }
.final-cms-section-body { margin-top: 18px; }

/* Rich-text body (terms / privacy). Paragraph rhythm + bold lists. */
.final-cms-rich {
  font-size: 16px;
  line-height: 1.7;
  color: var(--v3-ink);
  max-width: 760px;
}
.final-cms-rich h1,
.final-cms-rich h2,
.final-cms-rich h3,
.final-cms-rich h4 {
  margin: 1.6em 0 0.5em;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--v3-ink);
}
.final-cms-rich h1 { font-size: 28px; }
.final-cms-rich h2 { font-size: 22px; }
.final-cms-rich h3 { font-size: 18px; }
.final-cms-rich h4 { font-size: 16px; }
.final-cms-rich p { margin: 0 0 1em; }
.final-cms-rich ul,
.final-cms-rich ol { margin: 0 0 1em; padding-left: 24px; }
.final-cms-rich li { margin-bottom: 0.4em; }
.final-cms-rich a { color: var(--v3-forest); font-weight: 600; text-decoration: underline; }
.final-cms-rich a:hover { color: var(--v3-forest-deep); }
.final-cms-rich strong { font-weight: 600; }
/* Pull-quote treatment — indented italic with a leading mark,
   no left side-stripe (banned). Reads as a quote because of the
   typography, not a decorative accent bar. */
.final-cms-rich blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 28px;
  font-style: italic;
  color: var(--v3-ink-2);
  position: relative;
}
.final-cms-rich blockquote::before {
  content: "/";
  position: absolute;
  left: 0;
  top: 0.7em;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--v3-forest);
  font-style: normal;
  font-weight: 700;
}
.final-cms-rich hr {
  border: 0;
  border-top: 1px solid var(--v3-rule);
  margin: 2em 0;
}

/* Informations sections (who-we-are / where-it-started / why). */
.final-cms-info-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--v3-rule-soft);
}
.final-cms-info-row:last-child { border-bottom: 0; }
.final-cms-info-key {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.final-cms-info-value {
  font-size: 15px;
  color: var(--v3-ink-2);
  line-height: 1.65;
}
.final-cms-info-value p { margin: 0 0 0.8em; }

/* Company values grid + count strip. */
.final-cms-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.final-cms-value {
  padding: 22px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-card);
}
.final-cms-value-title {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-forest);
}
.final-cms-value-body {
  margin: 0;
  font-size: 14px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}
.final-cms-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--v3-rule);
  border-radius: 12px;
  background: var(--v3-card);
  overflow: hidden;
}
.final-cms-count {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  border-right: 1px solid var(--v3-rule);
}
.final-cms-count:last-child { border-right: 0; }
.final-cms-count-num {
  font-family: var(--v2-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--v3-forest);
  letter-spacing: -0.01em;
}
.final-cms-count-cap {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
}

/* FAQ accordion. */
.final-cms-faqs {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--v3-rule);
}
.final-cms-faq {
  border-bottom: 1px solid var(--v3-rule);
}
.final-cms-faq[open] { background: var(--v3-card); }
.final-cms-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--v3-ink);
}
.final-cms-faq summary::-webkit-details-marker { display: none; }
.final-cms-faq summary:hover { color: var(--v3-forest); }
.final-cms-faq-q { flex: 1; min-width: 0; }
.final-cms-faq-marker {
  font-family: var(--v2-mono);
  font-size: 18px;
  color: var(--v3-forest);
  font-weight: 700;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.final-cms-faq[open] .final-cms-faq-marker { transform: rotate(45deg); }
.final-cms-faq-a {
  padding: 0 4px 22px;
  font-size: 15px;
  color: var(--v3-ink-2);
  line-height: 1.65;
}

/* Contact form. */
.final-cms-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.final-cms-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.final-cms-contact-msg { grid-column: 1 / -1; }
.final-cms-contact-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

@media (max-width: 1024px) {
  .final-cms-hero { padding: 48px 0 28px; }
  .final-cms-body { padding: 40px 0 72px; }
}
@media (max-width: 768px) {
  .final-cms-hero { padding: 40px 0 24px; }
  .final-cms-body { padding: 32px 0 56px; }
  .final-cms-values { grid-template-columns: 1fr; }
  .final-cms-counts { grid-template-columns: 1fr 1fr; }
  .final-cms-count:nth-child(2) { border-right: 0; }
  .final-cms-count:nth-child(-n+2) { border-bottom: 1px solid var(--v3-rule); }
  .final-cms-contact-grid { grid-template-columns: 1fr; }
  .final-cms-contact-foot .v3-btn { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────
   Rarity Engine (Final 12).
   ────────────────────────────────────────────────────────────── */

.final-fre-hero {
  padding: 56px 0 36px;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-paper);
}
.final-fre-hero-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.final-fre-beta {
  font-family: var(--v2-mono);
  font-size: 11px;
  padding: 4px 10px;
  background: var(--v3-lime);
  color: var(--v3-forest);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
}
.final-fre-crumb { color: var(--v3-forest); }
.final-fre-h1 {
  font-size: clamp(48px, 7vw, 96px);
  margin: 0;
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--v3-ink);
}
.final-fre-h1-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fre-lede {
  font-size: 17px;
  color: var(--v3-ink-2);
  margin: 22px 0 0;
  max-width: 700px;
  line-height: 1.55;
}

.final-fre-search-band {
  padding: 32px 0;
  border-bottom: 1px solid var(--v3-rule);
  background: var(--v3-card);
}
.final-fre-search {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.final-fre-search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--v3-forest);
  background: var(--v3-paper);
  padding: 0 20px;
  border-radius: 10px;
}
.final-fre-search-input-wrap:focus-within {
  outline: 2px solid var(--v3-lime);
  outline-offset: 1px;
}
.final-fre-search-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-forest);
  font-weight: 700;
  margin-right: 16px;
  flex-shrink: 0;
}
.final-fre-search-input {
  flex: 1;
  padding: 16px 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--v3-ink);
  background: transparent;
  letter-spacing: -0.01em;
  font-weight: 500;
  min-width: 0;
}
.final-fre-search-input:focus,
.final-fre-search-input:focus-visible { outline: none; }
.final-fre-search-submit { padding: 0 22px; align-self: stretch; }

/* Read-only configurator strip — 5 cells. */
.final-fre-config {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.final-fre-config-cell {
  padding: 12px 14px;
  background: var(--v3-paper);
  border: 1px solid var(--v3-rule);
  border-radius: 8px;
  min-width: 0;
}
.final-fre-config-label {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--v3-ink-3);
  margin-bottom: 6px;
}
.final-fre-config-value {
  font-family: var(--v2-mono);
  font-size: 12px;
  color: var(--v3-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sections (empty state, ambiguous/not-found, comparable cars).
   Inner content uses .v3-shell for the 1280px max-width + 32px
   gutters; the section itself just provides vertical spacing. */
.final-fre-section { padding: 48px 0 64px; }
.final-fre-section--empty { padding-bottom: 96px; }
.final-fre-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.final-fre-section-h2 {
  font-size: clamp(32px, 4vw, 52px);
  margin: 8px 0 0;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--v3-ink);
}
.final-fre-section-h2-em {
  color: var(--v3-forest);
  font-style: italic;
  font-weight: 400;
}
.final-fre-section-p {
  margin: 14px 0 22px;
  font-size: 15px;
  color: var(--v3-ink-2);
  line-height: 1.6;
  max-width: 600px;
}
.final-fre-section-p code {
  font-family: var(--v2-mono);
  font-size: 13px;
  background: var(--v3-rule-soft);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--v3-forest);
}

/* Result band — forest background, gauge + factors grid. The
   .v3-shell already centers the inner column at 1280px max with
   32px gutters; result-grid sits inside it. */
.final-fre-result {
  background: var(--v3-forest);
  color: #fff;
  padding: 80px 0 88px;
}
.final-fre-result-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.final-fre-result-gauge-col { min-width: 0; }
/* Gauge: aspect-fixed container, SVG absolutely-positioned so it
   stays inside the box even as the readout below adjusts. The
   readout sits at a fixed % from the bottom of the SVG so it
   lands inside the arc bowl, and the gauge container explicitly
   reserves vertical room AFTER the arc/readout so the next
   element (the explanation paragraph) never crashes into the
   arc base. */
.final-fre-gauge {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 18px auto 0;
  /* 2:1 SVG aspect via padding-top (universal browser support).
     The 56px padding-bottom is the breathing room the next
     element gets after the gauge — keeps the explanation off
     the arc. */
  padding-top: 50%;
  padding-bottom: 56px;
}
.final-fre-gauge-svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* Match the 2:1 padding-top above. */
  height: calc(100% - 56px);
  display: block;
  /* Round stroke caps render a few px outside the viewBox —
     keep them visible. */
  overflow: visible;
}
.final-fre-gauge-readout {
  position: absolute;
  left: 0;
  right: 0;
  /* Sit just above the gauge's bottom padding so the digit lands
     inside the arc bowl (which extends from y=0 to y≈90% of SVG).
     The readout's natural height (~80px) + 56px bottom padding
     leaves plenty of clearance below the arc. */
  bottom: 56px;
  text-align: center;
  pointer-events: none;
}
.final-fre-gauge-num {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.final-fre-gauge-percent {
  color: var(--v3-lime);
  font-style: italic;
  font-weight: 400;
}
.final-fre-gauge-cap {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-lime);
  margin-top: 8px;
  font-weight: 700;
}
.final-fre-result-explain {
  margin-top: 36px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
}
.final-fre-result-explain strong { color: #fff; font-weight: 700; }
.final-fre-result-explain .final-fre-result-em { color: var(--v3-lime); }

.final-fre-factors { min-width: 0; }
.final-fre-factor {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.final-fre-factor:last-child { border-bottom: 0; }
.final-fre-factor-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}
.final-fre-factor-label {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  flex: 1;
  min-width: 0;
}
.final-fre-factor-score {
  font-family: var(--v2-mono);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.final-fre-factor-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
}
.final-fre-factor-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.final-fre-factor.is-combined .final-fre-factor-score { color: var(--v3-lime); }
.final-fre-factor.is-combined .final-fre-factor-fill { background: var(--v3-lime); }
.final-fre-factor-hint {
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  font-weight: 600;
}

/* Comparable cars + ambiguous matches grid. */
.final-fre-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.final-fre-compare-card {
  background: var(--v3-card);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid var(--v3-rule);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.final-fre-compare-card:hover {
  border-color: var(--v3-forest);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 30, 26, 0.08);
}
.final-fre-compare-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--v3-rule-soft);
  margin-bottom: 14px;
  border-radius: 8px;
}
.final-fre-compare-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.final-fre-compare-frame {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--v3-forest);
  font-weight: 700;
}
.final-fre-compare-meta {
  font-size: 18px;
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--v3-ink);
}

@media (max-width: 1024px) {
  .final-fre-hero { padding: 40px 0 28px; }
  .final-fre-search-band { padding: 24px 0; }
  .final-fre-section { padding: 40px 0 56px; }
  .final-fre-result { padding: 56px 0; }
  .final-fre-result-grid { grid-template-columns: 1fr; gap: 40px; }
  .final-fre-config { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .final-fre-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .final-fre-hero { padding: 32px 0 20px; }
  .final-fre-search-band { padding: 20px 0; }
  .final-fre-search { flex-direction: column; }
  .final-fre-search-submit { padding: 14px 22px; }
  .final-fre-config { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-fre-section { padding: 32px 0 56px; }
  .final-fre-result { padding: 40px 0; }
  .final-fre-section-head { flex-direction: column; align-items: stretch; }
  .final-fre-section-head .v3-btn { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .final-fre-config { grid-template-columns: 1fr; }
  .final-fre-compare-grid { grid-template-columns: 1fr; }
}