/* "Five questions" health-check roadmap: a thick road that snakes down the section.
   Each step is a big white icon circle at alternate ends of the road (the road wraps around it),
   with "STEP 0X" and the question on the other side. Same design on phones and desktop, just smaller.
   As you scroll, a pink line travels the road with a dot at its tip; the finish card flips in at the end (roadmap.js). */
.reference-replica .df-roadmap{max-width:760px;margin:36px auto 0;text-align:center}
.reference-replica .df-roadmap h3{font:clamp(34px,4.2vw,54px)/1.08 Podium,sans-serif;color:#1b1238;margin:0 auto 30px;max-width:820px}
.reference-replica .df-roadmap .df-story-kicker{margin-bottom:10px}

/* --icon: circle size, --gap: space between circle and road, --road: road thickness */
.df-road{position:relative;--icon:112px;--gap:16px;--road:11px}
.df-road-path{position:relative;padding:calc(var(--road) / 2) 0 28px}

/* The road (roadmap.js draws it around each circle) */
.df-road-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.df-road-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--road)}
.df-road-base{stroke:#e8def2}
.df-road-progress{stroke:url(#df-road-glow)}
.df-road-marker circle{fill:#fff;stroke:#da3f96;stroke-width:4}
.df-road-marker .df-road-marker-pulse{fill:#da3f9630;stroke:none;transform-box:fill-box;transform-origin:center;animation:df-road-pulse 1.6s ease-out infinite}
@keyframes df-road-pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* One accent colour per step, pink to deep purple */
.df-road-step[data-step="1"]{--c:#e0489c}
.df-road-step[data-step="2"]{--c:#c23a8e}
.df-road-step[data-step="3"]{--c:#9c3589}
.df-road-step[data-step="4"]{--c:#6f2f84}
.df-road-step[data-step="5"]{--c:#46287a}

/* Each row is exactly as tall as the loop of road around its circle */
.df-road-steps{position:relative;z-index:1;list-style:none;margin:0;padding:0}
.df-road-step{position:relative;height:calc(var(--icon) + var(--gap) * 2);box-sizing:border-box;perspective:1000px}

/* The card: sits inside the loop, its rounded end follows the road's curve around the circle.
   --inset: space between the card edge and the circle */
.df-road-tile{--inset:7px;position:absolute;top:calc(var(--gap) - var(--inset));bottom:calc(var(--gap) - var(--inset));left:calc(var(--gap) - var(--inset));right:calc(var(--gap) - var(--inset));display:flex;align-items:center;box-sizing:border-box;border-radius:999px;background:#fff;border:1px solid #efe7f6;box-shadow:0 14px 34px #35236914,0 2px 6px #3523690d;transform-origin:50% 0;transition:transform .75s cubic-bezier(.2,.9,.25,1.12),opacity .45s}
.df-road-step[data-side="left"] .df-road-tile{padding:0 28px 0 calc(var(--icon) + var(--inset) + 22px)}
.df-road-step[data-side="right"] .df-road-tile{padding:0 calc(var(--icon) + var(--inset) + 22px) 0 28px}

/* Icon circle inside the card, tinted with the step colour */
.df-road-icon{position:absolute;top:var(--inset);width:var(--icon);height:var(--icon);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#fff 0%,color-mix(in srgb,var(--c) 8%,#fff) 55%,color-mix(in srgb,var(--c) 18%,#fff) 100%);color:var(--c);box-shadow:0 8px 20px #1b123822,inset 0 -3px 8px #1b12380d}
.df-road-step[data-side="left"] .df-road-icon{left:var(--inset)}
.df-road-step[data-side="right"] .df-road-icon{right:var(--inset)}
.df-road-icon svg{width:46%;height:46%;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* STEP 0X + question, next to the circle */
.df-road-copy{flex:1;min-width:0;font-size:14px;line-height:1.1}
.df-road-step[data-side="left"] .df-road-copy{text-align:left}
.df-road-step[data-side="right"] .df-road-copy{text-align:right}
/* STEP 0X • QUESTION X OF 5 on one line, then the question */
.df-road-label{display:inline;line-height:1;margin:0}
.reference-replica .df-road-label span{font:400 18px/1 Podium,Impact,sans-serif;text-transform:uppercase;color:#1b1238;letter-spacing:.5px}
.reference-replica .df-road-label b{font:400 18px/1 Podium,Impact,sans-serif;color:var(--c)}
.reference-replica .df-road-step small{display:inline;font:700 10.5px/1 ReplicaInter,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#8d7fa3;margin:0;vertical-align:1px}
.reference-replica .df-road-step small::before{content:"\2022";margin:0 8px;color:color-mix(in srgb,var(--c) 55%,#c9bdd8)}
.reference-replica .df-road-step strong{display:block;font:600 clamp(21px,2.4vw,26px)/1.22 Poppins,'Noto Sans Tamil',ReplicaInter,Arial,sans-serif;letter-spacing:-.3px;color:#1b1238;margin:8px 0 0}

/* Flip: each card flips down into place when the dot reaches its step (and flips away if you scroll back up) */
.df-road.is-ready .df-road-step:not(.is-in) .df-road-tile{opacity:0;transform:rotateX(-88deg)}
.df-road-step.is-in .df-road-tile{opacity:1;transform:none}

/* Icon motion */
.df-road .draw{stroke-dasharray:160;animation:df-story-draw 3.4s ease-in-out infinite}
.df-road .ripple{transform-origin:48px 45px;animation:df-story-ripple 2.2s ease-out infinite}
.df-road .scan{transform-origin:48px 45px;animation:df-story-spin 3s linear infinite}
.df-road .grow{transform-origin:center 78px;animation:df-story-grow 3.4s ease-out infinite}
.df-road .two{animation-delay:.45s}
.df-road .three{animation-delay:.9s}

/* Finish: the road runs into the dark card with the form */
.df-road-finish{display:flex;flex-direction:column;align-items:center;margin-top:0}

.df-road-cta{width:100%;max-width:560px;box-sizing:border-box;margin:0;padding:26px 28px 22px;background:linear-gradient(160deg,#352369,#1b1238);border:0;border-radius:20px;text-align:center;box-shadow:0 22px 50px #1b123855,0 0 0 1px #da3f9640,0 0 42px 6px #da3f9659}
.reference-replica .df-road-cta small{display:block;font:800 11px/1 ReplicaInter,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#f2b8e0;margin-bottom:8px}
.reference-replica .df-road-cta strong{display:block;font:800 28px/1.25 ReplicaInter,Arial,sans-serif;color:#fff}
.reference-replica .df-road-cta>span{display:block;font:16px/1.5 ReplicaInter,Arial,sans-serif;color:#d9cfe8;margin:8px auto 18px;max-width:420px}
.reference-replica .df-road-cta .r-button{width:100%;margin:0;font-size:clamp(24px,3.4vw,34px);padding:16px 14px;white-space:nowrap}
.reference-replica .df-road-cta .r-button span{display:inline;color:inherit;font:inherit;margin:0}
.reference-replica .df-road-cta p{font:13px/1.5 ReplicaInter,Arial,sans-serif;color:#b9aecb;margin:12px 0 0;text-transform:none}
.reference-replica .df-road-cta > p{text-align:center}
/* "Welcome back" replaces the form: drop the "Start your health check" line so it doesn't read twice */
.df-road-cta:has(.df-resume:not([hidden]))>strong{display:none}

/* Name + mobile form inside the finish card */
.df-road-form{text-align:left;margin:4px 0 0}
.reference-replica .df-road-form label{display:block;font:600 13px/1.3 ReplicaInter,Arial,sans-serif;color:#e4dcef;margin:12px 0 6px}
.reference-replica .df-road-form input{display:block;width:100%;box-sizing:border-box;font:17px/1.3 ReplicaInter,Arial,sans-serif;color:#1b1238;background:#fff;border:2px solid transparent;border-radius:10px;padding:13px 14px;margin:0}
.reference-replica .df-road-form input::placeholder{color:#9a91ab}
.reference-replica .df-road-form input:focus{outline:none;border-color:#da3f96;box-shadow:0 0 0 4px #da3f9633}
.reference-replica .df-road-form input[aria-invalid="true"]{border-color:#ff8a7a}
.reference-replica .df-road-cta .df-road-note{font:12.5px/1.45 ReplicaInter,Arial,sans-serif;color:#c9bddc;margin:10px 0 0;text-align:left}
.df-road-error{font:600 13px/1.4 ReplicaInter,Arial,sans-serif;color:#ffb3a0;min-height:0;margin:8px 0 0}
.df-road-error:empty{display:none}
.reference-replica .df-road-form .r-button{margin-top:14px}

/* "Welcome back" panel shown instead of the name + mobile forms while a check is unfinished */
.df-resume{text-align:center;padding:6px 0 2px}
.reference-replica .df-resume-hello{display:block;font:800 22px/1.25 ReplicaInter,Arial,sans-serif;color:inherit;margin:4px 0 6px}
.reference-replica .df-resume-where{font:16px/1.5 ReplicaInter,Arial,sans-serif;opacity:.85;margin:0 0 16px!important;text-align:center!important}
.reference-replica .df-resume .df-resume-go{width:100%;margin:0}
.reference-replica .df-road-cta .df-resume-hello{color:#fff;font-size:28px}
.reference-replica .df-road-cta .df-resume-where{color:#d9cfe8}
.reference-replica .df-resume .r-button span{display:inline;margin:0;color:inherit;font:inherit}
.reference-replica .df-road-cta [hidden],.reference-replica .r-checkout-inner [hidden]{display:none!important}

/* Finish card: hidden until the dot reaches the end, then flips down into place and starts glowing;
   flips away again if the visitor scrolls back up, like the step cards */
.df-road-finish{perspective:1100px}
.df-road.is-ready .df-road-finish .df-road-cta{transform-origin:50% 0;transition:transform .8s cubic-bezier(.2,.9,.25,1.12),opacity .45s,visibility 0s linear .8s}
.df-road.is-ready .df-road-finish:not(.is-in) .df-road-cta{opacity:0;visibility:hidden;transform:rotateX(-88deg)}
.df-road.is-ready .df-road-finish.is-in .df-road-cta{opacity:1;visibility:visible;transform:none;transition-delay:0s;animation:df-road-cta-glow 2.4s ease-in-out 1s infinite}
@keyframes df-road-cta-glow{0%,100%{box-shadow:0 22px 50px #1b123855,0 0 0 1px #da3f9640,0 0 42px 6px #da3f9659}50%{box-shadow:0 22px 50px #1b123855,0 0 0 1px #da3f9670,0 0 64px 14px #da3f968c}}

/* Smaller screens: same design, scaled down */
@media(max-width:767px){
  .reference-replica .df-roadmap{margin-top:24px}
  .reference-replica .df-roadmap h3{margin-bottom:20px}
  .df-road{--icon:68px;--gap:16px;--road:7px}
  .df-road-path{padding-bottom:20px}
  .df-road-tile{--inset:6px}
  .df-road-step[data-side="left"] .df-road-tile{padding:0 14px 0 calc(var(--icon) + var(--inset) + 12px)}
  .df-road-step[data-side="right"] .df-road-tile{padding:0 calc(var(--icon) + var(--inset) + 12px) 0 14px}
  .df-road-icon svg{stroke-width:5}
  .reference-replica .df-road-label span,.reference-replica .df-road-label b{font-size:14px}
  .reference-replica .df-road-step small{font-size:8.5px;letter-spacing:.8px}
  .reference-replica .df-road-step small::before{margin:0 5px}
  .reference-replica .df-road-step strong{font-size:16px;line-height:1.25;margin-top:5px;letter-spacing:-.2px}
  .df-road-cta{padding:22px 18px 18px}
  .reference-replica .df-road-cta strong,.reference-replica .df-road-cta .df-resume-hello{font-size:23px}
  .reference-replica .df-road-cta>span{font-size:14.5px}
  .reference-replica .df-road-cta .r-button{font-size:22px;padding:14px 10px}
  .reference-replica .df-road-form input{font-size:16px;padding:12px}
}

@media(prefers-reduced-motion:reduce){
  .df-road-tile{transition:none}
  .df-road.is-ready .df-road-step:not(.is-in) .df-road-tile{transform:none}
  .df-road-marker .df-road-marker-pulse,.df-road .draw,.df-road .ripple,.df-road .scan,.df-road .grow{animation:none}
  .df-road.is-ready .df-road-finish.is-in .df-road-cta{animation:none}
  .df-road.is-ready .df-road-finish .df-road-cta{transition:opacity .3s,visibility 0s linear .3s}
  .df-road.is-ready .df-road-finish:not(.is-in) .df-road-cta{transform:none}
}