/* ============ Process Roadmap — perspective winding road + pin markers ============ */
.roadmap-embed{position:relative; width:100%; aspect-ratio:16/9; max-width:1600px; margin:42px auto 0}
.roadmap-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; border-radius:var(--radius-lg); overflow:hidden}
.road{margin-top:42px; position:relative}

.road-canvas{position:relative; width:100%; aspect-ratio:1180/1060; border-radius:26px;
  background:
    radial-gradient(90% 70% at 80% 8%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 60%),
    linear-gradient(155deg, #f7f9fd 0%, #eef2f8 55%, #e6ebf4 100%);
  border:1px solid var(--glass-line); box-shadow:var(--sh-2), var(--glass-inset); overflow:hidden}
@media(max-width:820px){ .road-canvas{display:none} }

.road-svg{position:absolute; inset:0; width:100%; height:100%}
.road-shadow{fill:rgba(20,27,41,.13); transform:translateY(10px); filter:blur(11px)}
.road-fill{fill:url(#roadFill); stroke:#fff; stroke-width:2}
.road-dash{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-dasharray:2 20; opacity:.9}

/* milestone marker */
.rm{position:absolute; transform:translate(-50%,-100%); transition:z-index 0s}
.rm-pin{position:relative; display:block; width:calc(46px * var(--sc,1)); height:calc(46px * var(--sc,1));
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:radial-gradient(circle at 60% 35%, color-mix(in srgb,var(--c) 55%,#fff) 0%, var(--c) 52%, color-mix(in srgb,var(--c) 78%,#000) 100%);
  box-shadow:0 calc(10px*var(--sc,1)) calc(20px*var(--sc,1)) color-mix(in srgb,var(--c) 42%,transparent), inset 0 2px 4px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.18);
  border:2.5px solid #fff; transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.rm-pin::after{content:""; position:absolute; left:50%; top:50%; width:38%; height:38%; transform:translate(-50%,-50%) rotate(45deg); border-radius:50%; background:rgba(255,255,255,.9)}
.rm-n{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg); z-index:2; font-size:calc(18px*var(--sc,1)); font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; line-height:1}
.rm.hot .rm-pin{transform:rotate(-45deg) scale(1.13)}
/* ground shadow under pin tip */
.rm::after{content:""; position:absolute; left:50%; bottom:-5px; width:calc(26px*var(--sc,1)); height:calc(8px*var(--sc,1)); border-radius:50%; transform:translateX(-50%); background:rgba(20,27,41,.18); filter:blur(3px); z-index:-1}

/* label: title always shown, detail on hover */
.rm-label{position:absolute; left:50%; transform:translateX(-50%); width:170px; text-align:center; transition:.2s}
.rm.below .rm-label{top:calc(100% + 7px)}
.rm.above .rm-label{bottom:calc(100% + 7px)}
.rm-t{font-size:15.5px; font-weight:700; letter-spacing:-.01em; line-height:1.18}
.rm-detail{max-height:0; opacity:0; overflow:hidden; transition:max-height .26s ease, opacity .2s ease}
.rm.hot .rm-detail{max-height:120px; opacity:1; margin-top:5px}
.rm-s{font-size:12px; color:var(--ink); line-height:1.4; text-wrap:pretty}
.rm-pay{display:inline-block; margin-top:8px; font-size:9.5px; font-weight:700; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:100px; border:1px solid}

/* mobile vertical */
.road-mobile{display:none}
@media(max-width:820px){
  .road-mobile{display:flex; flex-direction:column; gap:6px; position:relative; margin-top:8px; padding-left:6px}
  .road-mobile::before{content:""; position:absolute; left:29px; top:20px; bottom:20px; width:2.5px; background:repeating-linear-gradient(var(--border-2) 0 6px, transparent 6px 12px)}
  .rmm{display:flex; align-items:flex-start; gap:18px; padding:10px 0; position:relative; z-index:1}
  .rmm-pin{position:relative; display:block; width:44px; height:44px; flex-shrink:0; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    background:radial-gradient(circle at 60% 35%, color-mix(in srgb,var(--c) 55%,#fff) 0%, var(--c) 52%, color-mix(in srgb,var(--c) 78%,#000) 100%);
    box-shadow:0 6px 14px color-mix(in srgb,var(--c) 40%,transparent), inset 0 2px 4px rgba(255,255,255,.4); border:2.5px solid #fff}
  .rmm-pin .rm-n{font-size:17px}
  .rmm .rm-t,.rmm .rm-s{text-align:left}
}