/* style.css - Moneymakuh Directory Engine (Mobile-First Modern CSS) */

:root {
  --primary: #5b3fe6;
  --primary-hover: #4a2fd0;
  --primary-light: #efebff;
  --link: #4b2fcb;
  --link-hover: #3f1f9e;
  --accent: #3f1f9e;
  --accent-hover: #2e1577;
  --accent-light: #efebff;
  --accent-badge: #5b3fe6;
  --accent-text: #3f1f9e;

  --bg: #f7f6fd;
  --surface: #ffffff;
  --surface-subtle: #f0eefa;
  --text: #1f2430;
  --text-soft: #3a3f54;
  --text-muted: #575c73;
  --text-faint: #8a8fa6;
  --border: #e3e0f2;
  --border-strong: #c9c4e6;
  --border-focus: #6d4af0;

  --success: #166534;
  --success-bg: #dcfce7;
  --warning: #92400e;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;

  --info-bg: #f3f0ff;
  --info-border: #d8d0fa;
  --info-text: #3f1f9e;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --warn-text: #92400e;
  --warn-text-strong: #78350f;
  --warn-chip-bg: #fef3c7;
  --warn-chip-border: #f59e0b;
  --ok-bg: #f0fdf4;
  --ok-border: #bbf7d0;
  --ok-strong: #10b981;
  --ok-text: #166534;
  --ok-text-strong: #14532d;

  --badge-primary-bg: #e9e4ff;
  --badge-primary-fg: #3f1f9e;
  --badge-mfg-bg: #e4e7ff;
  --badge-mfg-fg: #2f2a8a;
  --badge-type-bg: #fef08a;
  --badge-type-fg: #854d0e;
  --badge-accent-bg: #e0d9ff;
  --badge-accent-fg: #2e1577;

  --hero-grad: radial-gradient(60% 90% at 85% 0%, rgba(139,116,255,.45) 0%, rgba(139,116,255,0) 60%), linear-gradient(135deg, #2a1470 0%, #3f1f9e 48%, #5b3fe6 100%);
  --hero-sub: #e9e5ff;
  --cta-grad: linear-gradient(135deg, #1f2430 0%, #3f1f9e 100%);
  --cta-sub: #d9d3f5;
  --footer-bg: #171a24;
  --footer-border: #2a2e40;
  --footer-text: #b9bdd3;
  --footer-head: #ffffff;
  --header-bg: rgba(255,255,255,.88);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px 0 rgb(31 36 48 / 0.06);
  --shadow-md: 0 6px 16px -4px rgb(63 31 158 / 0.14), 0 2px 6px -2px rgb(31 36 48 / 0.06);
  --shadow-lg: 0 18px 36px -10px rgb(63 31 158 / 0.28), 0 6px 12px -6px rgb(31 36 48 / 0.10);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --max-w: 1200px;
  color-scheme: light;
}

/* Dark theme: chosen by the toggle (data-theme) or, with no saved choice and no JS, by the system setting. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #6d4af0;
  --primary-hover: #7d5ef5;
  --primary-light: #2a2160;
  --link: #a99bff;
  --link-hover: #c3b9ff;
  --accent: #5b3fe6;
  --accent-hover: #6d4af0;
  --accent-light: #2a2160;
  --accent-badge: #8b74ff;
  --accent-text: #c3b9ff;

  --bg: #0f111a;
  --surface: #171a26;
  --surface-subtle: #1e2232;
  --text: #eceaf8;
  --text-soft: #c8cbdd;
  --text-muted: #a3a8bf;
  --text-faint: #7d829b;
  --border: #2c3047;
  --border-strong: #3d4263;
  --border-focus: #a99bff;

  --success: #4ade80;
  --success-bg: #12281c;
  --warning: #fcd34d;
  --warning-bg: #3a2a08;
  --danger: #fca5a5;
  --danger-bg: #3b1518;

  --info-bg: #1c1840;
  --info-border: #3a3175;
  --info-text: #d9d2ff;
  --warn-bg: #2a2008;
  --warn-border: #5c4710;
  --warn-text: #fcd34d;
  --warn-text-strong: #fde68a;
  --warn-chip-bg: #3a2a08;
  --warn-chip-border: #b45309;
  --ok-bg: #12281c;
  --ok-border: #1f5a37;
  --ok-strong: #34d399;
  --ok-text: #86efac;
  --ok-text-strong: #bbf7d0;

  --badge-primary-bg: #2e2570;
  --badge-primary-fg: #d9d2ff;
  --badge-mfg-bg: #262a66;
  --badge-mfg-fg: #cfd3ff;
  --badge-type-bg: #3f3508;
  --badge-type-fg: #fde68a;
  --badge-accent-bg: #34277f;
  --badge-accent-fg: #e4defe;

  --hero-grad: radial-gradient(60% 90% at 85% 0%, rgba(109,74,240,.40) 0%, rgba(109,74,240,0) 60%), linear-gradient(135deg, #1a1040 0%, #2a1a6b 55%, #3f1f9e 100%);
  --hero-sub: #e0dafc;
  --cta-grad: linear-gradient(135deg, #1e2232 0%, #34277f 100%);
  --cta-sub: #d0cbef;
  --footer-bg: #0b0d14;
  --footer-border: #232739;
  --footer-text: #b4b8ce;
  --header-bg: rgba(23,26,38,.88);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 18px 36px -10px rgb(0 0 0 / 0.65), 0 6px 12px -6px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --primary: #6d4af0;
    --primary-hover: #7d5ef5;
    --primary-light: #2a2160;
    --link: #a99bff;
    --link-hover: #c3b9ff;
    --accent: #5b3fe6;
    --accent-hover: #6d4af0;
    --accent-light: #2a2160;
    --accent-badge: #8b74ff;
  --accent-text: #c3b9ff;

    --bg: #0f111a;
    --surface: #171a26;
    --surface-subtle: #1e2232;
    --text: #eceaf8;
    --text-soft: #c8cbdd;
    --text-muted: #a3a8bf;
    --text-faint: #7d829b;
    --border: #2c3047;
    --border-strong: #3d4263;
    --border-focus: #a99bff;

    --success: #4ade80;
    --success-bg: #12281c;
    --warning: #fcd34d;
    --warning-bg: #3a2a08;
    --danger: #fca5a5;
    --danger-bg: #3b1518;

    --info-bg: #1c1840;
    --info-border: #3a3175;
    --info-text: #d9d2ff;
    --warn-bg: #2a2008;
    --warn-border: #5c4710;
    --warn-text: #fcd34d;
    --warn-text-strong: #fde68a;
    --warn-chip-bg: #3a2a08;
    --warn-chip-border: #b45309;
    --ok-bg: #12281c;
    --ok-border: #1f5a37;
    --ok-strong: #34d399;
    --ok-text: #86efac;
    --ok-text-strong: #bbf7d0;

    --badge-primary-bg: #2e2570;
    --badge-primary-fg: #d9d2ff;
    --badge-mfg-bg: #262a66;
    --badge-mfg-fg: #cfd3ff;
    --badge-type-bg: #3f3508;
    --badge-type-fg: #fde68a;
    --badge-accent-bg: #34277f;
    --badge-accent-fg: #e4defe;

    --hero-grad: radial-gradient(60% 90% at 85% 0%, rgba(109,74,240,.40) 0%, rgba(109,74,240,0) 60%), linear-gradient(135deg, #1a1040 0%, #2a1a6b 55%, #3f1f9e 100%);
    --hero-sub: #e0dafc;
    --cta-grad: linear-gradient(135deg, #1e2232 0%, #34277f 100%);
    --cta-sub: #d0cbef;
    --footer-bg: #0b0d14;
    --footer-border: #232739;
    --footer-text: #b4b8ce;
    --header-bg: rgba(23,26,38,.88);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 18px 36px -10px rgb(0 0 0 / 0.65), 0 6px 12px -6px rgb(0 0 0 / 0.5);
  }
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.modal-active {
  overflow: hidden;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--surface-subtle);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.container-prose {
  max-width: 800px;
}

/* Skip link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  z-index: 1000;
  border-radius: 0 0 4px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-to-content, .skip-to-content:link, .skip-to-content:visited, .skip-to-content:hover, .skip-to-content:focus { color: #fff; }
.skip-to-content:focus {
  top: 0;
}

/* Header */
.site-header {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none !important;
}

.brand-icon {
  font-size: 1.6rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand-tagline {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Nav */
.site-nav {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.35rem;
}

.nav-link {
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
}

.nav-link:hover, .nav-link.active {
  color: var(--link);
  background: var(--primary-light);
  text-decoration: none;
}

.mobile-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.2s ease;
}

@media (min-width: 1200px) {
  .site-nav {
    display: block;
  }
  .mobile-nav-toggle {
    display: none;
  }
}

@media (max-width: 1199px) {
  .site-nav.nav-open {
    display: block;
    position: absolute;
    top: 4.25rem;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
  }
  .site-nav.nav-open .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
}

/* Hero Section */
.hero-section {
  background: var(--hero-grad);
  color: #ffffff;
  padding: 3.5rem 0 4rem;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hero-title {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 1rem 0;
  font-weight: 800;
}

@media (min-width: 640px) {
  .hero-title {
    font-size: 2.85rem;
  }
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--hero-sub);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.hero-search-form {
  background: var(--surface);
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.75rem;
}

.search-input-wrapper:focus-within {
  border-color: var(--border-focus);
  background: var(--surface);
}

.search-icon {
  font-size: 1.2rem;
  opacity: 0.6;
}

.search-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  padding: 0.4rem 0;
}

.search-quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}

.quick-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tag-pill {
  font-size: 0.8rem;
  background: var(--surface-subtle);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  transition: all 0.15s ease;
}

.tag-pill:hover {
  background: var(--primary-light);
  color: var(--link);
  text-decoration: none;
  border-color: var(--primary);
}

.tag-pill.highlight {
  background: var(--warn-chip-bg);
  border-color: var(--warn-chip-border);
  color: var(--warn-text);
}

/* Metrics Section */
.metrics-section {
  margin-top: -2rem;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 10;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.metric-card.highlight {
  border-color: var(--ok-strong);
  background: linear-gradient(to bottom, var(--surface), var(--ok-bg));
}

.metric-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--link);
  line-height: 1.1;
}

.metric-card.highlight .metric-num {
  color: var(--ok-text);
}

.metric-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 0.25rem;
}

.metric-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* General Sections */
.section {
  padding: 2.5rem 0;
}

