/* =====================================================
   板块3 · 申请流程 — 申请旅程信息图「从容路线」
   桌面（≥901px）：单条连续路径（1200×920 画布）——
   三条水平直线 + 两个正半圆转弯（只在阶段转换处转弯）；
   路径与节点共用同一坐标表（--x/--y），
   阶段排印锁定占据转折点作最大视觉锚点，
   内容卡片浮于线侧，整图用容器查询单位 cqw 等比缩放
   （px 值为旧内核回退）。
   移动（≤900px）：竖向单线列表。
   ===================================================== */
.it-section{
  padding:100px 0 140px;
  position:relative;
  overflow:hidden;
}
.it-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- 共用：圆点 / 阶段锁定 / 卡片排版 ---------- */
.tl-stage{position:relative;width:100%;}

.tl-dot{
  display:block;border-radius:50%;
  background:var(--pc);
  box-shadow:0 0 0 3px #FAF7F0;
}

.tl-eyebrow{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pc);opacity:.65;
  margin-bottom:7px;
}
.tl-phase-name{
  display:block;
  font-weight:700;color:var(--pc);
  letter-spacing:.05em;line-height:1.2;
}

.tl-icon{color:var(--pc);}
.tl-icon svg{width:100%;height:100%;display:block;}
.tl-title{
  font-size:16px;font-weight:600;color:#1f2a24;
  margin:0 0 6px;letter-spacing:.02em;
  transition:color .25s ease;
}
.tl-step:hover .tl-title{color:var(--pc);}
.tl-desc{font-size:12.5px;color:#777;line-height:1.7;margin:0;text-wrap:balance;}
.tl-finis{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  color:#C36B42;letter-spacing:.14em;white-space:nowrap;
}

/* ---------- 桌面：信息图布局 ---------- */
@media (min-width:901px){
  .tl-stage{
    aspect-ratio:1200/920;
    container-type:inline-size;
    margin-top:26px;
  }

  /* 路径：唯一一条线，平缓直行，只在阶段转换处转弯 */
  .tl-path{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    overflow:visible;pointer-events:none;z-index:1;
  }
  .tl-path path{
    fill:none;stroke-width:2px;stroke-linecap:round;
    stroke-dasharray:100;stroke-dashoffset:100;
    transition:stroke-dashoffset 2.4s cubic-bezier(.4,.1,.3,.95) .1s;
  }
  .tl-stage.visible .tl-path path{stroke-dashoffset:0;}
  .tl-arrowhead{opacity:0;transition:opacity .5s ease 2.4s;}
  .tl-stage.visible .tl-arrowhead{opacity:1;}

  /* 节点锚：0×0 定位点，中心 = 路径坐标 */
  .tl-node{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:2;}

  /* 线上位置标记：步骤微点 / 阶段圆点 */
  .tl-dot{
    position:absolute;left:0;top:0;
    width:7px;height:7px;
    width:.6cqw;height:.6cqw;min-width:6px;min-height:6px;
    transform:translate(-50%,-50%);
    opacity:0;transition:opacity .5s ease calc(.1s + var(--i)*.14s);
  }
  .tl-dot--phase{
    width:13px;height:13px;
    width:1.1cqw;height:1.1cqw;min-width:11px;min-height:11px;
  }
  .tl-stage.visible .tl-dot{opacity:1;}

  /* 阶段排印锁定：最大视觉锚点，占据转折点 */
  .tl-phase{z-index:3;}
  .tl-lockup{
    position:absolute;top:0;transform:translateY(-50%);
    opacity:0;transition:opacity .7s ease calc(.15s + var(--i)*.14s);
  }
  .tl-stage.visible .tl-lockup{opacity:1;}
  .lockup-left .tl-lockup{right:32px;right:2.7cqw;text-align:right;}
  .lockup-right .tl-lockup{left:40px;left:3.3cqw;text-align:left;}
  .tl-eyebrow{font-size:max(9px,.85cqw);}
  .tl-phase-name{font-size:max(21px,2.5cqw);white-space:nowrap;}

  /* 内容卡片：浮于线侧，路径只作阅读引导 */
  .tl-card{
    position:absolute;left:50%;text-align:center;
    width:200px;width:16.6cqw;
    opacity:0;
    transition:opacity .6s ease calc(.25s + var(--i)*.14s),transform .6s ease calc(.25s + var(--i)*.14s);
  }
  .tl-step.is-above .tl-card{bottom:26px;bottom:2.2cqw;transform:translate(-50%,8px);}
  .tl-step.is-below .tl-card{top:26px;top:2.2cqw;transform:translate(-50%,-8px);}
  .tl-stage.visible .tl-card{opacity:1;transform:translate(-50%,0);}

  .tl-icon{
    width:40px;height:40px;margin:0 auto 12px;
    width:3.4cqw;height:3.4cqw;min-width:28px;min-height:28px;
  }
  .tl-title{font-size:max(13.5px,1.35cqw);}
  .tl-desc{font-size:max(10.5px,1.08cqw);}

  /* 终点题词 */
  .tl-finis{
    position:absolute;left:var(--x);top:var(--y);
    transform:translate(-50%,-190%);
    font-size:max(11px,1.1cqw);
    opacity:0;transition:opacity .7s ease 2.5s;
  }
  .tl-stage.visible .tl-finis{opacity:.92;}
}

/* ---------- 移动：竖向单线列表 ---------- */
@media (max-width:900px){
  .tl-stage{padding:4px 0 0;}
  .tl-path{display:none;}
  .tl-stage::before{
    content:"";position:absolute;left:20px;top:12px;bottom:34px;width:2px;border-radius:2px;
    background:linear-gradient(to bottom,#A89157 0%,#A89157 24%,#2D5A4C 42%,#2D5A4C 64%,#C36B42 88%,#C36B42 100%);
    opacity:.85;
  }
  .tl-node{position:relative;}
  .tl-dot{position:absolute;left:20px;transform:translateX(-50%);width:9px;height:9px;}

  .tl-phase{padding:12px 0 22px 46px;}
  .tl-phase .tl-dot{top:22px;width:13px;height:13px;}
  .tl-eyebrow{margin-bottom:4px;}
  .tl-phase-name{font-size:20px;}

  .tl-step{padding:0 4px 30px 46px;}
  .tl-step .tl-dot{top:7px;}
  .tl-card{text-align:left;}
  .tl-icon{width:24px;height:24px;margin:0 0 8px;}

  .tl-finis{display:inline-block;margin:2px 0 0 46px;font-size:12px;}
}

/* ---------- 无动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .tl-path path,.tl-arrowhead,.tl-dot,.tl-card,.tl-lockup,.tl-finis{
    transition:none !important;
  }
}