/* ── SCENE ── */
.scene-section {
  position: relative;
  min-height: 100vh !important;
}

.scene-sticky {
  position: relative !important;
  top: 90px;
  height: calc(100vh - 90px) !important;
  overflow: hidden !important;
}


.scene-section{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.scene-section:not(.active){
    opacity:0;
    pointer-events:none;
}

/* ── SVG fills the whole sticky viewport ── */
.svg-stage {
  position: absolute; inset: 0; height: calc(100vh - 90px); 
  display: flex; align-items: center; justify-content: center;
}
.svg-mover {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center; will-change: transform;
}
/* desktop: fill height */
@media (min-width: 769px) {
  .svg-mover svg { height: 88vh; width: auto; max-width: 100%; display: block; }
}
/* pointer svg */
.ptr-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }

/* ── TITLE — top-left, over the scene ── */
.scene-title {
  position: absolute; top: 20px; left: 24px; right: 24px; z-index: 6;
  opacity: 0; transform: translateY(-10px);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.scene-title h2 {
  font-size: clamp(16px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--dark);
  margin: 0;
}
.scene-title p {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 15px;
  border: 1px solid rgba(23, 32, 51, 0.55);
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  color: var(--dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.scene-title p::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 5px;
}

/* ── BENEFITS / CHALLENGES — left side, overlaid like PPT ── */
.panels-left {
  position: absolute; left: 16px; top: 32%; transform: translateY(-40%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 6; opacity: 0; max-width: 240px;
}
.panel { border-radius: 10px; padding: 11px 14px; }
.panel.ben { background: var(--bg-gradient); color: white; }
.panel.chl { background: var(--chl); color: var(--dark); }
.panel h3  { font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.panel ul  { list-style: none; padding: 0; margin: 0; }
.panel ul li { font-size: 12px; line-height: initial; }
.panel ul li::before { content: "• "; }

@media (max-width: 1024px) {
  .panels-left { max-width: 140px; left: 4px; }
  .panel h3 { font-size: 11px; }
  .panel ul li { font-size: 9px; }
}

/* ── LABEL BOXES ── */
.lbl {
  position: absolute; display: flex; align-items: center; gap: 6px;
  background: var(--white); border-radius: 8px; padding: 5px 10px 5px 6px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  opacity: 0; transform: scale(0.85); z-index: 5;
}
.lbl .ico {
  width: 26px; height: 26px; background: var(--orange);
  border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lbl .ico svg { width: 14px; height: 14px; fill: white; }
.lbl span { font-size: 11px; font-weight: 600; color: var(--dark); line-height: 1.3; }

@media (max-width: 1024px) {
  .lbl { padding: 3px 7px 3px 4px; gap: 4px; }
  .lbl .ico { width: 20px; height: 20px; }
  .lbl .ico svg { width: 11px; height: 11px; }
  .lbl span { font-size: 9px; }
}

/* ── SCENE 7 Key Benefits box (center-top) ── */
/*#s7-keybox {
  position: absolute; top: 8%;
  color: white; border-radius: 12px; padding: 14px 18px;
  width: 220px; z-index: 6; opacity: 0;
}*/
/*#s7-keybox h3 { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
#s7-keybox ul li { font-size: 12px; line-height: initial; }
#s7-keybox ul li::before { content: "• "; }*/

#s1-panels{
  top: 23%;
}
#s2-panels{
  top: 35%;
}
#s3-panels,
#s4-panels,
#s5-panels{
  top: 30%;
}

#s7-panels{
  top: 22%;
  max-width: 230px;
}

/* ── SCENE 6 hierarchy ── */
#s6-hier {
  position: absolute; left: 16px; top: 100px;
  z-index: 6; opacity: 0;
}

/* ══════════════════════════════════════
   LABEL POSITIONS — matching PPT exactly
══════════════════════════════════════ */

/* SCENE 7: right side stack, lines go to man-with-phone */
#s7-lbl-tele     { top: 20%; left: 75%; }
#s7-lbl-peace    { top: 35%; left: 75%; }
#s7-lbl-holistic { top: 50%; left: 75%; }

/* SCENE 6: right side stack, lines go to hospital building right wall */
#s6-lbl-hub      { top: 25%; right: 3%; }
#s6-lbl-monitor  { top: 39%; right: 3%; }
#s6-lbl-esg      { top: 53%; right: 3%; }