.bg-subtle {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .section-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.section-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-desc {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* Grids & Cards */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.device-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.card-title a {
  color: var(--text);
}

.card-title a:hover {
  color: var(--link);
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.25rem;
}

.spec-k {
  color: var(--text-muted);
}

.card-footer-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.parts-count-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-text);
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

/* Category Grid */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.category-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-decoration: none !important;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.category-icon {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}

.category-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.category-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.category-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--link);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.badge-primary { background: var(--badge-primary-bg); color: var(--badge-primary-fg); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-tier { display: inline-flex; align-items: center; gap: .3em; }
.badge-tier .tier-eye { flex: none; width: 1.05em; height: 1.05em; }
.mk-model .badge-tier { font-size: .7em; padding: .05em .45em; margin-left: .35em; white-space: nowrap; }
.badge-mfg { background: var(--badge-mfg-bg); color: var(--badge-mfg-fg); }
.badge-type { background: var(--badge-type-bg); color: var(--badge-type-fg); }
.badge-outline { background: var(--surface-subtle); color: var(--text-soft); border: 1px solid var(--border); }
.badge-sponsored { background: var(--warn-chip-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.badge-accent { background: var(--badge-accent-bg); color: var(--badge-accent-fg); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.925rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover {
  background: var(--surface-subtle);
  border-color: var(--border-strong);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--accent-hover);
}

.btn-sm {
  font-size: 0.825rem;
  padding: 0.35rem 0.75rem;
}

.btn-xs {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
}

.btn-lg {
  font-size: 1.05rem;
  padding: 0.75rem 1.5rem;
}

.btn-text {
  background: transparent;
  border: none;
  color: var(--link);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}
.btn-text:hover {
  text-decoration: underline;
}

/* Breadcrumbs */
.breadcrumb-nav {
  margin-bottom: 1rem;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  gap: 0.4rem;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--text-faint);
}

.breadcrumbs a {
  color: var(--text-muted);
}
.breadcrumbs a:hover {
  color: var(--link);
}

/* Detail Pages */
.detail-header-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}

.detail-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.detail-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.detail-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.detail-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 860px) {
  .detail-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.section-subhead {
  margin-bottom: 1.25rem;
}

.section-subhead h2 {
  font-size: 1.45rem;
  font-weight: 700;
}

.section-subhead p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Part Item Card */
.parts-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.part-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.part-item-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 600px) {
  .part-item-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.part-item-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.35rem 0;
}

.part-number-tag {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.part-number-tag code {
  font-size: 0.95em;
  font-weight: 700;
  color: var(--text);
}

.part-item-desc {
  font-size: 0.95rem;
  color: var(--text-soft);
  margin-bottom: 1rem;
}

.fit-notes-box {
  background: var(--surface-subtle);
  border-left: 3px solid var(--primary);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.meta-pill {
  font-size: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.part-source-citation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.verified-tag {
  color: var(--success);
  font-weight: 600;
  margin-left: auto;
}

/* Specs Table */
.specs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.specs-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.specs-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  width: 45%;
}

.specs-table td {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  word-break: break-word;
}

.specs-table tr.highlight-row td {
  color: var(--success);
}

.source-audit-box {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  font-size: 0.8rem;
}

.source-audit-title {
  font-weight: 700;
  color: var(--ok-text);
  margin-bottom: 0.25rem;
}

.source-audit-desc {
  color: var(--ok-text-strong);
  margin-bottom: 0.4rem;
}

.source-audit-link {
  display: block;
  font-weight: 600;
  color: var(--link);
  word-break: break-all;
}

.audit-date {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Monetization: Affiliate Hook */
.monetization-affiliate-card {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.affiliate-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.btn-affiliate {
  background: #c2410c; /* contrast fix for white text (was #ea580c, 3.55:1) */
  color: #fff;
  font-size: 1rem;
  padding: 0.65rem 1.25rem;
}

.btn-affiliate:hover {
  background: #c2410c;
}

.affiliate-micro-disclosure {
  margin-top: 0.5rem;
  color: var(--warn-text-strong);
  font-size: 0.75rem;
  line-height: 1.4;
}

.disclosure-link {
  color: var(--warn-text-strong);
  text-decoration: underline;
  font-weight: 600;
}

/* Inline Quote Card */
.inline-quote-section {
  padding: 2.5rem 0;
}

.quote-cta-card {
  background: var(--cta-grad);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
  .quote-cta-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem;
  }
}

.quote-cta-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0.5rem 0 0.35rem;
}

.quote-cta-desc {
  color: var(--cta-sub);
  font-size: 0.95rem;
  max-width: 600px;
}

/* Search Directory Page Layout */
.search-header-section {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}

.page-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.page-desc {
  color: var(--text-muted);
  font-size: 1rem;
}

.search-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .search-layout {
    grid-template-columns: 280px 1fr;
  }
}
/* SEO-AGENT-ENTRY E1: server-rendered results sit before the filters in the HTML; on desktop they stay at the top of the results column. */
@media (min-width: 860px) {
  .search-layout:has(> .ssr-top) { grid-template-rows: auto 1fr; }
  .search-layout > .ssr-top { grid-column: 2; grid-row: 1; }
  .search-layout > .ssr-top ~ .search-filters-sidebar { grid-column: 1; grid-row: 1 / span 2; }
  .search-layout > .ssr-top ~ .search-results-col { grid-column: 2; grid-row: 2; }
}

.filters-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 5.5rem;
}

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.filters-header h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.filter-group {
  margin-bottom: 1rem;
}

.filter-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.filter-group input, .filter-group select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
}

.filter-group input:focus, .filter-group select:focus {
  border-color: var(--primary);
}

.results-top-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.active-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.active-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--primary-light);
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

.active-tag-pill button {
  background: transparent;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--link);
  line-height: 1;
}

.results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.result-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.4rem 0 0.25rem;
  line-height: 1.3;
}

.result-part-number {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.pn-code {
  font-weight: 700;
  color: var(--link);
}

.result-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  flex-grow: 1;
}

.compatible-models-preview {
  background: var(--surface-subtle);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
}

.comp-list-inline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.comp-list-inline li::after {
  content: "•";
  margin-left: 0.35rem;
  color: var(--text-faint);
}

.comp-list-inline li:last-child::after {
  content: "";
}

.no-results-card {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 3rem 1.5rem;
  text-align: center;
}

.no-results-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.no-results-card p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* Compare Tool */
.compare-selectors-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
  .compare-selectors-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.selector-col label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.model-compare-select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}

.compare-table-responsive {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 0.875rem;
}

.compare-table th {
  background: var(--surface-subtle);
  font-weight: 700;
}

.feature-col {
  width: 25%;
  background: var(--surface-subtle);
}

.model-col {
  width: 25%;
}

.compare-model-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.25rem 0 0.5rem;
}

.section-row td {
  background: var(--surface-subtle);
  font-weight: 700;
  color: var(--text-soft);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1rem;
}

.part-pill {
  margin-bottom: 0.25rem;
}

.part-pill a {
  font-weight: 600;
}

.compare-footnote {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Modal Dialog */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}

.modal-overlay.modal-visible {
  display: flex;
}

.modal-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 800;
}

.modal-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-body {
  padding: 1.5rem;
}

.lead-prototype-banner {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--info-text);
  margin-bottom: 1.25rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 540px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-group.full-width {
    grid-column: span 2;
  }
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.form-group input, .form-group select, .form-group textarea {
  background: var(--surface);
  color: var(--text);
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.form-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.privacy-reassurance {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Prose & Legal Pages */
.prose-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

.prose-card h2 {
  font-size: 1.45rem;
  margin: 1.5rem 0 0.5rem;
  font-weight: 700;
}

.prose-card h2:first-child {
  margin-top: 0;
}

.prose-card h3 {
  font-size: 1.15rem;
  margin: 1.25rem 0 0.4rem;
  font-weight: 600;
}

.prose-card p, .prose-card ul, .prose-card ol {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.prose-card ul, .prose-card ol {
  padding-left: 1.5rem;
}

.contact-box {
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  margin: 1.25rem 0;
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.contact-k {
  font-weight: 700;
  font-size: 0.85rem;
}

/* Thin content gap notice */
.gap-notice-card {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
}

.gap-icon {
  font-size: 1.75rem;
}

.gap-content h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--warn-text);
  margin-bottom: 0.35rem;
}

.gap-content p {
  font-size: 0.875rem;
  color: var(--warn-text-strong);
  margin-bottom: 0.75rem;
}

/* Alerts */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin: 1rem 0;
}

.alert-info { background: var(--info-bg); border: 1px solid var(--info-border); color: var(--info-text); }
.alert-warning { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }
.alert-success { background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text); }

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 3.5rem 0 2rem;
  margin-top: auto;
  border-top: 1px solid var(--footer-border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.footer-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.audit-badge {
  display: inline-block;
  background: #065f46;
  color: #a7f3d0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.25rem;
}

.footer-heading {
  color: #fff;
  font-size: 0.925rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: var(--footer-text);
  font-size: 0.875rem;
}

.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--footer-border);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.disclaimer-mini {
  color: var(--footer-text);
  line-height: 1.4;
}

/* Accessibility: links inside running text must not rely on color alone */
.prose-card p a, .prose-card li a, .prose-card td a { text-decoration: underline; }

/* ===== Brand, theme toggle, polish (purple restyle) ===== */
.brand-logo { display: block; height: 2.35rem; width: auto; }
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-logo-light { display: none; }
  :root:not([data-theme]) .brand-logo-dark { display: block; }
}
.footer-logo { display: block; height: 2.1rem; width: auto; }
.site-brand { flex-shrink: 0; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
@media (min-width: 1200px) {
  .site-nav { order: 2; margin-left: 1rem; }
  .header-actions { order: 3; margin-left: 0.75rem; }
}

.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--primary-light); color: var(--link); border-color: var(--border-strong); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
}

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
::selection { background: var(--primary); color: #fff; }

.btn-primary { box-shadow: 0 1px 2px rgb(63 31 158 / .25); }
.btn-primary:hover { box-shadow: 0 4px 12px -2px rgb(91 63 230 / .45); }
.btn-outline { background: var(--surface); }
.nav-link.active { font-weight: 600; }

/* Callout boxes (formerly inline styles) */
.alert-compact { margin: 0.5rem 0; padding: 0.5rem 0.75rem; font-size: 0.85rem; border-left: 3px solid var(--primary); }
.alert-info { border-left: 3px solid var(--primary); }
.callout { border-left: 4px solid var(--primary); background: var(--surface); padding: 1.25rem 1.5rem; border-radius: var(--radius-md); }
.callout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.callout-title { margin: 0 0 0.25rem; font-size: 1.1rem; color: var(--text); }
.callout-text { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
.callout-list { margin: 0; padding-left: 1.25rem; color: var(--text-soft); line-height: 1.6; }
.callout-list li { margin-bottom: 0.5rem; }
.callout > .callout-title { margin-top: 0; margin-bottom: 0.75rem; }
.model-note { font-size: 0.85rem; color: var(--text-muted); margin: 0.75rem 0 1rem; line-height: 1.4; }
.alert-info.callout { color: var(--text-soft); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Mobile fix: search box no longer overflows its card on narrow screens */
.search-input-wrapper input { min-width: 0; }
.search-input-wrapper .btn { flex-shrink: 0; white-space: nowrap; }

/* Trust grid (home): previously unstyled */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 0; }
@media (min-width: 760px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-sm); }
.trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--primary-light); font-size: 1.2rem; margin-bottom: 0.6rem; }
.trust-item h4 { font-size: 1rem; margin-bottom: 0.3rem; color: var(--text); }
.trust-item p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.5; }

