/* =====================================================
   板块3 · 申请流程 — 申请旅程信息图「从容路线」
   桌面（≥901px）：单条连续路径（1200×860 画布）——
   三条水平直线 + 两个正半圆转弯（只在阶段转换处转弯）；
   路径与节点共用同一坐标表（--x/--y），
   阶段排印锁定占据转折点作最大视觉锚点，
   内容卡片浮于线侧，整图用容器查询单位 cqw 等比缩放
   （px 值为旧内核回退）。
   移动（≤900px）：竖向单线列表。
   ===================================================== */
.it-section{
  padding:72px 0 84px;
  position:relative;
  overflow:hidden;
}
@media (max-width:600px){
  .it-section{ padding:52px 0 60px; }
}
.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-end-label{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  color:#C36B42;letter-spacing:.08em;white-space:nowrap;
}

/* ---------- 桌面：隐藏移动滑动卡 ---------- */
@media (min-width:901px){
  .pflow{display:none;}
}

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

  /* 路径：唯一一条线，平缓直行，只在阶段转换处转弯 */
  .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;}

  /* 节点锚：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(9.5px,1.08cqw);white-space:nowrap;}

  /* 终点：一枚圆点 + 一行小字 */
  .tl-end-label{
    position:absolute;left:0;top:16px;top:1.4cqw;
    transform:translateX(-50%);
    font-size:max(11px,1.05cqw);
    opacity:0;transition:opacity .7s ease 2.6s;
  }
  .tl-stage.visible .tl-end-label{opacity:.9;}
}

/* ---------- 移动：三阶段滑动卡（取代过长的竖向单线，左右滑动切换） ---------- */
@media (max-width:900px){
  .tl-stage{display:none;}                       /* 隐藏桌面信息图 */

  .pflow{margin-top:22px;}
  /* 视口做左右溢出出血，让卡片可以滑到贴近屏幕边缘，露出「下一张」的一角 */
  .pflow__viewport{
    margin:0 -20px;padding:2px 20px 4px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .pflow__viewport::-webkit-scrollbar{display:none;}
  .pflow__track{display:flex;gap:14px;width:max-content;}

  .pflow__card{
    scroll-snap-align:center;
    flex:0 0 82vw;max-width:360px;
    box-sizing:border-box;
    display:flex;flex-direction:column;
    padding:22px 20px 24px;
    background:#fff;border:1px solid #ece5d8;border-top:3px solid var(--pc);
    border-radius:14px;
    box-shadow:0 18px 40px -26px rgba(31,42,36,.5);
  }
  .pflow__top{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .pflow__no{
    font-family:'Fraunces',Georgia,serif;font-size:34px;font-weight:600;line-height:1;
    color:var(--pc);opacity:.9;
  }
  .pflow__phase{display:flex;flex-direction:column;gap:3px;}
  .pflow__phase em{
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--pc);opacity:.7;
  }
  .pflow__phase b{font-size:19px;font-weight:700;color:#1f2a24;letter-spacing:.03em;}

  .pflow__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;flex:1 1 auto;}
  .pflow__steps li{display:flex;gap:13px;align-items:flex-start;}
  .pflow__ic{
    flex:0 0 auto;width:34px;height:34px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    color:var(--pc);background:rgba(168,145,87,.1);        /* 旧 Safari 回退 */
    background:color-mix(in srgb,var(--pc) 12%,#fff);
  }
  .pflow__ic svg{width:19px;height:19px;}
  .pflow__steps li>div{flex:1 1 auto;min-width:0;padding-top:1px;}
  .pflow__steps b{display:block;font-size:15px;font-weight:600;color:#1f2a24;margin-bottom:3px;letter-spacing:.02em;}
  .pflow__steps p{margin:0;font-size:12.5px;line-height:1.6;color:#777;}

  .pflow__end{
    margin:18px 0 0;padding-top:14px;border-top:1px dashed #e4ddce;
    font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:14px;
    letter-spacing:.06em;color:var(--pc);text-align:center;
  }
  .pflow__end span{margin-right:5px;}

  .pflow__dots{display:flex;justify-content:center;gap:9px;margin-top:20px;}
  .pflow__dot{
    width:8px;height:8px;padding:0;border:0;border-radius:50%;
    background:#d3cbba;cursor:pointer;transition:width .28s ease,background .28s ease;
  }
  .pflow__dot.is-active{width:24px;border-radius:5px;background:#A89157;}

  .pflow__hint{
    margin:12px 0 0;text-align:center;font-size:11.5px;letter-spacing:.14em;
    color:#a99f8b;
  }
}

/* ---------- 无动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .tl-path path,.tl-dot,.tl-card,.tl-lockup,.tl-end-label{
    transition:none !important;
  }
  .pflow__viewport{scroll-behavior:auto;}
  .pflow__dot{transition:none;}
}