/* SCENE 5: top-left label (Centralized Hub) + right stack 3 */
#s5-lbl-central  { top: 4%;  left: 30%; }
#s5-lbl-ai       { top: 16%; right: 2%; }
#s5-lbl-neutral  { top: 30%; right: 2%; }
#s5-lbl-his      { top: 44%; right: 2%; }

/* SCENE 4: top-right stack 3 + left (Fall Detected) + bottom-center (Patient Walk Out) */
#s4-lbl-rapid    { top: 4%; right: 3%; }
#s4-lbl-custom   { top: 22%; right: 3%; }
#s4-lbl-wearable { top: 40%; right: 3%; }
#s4-lbl-fall     { top: 18%; left: 22%; }
#s4-lbl-walkout  { bottom: 8%; left: 46%; transform: translateX(-50%); }

/* SCENE 3: top-center (Request cleaning) + left (Meal Ordering) + right stack 3 */
#s3-lbl-clean     { top: 10px;  left: 40%; }
#s3-lbl-meal      { top: 20%; left: 21%; }

#s3-lbl-bedside   { top: 30%; left: 78%; }
#s3-lbl-entertain { top: 45%; left: 78%; }
#s3-lbl-task      { top: 60%; left: 78%; }

/* SCENE 2: top-center (Health Info) + left (Digital Patient Card) + right stack 3 */
#s2-lbl-health   { top: 10%;  left: 35%; }
#s2-lbl-digital  { top: 25%; left: 25%; }
#s2-lbl-his      { top: 35%; right: 5%; }
#s2-lbl-pull     { top: 45%; right: 5%; }
#s2-lbl-manual   { top: 55%; right: 5%; }

/* SCENE 1: top stack (Smart, Voice) + left (Presence, Lighting) + right stack (Hub, Net, Cloud) + bottom-right (Temp, Shade) + bottom-center (TV) */
#s1-lbl-smart    { left:43%; top:0; }
#s1-lbl-voice    { left:60%; top:7.5%; }

#s1-lbl-presence { left:25%; top:23%; }
#s1-lbl-lighting { left:35%; top:10%; }

#s1-lbl-hub      { left:80%; top:22.5%; }
#s1-lbl-net      { left:80%; top:36%; }
#s1-lbl-cloud    { left:80%; top:51%; }

#s1-lbl-temp     { left:72%; top:65%; }
#s1-lbl-shade    { left:68%; top:75%; }
#s1-lbl-tv       { left:62%; top:87%; }

/* Scene 7 — remove scale, keep only vertical nudge if needed */
#s7-mover {
  transform: translateY(4%);
}

#s7-title {
  top: 20px;
  left: 24px;
  right: 24px;
  bottom: auto;
  text-align: left;
}

#s7-title h2 {
  font-size: clamp(16px, 2vw, 28px);
}

#s7-title p {
  font-size: 12px;
  color: var(--gray);
}

/*#s7-keybox {
  top: 8%;
  left: 3%;
  width: 250px;
}
.s7-line-anchor {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 280px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}*/

#s6-hier {
  top: 10%;
  transform: scale(1.05);
  transform-origin: top left;
}

#s6-hier svg {
  width: 230px;
  height: 230px;
}

#s6-hier .panel {
  margin-top: 18px !important;
  max-width: 230px !important;
  padding: 16px 18px;
}

#s6-hier .panel h3 {
  font-size: 12px;
}

#s6-hier .panel ul li {
  font-size: 12px;
  line-height: initial;
}

/* Scene 4 — remove scale, keep only positional nudge if needed */
#s4-mover {
  transform: translateX(5%) translateY(6%);
}

/* Scene 1 — remove scale entirely */
#s1-mover {
  /* no override — let .svg-mover CSS handle sizing uniformly */
}

#smartward{
  overflow: visible !important;
}