/* Links inside running text are underlined (not distinguished by colour alone: WCAG 1.4.1) */
main :is(p, li, td, dd, .alert, .compat-source-cite, .contact-v, .source-cite) a:not(.btn):not(.nav-link) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ===== Search landing page ('/') ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.page-landing { background: radial-gradient(70% 55% at 50% 0%, rgba(109,74,240,.16) 0%, rgba(109,74,240,0) 70%), var(--bg); }
.landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1.25rem 1.25rem; position: relative; }
.landing-toggle { position: absolute; top: 1rem; right: 1rem; }
.landing-main { flex: 1; width: 100%; max-width: 42rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 6vh; }
.landing-logo { margin: 0; line-height: 0; }
.landing-logo-img { height: 4.4rem; width: auto; max-width: 100%; }
.landing-logo .brand-logo-dark { display: none; }
:root[data-theme="dark"] .landing-logo .brand-logo-light { display: none; }
:root[data-theme="dark"] .landing-logo .brand-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .landing-logo .brand-logo-light { display: none; }
  :root:not([data-theme]) .landing-logo .brand-logo-dark { display: block; }
}
.landing-tagline { margin: 1.1rem 0 1.75rem; font-size: 1.1rem; color: var(--text-muted); }
.landing-search { width: 100%; }
.landing-box { display: flex; align-items: center; gap: .6rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: .45rem .5rem .45rem 1rem; box-shadow: var(--shadow-md); transition: box-shadow .2s ease, border-color .2s ease; }
.landing-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(109,74,240,.22), var(--shadow-lg); }
.landing-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1.15rem; padding: .7rem .2rem; font-family: inherit; }
.landing-box input::placeholder { color: var(--text-muted); opacity: 1; }
.landing-box input::-webkit-search-cancel-button { display: none; }
.landing-box .btn { border-radius: 999px; padding: .75rem 1.5rem; font-size: 1rem; flex-shrink: 0; }
.landing-browse { margin-top: 2rem; padding: .75rem 1.5rem; font-size: 1rem; border-radius: 999px; }
.landing-foot { font-size: .8rem; color: var(--text-muted); display: block; width: 100%; padding: 0; }
.landing-foot a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.landing-foot a:hover { color: var(--link); }
/* Animated finder identity (from the search preview), CSS only */
.lpf-orb { position: relative; width: 30px; height: 30px; flex: 0 0 30px; }
.lpf-orb i { position: absolute; display: block; }
.lpf-orb .core { inset: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #c4b5fd 35%, #6d4af0 100%); box-shadow: 0 0 10px rgba(139,116,255,.8); animation: lpf-pulse 2.6s ease-in-out infinite; }
.lpf-orb .ring { inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #8b74ff; border-right-color: rgba(139,116,255,.4); animation: lpf-spin 3.2s linear infinite; }
.lpf-orb .ring.r2 { inset: 3px; border-top-color: #b3a4ff; border-left-color: rgba(109,74,240,.4); animation-duration: 2.1s; animation-direction: reverse; }
.landing-box:focus-within .lpf-orb .ring { animation-duration: 1s; }
.landing-box:focus-within .lpf-orb .ring.r2 { animation-duration: .7s; }
@keyframes lpf-spin { to { transform: rotate(360deg); } }
@keyframes lpf-pulse { 0%, 100% { transform: scale(.9); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lpf-orb .core, .lpf-orb .ring { animation: none !important; } }
@media (max-width: 520px) {
  .landing-logo-img { height: 3.2rem; }
  .landing-box { padding-left: .75rem; }
  .landing-box .btn { padding: .7rem 1.1rem; }
  .landing-box input { font-size: .95rem; }
  .landing-tagline { font-size: 1rem; }
}

.nav-link { white-space: nowrap; }
.nav-list { gap: 0.15rem; }
@media (min-width: 1200px) and (max-width: 1320px) { .nav-link { padding: 0.4rem 0.45rem; font-size: 0.88rem; } }

/* AG-023: agent/developer callouts (theme-aware via --link) */
.landing-agent-note, .hero-agent-note { font-size: .88rem; color: var(--text-muted); line-height: 1.4; }
.landing-agent-note { margin: .95rem 0 0; }
.hero-agent-note { margin: .65rem 0 .85rem; text-align: center; }
.landing-agent-note a, .hero-agent-note a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.landing-agent-note a:hover, .hero-agent-note a:hover { color: var(--primary-hover); }

/* Landing corner chips (AI agents + About), bottom-right, theme-aware, clearly visible */
.landing-chips { width: 100%; max-width: 70rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding: .5rem .25rem 0; }
.chip { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 600; line-height: 1.2; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid var(--link); background: var(--surface); color: var(--link); text-decoration: none; box-shadow: var(--shadow-md); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.chip:hover { background: var(--link); color: var(--surface); box-shadow: var(--shadow-lg); }
.chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (max-width: 640px) { .landing-chips { justify-content: center; } .chip { font-size: .88rem; } }
.about-contact { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-subtle); border: 1px dashed var(--border-strong); border-radius: 6px; padding: .1rem .4rem; }

/* ---- Declutter (part + model detail pages): compact cards, chips, short source links, collapsible notes ---- */
.detail-main-col { min-width: 0; }
.detail-main-col, .specs-card { overflow-wrap: anywhere; }
@media (min-width: 860px) {
  .detail-sidebar { position: sticky; top: 5.5rem; align-self: start; }
}

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.75rem; line-height: 1.2; padding: 0.2em 0.65em;
  background: var(--surface-subtle); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 999px;
}
.chip code { font-size: 0.95em; font-weight: 700; color: var(--text); background: none; padding: 0; }

/* Note shown once above a list when every item shares it */
.compat-shared {
  background: var(--primary-light); border: 1px solid var(--border-strong);
  border-left: 4px solid var(--primary); border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--text-soft);
}
.compat-shared p { margin: 0; }
.compat-shared-note strong { color: var(--text); }
.compat-shared-meta { margin-top: 0.6rem !important; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.compat-shared .chip { background: var(--surface); }

/* Compatible-model cards (part pages) */
.compatible-models-grid { display: flex; flex-direction: column; gap: 1rem; }
.model-compat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.model-compat-card:hover { border-color: var(--border-strong); }
.compat-header { display: flex; flex-direction: column; gap: 0.7rem; }
@media (min-width: 600px) {
  .compat-header { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .compat-header > .btn { flex: none; }
}
.compat-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.compat-model-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.3; }
.compat-notes-box, .fit-notes-box { font-size: 0.875rem; color: var(--text-soft); }
.compat-notes-box { background: var(--surface-subtle); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 0.6rem 0.9rem; }
.compat-notes-box p { margin: 0.15rem 0 0; }

/* Short labelled source links */
.source-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }
.source-chips-label { font-weight: 600; margin-right: 0.1rem; }
.source-chip {
  display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.78rem; font-weight: 600; line-height: 1.2;
  padding: 0.25em 0.7em; color: var(--link); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none;
}
.source-chip:hover { background: var(--primary-light); color: var(--link-hover); }
.source-chips-block { margin-bottom: 0.4rem; }
.source-host { font-size: 0.72rem; color: var(--text-muted); }

/* Collapsible long cross-check text */
.source-notes { font-size: 0.8rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 0.5rem; }
.source-notes summary { cursor: pointer; font-weight: 600; color: var(--text-soft); width: fit-content; }
.source-notes summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
.source-notes p { margin: 0.5rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.source-audit-box .source-notes { border-top: 0; padding-top: 0.25rem; }
.source-audit-box .source-notes summary { color: var(--ok-text); }

/* Model pages: part cards use the same pieces */
.part-item-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.25rem; }
.part-item-card .part-item-header { margin-bottom: 0; }
.part-item-title-wrap { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.part-item-card .part-item-title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.part-item-card .part-item-desc { margin: 0; }
.part-item-card .fit-notes-box { margin-bottom: 0; }
.part-item-card .fit-notes-box p { margin: 0.15rem 0 0; }
.verified-line { margin: 0; font-size: 0.75rem; color: var(--success); font-weight: 600; }
a.chip-link { color: var(--link); font-weight: 600; text-decoration: none; border-color: var(--border-strong); background: var(--surface); }
a.chip-link:hover { background: var(--primary-light); color: var(--link-hover); }

/* ==========================================================================
   Redesign layer (preview "redesign", Oct 31 2026). CSS only, appended so the
   base rules above stay intact. Clean repair-tool look: neutral slate surfaces,
   brand purple for actions, teal for OEM source citations. Mobile-first.
   ========================================================================== */
:root {
  --bg: #f6f7fa;
  --surface-subtle: #f1f3f8;
  --text: #161a26;
  --text-soft: #2f3547;
  --text-muted: #525a70;
  --border: #e1e4ec;
  --border-strong: #c7ccda;
  --cite: #0f6b5c;
  --cite-bg: #e9f7f3;
  --cite-border: #9fd8c9;
  --header-bg: #ffffff;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-md: 0 1px 2px rgb(22 26 38 / .05), 0 4px 12px -4px rgb(22 26 38 / .08);
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--border-focus);
}
:root[data-theme="dark"] { --cite: #5eead4; --cite-bg: #0f2a26; --cite-border: #1f5c52; --header-bg: #141724; --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--border-focus); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --cite: #5eead4; --cite-bg: #0f2a26; --cite-border: #1f5c52; --header-bg: #141724; --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--border-focus); }
}

body { line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* Focus: one clear, consistent ring everywhere. */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 6px;
}

/* ---- Header: solid, quiet, consistent ---- */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header .nav-link { border-radius: 8px; font-weight: 500; color: var(--text-soft); }
.site-header .nav-link:hover { background: var(--surface-subtle); color: var(--text); }
.site-header .nav-link.active { background: var(--primary-light); color: var(--accent-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--primary); }

/* ---- Footer: consistent rhythm, readable links ---- */
.site-footer { border-top: 4px solid var(--primary); }
.site-footer .footer-heading { letter-spacing: .08em; font-size: .78rem; }
.site-footer .footer-links a { text-underline-offset: 3px; }
.site-footer .footer-links a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--footer-border); }

/* ---- Home: search is the hero ---- */
.page-landing .landing-main { padding-block: clamp(2rem, 8vh, 5rem); }
.page-landing .landing-tagline { font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.page-landing .landing-search { max-width: 44rem; margin-inline: auto; }
.page-landing .landing-box { border: 2px solid var(--border-strong); border-radius: 16px; padding: .5rem .5rem .5rem 1rem; box-shadow: 0 10px 30px -12px rgb(63 31 158 / .28), 0 2px 6px rgb(22 26 38 / .06); }
.page-landing .landing-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(109,74,240,.22), 0 14px 34px -12px rgb(63 31 158 / .35); }
.page-landing .landing-box input { font-size: clamp(1.05rem, 2.4vw, 1.3rem); padding: .85rem .25rem; }
.page-landing .landing-box .btn { border-radius: 12px; padding: .9rem 1.6rem; font-weight: 700; }
.page-landing .landing-chips .chip { border-radius: 999px; }
@media (max-width: 520px) {
  .page-landing .landing-box { border-radius: 14px; padding-left: .7rem; }
  .page-landing .landing-box .btn { padding: .8rem 1.05rem; }
}

