/* THIH Journey v3.1 — cache-busting path refinements */

/* Keep the approved curved path exactly as-is; only refine the milestone/card relationships. */
.journey-path .journey-card{position:relative;}

@media (min-width:901px){
  /* Getting Started: more breathing room from the path. */
  .buyer-journey-path .journey-stop:nth-child(1) .journey-card{left:-35px !important;}

  /* Financing: pull the card toward the path. */
  .buyer-journey-path .journey-stop:nth-child(2) .journey-card{left:-25px !important;}

  /* Touring Homes: pull the card toward the path. */
  .buyer-journey-path .journey-stop:nth-child(4) .journey-card{left:-25px !important;}

  /* Making an Offer: move the complete card/button treatment toward the path. */
  .buyer-journey-path .journey-stop:nth-child(5) .journey-card{left:25px !important;}

  /* Under Contract: nudge the complete stop slightly right. */
  .buyer-journey-path .journey-stop:nth-child(6) .journey-card{left:15px !important;}
}

/* Signature THIH dog-biscuit milestones. SVG background avoids generic icon fonts and renders consistently. */
.journey-path .journey-marker,
.journey-path .journey-stop:nth-child(even) .journey-marker{
  width:58px !important;
  height:36px !important;
  border:0 !important;
  border-radius:0 !important;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='72' viewBox='0 0 116 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f3d7a4'/%3E%3Cstop offset='.55' stop-color='%23deb879'/%3E%3Cstop offset='1' stop-color='%23c58d4c'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='0' dy='5' stdDeviation='4' flood-color='%23623d18' flood-opacity='.28'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23s)' fill='url(%23g)' stroke='%23b77e3e' stroke-width='2' d='M24 8c8 0 13 5 14 11h40c1-6 6-11 14-11 10 0 18 8 18 18 0 5-2 9-5 12 3 3 5 7 5 12 0 10-8 18-18 18-8 0-13-5-14-11H38c-1 6-6 11-14 11-10 0-18-8-18-18 0-5 2-9 5-12-3-3-5-7-5-12C6 16 14 8 24 8z'/%3E%3Cg fill='%23986a37' opacity='.55'%3E%3Cellipse cx='58' cy='41' rx='8' ry='6'/%3E%3Ccircle cx='45' cy='29' r='4'/%3E%3Ccircle cx='55' cy='24' r='4'/%3E%3Ccircle cx='66' cy='26' r='4'/%3E%3Ccircle cx='73' cy='34' r='4'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  box-shadow:none !important;
  z-index:3 !important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease !important;
}

/* Restore milestone positions to hug the existing path, not the cards. */
@media (min-width:901px){
  .journey-path .journey-stop:nth-child(odd) .journey-marker{right:-91px !important;left:auto !important;top:4px !important;}
  .journey-path .journey-stop:nth-child(even) .journey-marker{left:-91px !important;right:auto !important;top:4px !important;}
}

.journey-path .journey-card:hover .journey-marker{
  transform:translateY(-4px) scale(1.06) rotate(-1deg) !important;
  filter:brightness(1.05) saturate(1.06) !important;
}
.journey-path .journey-stop:nth-child(even) .journey-card:hover .journey-marker{
  transform:translateY(-4px) scale(1.06) rotate(1deg) !important;
}

/* Quiet movement: card lift + path brightening. */
.journey-path:before{transition:filter .32s ease,opacity .32s ease !important;}
.journey-path:has(.journey-stop:hover):before{filter:saturate(1.12) brightness(1.08);opacity:1;}
.journey-path .journey-card{transition:transform .26s cubic-bezier(.2,.75,.25,1),box-shadow .26s ease,border-color .26s ease !important;}
.journey-path .journey-card:hover{transform:translateY(-5px);box-shadow:0 27px 60px rgba(7,23,37,.17);border-color:rgba(0,84,166,.34);}

/* Final milestone: a small brass house key. */
.journey-path .journey-stop:last-child .journey-marker{
  width:64px !important;
  height:42px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='84' viewBox='0 0 128 84'%3E%3Cdefs%3E%3ClinearGradient id='k' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23f1cf73'/%3E%3Cstop offset='.52' stop-color='%23c99a36'/%3E%3Cstop offset='1' stop-color='%238d621d'/%3E%3C/linearGradient%3E%3Cfilter id='d'%3E%3CfeDropShadow dx='0' dy='5' stdDeviation='4' flood-color='%23553810' flood-opacity='.3'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)' transform='rotate(15 64 42)'%3E%3Ccircle cx='31' cy='36' r='20' fill='url(%23k)'/%3E%3Ccircle cx='31' cy='36' r='9' fill='%23fff4cf' stroke='%23a77924' stroke-width='4'/%3E%3Crect x='47' y='31' width='60' height='11' rx='5.5' fill='url(%23k)'/%3E%3Crect x='88' y='39' width='9' height='15' fill='%23a87522'/%3E%3Crect x='102' y='39' width='9' height='11' fill='%23a87522'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.journey-path .journey-stop:last-child .journey-card:hover .journey-marker{
  transform:translateY(-4px) rotate(-2deg) scale(1.045) !important;
  filter:brightness(1.06) drop-shadow(0 8px 7px rgba(75,48,13,.24)) !important;
}

/* Mobile/tablet: keep milestones readable on the single-column path. */
@media (max-width:900px){
  .buyer-journey-path .journey-card{left:auto !important;}
  .journey-path .journey-marker,
  .journey-path .journey-stop:nth-child(even) .journey-marker,
  .journey-path .journey-stop:nth-child(odd) .journey-marker{
    left:-11px !important;
    right:auto !important;
    top:2px !important;
    width:54px !important;
    height:34px !important;
  }
  .journey-path .journey-stop:last-child .journey-marker{left:-14px !important;width:60px !important;height:40px !important;}
}

@media (prefers-reduced-motion:reduce){
  .journey-path:before,.journey-path .journey-card,.journey-path .journey-marker{transition:none !important;}
  .journey-path .journey-card:hover,.journey-path .journey-card:hover .journey-marker{transform:none !important;}
}

/* v3.6 Seller Journey geometry mirrors the approved Buyer Journey exactly.
   Buyer remains untouched. Seller now uses the same stop-by-stop horizontal offsets
   and the same milestone relationship that already works on Buyer. */
@media (min-width:901px){
  .seller-journey-path .journey-stop:nth-child(1) .journey-card{left:-35px !important;}
  .seller-journey-path .journey-stop:nth-child(2) .journey-card{left:-25px !important;}
  .seller-journey-path .journey-stop:nth-child(3) .journey-card{left:0 !important;}
  .seller-journey-path .journey-stop:nth-child(4) .journey-card{left:-25px !important;}
  .seller-journey-path .journey-stop:nth-child(5) .journey-card{left:25px !important;}
  .seller-journey-path .journey-stop:nth-child(6) .journey-card{left:15px !important;}
  .seller-journey-path .journey-stop:nth-child(7) .journey-card{left:0 !important;}

  /* Use the exact same milestone positioning as Buyer. */
  .seller-journey-path .journey-stop:nth-child(odd) .journey-marker{right:-91px !important;left:auto !important;top:4px !important;}
  .seller-journey-path .journey-stop:nth-child(even) .journey-marker{left:-91px !important;right:auto !important;top:4px !important;}
}