@media (min-width: 769px) {
  #smartward-journey {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  #journey-pin {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  #journey-pin .scene-section {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100vh !important;
    min-height: 0 !important;
    opacity: 0;
    pointer-events: none;
    padding: 0px 40px;
  }

  #journey-pin .scene-sticky {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 1024px) {
  #s7-lbl-tele,#s6-lbl-hub,#s5-lbl-ai,#s4-lbl-rapid,#s3-lbl-bedside,#s2-lbl-his,#s1-lbl-hub { top:3%;right:1%; }
  #s7-lbl-peace,#s6-lbl-monitor,#s5-lbl-neutral,#s4-lbl-custom,#s3-lbl-entertain,#s2-lbl-pull,#s1-lbl-net { top:14%;right:1%; }
  #s7-lbl-holistic,#s6-lbl-esg,#s5-lbl-his,#s4-lbl-wearable,#s3-lbl-task,#s2-lbl-manual,#s1-lbl-cloud { top:25%;right:1%; }
  #s5-lbl-central,#s4-lbl-fall,#s3-lbl-meal,#s2-lbl-digital,#s1-lbl-presence { top:14%;left:1%; }
  #s3-lbl-clean,#s2-lbl-health,#s1-lbl-smart { top:3%;left:28%; }
  #s1-lbl-voice  { top:3%;left:52%; }
  #s1-lbl-lighting { top:14%;left:22%; }
  #s4-lbl-walkout  { bottom:14%;left:40%; }
  #s1-lbl-temp { bottom:24%;right:5%; }
  #s1-lbl-shade{ bottom:15%;right:8%; }
  #s1-lbl-tv   { bottom:10%;left:46%; }
}

.zoom-icon{
  position:absolute;
  right:12px;
  bottom:12px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#E8713C;
  color:#fff;
  font-size:18px;
  z-index:100;
}