/* ---- Detail pages (model + part): clear hierarchy ---- */
.detail-header-section { background: var(--surface); border-bottom: 1px solid var(--border); }
.detail-title { font-size: clamp(1.6rem, 4.5vw, 2.35rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; color: var(--text); }
.detail-subtitle { font-size: 1.02rem; color: var(--text-muted); max-width: 70ch; }
.detail-badge-row { gap: .4rem; }
.breadcrumbs { font-size: .85rem; }
.section-subhead h2, .detail-main-col > h2 { font-size: clamp(1.2rem, 3vw, 1.45rem); letter-spacing: -.01em; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.detail-layout { gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 960px) { .detail-sidebar { position: sticky; top: 5rem; align-self: start; } }

/* Fit list cards read like table rows: name, meta, then notes and citations. */
.model-compat-card, .part-item-card {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem;
}
.model-compat-card:hover, .part-item-card:hover { border-color: var(--border-strong); border-left-color: var(--primary); box-shadow: var(--shadow-md); }
.compat-model-title, .part-item-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; }
.compat-notes-box, .fit-notes-box { background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 8px; padding: .65rem .8rem; line-height: 1.55; }
.compatible-models-grid, .parts-list { gap: .85rem; }

/* Source citations: prominent, consistent teal "OEM source" pills. */
.source-chips { gap: .45rem; padding-top: .35rem; }
.source-chips-label { font-weight: 700; color: var(--cite); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.source-chip {
  background: var(--cite-bg); border: 1px solid var(--cite-border); color: var(--cite);
  font-weight: 600; border-radius: 999px; padding: .25rem .7rem; text-decoration: none;
}
.source-chip::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .4em; border-radius: 50%; background: currentColor; vertical-align: .08em; }
.source-chip:hover { text-decoration: underline; text-underline-offset: 2px; }
.source-audit-box { background: var(--cite-bg); border: 1px solid var(--cite-border); border-left: 4px solid var(--cite); border-radius: var(--radius-md); }
.source-audit-title { color: var(--cite); font-weight: 700; }
.source-notes summary { cursor: pointer; color: var(--text-muted); font-weight: 600; }
.verified-line { color: var(--cite); font-weight: 600; }

/* Specs table: readable rows. */
.specs-card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.specs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specs-table th, .specs-table td { padding: .55rem .4rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.specs-table tr:nth-child(even) th, .specs-table tr:nth-child(even) td { background: var(--surface-subtle); }
.specs-table th { color: var(--text-muted); font-weight: 600; text-align: left; }
.specs-table td { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }

/* Fit-check + where-to-buy sit on the same grid as the rest of the page. */
.section.fit-note .container-prose, .section.where-to-buy .container-prose { max-width: var(--max-w); }
.section.fit-note { padding-block: .5rem; }
.fit-check-note { background: var(--warn-bg); border: 1px solid var(--warn-border); border-left: 4px solid var(--warn-chip-border); border-radius: var(--radius-md); padding: .8rem 1rem; color: var(--text-soft); }
.where-to-buy .prose-card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.monetization-affiliate-card { border-radius: var(--radius-md); }
.part-guides { margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.part-guides ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---- Search page ---- */
.search-header-section { background: var(--surface); border-bottom: 1px solid var(--border); }
.search-header-section .page-title { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; font-weight: 800; }
.filters-card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.filters-card select, .filters-card input { border-radius: 8px; min-height: 44px; }
.ssr-results-card, .ssr-no-match { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.ssr-results-card h2 { font-size: 1.3rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
.ssr-results-card h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 1rem 0 .35rem; }
.ssr-results-card ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ssr-results-card li { padding: .6rem .85rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ssr-results-card li:first-child { border-top: 0; }
.ssr-results-card li:hover { background: var(--surface-subtle); }
.ssr-results-card li a { font-weight: 600; }

/* Touch targets on small screens. */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .source-chip { padding: .35rem .75rem; }
  .model-compat-card, .part-item-card { padding: .9rem .95rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }


/* ---- v3 synthwave layer (shared by index + directory) ---- */
@view-transition{navigation:auto}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--sw-glow1:rgba(255,79,216,.34);--sw-glow2:rgba(109,74,240,.34);--sw-line:rgba(169,155,255,.85);--sw-line2:rgba(214,139,255,.8);--sw-hz:.9;--glass:rgba(23,26,38,.62)}
[data-theme="light"]{--sw-glow1:rgba(255,79,216,.15);--sw-glow2:rgba(109,74,240,.16);--sw-line:rgba(74,40,210,.62);--sw-line2:rgba(120,50,200,.58);--sw-hz:.45;--glass:rgba(255,255,255,.66)}
html,body{overflow-x:hidden}
body{background:var(--bg)!important}
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;view-transition-name:sw-bg}
.fx~*{position:relative;z-index:1}
.sun{position:absolute;left:50%;bottom:26%;width:1000px;height:560px;margin-left:-500px;border-radius:50%;filter:blur(80px);background:radial-gradient(closest-side,var(--sw-glow1),var(--sw-glow2) 55%,transparent);will-change:transform,opacity;animation:sw-breathe 14s ease-in-out infinite alternate}
.o1{position:absolute;width:560px;height:420px;left:6%;top:4%;border-radius:50%;filter:blur(90px);background:radial-gradient(circle,var(--sw-glow2),transparent 65%);will-change:transform;animation:sw-d1 22s ease-in-out infinite alternate}
@keyframes sw-breathe{from{opacity:.75}to{transform:translate3d(0,-18px,0) scale(1.06);opacity:1}}
@keyframes sw-d1{to{transform:translate3d(180px,60px,0) scale(1.15)}}
.horizon{position:absolute;left:0;right:0;bottom:30%;height:2px;opacity:var(--sw-hz);background:linear-gradient(90deg,transparent,#ff4fd8 20%,#a99bff 50%,#38e8ff 80%,transparent);box-shadow:0 0 22px 2px rgba(169,155,255,.55)}
.floor{position:absolute;left:0;right:0;bottom:0;height:30%;perspective:260px;perspective-origin:50% 0;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),#000 20%,#000 88%,transparent);mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),#000 20%,#000 88%,transparent)}
.plane{position:absolute;left:-150%;right:-150%;top:0;height:300%;transform-origin:50% 0;transform:rotateX(70deg);background-image:linear-gradient(var(--sw-line) 3px,transparent 3px),linear-gradient(90deg,var(--sw-line2) 3px,transparent 3px);background-size:60px 60px;background-position:50% 0;animation:sw-run 1.6s linear infinite}
@keyframes sw-run{to{background-position:50% 60px}}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
[data-theme="light"] .scan{display:none}
.sw-beam{position:relative}
.sw-beam::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;background:conic-gradient(from var(--ang),transparent 0deg,#ff4fd8 40deg,#a99bff 70deg,#38e8ff 100deg,transparent 140deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:sw-spin 6s linear infinite;opacity:.9}
@keyframes sw-spin{to{--ang:360deg}}
.vt-logo{view-transition-name:lpf-logo}.vt-search{view-transition-name:lpf-search}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-group(sw-bg){animation:none}
::view-transition-old(sw-bg){display:none}::view-transition-new(sw-bg){animation:none}
::view-transition-old(root){animation:sw-out .3s ease both}::view-transition-new(root){animation:sw-in .45s .1s ease both}
@keyframes sw-out{to{opacity:0;transform:translateY(-8px)}}@keyframes sw-in{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.fx *,.sw-beam::before,.sw-rise>*{animation:none!important}.sw-rise>*{opacity:1!important;transform:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* frosted footer bubbles */
:root{--bub:rgba(15,17,26,.55);--bub-b:rgba(169,155,255,.35)}
[data-theme="light"]{--bub:rgba(255,255,255,.7);--bub-b:rgba(91,63,230,.3)}
.landing-chips .chip,.page-browse .site-footer a{display:inline-flex;align-items:center;background:var(--bub)!important;border:1px solid var(--bub-b)!important;border-radius:999px!important;padding:.3rem .75rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text-soft)!important;text-decoration:none!important}
.landing-chips .chip:hover,.page-browse .site-footer a:hover{border-color:#a99bff!important;color:var(--text)!important}
.landing-foot>span{display:none}
.page-browse .site-footer li{margin-bottom:.35rem}

/* contrast menu */
.hc-wrap{position:relative;display:inline-flex}
.landing>.hc-wrap{position:absolute;top:1rem;right:4.1rem;z-index:5}
.hc-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:10.5rem;padding:4px;margin:0;list-style:none;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);z-index:50}
.hc-menu[hidden]{display:none}
.hc-menu button{display:flex;width:100%;justify-content:space-between;gap:.5rem;background:none;border:0;color:var(--text);font:inherit;font-size:.88rem;padding:.5rem .7rem;border-radius:8px;cursor:pointer;text-align:left}
.hc-menu button:hover,.hc-menu button:focus-visible{background:var(--primary-light);outline:none}
.hc-menu button[aria-checked="true"]::after{content:"✓";color:var(--link)}
/* high contrast */
html[data-contrast="more"][data-theme]{--bg:#000;--surface:#000;--surface-subtle:#000;--text:#fff;--text-soft:#fff;--text-muted:#fff;--text-faint:#fff;--border:#fff;--border-strong:#fff;--primary:#b69cff;--primary-hover:#cbb8ff;--link:#c9b8ff;--accent-text:#d9ccff;--glass:#000;--bub:#000;--bub-b:#fff;--footer-bg:#000}
html[data-contrast="more"][data-theme="light"]{--bg:#fff;--surface:#fff;--surface-subtle:#fff;--text:#000;--text-soft:#000;--text-muted:#000;--text-faint:#000;--border:#000;--border-strong:#000;--primary:#4a1fd1;--primary-hover:#3a12b0;--link:#3a12b0;--accent-text:#3a12b0;--glass:#fff;--bub:#fff;--bub-b:#000;--footer-bg:#fff}
[data-contrast="more"] .fx{display:none}
[data-contrast="more"] .sw-beam::before{display:none}
[data-contrast="more"] *{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important}
[data-contrast="more"] .sw-rise>*,[data-contrast="more"] .hero-content>*{opacity:1!important;transform:none!important}
[data-contrast="more"] .metric-card,[data-contrast="more"] .device-card,[data-contrast="more"] .callout,[data-contrast="more"] .landing-box,[data-contrast="more"] .search-input-wrapper,[data-contrast="more"] .chip,[data-contrast="more"] .tag-pill,[data-contrast="more"] .btn-outline,[data-contrast="more"] .site-footer a,[data-contrast="more"] .theme-toggle{border:2px solid var(--text)!important;background:var(--surface)!important;color:var(--text)!important}
[data-contrast="more"] .btn-primary,[data-contrast="more"] .landing-box .btn{background:var(--primary)!important;color:var(--bg)!important;border:2px solid var(--text)!important}
html[data-contrast="more"] .page-browse .metric-num{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--text)!important;-webkit-text-fill-color:currentColor!important}
[data-contrast="more"] body,[data-contrast="more"] .page-browse .metric-card.highlight,[data-contrast="more"] .page-browse .metric-card,[data-contrast="more"] .badge,[data-contrast="more"] .site-header,[data-contrast="more"] .site-footer,[data-contrast="more"] .hero-section{background:var(--bg)!important;color:var(--text)!important;border-color:var(--text)!important}
[data-contrast="more"] .site-footer *{color:var(--text)!important}
[data-contrast="more"] a:focus-visible,[data-contrast="more"] button:focus-visible{outline:3px solid var(--primary)!important;outline-offset:2px}


.page-landing .landing-box{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.landing-chips .chip,.landing-browse{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sw-rise>*{opacity:0;transform:translateY(12px);animation:sw-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.sw-rise>:nth-child(2){animation-delay:.1s}.sw-rise>:nth-child(3){animation-delay:.2s}.sw-rise>:nth-child(4){animation-delay:.3s}
@keyframes sw-rise{to{opacity:1;transform:none}}
@media(max-width:480px){.page-landing .landing-box{padding:.4rem .4rem .4rem .6rem;gap:.4rem}.landing-box .lpf-orb{width:24px;height:24px;flex-basis:24px}.page-landing .landing-box .btn{padding:.65rem .9rem}.page-landing .landing-box input{font-size:.95rem;text-overflow:ellipsis;padding-inline:0}.sun{width:600px;margin-left:-300px;height:380px}}

.page-browse .site-header{background:color-mix(in srgb,var(--bg) 60%,transparent)!important;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid color-mix(in srgb,var(--border-strong) 60%,transparent)!important;position:sticky;top:0;z-index:30}
.page-browse .brand-logo{height:2.35rem}
.page-browse .header-actions{gap:.4rem}@media(min-width:900px){.page-browse .nav-link{padding-inline:.4rem!important;font-size:.84rem!important}.page-browse .nav-list{gap:.1rem!important}}.page-browse .header-container{max-width:100%;padding-inline:1.25rem}
.page-browse .hero-section{background:transparent!important;padding:5rem 0 4rem;min-height:62vh;display:flex;align-items:center}
.page-browse .hero-section::before,.page-browse .hero-section::after{display:none!important}
.page-browse .hero-title{color:var(--text)!important;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.page-browse .hero-subtitle{color:var(--text-muted)!important;max-width:46rem;margin-inline:auto}
.page-browse .hero-content{text-align:center;margin:0 auto}
.page-browse .hero-content .badge{background:color-mix(in srgb,var(--primary) 18%,transparent)!important;color:var(--accent-text)!important;border:1px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.page-browse .search-input-wrapper{border-radius:16px!important;background:var(--glass)!important;border:1px solid var(--border-strong)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 50px -18px rgba(109,74,240,.55)!important;max-width:46rem;margin-inline:auto}
.page-browse .search-input-wrapper input{background:transparent!important;color:var(--text)!important}
.page-browse .search-quick-tags{justify-content:center}
.page-browse .quick-label{color:var(--text-muted)!important}
.page-browse .tag-pill{background:var(--glass)!important;color:var(--text-soft)!important;border:1px solid var(--border)!important;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,box-shadow .25s,color .25s}
.page-browse .tag-pill:hover,.page-browse .tag-pill.highlight{border-color:#a99bff!important;color:var(--text)!important}
.page-browse .tag-pill:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(169,155,255,.4),0 10px 26px -8px rgba(255,79,216,.55)}
.page-browse .metrics-section{background:transparent!important;margin-top:-1rem}
.page-browse .metric-card,.page-browse .device-card,.page-browse .callout,.page-browse .category-section .category-card,.page-browse .trust-section .trust-card{background:var(--glass)!important;border:1px solid color-mix(in srgb,var(--primary) 30%,var(--border))!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px!important;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.page-browse .metric-card:hover,.page-browse .device-card:hover{transform:translateY(-4px);border-color:#a99bff!important;box-shadow:0 0 0 1px rgba(169,155,255,.25),0 20px 44px -18px rgba(109,74,240,.7)}
.page-browse .metric-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:linear-gradient(90deg,#c3b9ff,#a99bff 50%,#e08bff);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.page-browse .metric-card.highlight{background:linear-gradient(135deg,rgba(109,74,240,.35),rgba(255,79,216,.12)),var(--glass)!important}
.page-browse .bg-subtle{background:transparent!important}
.page-browse .code-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent-text)!important;background:color-mix(in srgb,var(--primary) 16%,transparent)!important;border:1px solid color-mix(in srgb,var(--primary) 40%,transparent)}
.page-browse .site-footer{background:color-mix(in srgb,var(--footer-bg) 88%,transparent)!important;backdrop-filter:blur(10px)}
.page-browse .site-footer{--bub:rgba(15,17,26,.55);--bub-b:rgba(169,155,255,.35);--text-soft:#c8cbdd;--text:#eceaf8}
[data-theme="light"] .page-browse .metric-card.highlight .metric-num{background:linear-gradient(90deg,#5b3fe6,#a040dc);-webkit-background-clip:text;background-clip:text}
.page-browse .sw-beam{border-radius:16px}
.page-browse .hero-content>*{animation:sw-in .7s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:640px){.page-browse .hero-section{padding:3rem 0 2.5rem;min-height:0}.page-browse .search-input-wrapper .btn{padding-inline:.9rem}.page-browse .search-input-wrapper input{font-size:.85rem;min-width:0;text-overflow:ellipsis}.page-browse .search-input-wrapper .search-icon{display:none}}

/* SEO-links: compact "Fits these models" table on part pages */
.fits-models-compact { margin: 0 0 1rem; }
.fits-models-title { font-size: 1rem; margin: 0 0 .4rem; }
.fits-models-table { font-size: .88rem; }
.fits-models-table th, .fits-models-table td { padding: .35rem .4rem; }

/* ===== v4 redesign (LPF UX Design v4; model, part and guide pages only: body.v4) ===== */
html:has(body.v4),body.v4{overflow-x:clip}
.v4{--v4-glass:rgba(23,26,38,.78);--v4-ok:#22c55e;--v4-okbg:rgba(34,197,94,.12);--v4-warn:#fbbf24;--v4-warnbg:rgba(251,191,36,.12)}
[data-theme="light"] .v4{--v4-glass:rgba(255,255,255,.86);--v4-ok:#166534;--v4-okbg:#dcfce7;--v4-warn:#92400e;--v4-warnbg:#fef3c7}
.v4 .fx{opacity:.38}[data-theme="light"] .v4 .fx{opacity:.3}
.v4 .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border)}
.v4 .header-container{height:auto;min-height:64px;gap:10px}
.v4 .nav-link{display:inline-flex;align-items:center;min-height:44px}
.v4 .theme-toggle,.v4 .mobile-nav-toggle{min-width:44px;min-height:44px}
@media (min-width:1200px) and (max-width:1320px){.v4 .nav-link{padding:0 .4rem;font-size:.85rem}.v4 .nav-list{gap:0}.v4 .site-brand img{height:30px;width:auto}}
.v4 .breadcrumbs a{display:inline-flex;align-items:center;min-height:44px}
.v4-card{background:var(--v4-glass);border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border));border-radius:16px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.v4-pill{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-soft);background:var(--surface-subtle,var(--surface))}
.v4-fit-oem{color:var(--v4-ok);background:var(--v4-okbg);border-color:color-mix(in srgb,var(--v4-ok) 45%,transparent)}
.v4-fit-oem::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.v4-fit-ret,.v4-spon{color:var(--v4-warn);background:var(--v4-warnbg);border-color:color-mix(in srgb,var(--v4-warn) 45%,transparent)}
.v4-fit-yel{color:var(--v4-warn);background:var(--v4-warnbg);border-color:color-mix(in srgb,var(--v4-warn) 45%,transparent)}
.v4-fit-red{color:#ef4444;background:rgba(239,68,68,.12);border-color:color-mix(in srgb,#ef4444 45%,transparent)}
[data-theme="light"] .v4-fit-red{color:#991b1b;background:#fee2e2}
.v4-spon{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
.v4-pn{font-family:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.02em;color:var(--accent-text)}
.v4-copy{min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--border-strong);background:transparent;color:var(--text-soft);cursor:pointer;font:inherit;font-size:.8rem;display:inline-grid;place-items:center;padding:0 10px}
.v4-copy:hover{border-color:var(--link);color:var(--text)}.v4-copy.done{color:var(--v4-ok);border-color:var(--v4-ok)}
html:not(.js) .v4-copy,html:not(.js) .v4-tabs{display:none}
.v4-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent}
.v4-btn-p{background:var(--primary);color:#fff}.v4-btn-p:hover{background:var(--primary-hover,var(--primary));color:#fff}
.v4-btn-o{background:var(--v4-glass);color:var(--text);border-color:var(--border-strong)}.v4-btn-o:hover{border-color:var(--link);color:var(--text)}
.v4-note{font-size:.86rem;color:var(--text-muted);margin:0}.v4-warn{color:var(--v4-warn)}
.v4-disc{font-size:.84rem;color:var(--text-muted);margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* model page */
.v4-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:4px 2px 10px;margin:8px 0 6px}
.v4-tab{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border-strong);background:var(--v4-glass);color:var(--text-soft);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}
.v4-tab span{opacity:.7;font-weight:500;margin-left:6px}.v4-tab[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-width:760px){.v4-tabs{position:sticky;top:64px;z-index:5;background:linear-gradient(var(--bg) 70%,transparent);flex-wrap:nowrap;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
.v4 .v4-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.v4 .v4-pcard{padding:16px;display:flex;flex-direction:column;gap:10px;margin:0;transition:transform .25s,border-color .25s}
.v4 .v4-pcard:hover{transform:translateY(-3px);border-color:var(--link)}
.v4-pcard[hidden],.v4 .panel-options-notice[hidden]{display:none}
.v4 .panel-options-notice{grid-column:1/-1}
.v4-pc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.v4-pc-pn{display:flex;align-items:center;gap:8px}.v4-pc-pn .v4-pn{font-size:1.3rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.v4-pc-name{margin:0;font-size:.95rem;font-weight:600}.v4-pc-name a{color:var(--text);text-decoration:none}.v4-pc-name a:hover{color:var(--link)}
.v4-pc-desc{margin:0;font-size:.88rem;color:var(--text-soft)}
.v4-pc-buy{display:flex;gap:8px;flex-wrap:wrap}.v4-pc-buy .v4-btn{flex:1;min-width:110px}
.v4-src summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:.85rem;color:var(--text-muted)}
/* part page */
.v4 .v4-phero{display:grid;grid-template-columns:1.25fr .95fr;gap:24px;align-items:start}
.v4-pnbig{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:.5rem 0 .2rem}.v4-pnbig .v4-pn{font-size:clamp(2rem,5vw,3rem);line-height:1.1}
.v4 .v4-ptitle{font-size:1.35rem;font-weight:600;color:var(--text-soft)}
.v4-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0}
.v4-spec{padding:12px 14px}.v4-spec b{display:block;font-size:1rem;overflow-wrap:anywhere}.v4-spec small{color:var(--text-muted)}
.v4-buybox{padding:20px;display:flex;flex-direction:column;gap:10px}
.v4-buy-h{display:flex;justify-content:space-between;align-items:center}
.v4-buybox .monetization-affiliate-card,.v4-buybox .where-to-buy{margin:0;padding:0;background:none;border:0;box-shadow:none}
.v4-buybox .where-to-buy .container,.v4-buybox .where-to-buy .prose-card{padding:0;margin:0;max-width:none;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.v4-buybox .where-to-buy h2{display:none}
.v4-buybox .affiliate-action-row .badge-sponsored{display:none}
.v4-buybox .btn{display:flex;width:100%;min-height:44px;justify-content:space-between;align-items:center}
.v4-buybox .wtb-buttons{flex-direction:column}
.v4 .fits-models-table td,.v4 .v4-stack td{vertical-align:top}
.v4 .fits-models-table a,.v4 .v4-stack a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:900px){.v4 .v4-phero{grid-template-columns:1fr}}
@media(max-width:640px){.v4-specs{grid-template-columns:repeat(2,1fr)}
.v4 .fits-models-table thead,.v4 .v4-stack thead{display:none}
.v4 .fits-models-table,.v4 .fits-models-table tbody,.v4 .fits-models-table tr,.v4 .fits-models-table td,.v4 .v4-stack,.v4 .v4-stack tbody,.v4 .v4-stack tr,.v4 .v4-stack td{display:block;width:100%}
.v4 .fits-models-table tr,.v4 .v4-stack tr{padding:10px 4px;border-bottom:1px solid var(--border)}
.v4 .fits-models-table td,.v4 .v4-stack td{border:0;padding:2px 0;display:flex;gap:10px}
.v4 .fits-models-table td::before,.v4 .v4-stack td::before{content:attr(data-l);flex:0 0 7rem;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding-top:3px}
.v4 .fits-models-table a,.v4 .v4-stack a{min-height:0}}
/* guide page */
.v4-glay{display:grid;grid-template-columns:240px minmax(0,72ch);gap:40px;justify-content:center;align-items:start}
.v4-toc{position:sticky;top:88px;padding:16px;max-height:calc(100vh - 110px);overflow:auto}
.v4-toc h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 6px}
.v4-toc ol{list-style:none;margin:0;padding:0}.v4-toc a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;color:var(--text-soft);text-decoration:none;font-size:.9rem;border-left:2px solid transparent}
.v4-toc a:hover,.v4-toc a.on{color:var(--text);background:color-mix(in srgb,var(--primary) 14%,transparent);border-left-color:var(--link)}
.v4 .v4-art{max-width:72ch;font-size:1.05rem;line-height:1.75}.v4 .v4-art h2{scroll-margin-top:90px}
.v4-callout{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin:0 0 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.v4-callout .v4-pn{font-size:1.25rem;display:inline-flex;min-height:44px;align-items:center;text-decoration:none}.v4-callout .v4-grow{flex:1;min-width:180px}.v4-callout small{display:block;color:var(--text-muted);font-size:.85rem;line-height:1.4}
.v4-toc-m{display:none}
@media(max-width:900px){.v4-glay{grid-template-columns:1fr}.v4-toc{display:none}.v4-toc-m{display:block;margin:0 0 16px}.v4-toc-m summary{min-height:44px;display:flex;align-items:center;padding:0 16px;cursor:pointer;font-weight:600}.v4-toc-m ol{margin:0;padding:0 16px 10px 34px}.v4-toc-m a{display:flex;align-items:center;min-height:44px}}
@media(max-width:640px){.v4 .v4-art{font-size:1rem}}
/* v4 high contrast + motion */
[data-contrast="more"] .v4-card,[data-contrast="more"] .v4-btn-o,[data-contrast="more"] .v4-pill,[data-contrast="more"] .v4-tab,[data-contrast="more"] .v4-copy,[data-contrast="more"] .v4-callout{border:2px solid var(--text)!important;background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
[data-contrast="more"] .v4-btn-p,[data-contrast="more"] .v4-tab[aria-pressed="true"]{background:var(--primary)!important;color:var(--bg)!important;border:2px solid var(--text)}
[data-contrast="more"] .v4 .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.v4 .v4-pcard{transition:none}.v4 .v4-pcard:hover{transform:none}}
.v4 .v4-toc a,.v4 .v4-toc-m a{text-decoration:none}
.v4 .breadcrumbs{align-items:center}.v4 .breadcrumbs li{display:inline-flex;align-items:center}
.v4 .v4-card .source-chip{min-height:44px;display:inline-flex;align-items:center}
.v4 .v4-pcard a.v4-pn{min-height:44px;display:inline-flex;align-items:center}
.v4 .v4-pc-name a{display:block;padding:13px 0;margin:-13px 0}
.v4 .v4-pc-top .v4-pill.badge-type{color:var(--text-soft);background:var(--surface-subtle,var(--surface))}
/* SEO round 3: "Also known as" line under the part H1 */
.v4-aka{margin:.15rem 0 .4rem;color:var(--text-muted);font-size:.95rem}.v4-aka .v4-pn{font-size:1rem}.v4-aka small{font-size:.8rem}
/* SEO round 3: Popular parts block */
.v4-popular{margin:1.5rem 0}.v4-popular .v4-pop-h{font-size:1.1rem;margin:0 0 .6rem}
.v4-pop-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.v4-pop-card a{display:flex;flex-direction:column;gap:4px;padding:12px 14px;min-height:44px;text-decoration:none;color:var(--text)}
.v4-pop-card a:hover .v4-pn{text-decoration:underline}.v4-pop-card .v4-pn{font-size:1.05rem}
.v4-pop-name{font-size:.85rem;color:var(--text-soft)}.v4-pop-card .v4-pill{align-self:flex-start}
.landing .v4-popular{width:100%;max-width:960px;margin:1rem auto}

/* ===== UX post-launch fixes (Nov 1 2026) ===== */
/* #1 search: filters collapse into a <details> at <=700px, results first */
.filters-more{display:block}.filters-more-sum{display:none}
@media(max-width:700px){
  .filters-card{position:static;padding:1rem}
  .filters-more-sum{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;border-top:1px solid var(--border);margin-top:.5rem;padding-top:.25rem}
  .filters-more[open] .filters-more-sum{margin-bottom:.5rem}
}
/* #2 part buy box: eBay + Amazon side by side, one short paid-links line, long text in <details> */
.v4-buy-btns{display:grid;grid-template-columns:1fr;gap:8px}
.v4-buybox .v4-buy-btns .btn{width:100%;min-height:44px;justify-content:center;text-align:center;white-space:normal;line-height:1.25;gap:6px}
@media(max-width:760px){.v4-buy-btns{grid-template-columns:repeat(2,minmax(0,1fr))}.v4-buy-btns .btn:only-child{grid-column:1/-1}.v4-buybox .v4-buy-btns .btn{font-size:.88rem;padding:.55rem .6rem}.v4-buybox .v4-buy-btns .external-arrow{display:none}}
.v4-paid{margin:2px 0 0;font-size:.84rem;color:var(--text-muted)}
.v4-paid-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:-12px -8px;color:var(--link);text-decoration:underline}
.v4-paid-more{font-size:.82rem;color:var(--text-muted)}
.v4-paid-more summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.v4-paid-more p{margin:.35rem 0}
/* #4 model pages on mobile */
@media(max-width:700px){
  .detail-subtitle{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mob-hide-back{display:none!important}
  .compat-shared.compat-unverified{display:none}
}
/* #5 model tabs: right fade + scroll-snap, no page-level overflow */
@media(max-width:760px){
  .v4-tabs{max-width:100%;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);padding-right:24px}
  .v4-tabs::-webkit-scrollbar{display:none}
  .v4-tab{scroll-snap-align:start}
  .v4 .detail-main-col{min-width:0}
}
/* #6 tap targets >= 44px */
.theme-toggle,.hc-btn{min-width:44px;min-height:44px}
.site-header .open-quote-modal{min-height:44px;display:inline-flex;align-items:center}
.landing-chips .chip,.page-browse .site-footer a{min-height:44px}
.site-footer .footer-links a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:0 -6px}
.disclosure-link{display:inline-flex;align-items:center;min-height:44px}
/* #7 dark-theme LCP: home logo is not faded in from opacity 0 */
.sw-rise>.landing-logo{opacity:1!important;transform:none!important;animation:none!important}
/* #9 home type-ahead */
.landing-box input:focus-visible{outline:none}
.landing-search{position:relative}
.landing-suggest{list-style:none;margin:.4rem 0 0;padding:.25rem;position:absolute;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow-md);text-align:left}
.landing-suggest a{display:flex;justify-content:space-between;gap:.75rem;align-items:center;min-height:44px;padding:0 .75rem;border-radius:8px;color:var(--text);text-decoration:none}
.landing-suggest small{color:var(--text-muted);flex:none}
.landing-suggest [aria-selected="true"] a,.landing-suggest a:hover{background:var(--primary-light)}
/* #10 "Documented Sources" label readable in high contrast */
[data-contrast="more"] .audit-badge{color:inherit!important;background:transparent!important;border:1px solid currentColor;font-size:13px}
@media(max-width:760px){.v4-buy-btns .btn:nth-child(odd):last-child{grid-column:1/-1}}

/* ===== uxfix2 (Nov 1 2026, UX re-check postlaunch2) ===== */
/* P1 live regression: type-ahead list sat under a.landing-browse */
.landing-search{position:relative;z-index:30}
.landing-suggest{z-index:40}
.ls-empty{padding:.7rem .75rem;color:var(--text-muted);min-height:44px;display:flex;align-items:center}
/* single focus ring: the box's :focus-within ring only */
.landing-box input:focus,.landing-box input:focus-visible{outline:none!important}
/* model hero on mobile: clamp really applies (flow-root override) */
@media(max-width:700px){.detail-subtitle{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.compat-shared.compat-unverified{display:none!important}}
/* tap targets */
.mobile-nav-toggle{min-width:44px;min-height:44px}
.detail-action-bar .btn,.model-hero .btn{min-height:44px;display:inline-flex;align-items:center}
.v4 main :is(td,li)>a:not(.btn),.v4-aka a,.v4-paid-more a,.site-footer p a,.where-to-buy small a,.v4 main small>a{display:inline-block;padding-block:12px;margin-block:-12px}
/* breadcrumbs */
.breadcrumbs,.breadcrumbs ol,.breadcrumbs ul{align-items:center}
.breadcrumbs li{display:inline-flex;align-items:center}

/* features4 (LPF UX Design spec): layout only, no new colours */
/* Layout only. No new colours: inherits .v4-card surface/border and .landing-suggest row styles. */
.lpf-pal{width:min(640px,calc(100vw - 24px));max-height:min(70vh,560px);margin:12vh auto auto;padding:12px;color:var(--text);overflow:auto}
.lpf-pal::backdrop{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.lpf-pal input[type=search]{width:100%;min-height:48px;font:inherit;font-size:1rem;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:0 14px}
.lpf-pal input[type=search]:focus-visible{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.lpf-pal .landing-suggest{position:static;margin-top:8px;box-shadow:none}
.lpf-pal [role=option] a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;color:inherit;text-decoration:none}
.lpf-pal [role=option][aria-selected=true]{outline:2px solid var(--border-focus);outline-offset:-2px;border-radius:var(--radius-sm)}
.lpf-pal .ls-sub{color:var(--text-muted);font-size:.85em}
.lpf-pal-open,.lpf-ac-btn{min-width:44px;min-height:44px}
.lpf-ac{position:relative;margin-top:12px}.lpf-ac .hc-menu{left:0;right:auto;min-width:260px}
.lpf-ac .hc-menu button{min-height:44px;width:100%;text-align:left}
@media (prefers-reduced-motion:reduce){.lpf-pal,.lpf-pal::backdrop{animation:none!important;transition:none!important}}

/* Layout only: bars use currentColor, so they inherit the existing .v4-fit-oem / .v4-fit-ret / .v4-pill text colour. */
.lpf-fm-bars{display:inline-flex;gap:2px}
.lpf-fm-bars i{display:block;width:10px;height:6px;border-radius:2px;border:1px solid currentColor;opacity:.9}
.lpf-fm-bars i.on{background:currentColor}
.lpf-prov{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:6px 0 10px;font-size:.85rem;color:var(--text-muted)}
.lpf-prov dt{font-weight:600;color:var(--text-soft)}.lpf-prov dd{margin:0;overflow-wrap:anywhere}

/* features4: the v4 desktop header has no spare width (prod already clips .header-actions at ~1300-1540px), so the magnifier trigger is hidden from 1200px; "/" and Ctrl/Cmd-K still open the palette there. */
@media (min-width:1200px){.header-actions .lpf-pal-open{display:none}}
/* features4 fix (Tr3, Nov 1): meter in the part-page Confidence column and on model part cards = plain text beside the bars (no pill bubble). Colour still inherited from .v4-fit-oem/.v4-fit-ret/.v4-pill. */
.fits-models-table .lpf-fm,.v4-pc-top .lpf-fm{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-left:0;padding-right:0}
.lpf-fm{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fits-models-table th:last-child,.fits-models-table td[data-l=Confidence]{min-width:11rem;white-space:nowrap}
@media (max-width:700px){.fits-models-table td[data-l=Confidence]{min-width:0}}
.fits-models-table .lpf-fm::before,.v4-pc-top .lpf-fm::before{content:none!important;display:none!important}
.fits-models-table td[data-l="Last checked"]{white-space:nowrap}
/* polish (Phase A) */
.source-link,.affiliate-note a,.compat-list a,.notfound a{display:inline-block;padding:12px 0}
.v4-tabs a{min-width:44px;justify-content:center}
.chip{min-height:44px}
@media (min-width:1200px){.site-nav .nav-link{min-height:44px;display:inline-flex;align-items:center}}
.landing-box input:focus,.landing-box input:focus-visible{box-shadow:none!important}
@media (min-width:1200px){.header-actions .lpf-pal-open{display:inline-flex}}
.v4-fit>summary{display:none;list-style:none}
@media (max-width:700px){.v4-fit>summary{display:block;cursor:pointer;font-size:.86rem;color:var(--text-muted);min-height:44px;line-height:44px}.v4-fit>summary::-webkit-details-marker{display:none}.v4-fit>summary::after{content:" \25BE"}.v4-fit[open]>summary::after{content:" \25B4"}}
::view-transition-group(*){animation-duration:.3s}
::view-transition-old(root){animation-duration:.15s}::view-transition-new(root){animation-duration:.25s;animation-delay:0s}
.page-browse .v4-popular{margin:1.25rem 0 .5rem}
/* nav dropdowns (Phase A) */
.nav-dd{position:relative}
.nav-dd-btn{background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;min-height:44px}
.nav-dd-btn::after{content:"";width:.4em;height:.4em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform .15s}
.nav-dd-btn[aria-expanded=true]::after{transform:translateY(15%) rotate(-135deg)}
.nav-dd-menu{list-style:none;margin:0;padding:.35rem;min-width:13rem}
.nav-dd-menu .nav-link{display:flex;align-items:center;min-height:44px;white-space:nowrap}
.nav-dd-menu[hidden]{display:none}
@media (min-width:1200px){.nav-dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}}
@media (max-width:1199px){.nav-dd-menu{padding:0 0 0 1rem}.nav-dd-btn{width:100%;justify-content:space-between}}
html:not(.js) .nav-dd-menu[hidden]{display:block}
.seo4-dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0}.seo4-dl dt{font-weight:600;color:var(--text-muted)}.seo4-dl dd{margin:0;overflow-wrap:anywhere}@media(max-width:520px){.seo4-dl{grid-template-columns:1fr}.seo4-dl dd{margin-bottom:.4rem}}
/* SEO5: home coverage copy (layout only, existing colors) */
.landing-about{position:relative;z-index:2;max-width:46rem;margin:2.5rem auto 1.5rem;padding:1.25rem 1.25rem;background:var(--bg);border-radius:12px;text-align:left;font-size:.95rem;line-height:1.6}
.landing-about h2{font-size:1.1rem;margin:0 0 .5rem}.landing-about h3{font-size:1rem;margin:1rem 0 .4rem}.landing-about p{margin:0 0 .75rem}
.landing-top{columns:2;column-gap:1.5rem;margin:0 0 .75rem;padding-left:1.1rem}@media(max-width:520px){.landing-top{columns:1}}
/* postlaunch4 fixes (layout/stacking only) */
.fx~.site-header{z-index:60}
@media(max-width:420px){.site-header .header-container,.site-header>.container,.site-header>div{padding-inline:12px;gap:6px}}
.page-about pre{overflow-x:auto;max-width:100%}
.page-browse .hero-content>*{animation:none}
html:has(body:not(.page-landing))::view-transition-new(root),html:has(body:not(.page-landing))::view-transition-old(root){animation:none}
.breadcrumbs a,.site-footer a,.footer-links a,.page-desc a,a.site-brand,.v4-card a[target="_blank"],.seo4-related a,.fits-models-table a{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs a{min-width:44px}
@media(max-width:420px){.site-header .site-brand .brand-logo{width:118px;height:auto}.site-header .header-actions{gap:4px;flex-shrink:0}.site-header .header-actions>*{width:44px;min-width:44px;height:44px;padding:0}}
/* home: collapsed about (closed = pre-SEO4 look) */
details.landing-about{background:none;padding:0;margin:.5rem auto 0;max-width:46rem;text-align:center;border-radius:0}
details.landing-about>summary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .9rem;font-size:.78rem;cursor:pointer;list-style:none;color:inherit;opacity:.85;text-decoration:underline;text-underline-offset:3px}
details.landing-about>summary::-webkit-details-marker{display:none}
details.landing-about[open] .la-body{background:var(--bg);border-radius:12px;padding:1.25rem;margin-top:.5rem;text-align:left}
/* footer-merge: one centered row in .landing-foot; About this directory panel opens below the row */
.landing-foot{position:relative}
.landing-foot details.landing-about{position:static;margin:0;max-width:none;font-size:inherit}
.landing-foot details.landing-about .la-body{font-size:.95rem}
.landing-foot details.landing-about>summary{opacity:1;font-size:inherit;padding:.3rem .75rem;box-sizing:border-box}
.landing-foot details.landing-about[open] .la-body{position:static;transform:none;width:auto;max-width:100%;box-sizing:border-box}
/* footer-merge: tables scroll inside main; 44px tap targets on source chips, source notes, part-page model links, View Model */
main table{display:block;overflow-x:auto;max-width:100%}
a.source-chip,details.source-notes>summary,.compat-model-title a,main a.btn-xs{display:inline-flex;align-items:center;min-height:44px}
/* og-v2 quick promote: about panel opens above the row, fully visible */
.landing-foot .la-body{position:static;transform:none;width:auto;max-width:100%;max-height:none}
.landing-foot details.landing-about[open] .la-body{margin-top:.75rem}
/* og-v2: 44px tap targets */
dd>a[href*="pcsupport.lenovo.com"],#reset-filters-btn,.page-browse .tag-pill{display:inline-flex;align-items:center;min-height:44px}
.page-browse input[name="q"]{min-height:44px}
/* og-v2: home logo breathing room, group nudged up ~4vh */
.landing-logo{margin-bottom:clamp(20px,4vh,36px)}
.page-landing .landing-main{padding-top:max(0px,calc(clamp(2rem,8vh,5rem) - 4vh))}
.page-landing .landing-main>.landing-tagline{color:var(--text-muted);font-weight:400;margin-bottom:0}

/* explode section (home only, scoped to #xp) */
/* ===== explode mock: layout/transform only; colours = existing LPF vars + emblem colours ===== */
html:has(#xp),html:has(#xp) body{overflow-x:clip!important;overflow-y:visible!important}/* overflow-x:hidden made body a scroll container and broke position:sticky */
.xp{position:relative;z-index:1;height:460vh}
.xp-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;perspective:1400px;contain:layout paint}
.xp-scene{position:absolute;left:50%;top:52%;width:0;height:0;transform-style:preserve-3d}
.xp-world,.xp-pt{transform-style:preserve-3d}.xp-pt{position:absolute}.xp-pt svg{display:block;overflow:visible}
.xp-glow{filter:drop-shadow(0 0 6px rgba(139,116,254,.7))}
.xp-cap{position:absolute;left:0;right:0;bottom:clamp(64px,12vh,120px);text-align:center;font-size:clamp(1.05rem,2.6vw,1.35rem);font-weight:600;color:var(--text);letter-spacing:-.01em;margin:0}
.xp-cap span{position:absolute;left:0;right:0;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.xp-cap span.on{opacity:1;transform:none}
.xp-lbls{position:absolute;inset:0;pointer-events:none}
.xp-lbl{visibility:hidden;opacity:0;position:absolute;left:0;top:0;pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;font-size:.8rem;font-weight:500;white-space:nowrap;text-decoration:none;color:var(--text-muted);will-change:transform,opacity;z-index:0}
.xp-lbl::before{content:"";position:absolute;left:0;right:0;top:6px;bottom:6px;z-index:-1;border-radius:999px;background:var(--bub);border:1px solid var(--bub-b);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}/* same 32px pill; the <a> box itself is the 44px hit area */
.xp-lbl:hover,.xp-lbl:focus-visible{color:var(--text);outline:none}.xp-lbl:hover::before,.xp-lbl:focus-visible::before{border-color:#a99bff}
.xp-lead{position:absolute;left:0;top:0;height:1px;transform-origin:0 0;background:var(--bub-b);will-change:transform,opacity}
@media (max-width:640px){.xp{height:400vh}.xp-lbl{font-size:.72rem;padding:0 10px}.xp-lbl::before{top:7px;bottom:7px}}
@media (prefers-reduced-motion:reduce){.xp{height:auto}.xp-stage{position:relative}.xp-cap span{transition:none}}
.xp-more{position:relative;z-index:1;background:var(--bg);padding:24px max(20px,calc((100% - 1000px)/2)) 48px}
.xp-more h3{font-size:1rem;font-weight:600;color:var(--text);margin:0 0 8px}
.xp-grp{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 24px}
.xp-more h4{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:12px 0 0}
.xp-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.xp-more a{display:flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--text-muted);text-decoration:none}
.xp-more a:hover,.xp-more a:focus-visible{color:var(--text);text-decoration:underline}
@media (min-width:641px){.xp-more li.d{display:none}}
@media (max-width:640px){.xp-more li.m{display:none}.xp-grp{grid-template-columns:1fr;gap:0}.xp-more{padding:16px 16px 40px}}

/* 44px tap targets: inline prose links (developers/agents), guides list rows (desktop), parts category chips */
.prose-card p a { padding: 14px 0; }
.prose-card li > a { display: inline-flex; align-items: center; min-height: 44px; }
.search-quick-tags .tag-pill { display: inline-flex; align-items: center; min-height: 44px; }

/* 44px: parts/browse list rows, browse section links, model-page "Replace instead of repair" */
.device-card .card-title > a { display: inline-flex; align-items: center; min-height: 44px; }
.section-header a.btn-sm, .callout-row a.btn-sm, .wtb-buttons a.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

.hero-search-form .btn-primary{min-height:44px}

/* /browse/ redesign + /brands/ pages (Nov 1, 2026): additions only, existing v4 tokens */
/* LPF /browse/ redesign mock: additions only, reuse v4 tokens */
.mk-sub{max-width:40ch;margin-inline:auto}
.mk-about-wrap{max-width:960px;margin:.25rem auto 0}
.mk-about>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;color:var(--accent-text);font-weight:600;border-radius:999px}
.mk-about>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mk-about-body{padding:.5rem 0 1rem;color:var(--text-soft)}
.mk-about-body .metrics-grid{margin:1rem 0}
.mk-pop-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mk-pop-card a{flex-direction:row;align-items:flex-start;gap:12px;padding:14px;min-height:88px}
.mk-pop-ico{font-size:1.6rem;line-height:1;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 12%,transparent)}
.mk-pop-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mk-pop-title{font-weight:700;font-size:1.05rem;color:var(--text)}
.mk-pop-fit{font-size:.9rem;color:var(--text-soft)}
.mk-pop-pn{font-size:.78rem;color:var(--text-soft)}
.mk-pop-pn .v4-pn{font-size:.78rem!important;min-height:0!important;text-decoration:none;display:inline}
.mk-brand-grid{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.mk-brand{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:96px;padding:16px 18px;text-decoration:none;color:var(--text)}
.mk-brand:hover,.mk-brand:focus-visible{border-color:var(--primary)}
.mk-brand:focus-visible,.mk-model:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mk-brand-name{font-size:1.5rem;font-weight:800}
.mk-brand-meta{font-size:.85rem;color:var(--text-soft)}
.mk-popm-h{margin:1rem 0 .5rem}
.mk-brand-sec{margin:1.25rem 0;scroll-margin-top:80px}
.mk-brand-h{font-size:1.2rem;margin:0 0 .6rem;display:flex;gap:.5rem;align-items:baseline}
.mk-count{font-size:.85rem;font-weight:500;color:var(--text-soft)}
.mk-model-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.mk-model{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text)}
.mk-model:hover{border-color:var(--primary)}
.mk-model-n{font-size:.8rem;color:var(--text-soft);white-space:nowrap}
.mk-all>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--accent-text);font-weight:600;margin-top:.4rem}
.mk-all-list{columns:3 220px;padding:0;list-style:none}
.mk-model-link{display:flex;align-items:center;min-height:44px;color:var(--text)}
@media(max-width:420px){.mk-brand-grid{grid-template-columns:1fr 1fr}.mk-brand{min-height:84px;padding:12px 14px}.mk-brand-name{font-size:1.25rem}}
.hero-search-form .btn{min-height:44px}
.mk-pop-card a *,.mk-brand *,.mk-model *{text-decoration:none!important}
.mk-model{align-items:center}
.mk-pop-card a,a.mk-brand,a.mk-model{text-decoration:none!important}.mk-pop-pn .v4-pn{text-decoration:none!important}
.mk-cb-more>summary{margin:1rem 0 .5rem}
.mk-cb-more .card-grid{margin-top:1rem}
.mk-bsearch{display:flex;gap:8px;max-width:560px;margin:1rem 0}
.mk-bsearch input{flex:1;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--v4-glass,transparent);color:var(--text);font:inherit;min-width:0}
.mk-bsearch .btn{min-height:44px}
.mk-jumps{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mk-jumps .tag-pill{min-height:44px;display:inline-flex;align-items:center}
.mk-brandpage .mk-brand-sec{scroll-margin-top:90px}
.mk-brandpage .mk-brand-h{font-size:1.25rem}
.mk-model{background:var(--v4-glass,var(--bg));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mk-series{border-bottom:1px solid var(--border);padding:.25rem 0}
.mk-series>summary{list-style:none;display:flex;align-items:center;min-height:56px;cursor:pointer}
.mk-series>summary::-webkit-details-marker{display:none}
.mk-series>summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--accent-text)}
.mk-series[open]>summary::after{content:"–"}
.mk-series>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
.mk-series .mk-brand-h{margin:0}
.mk-series .mk-model-grid{margin:.25rem 0 1rem}


/* W02 documented OEM specifications (not part fitments) */
.dspec-block{margin:0 0 1.5rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.dspec-block .section-subhead{margin-bottom:.75rem}
.dspec-block .section-subhead h2{font-size:1.15rem;margin:0 0 .35rem}
.dspec-block .section-subhead p{margin:0;color:var(--text-muted);font-size:.92rem}
.dspec-cat{margin-top:.9rem}
.dspec-cat-title{margin:0 0 .4rem;font-size:.95rem}
.dspec-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.dspec-item{padding:.55rem .7rem;border:1px solid var(--border);border-radius:8px;background:rgba(0,0,0,.02)}
.dspec-summary{font-size:.92rem;line-height:1.35}
.dspec-scope,.dspec-caveat,.dspec-provenance{margin-top:.3rem;font-size:.82rem;color:var(--text-muted)}
.dspec-label{font-weight:600;color:var(--cite)}
.dspec-caveat{border-left:3px solid #d97706;padding-left:.45rem}


/* DSPEC triple-fix preview: readable facts + once-per-group provenance */
.dspec-summary-facts { display: grid; gap: .35rem; }
.dspec-fact { line-height: 1.45; }
.dspec-group-note { margin: .35rem 0 .6rem; font-size: .9rem; color: var(--text-muted, #5b6472); }
.dspec-tag { display: inline-block; padding: .1rem .45rem; border-radius: 999px; background: rgba(15, 23, 42, .06); font-size: .8rem; }
.source-chips-inline { display: inline-flex; gap: .35rem; vertical-align: middle; }
.section-desc-note { margin-top: .35rem; font-size: .92rem; opacity: .92; }
.alert-info { border-left: 4px solid #2563eb; background: rgba(37, 99, 235, .08); padding: .75rem 1rem; margin: .75rem 0; border-radius: 4px; }


/* F-008: service/recovery/misc parts folded by default (works with no JS) */
.v4-misc { margin: 1.25rem 0; border: 1px solid rgba(15,23,42,.12); border-radius: 8px; padding: .75rem 1rem; background: rgba(15,23,42,.02); }
.v4-misc > summary { cursor: pointer; font-weight: 600; list-style: disclosure-closed; }
.v4-misc[open] > summary { list-style: disclosure-open; margin-bottom: .5rem; }
.v4-misc-types { display: block; font-weight: 400; font-size: .85rem; color: var(--text-muted, #5b6472); margin-top: .25rem; }
.v4-misc-note { font-size: .92rem; color: var(--text-muted, #5b6472); margin: .35rem 0 .75rem; }

/* F011–F014 preview: homepage blurb + models verification legend */
.landing-blurb{max-width:36rem;margin:1.25rem auto 2rem;padding:0.5rem 1rem 1.5rem;font-size:0.95rem;line-height:1.45;color:var(--text-muted, #5b6570);text-align:center}
.landing-blurb a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.landing-blurb{margin:1rem auto 1.5rem;padding:0.35rem 1rem 1.25rem}}
.tier-legend{margin:0.75rem 0 0;padding:0.65rem 0.85rem;border:1px solid var(--border, #d8dee6);border-radius:8px;background:var(--surface-2, #f6f8fa);font-size:0.9rem;line-height:1.4;max-width:52rem}
.tier-legend em{font-style:normal;font-weight:600}
.source-notes-raw{margin-top:0.5rem;opacity:0.85}

/* B3 F-022: mobile-only jump link to the part cards (desktop v4 unchanged). F-023: solid sticky tab bar on mobile. F-034: 12px text floor on mobile. */
.mob-jump{display:none}
@media(max-width:760px){.mob-jump{display:inline-block;margin:.25rem 0 .5rem;font-weight:600;font-size:.9rem}#parts{scroll-margin-top:120px}.v4-tabs{background:var(--bg)}.source-host,.v4 small{font-size:12px}}

/* s9: landing footer sits at the bottom of the page (below the laptop and blurb). Compact multi-column text links, not pills. */
.page-landing .landing-foot{display:block;width:100%;margin:0;padding:0;border-top:1px solid var(--border,rgba(109,74,240,.2));background:color-mix(in srgb,var(--bg) 92%,transparent);position:relative;z-index:2;font-size:.8rem;color:var(--text-muted)}
.page-landing .landing-foot .lf-inner{max-width:72rem;margin:0 auto;padding:1.75rem 1.25rem 2.25rem;display:grid;gap:1.5rem 2.5rem;grid-template-columns:1fr;text-align:left}
@media(min-width:800px){
  .page-landing .landing-foot .lf-inner{grid-template-columns:12.5rem minmax(12rem,1fr) minmax(20rem,2.2fr);grid-template-areas:"dir explore models" "about about about";align-items:start}
  .page-landing .lf-dir{grid-area:dir}
  .page-landing .lf-explore{grid-area:explore}
  .page-landing .landing-foot .lf-models,.page-landing .landing-foot [data-best-documented]{grid-area:models}
  .page-landing .landing-foot details.landing-about{grid-area:about}
}
.page-landing .lf-dir{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.page-landing .landing-foot a{display:inline;background:none!important;border:0!important;border-radius:0!important;padding:0!important;min-height:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--text-muted)!important;text-decoration:underline!important;text-underline-offset:2px;font-size:.8rem;line-height:1.55}
.page-landing .landing-foot a:hover{color:var(--link)!important;border-color:transparent!important}
.page-landing .lf-dir a{display:inline-block;padding:.15rem 0;line-height:1.45}
.page-landing .landing-foot .brand-row{display:block;line-height:1.7;max-width:28rem}
.page-landing .landing-foot [data-type-row]{margin:.85rem 0 0;line-height:1.7}
.page-landing .landing-foot .lf-models h2,.page-landing .landing-foot [data-best-documented] h2{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .55rem;color:var(--text)}
.page-landing .landing-foot .landing-top{columns:2;column-gap:1.25rem;margin:0;padding-left:1rem;font-size:.8rem}
@media(min-width:1100px){.page-landing .landing-foot .landing-top{columns:3}}
@media(max-width:519px){.page-landing .landing-foot .landing-top{columns:1}}
.page-landing .landing-foot .landing-top li{break-inside:avoid;margin:0 0 .2rem;line-height:1.4}
.page-landing .landing-foot .lf-models p,.page-landing .landing-foot [data-best-documented] p{margin:.55rem 0 0}
.page-landing .landing-foot details.landing-about{margin:0;max-width:none;text-align:left;position:static}
.page-landing .landing-foot details.landing-about>summary{display:inline;background:none!important;border:0!important;border-radius:0!important;padding:0!important;min-height:0!important;backdrop-filter:none!important;font-size:.8rem;cursor:pointer;list-style:none;color:var(--text-muted);text-decoration:underline;text-underline-offset:2px;opacity:1}
.page-landing .landing-foot details.landing-about[open] .la-body,.page-landing .landing-foot .la-body{position:static;transform:none;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:100%;max-height:none;margin-top:.75rem;overflow:visible}