:root{--specs-collapsed-max:180px;}
/* Updated: 2025-01-01 - Fixed desktop filter layout */
*, *::before, *::after{box-sizing:border-box}
body{font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#f6f8fb;color:#1f2937;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:24px}
/* Listing page: slightly narrower desktop container to keep header hamburger aligned
   and avoid content pushing layout wider than viewport */
.listing-page .container{max-width:1000px}

/* Ensure sticky header always spans full viewport width so hamburger sits at right edge */
.site-header{left:0;right:0}

/* Listings gallery page container width and overflow safety */
.listings-page{max-width:1000px}
@media (max-width: 768px){
  .listings-page{max-width:100%; width:100%; overflow-x:hidden}
  .listings-page .grid{max-width:100%}
  .listings-page .filters{max-width:100%}
  .listings-page .card{max-width:100%}
}

/* Extra safety for listing detail on mobile: prevent horizontal scroll */
@media (max-width: 768px){
  .listing-page{overflow-x:hidden}
  .listing-page main{max-width:100%; width:100%; overflow-x:hidden}
  .listing-page .container{max-width:100%; width:100%; padding-left:16px; padding-right:16px}
  .listing-page .grid,
  .listing-page .card,
  .listing-page aside,
  .listing-page .slideshow,
  .listing-page .thumbs{max-width:100%; overflow-x:hidden}
  .listing-page img{max-width:100%; height:auto}
  .listing-page .grid.two-col{grid-template-columns:1fr !important}
  .listing-page .btn-row{width:100%}
  .listing-page .btn-row .btn{width:100%}
  .listing-page a.btn{display:block; width:100%}
  .listing-page .slideshow{width:100%}
  .listing-page .slideshow #main-photo{max-width:100%; width:100%}
  .listing-page .related-card .related-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
h1{font-size:24px;margin:0 0 16px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.grid.two-col{grid-template-columns: 2fr 1fr}
.card{background:#fff;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden}
.card{padding:14px;transition:transform .18s ease, box-shadow .18s ease;will-change:transform}
/* Subtle enlarge on hover for listing cards (only cards inside links) */
a.card-link:hover .card{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.thumb{width:100%;height:170px;object-fit:cover;background:#eef2f7}
/* Ensure dealer logos fit nicely within the thumbnail area without cropping */
.card .thumb img{max-width:100%;max-height:100%;object-fit:contain}
.content{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.title{font-weight:700;font-size:18px;line-height:1.3;color:#111827;word-break:break-word;overflow-wrap:anywhere}
.title.small{font-size:16px}
.meta{font-size:14px;color:#6b7280}
.price{font-size:16px;font-weight:700;color:#0f766e}
.id{font-size:12px;color:#9ca3af}
.status-tag{display:inline-flex;align-self:flex-start;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;background:#e5e7eb;color:#374151}
.status-tag--error{background:#d1d5db;color:#1f2937}
.status-tag--expired{background:#fee2e2;color:#991b1b}
header.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
header.top .note{color:#6b7280;font-size:13px}
a.card-link{color:inherit;text-decoration:none}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gallery img{width:100%;height:130px;object-fit:cover;border-radius:8px;background:#e5e7eb}
.slideshow{position:relative;display:flex;align-items:center;justify-content:center;height:480px;background:#0b0b0b;border-radius:10px;overflow:hidden}
.slideshow #main-photo{width:100%;height:100%;object-fit:contain;background:#111}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:none;border-radius:999px;width:36px;height:36px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.slide-nav:hover{background:#fff}
.slide-nav.prev{left:10px}
.slide-nav.next{right:10px}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:4px}
.thumbs img{width:80px;height:60px;object-fit:cover;border-radius:6px;background:#e5e7eb;opacity:.8;cursor:pointer;border:2px solid transparent}
.thumbs img.active{opacity:1;border-color:#0ea5e9}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px){
  .slideshow{height:320px}
}

/* Mobile Responsiveness Improvements */
@media (max-width: 768px) {
  /* Container adjustments */
  .container {
    padding: 16px;
  }
  
  /* Grid adjustments */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }
  
  /* Listings page specific: single column on mobile */
  #results.grid {
    grid-template-columns: 1fr !important;
  }
  
  .grid.two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Card adjustments */
  .card {
    padding: 12px;
  }
  
  /* Typography adjustments */
  h1 {
    font-size: 20px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .title.small {
    font-size: 14px;
  }
  
  /* Button adjustments */
  .btn {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .btn-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn-row .btn {
    width: 100%;
    text-align: center;
  }
}

/* Desktop filter layout overrides */
@media (min-width: 769px) {
  /* Force desktop layout for all filter rows */
  .filters .row,
  .filters .primary-filters,
  .filters .more-filters-section .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Override the base .filters .row rule specifically */
  .filters .row {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  
  /* Make all filter labels take equal space and spread across full width */
  .filters label,
  .filters .primary-filters label,
  .filters .more-filters-section label {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }
  
  /* Action buttons layout */
  .filters .actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin-top: 20px !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
  
  .filters button {
    width: auto !important;
    min-width: 100px !important;
    flex-shrink: 0 !important;
  }
  
  /* More filters toggle positioning */
  .more-filters-toggle {
    display: flex !important;
    justify-content: center !important;
    margin: 16px 0 !important;
  }
  
  /* Force full width distribution */
  .filters {
    width: 100% !important;
  }
  
  .filters form {
    width: 100% !important;
  }
  
  /* Ensure each filter row takes full width */
  .filters .row {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Distribute filters evenly across available space */
  .filters .row > * {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
  }
  
  /* Override any potential width constraints on filter card */
  .filters.card {
    width: 100% !important;
  }
}

/* More filters functionality */
.more-filters-section {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.more-filters-section.show {
  display: block;
}

.more-filters-toggle {
  margin-top: 12px;
  text-align: center;
}

.btn.secondary {
  background: #6b7280;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.btn.secondary:hover {
  background: #4b5563;
}

.btn.secondary.active {
  background: #005EB8;
}

/* Mobile-specific grid adjustments for listings */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  
  /* Filter adjustments for mobile */
  .filters .row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filters label {
    width: 100% !important;
  }

  .filters input,
  .filters select {
    width: 100% !important;
  }

  .filters .actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .filters button {
    width: 100% !important;
  }
  
  /* Primary filters layout on mobile */
  .primary-filters {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .primary-filters label {
    width: 100%;
  }
  
  .primary-filters select {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Show mobile toggle button */
  .more-filters-toggle {
    display: block;
  }
  
  /* Hide desktop toggle button on mobile */
  .filters .actions #more-filters-btn-desktop {
    display: none !important;
  }
  
  /* Show more filters section when toggled */
  .more-filters-section.show {
    display: block;
  }
}

@media (min-width: 769px) {
  /* Desktop: show all filters by default */
  .more-filters-section {
    display: block !important;
  }
  
  .more-filters-toggle {
    display: none !important;
  }
  
  /* Ensure proper spacing for desktop filters */
  .filters .row:not(.primary-filters) {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }
  
  /* Better alignment for filter labels */
  .filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .filters label select,
  .filters label input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
  }
  
  /* Ensure filters spread across full width on desktop */
  .filters .primary-filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  .filters .primary-filters label {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Chart adjustments */
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .chart-controls input,
  .chart-controls select {
    width: 80px;
  }
  
  /* Stats grid adjustments */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
  }
  
  .stat-card .value {
    font-size: 24px;
  }
  
  /* Toolbar adjustments */
  .toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .toolbar form {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .toolbar input[type=number] {
    width: 100%;
  }
  
  /* Section head adjustments */
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  /* Controls adjustments */
  .controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .controls label {
    font-size: 11px;
  }
  
  .controls input,
  .controls select {
    padding: 4px 6px;
    font-size: 12px;
  }
  
  .controls button {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  /* Filter chips adjustments */
  .filter-chips {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .filter-chip {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  /* Tab navigation adjustments */
  .tab-navigation {
    flex-direction: column;
    gap: 0;
  }
  
  .tab-button {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .tab-button:last-child {
    border-bottom: none;
  }
  
  /* Modal adjustments */
  .modal-engine-list {
    max-height: 180px;
  }
  
  /* Related grid adjustments */
  .related-card .related-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
  }
  
  .related-thumb {
    height: 100px;
  }
  
  /* Gallery adjustments */
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .gallery img {
    height: 100px;
  }
  
  /* Slideshow adjustments */
  .slide-nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .thumbs {
    gap: 6px;
  }
  
  .thumbs img {
    width: 60px;
    height: 45px;
  }
  
  /* Quick list adjustments */
  .quick li {
    padding: 8px 0;
    font-size: 14px;
  }
  
  /* Specs adjustments */
  .specs dt {
    font-size: 14px;
  }
  
  .specs dd {
    font-size: 14px;
  }
  
  /* Landing page adjustments */
  .landing-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .landing-hero__actions .btn {
    width: 100%;
    text-align: center;
  }
  
  .platform-tile {
    padding: 24px 20px;
  }
  
  .audience-card {
    padding: 24px 20px;
  }
  
  .journey-step {
    padding: 16px 18px;
  }
  
  .differentiator-card {
    padding: 24px 20px;
  }
  
  /* Alpha navigation adjustments */
  .alpha-nav {
    right: 16px;
    padding: 8px 6px;
  }
  
  .alpha-nav button {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

@media (max-width: 480px) {
  /* Extra small screens */
  .container {
    padding: 12px;
  }
  .slideshow{height:260px}
  
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .stat-card .value {
    font-size: 20px;
  }
  
  .card {
    padding: 10px;
  }
  
  .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  
  .chart-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .chart-controls input,
  .chart-controls select {
    width: 100%;
  }
  
  .controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .controls input,
  .controls select {
    width: 100%;
  }
  
  .controls button {
    width: 100%;
  }
  
  .related-card .related-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .related-thumb {
    height: 80px;
  }
  
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .gallery img {
    height: 80px;
  }
  
  .thumbs img {
    width: 50px;
    height: 38px;
  }
  
  .slide-nav {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .platform-tile {
    padding: 20px 16px;
  }
  
  .audience-card {
    padding: 20px 16px;
  }
  
  .journey-step {
    padding: 14px 16px;
  }
  
  .differentiator-card {
    padding: 20px 16px;
  }
  
  .alpha-nav {
    right: 12px;
    padding: 6px 4px;
  }
  
  .alpha-nav button {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  
  /* Mobile nav adjustments for very small screens */
  .mobile-nav-content {
    width: min(280px, 95vw);
    padding: 50px 12px 16px;
  }
  
  .mobile-nav-section {
    margin-bottom: 24px;
  }
  
  .mobile-nav-btn {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .mobile-user-info {
    padding: 10px 12px;
  }
}

/* Additional mobile nav safety for very small screens */
@media (max-width: 360px) {
  .slideshow{height:220px}
  .mobile-nav-content {
    width: calc(100vw - 20px);
    max-width: 300px;
    padding: 50px 10px 16px;
  }
  
  .mobile-nav-section h3 {
    font-size: 12px;
  }
  
  .mobile-nav-btn {
    padding: 8px 10px;
    font-size: 13px;
  }
}
.specs dt{font-weight:600;color:#374151;margin-top:8px}
.specs dd{margin:0 0 10px 0;color:#4b5563}
.quick{list-style:none;margin:0;padding:0}
.quick li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eef2f7}
.quick li:last-child{border-bottom:none}
.filters .row{display:flex;gap:12px;width:100%}
.filters label{display:flex;flex-direction:column;font-size:14px;color:#374151}
.filters input,.filters select{padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.filters .actions{margin-top:10px;display:flex;gap:8px}
.filters button{background:#005EB8;color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.filters button#reset-btn{background:#6b7280}
/* Add spacing below the filter card */
.filters{margin-bottom:12px}
.pager{display:flex;justify-content:center;gap:8px;margin:16px 0}
.pager button{padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer}

/* DESKTOP FILTER OVERRIDE - MUST BE AFTER BASE RULES */
@media (min-width: 769px) {
  .filters .row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
  }
  
  .filters label {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    max-width: 180px !important;
    width: auto !important;
  }
  
  .filters .actions {
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
  
  .filters button {
    width: auto !important;
    min-width: 100px !important;
  }
  
  /* Hide mobile toggle button on desktop */
  .more-filters-toggle {
    display: none !important;
  }
  
  /* Show desktop toggle button in actions */
  .filters .actions #more-filters-btn-desktop {
    display: inline-block !important;
    order: -1;
    margin-right: auto;
  }
  
  .filters .actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* Desktop cleanup: remove filter row dividers and hide desktop toggle */
@media (min-width: 769px) {
  /* Remove any top borders/dividers and extra spacing between filter rows */
  .filters .row:not(.primary-filters),
  .more-filters-section {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Hide the desktop-only filter toggle button */
  .filters .actions #more-filters-btn-desktop {
    display: none !important;
  }
}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid transparent;text-decoration:none;font-weight:600}
.btn.primary{background:#005EB8;color:#fff}
.btn.primary:hover{background:#0284c7}
.btn.danger{background:#dc2626;color:#fff}
.btn.danger:hover{background:#b91c1c}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.btn-row .btn{flex:1 0 auto}
/* Loading + empty states */
.hidden{display:none !important}
.loading{display:none}
.loading.hidden{display:none !important}

/* Inline loading spinner on buttons */
.btn.is-loading{position:relative;pointer-events:none;opacity:0.9}
.btn.is-loading::after{content:'';position:absolute;right:10px;top:50%;width:16px;height:16px;border:2px solid rgba(255,255,255,0.6);border-top-color:#fff;border-radius:50%;transform:translateY(-50%);animation:spin .8s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.empty{color:#6b7280;text-align:center;margin:16px 0}

/* Modern Full-Page Loading Overlay */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* Use site brand gradient consistent with landing hero */
  background: linear-gradient(135deg, #0f172a 10%, #1f57ff 45%, #0ea5e9 100%);
  backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  color: #f8fafc;
}

.page-loader__logo {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Brand blue gradient for logo */
  background: linear-gradient(135deg, #005EB8 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoGlow 2s ease-in-out infinite alternate;
}

.page-loader__logo strong {
  /* Keep within blue palette for consistency */
  background: linear-gradient(135deg, #004494 0%, #005EB8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-loader__pulse {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #005EB8 0%, #0ea5e9 100%);
  position: relative;
  animation: pulseScale 1.5s ease-in-out infinite;
}

.page-loader__pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(248, 250, 252, 0.9);
  transform: translate(-50%, -50%);
  animation: pulseInner 1.5s ease-in-out infinite;
}

.page-loader__pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #005EB8 0%, #0ea5e9 100%);
  transform: translate(-50%, -50%);
  animation: pulseCore 1.5s ease-in-out infinite;
}

.page-loader__copy {
  font-size: 16px;
  color: rgba(248, 250, 252, 0.8);
  font-weight: 500;
  margin: 0;
  animation: textFade 2s ease-in-out infinite alternate;
}

/* Loading animations */
@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.6));
  }
}

@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes pulseInner {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.9;
  }
}

@keyframes pulseCore {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
}

@keyframes textFade {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* Mobile adjustments for loading overlay */
@media (max-width: 768px) {
  .page-loader__logo {
    font-size: 28px;
  }
  
  .page-loader__pulse {
    width: 50px;
    height: 50px;
  }
  
  .page-loader__pulse::before {
    width: 32px;
    height: 32px;
  }
  
  .page-loader__pulse::after {
    width: 16px;
    height: 16px;
  }
  
  .page-loader__copy {
    font-size: 14px;
  }
  
  .page-loader__inner {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .page-loader__logo {
    font-size: 24px;
  }
  
  .page-loader__pulse {
    width: 40px;
    height: 40px;
  }
  
  .page-loader__pulse::before {
    width: 28px;
    height: 28px;
  }
  
  .page-loader__pulse::after {
    width: 14px;
    height: 14px;
  }
  
  .page-loader__copy {
    font-size: 13px;
  }
  
  .page-loader__inner {
    gap: 16px;
  }
}

/* Modern sticky site header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.7);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(229,231,235,.7);width:100%;box-sizing:border-box}
.site-header-inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:60px;width:100%;box-sizing:border-box}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#111827;font-weight:800;letter-spacing:-0.02em}
.logo .logo-mark{font-size:18px}
.logo .logo-text .muted{color:#0ea5e9;font-weight:700}
.site-nav{display:flex;gap:10px;justify-content:center}
.nav-btn{display:inline-block;padding:8px 12px;border-radius:999px;color:#111827;text-decoration:none;font-weight:600;border:1px solid transparent;background:#e3eaf3;transition:background 0.18s;}
.nav-btn:hover{background:#d1dbe8;}
.nav-btn.active{background:#005EB8;color:#fff;border-color:#005EB8}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 60;
  align-items: center;
  margin: 0;
}

.hamburger-line {
  width: 25px;
  height: 3px;
  background-color: #111827;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  padding: 80px 20px 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav-overlay.active .mobile-nav-content {
  transform: translateX(0);
}

.mobile-nav-section {
  margin-bottom: 32px;
}

.mobile-nav-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px 0;
}

.mobile-nav-links,
.mobile-auth-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-auth-links {
  margin-top: 0;
}

.mobile-nav-btn {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: #111827;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.mobile-nav-btn:hover {
  background-color: #f3f4f6;
}

.mobile-nav-btn.active {
  background-color: #005EB8;
  color: #fff;
}

.mobile-nav-btn.logout-btn {
  background-color: #dc2626;
  color: white;
}

.mobile-nav-btn.logout-btn:hover {
  background-color: #b91c1c;
}

.mobile-nav-btn.register-btn {
  background-color: #005EB8;
  color: white;
}

.mobile-nav-btn.register-btn:hover {
  background-color: #004494;
}

.mobile-user-info {
  padding: 12px 16px;
  background-color: #f9fafb;
  border-radius: 8px;
  margin-bottom: 8px;
}

.mobile-user-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 870px) {
  .site-header-inner {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    min-height: 60px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .desktop-nav,
  .desktop-auth,
  .auth-nav,
  .user-info,
  .user-name,
  .nav-btn:not(.mobile-nav-btn) {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }
  
  .logo {
    flex-shrink: 0;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
    overflow: hidden;
  }
  
  .logo .logo-text {
    font-size: 1.5rem !important;
    white-space: nowrap;
  }
  
  /* Ensure clean mobile header with only logo and hamburger */
  .site-header-inner > *:not(.logo):not(.mobile-menu-toggle) {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .site-header-inner {
    padding: 8px 16px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .mobile-nav-content {
    width: min(300px, 90vw);
    padding: 60px 16px 20px;
  }
  
  .logo .logo-text {
    font-size: 1.25rem !important;
  }
  
  .logo {
    max-width: calc(100vw - 60px);
  }
}

/* Authentication styles */
.auth-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-name {
  font-size: 0.9rem;
  color: #374151;
  font-weight: 500;
}

.logout-btn {
  background: #dc2626;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.logout-btn:hover {
  background: #b91c1c;
  color: white;
}

.register-btn {
  background: #005EB8;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.register-btn:hover {
  background: #004494;
  color: white;
}

@media (max-width: 870px) {
  .auth-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .user-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .user-name {
    font-size: 0.8rem;
  }
}


.alpha-nav{position:fixed;top:50%;right:24px;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,0.96);box-shadow:0 20px 34px rgba(15,23,42,0.16);z-index:60;border:1px solid rgba(226,232,240,0.9);max-height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,0.6) transparent}

.alpha-nav button{width:30px;height:30px;border:none;border-radius:999px;background:transparent;font-size:13px;font-weight:700;color:#1f2937;cursor:pointer;transition:all .18s ease;padding:0;line-height:1;display:flex;align-items:center;justify-content:center}

.alpha-nav button.active{color:#0f172a;background:rgba(14,165,233,0.18);box-shadow:0 6px 14px rgba(14,165,233,0.25)}

.alpha-nav button.disabled{color:#94a3b8;cursor:default;opacity:0.55}

.alpha-nav button:not(.disabled):hover{color:#0284c7;background:rgba(14,165,233,0.22);box-shadow:0 6px 16px rgba(37,99,235,0.15)}

.alpha-nav button:focus-visible{outline:2px solid #0ea5e9;outline-offset:3px}



.alpha-nav::-webkit-scrollbar{width:6px}
.alpha-nav::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.6);border-radius:999px}
.alpha-nav::-webkit-scrollbar-track{background:transparent}

.valuation.modern{display:flex;flex-direction:column;gap:0}
.valuation-hero{position:relative;padding:56px 0 24px;background:linear-gradient(135deg,#0f172a 10%,#1f57ff 45%,#0ea5e9 100%);color:#f8fafc}
.valuation-hero .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:stretch}
.valuation-hero .hero-copy{display:flex;flex-direction:column;gap:12px;justify-content:center}
.valuation-hero .eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:rgba(241,245,249,0.8);margin:0}
.valuation-hero h1{font-size:34px;margin:0 0 6px 0;color:#fff}
.valuation-hero .sub{margin:0;color:rgba(241,245,249,0.9)}
.valuation-hero .bullets{margin:8px 0 0 0;padding-left:18px;color:rgba(241,245,249,0.92)}
.valuation-hero .hero-panel.card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.25)}
.valuation-form .row{display:flex;gap:12px;width:100%;flex-wrap:wrap;align-items:flex-end}
.valuation-form label{display:flex;flex-direction:column;font-size:14px;gap:6px}
.valuation-form input,.valuation-form select{padding:12px 14px;border:1px solid rgba(255,255,255,0.35);border-radius:10px;background:rgba(255,255,255,0.9);width:100%}
.valuation-form label > input,
.valuation-form label > select{margin-top:auto}
.valuation-form label.wide{flex:2 1 0}
.valuation-form label:not(.wide){flex:1 1 0}
.valuation-form .actions{margin-top:10px;display:flex;gap:8px}

/* Ensure Make/Model/Trim/Year fit within the card on all widths */
.valuation-form .row.primary-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.valuation-form .row.primary-filters label{min-width:0}

.valuation-body{padding:12px 0 40px}
.valuation-body .grid.two-col{grid-template-columns: 1.55fr 0.45fr}
.valuation-body .main-col{display:flex;flex-direction:column;gap:12px}
.valuation-body .side-col{display:flex;flex-direction:column;gap:12px}

.summary.card{display:flex;flex-direction:column;gap:12px}
.summary-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px}
.summary-title{font-weight:700;color:#0b1220}
.summary-badge{display:none}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap}
.filter-chips.hidden{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #e5e7eb;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);font-size:12px;font-weight:600;color:#0b1220;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.filter-chip .dot{width:6px;height:6px;border-radius:999px}
.filter-chip.ok .dot{background:#10b981}
.filter-chip.loose .dot{background:#f59e0b}
.filter-chip.dropped .dot{background:#ef4444}
.filter-chip .label{opacity:.85}
.filter-chip .value{font-weight:700}
.summary-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.summary-price{font-size:34px;font-weight:800;color:#0f766e}
.summary-meta{display:flex;flex-direction:column;gap:4px}
.summary-meta .muted{color:#64748b}
.summary-actions{display:flex;gap:8px;flex-wrap:wrap}

.va-stats.card{padding:16px}
.va-stats.grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.stat-card .label{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.06em}
.stat-card .value{font-size:22px;font-weight:800;color:#0b1220}
.stat-card .hint{font-size:12px;color:#94a3b8}

#va-model-analysis-link.hidden{display:none}
#valuation-filter-chips{flex:1 1 100%;max-width:100%}
.summary-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.summary-meta{min-height:40px}
.summary-meta .meta-line{overflow-wrap:anywhere}
.summary.card, .va-stats.card, .chart.card{min-width:0; max-width:100%}
.valuation-result{min-width:0}
.chart-canvas-wrap{max-width:100%; overflow:hidden}
.chart-canvas-wrap canvas{width:100% !important; height:auto}

.chart .chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.chart-title{font-weight:700}
.chart-sub{font-size:13px;color:#6b7280}
.chart-canvas-wrap{width:100%;height:280px}

/* Comparables list */
.comp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:8px}
.comp-item{display:flex;flex-direction:column;gap:6px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#fff}
.comp-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.comp-title{font-weight:700;color:#0b1220}
.comp-meta{font-size:12px;color:#6b7280}
.comp-actions{display:flex;gap:8px;flex-wrap:wrap}
.comp-actions .btn{padding:6px 10px;font-size:12px}

.card-title{font-weight:700;margin-bottom:8px}
.breakdown .breakdown-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.breakdown .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #eef2f7}
.breakdown .row.total{border-top:2px solid #e5e7eb;border-bottom:none}
.breakdown .k{color:#374151}
.breakdown .v{font-weight:700}

.insights .insights-list{margin:0;padding-left:18px;color:#475569;display:flex;flex-direction:column;gap:6px}

.side .side-title{font-weight:700;margin-bottom:6px}
.tips{margin:0;padding-left:18px;color:#475569}

.empty.card{display:flex;align-items:center;justify-content:center;min-height:220px}
.empty .empty-inner{display:flex;flex-direction:column;align-items:center;gap:4px}
.empty .emoji{font-size:32px}
.empty .title{font-weight:700}
.empty .sub{color:#6b7280}

@media (max-width: 960px){
  .valuation-hero .hero-grid{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .valuation-body .grid.two-col{grid-template-columns:1fr}
  .valuation-hero{padding:32px 0 18px}
  .valuation-hero h1{font-size:28px}
  .summary-price{font-size:28px}
}

.filters-accordion{display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.accordion-item{border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc;overflow:hidden;transition:border-color .18s ease, box-shadow .18s ease;}
.accordion-item.open{background:#fff;border-color:#0ea5e9;box-shadow:0 6px 18px rgba(14,165,233,0.18);}
.accordion-header{margin:0;}
.accordion-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:none;border:none;font-weight:600;color:#111827;cursor:pointer;}
.accordion-toggle:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px;}
.accordion-icon{font-size:14px;font-weight:700;color:#0f172a;}
.accordion-body{padding:12px;border-top:1px solid #e5e7eb;background:#fff;}
.accordion-body[hidden]{display:none;}



body.modal-open, html.modal-open{overflow:hidden;}
body.mobile-menu-open{overflow:hidden;}

.specs-card .specs-wrapper{position:relative;max-height:none;transition:max-height .2s ease;}
.specs-card{display:flex;flex-direction:column;gap:8px;}
.specs-wrapper.collapsed{max-height:var(--specs-collapsed-max);overflow:hidden;position:relative;}
.specs-wrapper.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.85) 70%,#fff 100%);pointer-events:none;}
.specs-toggle{margin-top:12px;background:#005EB8;border:none;color:#fff;font-weight:600;font-size:13px;cursor:pointer;align-self:flex-start;padding:8px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;transition:background .18s ease,box-shadow .18s ease;}
.specs-toggle:hover{background:#0369a1;box-shadow:0 6px 18px rgba(15,23,42,0.18);}

.related-card .related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px;}
.related-card .related-item{display:flex;flex-direction:column;gap:8px;height:100%;}
.related-thumb{width:100%;height:120px;object-fit:cover;border-radius:8px;background:#eef2f7;}
.related-content{display:flex;flex-direction:column;gap:4px;}
.related-title{font-weight:600;font-size:14px;color:#111827;}
.related-meta{font-size:13px;color:#475569;}
.related-subtitle{font-size:12px;color:#6b7280;}
.related-link:hover .related-title{color:#0ea5e9;}






/* Landing page */
.landing-page{display:flex;flex-direction:column;gap:clamp(64px,8vw,120px);padding-bottom:clamp(80px,12vw,140px)}
.landing-container{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

.landing-hero{position:relative;padding:clamp(100px,16vw,190px) 0 clamp(80px,12vw,140px);color:#fff;overflow:hidden;isolation:isolate}
.landing-hero .landing-container{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,5vw,72px);align-items:center}
.landing-hero__background{position:absolute;inset:0;background:linear-gradient(135deg,#0f172a 10%,#1f57ff 45%,#0ea5e9 100%);opacity:0.92;z-index:1}
.landing-hero__content{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.landing-eyebrow{text-transform:uppercase;letter-spacing:0.22em;font-size:12px;font-weight:600;color:rgba(226,232,240,0.75)}
.landing-hero__title{font-size:clamp(32px,4vw,54px);line-height:1.12;font-weight:800;margin:0}
.landing-hero__subtitle{font-size:clamp(16px,2vw,20px);line-height:1.6;margin:0;color:rgba(241,245,249,0.85)}
.landing-hero__actions{display:flex;flex-wrap:wrap;gap:14px}
.landing-hero__note{font-size:14px;color:rgba(226,232,240,0.7)}
.landing-hero__panel{display:flex;flex-direction:column;gap:18px}
.panel-card{background:rgba(15,23,42,0.35);border:1px solid rgba(148,163,184,0.25);border-radius:20px;padding:26px 24px;backdrop-filter:blur(16px)}
.panel-card h2,.panel-card h3{margin-top:0;margin-bottom:12px;font-size:20px;font-weight:700;color:#fff}
.panel-card p{margin:0;color:rgba(226,232,240,0.82);line-height:1.6}
.panel-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:rgba(226,232,240,0.85)}
.panel-card li{line-height:1.5}

.landing-stats{padding:clamp(70px,10vw,120px) 0;background:#0f172a;color:#e2e8f0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.stat{background:rgba(15,23,42,0.45);border:1px solid rgba(100,116,139,0.4);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(12px)}
.stat-label{text-transform:uppercase;font-size:12px;letter-spacing:0.16em;color:rgba(148,163,184,0.8)}
.stat-value{font-size:clamp(30px,4vw,46px);font-weight:800;color:#f8fafc}
.stat-detail{font-size:14px;line-height:1.55;color:rgba(226,232,240,0.72)}

.landing-platform{padding:clamp(80px,11vw,140px) 0;background:#f6f8fb}
.landing-platform__intro{max-width:720px;margin:0 auto 48px auto;text-align:center;display:flex;flex-direction:column;gap:20px}
.landing-platform__intro h2{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:700;color:#0b1220}
.landing-platform__intro p{margin:0;font-size:17px;line-height:1.6;color:#334155}
.landing-platform__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.platform-tile{background:#fff;border-radius:18px;box-shadow:0 24px 48px rgba(15,23,42,0.08);padding:32px 28px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(226,232,240,0.9)}
.platform-tile h3{margin:0;font-size:20px;color:#0b1220}
.platform-tile p{margin:0;font-size:16px;line-height:1.6;color:#475569}

.landing-audiences{padding:clamp(80px,12vw,150px) 0;background:linear-gradient(180deg,#0b1220 0%,#101f3d 100%);color:#f1f5f9}
.landing-audiences h2{text-align:center;font-size:clamp(28px,3.2vw,42px);max-width:780px;margin:0 auto 56px auto}
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.audience-card{background:rgba(15,23,42,0.55);border:1px solid rgba(148,163,184,0.35);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;gap:14px}
.audience-card h3{margin:0;font-size:20px;color:#f8fafc}
.audience-card p{margin:0;color:rgba(226,232,240,0.78);line-height:1.6}
.audience-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:rgba(226,232,240,0.8)}

.landing-journey{padding:clamp(90px,13vw,160px) 0;background:#f8fafc}
.journey-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,56px);align-items:center}
.journey-copy{display:flex;flex-direction:column;gap:22px}
.journey-copy h2{margin:0;font-size:clamp(28px,3.2vw,40px);color:#0b1220}
.journey-copy p{margin:0;font-size:17px;line-height:1.7;color:#334155}
.journey-steps{display:flex;flex-direction:column;gap:18px}
.journey-step{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:16px;padding:18px 20px;border:1px solid rgba(226,232,240,0.9);box-shadow:0 16px 32px rgba(15,23,42,0.06)}
.step-index{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#005EB8;color:#fff;font-weight:700;font-size:14px}
.journey-step h3{margin:0 0 6px 0;font-size:17px;color:#0b1220}
.journey-step p{margin:0;color:#475569;line-height:1.6}
.journey-visual{display:flex;flex-direction:column;gap:18px}
.journey-visual__card{background:linear-gradient(135deg,#1f57ff 0%,#0ea5e9 100%);color:#f8fafc;border-radius:22px;padding:28px 26px;box-shadow:0 26px 48px rgba(30,64,175,0.28)}
.journey-visual__card.alt{background:linear-gradient(135deg,#101f3d 0%,#1f57ff 100%)}
.journey-visual__title{margin:0 0 10px 0;font-weight:600;font-size:16px;letter-spacing:0.05em;text-transform:uppercase;color:rgba(15,23,42,0.16);mix-blend-mode:screen}
.journey-visual__figure{margin:0 0 12px 0;font-size:20px;font-weight:700;color:#f8fafc}
.journey-visual__card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:rgba(241,245,249,0.86)}

.landing-differentiators{padding:clamp(80px,12vw,140px) 0;background:#fff}
.landing-differentiators h2{text-align:center;margin:0 auto 48px auto;font-size:clamp(26px,3vw,38px);color:#0b1220}
.differentiator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
.differentiator-card{background:#f1f5f9;border-radius:18px;padding:28px 26px;border:1px solid rgba(203,213,225,0.9);box-shadow:0 18px 34px rgba(15,23,42,0.08);display:flex;flex-direction:column;gap:12px}
.differentiator-card h3{margin:0;font-size:18px;color:#0b1220}
.differentiator-card p{margin:0;color:#475569;line-height:1.6}

.landing-cta{padding:clamp(90px,12vw,150px) 0;background:linear-gradient(120deg,#0b1220 0%,#1f57ff 50%,#0ea5e9 100%);color:#f8fafc}
.landing-cta .landing-container{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.landing-cta__content h2{margin:0;font-size:clamp(28px,3.2vw,42px);font-weight:700}
.landing-cta__content p{margin:0;font-size:17px;line-height:1.6;color:rgba(226,232,240,0.82)}
.landing-cta__actions{display:flex;flex-wrap:wrap;gap:16px}

.btn.ghost{background:rgba(248,250,252,0.12);color:#f8fafc;border:1px solid rgba(248,250,252,0.65)}
.btn.ghost:hover{background:rgba(248,250,252,0.22);color:#0b1220}

@media (max-width:960px){
  .landing-hero .landing-container{grid-template-columns:1fr}
  .landing-hero__panel{flex-direction:row;flex-wrap:wrap}
  .panel-card{flex:1 1 260px}
}

@media (max-width:720px){
  .landing-hero__actions{flex-direction:column;align-items:flex-start}
  .landing-hero__note{max-width:300px}
  .landing-audiences h2{margin-bottom:40px}
  .landing-cta .landing-container{align-items:stretch}
}

@media (max-width:540px){
  .landing-page{gap:64px}
  .stats-grid{gap:18px}
  .stat{padding:22px 20px}
  .journey-step{flex-direction:column}
  .journey-visual__card{padding:24px 22px}
}

/* Tooltip styles */
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: #6b7280;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  transition: background-color 0.2s ease;
  position: relative;
}

.tooltip-icon:hover {
  background: #374151;
}

.tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  padding: 10px 14px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
  white-space: normal;
  width: 320px;
  max-width: 90vw;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

.tooltip-icon:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Ensure tooltip doesn't get cut off */
.stat-card {
  position: relative;
  overflow: visible;
}

/* Ensure tooltips appear below the sticky header */
.tooltip-content {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 12px;
}

/* Adjust tooltip positioning for better visibility */
.tooltip-icon {
  z-index: 10;
}

.tooltip-icon:hover .tooltip-content {
  z-index: 1001;
}

/* Responsive tooltip adjustments */
@media (max-width: 768px) {
  .tooltip-content {
    width: 280px;
    max-width: 85vw;
    font-size: 11px;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .tooltip-content {
    width: 240px;
    max-width: 80vw;
    font-size: 10px;
    padding: 6px 10px;
  }
}

/* Editable fields styles */
.editable-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.field-value {
  flex: 1;
  word-break: break-word;
}

.field-input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  min-width: 0;
}

.field-input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.edit-btn, .save-btn, .cancel-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-btn:hover, .save-btn:hover, .cancel-btn:hover {
  opacity: 1;
  background-color: #f3f4f6;
}

.save-btn {
  color: #059669;
}

.cancel-btn {
  color: #dc2626;
}

.editable-field.editing .field-value {
  display: none;
}

.editable-field.editing .field-input {
  display: block;
}

.editable-field.editing .edit-btn {
  display: none;
}

.editable-field.editing .save-btn,
.editable-field.editing .cancel-btn {
  display: flex;
}

/* Ensure both specs and summary sections work - with higher specificity */
.editable-specs .editable-field.editing .field-value,
.editable-summary .editable-field.editing .field-value {
  display: none !important;
}

.editable-specs .editable-field.editing .field-input,
.editable-summary .editable-field.editing .field-input {
  display: block !important;
}

.editable-specs .editable-field.editing .edit-btn,
.editable-summary .editable-field.editing .edit-btn {
  display: none !important;
}

.editable-specs .editable-field.editing .save-btn,
.editable-specs .editable-field.editing .cancel-btn,
.editable-summary .editable-field.editing .save-btn,
.editable-summary .editable-field.editing .cancel-btn {
  display: flex !important;
}

/* Debug: Force visibility for testing */
.editable-field.editing .field-value {
  display: none !important;
}

.editable-field.editing .field-input {
  display: block !important;
}

.editable-field.editing .edit-btn {
  display: none !important;
}

.editable-field.editing .save-btn,
.editable-field.editing .cancel-btn {
  display: flex !important;
}


.editable-field.saving .save-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

.editable-field.error .field-input {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Mobile adjustments for editable fields */
@media (max-width: 768px) {
  .editable-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .field-input {
    width: 100%;
  }
  
  .edit-btn, .save-btn, .cancel-btn {
    align-self: flex-end;
  }
}

/* Summary section editable fields */
.editable-summary .editable-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  min-height: 28px;
}

.editable-summary .field-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.editable-summary .field-value {
  text-align: right;
  min-width: 60px;
  word-break: break-word;
}

.editable-summary .field-input {
  min-width: 80px;
  max-width: 120px;
  text-align: right;
  padding: 2px 6px;
  font-size: 13px;
}

.editable-summary .edit-btn, 
.editable-summary .save-btn, 
.editable-summary .cancel-btn {
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  padding: 2px;
}

.editable-summary .editable-field.editing .field-value {
  display: none;
}

.editable-summary .editable-field.editing .field-input {
  display: block;
}

.editable-summary .editable-field.editing .edit-btn {
  display: none;
}

.editable-summary .editable-field.editing .save-btn,
.editable-summary .editable-field.editing .cancel-btn {
  display: flex;
}

/* Mobile adjustments for summary section */
@media (max-width: 768px) {
  .editable-summary .editable-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .editable-summary .field-container {
    width: 100%;
    justify-content: space-between;
  }
  
  .editable-summary .field-input {
    max-width: none;
    width: 100%;
    text-align: left;
  }
}