.zoom-scene-wrap {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.zoom-badge {
  position: absolute;
  z-index: 20;
}

.mobile-zoom-btn{
  display: none;
}

/* ── MOBILE ≤ 1024px ── */
.mobile-legend { display: none; }

/* =====================================
   MOBILE
===================================== */
@media (max-width:1024px){

  body{
    overflow-x:hidden;
  }

  .scene-section{
    height:auto !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  .scene-sticky{
    position:relative !important;
    height: auto;
    overflow:hidden !important;
    padding:24px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    top: unset;
  }

  .scene-title{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    opacity:1 !important;
    transform:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    gap:10px !important;
    margin-bottom:14px !important;
  }

  .scene-title h2{
    width:100% !important;
    font-size:22px !important;
    line-height:1.15 !important;
    margin:0 !important;
  }

  .scene-title p{
    width:auto !important;
    margin:0 !important;
    align-self:flex-start !important;

    font-size:11px !important;
    padding:8px 10px !important;
    gap:7px !important;
  }

  .svg-stage{
    position:relative !important;
    width:100% !important;
    height:40vh !important;
    flex:0 0 40vh !important;
    overflow:hidden !important;
    margin:0 0 12px !important;
  }

  .svg-mover,
  .svg-mover > div{
    width:100% !important;
    height:100% !important;
    transform:none !important;
  }

  .svg-mover svg{
    width:100% !important;
    height:100% !important;
    display:block !important;
  }

  .mobile-legend{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    margin-top:0 !important;
  }

  .mobile-legend div{
    background:#fff;
    border-radius:14px;
    padding:10px;
    min-height:58px;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
  }

  .mobile-legend b{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:50%;
    background:#E8713C;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
  }

  .lbl,
  .ptr-svg,
  .panels-left,
  #s6-hier{
    display:none !important;
  }

  .mobile-zoom-btn{
    display:block;
    margin:10px auto 14px;
    border:0;
    background:#E8713C;
    color:#fff;
    border-radius:999px;
    padding:10px 18px;
    font-weight:700;
  }

  #mobileZoomModal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:#eef3f6;
    overflow:auto;
    padding:60px 18px 30px;
  }

  #mobileZoomModal.active{
    display:block;
  }

  #closeZoomModal{
    position:fixed;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#E8713C;
    color:#fff;
    font-size:28px;
    z-index:10000;
  }

  #zoomModalContent svg{
    width:180vw;
    max-width:none;
    height:auto;
    display:block;
  }

  .scene-title{
    margin-bottom: 8px !important;
  }

  .mobile-legend{
    margin-top: 0 !important;
  }

  .mobile-badge{
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#E8713C;
    color:#fff;
    font-weight:700;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    z-index:30;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  #smartward-journey {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  #journey-pin {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  #journey-pin .scene-section {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-zoom-btn {
    position: relative !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  .scene-sticky {
    pointer-events: auto !important;
  }

  .svg-stage {
    pointer-events: auto !important;
  }

  #smartward-journey,
  #journey-pin,
  #journey-pin .scene-section,
  #journey-pin .scene-sticky {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #journey-pin .scene-section {
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .svg-stage {
    height: auto !important;
    flex: none !important;
    overflow: visible !important;
  }

  .svg-mover,
  .svg-mover > div {
    height: auto !important;
  }

  .svg-mover svg {
    width: 100% !important;
    height: auto !important;
  }

  .mobile-legend {
    overflow: visible !important;
  }

  .scene-section {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .scene-section.mobile-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .scene-title,
  .svg-stage,
  .mobile-zoom-btn,
  .mobile-legend {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}

@media (max-width: 1024px) {
  .mobile-panels {
    display: grid;
    gap: 14px;
    /*padding: 0 22px 30px;*/
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .mobile-panel-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px !important;
    padding: 22px 22px 20px !important;
    box-shadow: 0 14px 35px rgba(0,0,0,0.08);
  }

  .mobile-panel-card.ben {
    background: linear-gradient(135deg, #ff9a3d 0%, #ff6b18 100%) !important;
    color: #172033;
  }

  .mobile-panel-card.chl {
    background: #d5dde6 !important;
    color: #172033;
  }

  .mobile-panel-card h3 {
    font-size: 16px !important;
    line-height: 1;
    margin: 0 0 14px !important;
    font-weight: 800;
  }

  .mobile-panel-card ul {
    /*padding-left: 18px !important;*/
    margin: 0 !important;
  }

  .mobile-panel-card li {
    font-size: 14px !important;
    /*line-height: 1.55 !important;*/
    margin-bottom: 10px !important;
  }

  .mobile-panel-card li:last-child {
    margin-bottom: 0 !important;
  }

 /* #s7-keybox{
    position: unset;
    opacity: 1;
  }*/

  .scene-title      { order: 1; }
  .mobile-panels     { order: 2; }
  .svg-stage         { order: 3; }
  .mobile-legend      { order: 4; }
  .mobile-flow-wrap   { order: 5; }
  .mobile-zoom-btn    { order: 6; }
}

/* ── LABEL WITH CIRCLE THUMBNAIL ── */
.lbl {
  display: flex;
  align-items: center;
  gap: 6px;
  /* existing styles remain */
}

.lbl-thumb {
  width: 45px;
  height: 45px;
  min-width: 45px;
  padding: 5px;
  border-radius: 50%;
  background: #e8eef2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.lbl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* connector line between label box and circle */
.lbl-connector {
  width: 18px;
  height: 2px;
  background: #E8713C;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .lbl-thumb,
  .lbl-connector {
    display: none !important;
  }
}

.svg-mover {
  transform: scale(0.82);
  transform-origin: center center;
}

/* Keep per-scene positional nudges but normalize scale */
#s1-mover { transform: scale(0.95); }
#s2-mover { transform: scale(0.85); }
#s3-mover {
  transform: scale(1) translate(5%, 5%);
}

/* S4: illustration sits left of center */
#s4-mover {
  transform: scale(0.90) translateX(8%) translateY(3%);
}

/* S5: illustration sits slightly left */
#s5-mover {
  transform: scale(1) translateX(3%);
}

/* S6: illustration sits too far right */
#s6-mover {
  transform: scale(0.9) translateX(-4%);
}
#s7-mover { transform: scale(0.85) translateX(6%) translateY(0); }

@media (max-width: 1199px){

  #s1-mover { transform: scale(0.8)!important; }
  #s2-mover { transform: scale(0.8)!important; }
  #s3-mover {
    transform: scale(0.8) translate(5%, 5%)!important;
  }

  /* S4: illustration sits left of center */
  #s4-mover {
    transform: scale(0.8) translateX(8%) translateY(3%)!important;
  }

  /* S5: illustration sits slightly left */
  #s5-mover {
    transform: scale(0.8) translateX(3%)!important;
  }

  /* S6: illustration sits too far right */
  #s6-mover {
    transform: scale(0.8) translateX(-4%)!important;
  }
  #s7-mover { transform: scale(0.85) translateX(6%) translateY(0)!important; }
}

