/* Sale comparison: route geometry and inline buyout stages. */
.sale-routes {
  border-top: var(--size-1) solid var(--color-ink);
}
.sale-route {
  display: grid;
  grid-template-columns: var(--route-label-width) minmax(0,1fr);
  gap: var(--space-8);
  align-items: center;
  border-bottom: var(--size-1) solid var(--color-line);
}
.route-label h3 {
  font-size: var(--text-lg);
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: var(--space-4) 0 0;
}
.route-label .eyebrow {
  font-size: var(--text-micro);
}
.sale-route--long {
  color: var(--color-muted);
}
.route-map {
  position: relative;
  min-width: 0;
}
.route-map ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sale-route--long .route-map {
  height: var(--route-redesign-height);
  overflow: hidden;
}
.comparison-road {
  position: absolute;
  left: 0;
  top: var(--space-8);
  width: 100%;
  height: calc(100% - 2 * var(--space-8));
  overflow: visible;
}
.comparison-road path {
  fill: none;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.road-edge {
  stroke: var(--color-line);
  stroke-width: var(--route-labelled-width);
}
.road-asphalt {
  stroke: var(--color-canvas);
  stroke-width: calc(var(--route-labelled-width) - 2 * var(--road-outline-width));
}
.road-divider {
  stroke: var(--color-line);
  stroke-width: var(--road-marking-width);
  stroke-dasharray: 12 16;
  opacity: .4;
  animation: road-stripes var(--road-marking-duration) linear infinite;
}
.road-divider-highlight {
  stroke-width: var(--road-marking-width);
  opacity: .4;
  animation: road-stripes var(--road-marking-duration) linear infinite;
  stroke: var(--color-accent);
  stroke-dasharray: 12 100;
}
.sale-route--long ol {
  position: absolute;
  inset: 0;
}
.sale-route--long li {
  position: absolute;
  transform: translate(-50%,-50%);
  width: var(--route-caption-width);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-ink);
  z-index: 1;
}
.sale-route--long li:nth-child(1) {
  left: 10%;
  top: 39%;
}
.sale-route--long li:nth-child(2) {
  left: 30%;
  top: 61%;
}
.sale-route--long li:nth-child(3) {
  left: 50%;
  top: 39%;
}
.sale-route--long li:nth-child(4) {
  left: 70%;
  top: 61%;
}
.sale-route--long li:nth-child(5) {
  left: 90%;
  top: 39%;
}
.sale-route--long li>span {
  display: inline-block;
  padding: var(--space-2);
  background: var(--color-canvas);
}
.sale-route--direct .route-map {
  height: var(--route-direct-height);
}
.sale-route--direct ol {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--space-8);
  align-items: center;
  height: 100%;
}
.sale-route--direct li {
  position: relative;
  min-width: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}
.sale-route--direct li:not(:last-child):after {
  content: '';
  position: absolute;
  left: calc(100% + var(--space-1));
  top: 50%;
  width: var(--space-6);
  height: var(--route-connector-height);
  transform: translateY(-50%);
  background: linear-gradient(90deg,var(--color-line) 0 35%,var(--color-accent) 48% 53%,var(--color-line) 66% 100%);
  background-size: 250% 100%;
  clip-path: polygon(0 40%,85% 40%,85% 0,100% 50%,85% 100%,85% 60%,0 60%);
  animation: route-link-flow var(--route-link-duration) linear infinite;
}
.sale-route--direct li:nth-child(2):after {
  animation-delay: -1s;
}
.sale-route--direct li:nth-child(3):after {
  animation-delay: -2s;
}
.route-conclusion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  padding-top: var(--space-8);
}
.route-conclusion>p {
  font-size: var(--text-lg);
  margin: 0;
}
.route-conclusion>div>p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--space-6);
}
@media(max-width:1000px) {
  .sale-route {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-8);
  }
  .route-label h3 {
    margin-top: var(--space-2);
  }
  .sale-route--direct .route-map {
    height: auto;
    padding-block: var(--space-4);
  }
}
@media(max-width:700px) {
  .sale-route {
    grid-template-columns: 1fr;
    padding: var(--space-8) 0;
    gap: var(--space-6);
  }
  .sale-route--long .route-map {
    height: auto;
    padding-left: var(--space-6);
  }
  .comparison-road {
    display: none;
  }
  .sale-route--long ol {
    position: relative;
    display: grid;
    gap: var(--space-5);
    padding-left: var(--space-6);
  }
  .sale-route--long ol:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--space-4);
    border-inline: var(--size-1) solid var(--road-edge);
  }
  .sale-route--long ol:after {
    content: '';
    position: absolute;
    left: var(--size-7);
    top: 0;
    bottom: 0;
    width: var(--size-2);
    background-image: repeating-linear-gradient(to bottom,var(--color-accent) 0 var(--size-10),transparent var(--size-10) var(--space-6));
    background-size: var(--size-2) var(--space-6);
    animation: road-stripes-vertical var(--road-marking-duration) linear infinite;
  }
  .sale-route--long li:nth-child(n) {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    transform: none;
    text-align: left;
    font-size: var(--text-xs);
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
  }
  .sale-route--direct .route-map {
    height: auto;
  }
  .sale-route--direct ol {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
  }
  .sale-route--direct li {
    text-align: left;
    font-size: var(--text-sm);
  }
  .sale-route--direct li:not(:last-child):after {
    left: var(--space-2);
    top: calc(100% + var(--space-3));
    width: var(--route-connector-height);
    height: var(--space-6);
    transform: none;
    clip-path: polygon(45% 0,55% 0,55% 80%,100% 80%,50% 100%,0 80%,45% 80%);
    background-size: 100% 250%;
    animation-name: route-link-flow-vertical;
  }
  .route-conclusion {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
@media(prefers-reduced-motion:reduce) {
  .road-divider {
    animation: none;
  }
  .road-divider-highlight {
    animation: none;
  }
  .sale-route--long ol:after {
    animation: none;
  }
  .sale-route--direct li:after {
    animation: none;
  }
}
@keyframes road-stripes {
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes road-stripes-vertical {
  to {
    background-position: 0 var(--space-24);
  }
}
@keyframes route-link-flow {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes route-link-flow-vertical {
  from {
    background-position: 0 100%;
  }
  to {
    background-position: 0 0;
  }
}