@media (max-width: 768px){
  #s1-mover { transform: scale(1)!important; }
  #s2-mover { transform: scale(1)!important; }
  #s3-mover {
    transform: scale(1) !important;
  }

  #s4-mover {
    transform: scale(1) !important;
  }

  #s5-mover {
    transform: scale(1) !important;
  }

  #s6-mover {
    transform: scale(1) !important;
  }
  #s7-mover { transform: scale(1) !important; }
}

/* ── 2. Label box — keep compact, no internal thumb ── */
.lbl {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border-radius: 8px;
  padding: 5px 10px 5px 6px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  opacity: 0;
  transform: scale(0.85);
  z-index: 5;
}


/* ── 3. Connector line — sits outside the label box ── */
.lbl-connector {
  width: 16px;
  height: 1.5px;
  background: #E8713C;
  flex-shrink: 0;
  display: block;
}


/* ── 4. Thumb circle — detached, small, clean ── */
.lbl-thumb {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #e8eef2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  flex-shrink: 0;
}

.lbl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-width:1199px){

  .mobile-feature-flow{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:24px;
    margin:22px 0 18px;
  }

  .mobile-feature-flow::before{
    content:"";
    position:absolute;
    left:24px;
    top:48px;
    bottom:48px;
    border-left:2px dashed #E8713C;
    opacity:.55;
    z-index:0;
  }

  .mobile-flow-card{
    position:relative;
    z-index:1;
    background:#fff;
    border-radius:16px;
    padding:16px 18px 16px 58px;
    font-size:14px;
    font-weight:800;
    color:#172033;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }

  .mobile-flow-card::before{
    content:"";
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    border-radius:8px;
    background:#E8713C;
  }

  .mobile-flow-card:not(:last-child)::after{
    content:"";
    position:absolute;
    left:20px;
    bottom:-19px;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:10px solid #E8713C;
  }
}

.mobile-feature-flow{

    display:flex;
    flex-direction:column;
    gap:22px;

    margin:26px 0;

    position:relative;

}
.mobile-feature-flow .lbl{

    position:relative !important;

    left:auto !important;

    top:auto !important;

    right:auto !important;

    bottom:auto !important;

    transform:none !important;

    width:100%;

    opacity:1 !important;

    visibility:visible !important;

}
.mobile-feature-flow::before{

    content:"";

    position:absolute;

    left:30px;

    top:58px;

    bottom:58px;

    border-left:2px dashed #ef7b39;

    opacity:.5;

}
.mobile-feature-flow .lbl:not(:last-child)::after{

    content:"";

    position:absolute;

    left:24px;

    bottom:-18px;

    width:0;

    height:0;

    border-left:6px solid transparent;

    border-right:6px solid transparent;

    border-top:10px solid #ef7b39;

}

@media (max-width:1199px){

  .mobile-feature-flow{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin:26px 0;
    position:relative;
  }

  .mobile-feature-flow::before{
    content:"";
    position:absolute;
    left:31px;
    top:60px;
    bottom:60px;
    border-left:2px dashed #ef7b39;
    opacity:.5;
    z-index:0;
  }

  .mobile-flow-lbl{
    position:relative !important;
    display:flex !important;
    align-items:center;
    gap:8px;
    width:100%;
    background:#fff;
    border-radius:16px;
    padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    z-index:2;
  }

  .mobile-flow-lbl .ico{
    width:38px;
    height:38px;
    border-radius:10px;
    background:#E8713C;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .mobile-flow-lbl .ico svg{
    width:18px;
    height:18px;
    fill:#fff;
  }

  .mobile-flow-lbl span{
    font-size:15px;
    font-weight:800;
    color:#172033;
    line-height:1.25;
    flex:1;
  }

  .mobile-flow-lbl .lbl-connector{
    display:block !important;
    width:28px;
    height:2px;
    background:#E8713C;
    flex-shrink:0;
  }

  .mobile-flow-lbl .lbl-thumb{
    display:flex !important;
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50%;
    background:#e8eef2;
    padding:6px;
  }

  .mobile-flow-lbl .lbl-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .mobile-flow-lbl:not(:last-child)::after{
    content:"";
    position:absolute;
    left:25px;
    bottom:-18px;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:10px solid #ef7b39;
  }
}

.legend-number{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:50%;
  background:#E8713C;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
}