@charset "UTF-8";
/* ============================================================
   process.html 独有样式 · 校园展板风
   骨架：六格阶梯总览 → 四组左右交替大图步骤(角标徽章) →
        藏青阶段时间表 → 六格交付物卡 → 圆形序号配合事项
============================================================ */

/* ---------- 六格阶梯总览 ---------- */
.step-ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ladder-cell{
  position:relative;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:26px 18px 22px;text-align:center;
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.ladder-cell:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.ladder-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--navy-900);color:var(--gold-400);
  font-family:var(--font-head);font-weight:800;font-size:17px;margin-bottom:12px;
}
.ladder-cell h3{font-size:16px;margin-bottom:6px}
.ladder-cell p{font-size:12.5px;color:var(--muted);line-height:1.6}

/* ---------- 步骤详情图文 ---------- */
.step-split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.step-split.flip .step-photo{order:2}
.step-photo img{width:100%;height:360px;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.step-badge{
  display:inline-block;padding:6px 16px;border-radius:var(--r-pill);
  background:var(--gold-200);color:var(--navy-900);
  font-size:13px;font-weight:700;margin-bottom:16px;letter-spacing:1px;
}
.step-copy h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px}
.step-copy h2 em{font-style:normal;color:var(--gold-500)}
.step-ticks{margin-top:20px;border-left:3px solid var(--gold-400);padding-left:18px}
.step-ticks li{font-size:14.5px;color:var(--ink-2);margin-bottom:8px;line-height:1.8}

/* ---------- 阶段时间表 ---------- */
.dur-table{border-radius:var(--r-lg);overflow:hidden;border:1.5px solid rgba(255,255,255,.14)}
.dur-row{
  display:grid;grid-template-columns:1.1fr 1fr 2fr;gap:16px;
  padding:16px 24px;font-size:14.5px;color:#D3D9E8;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dur-row:last-child{border-bottom:0}
.dur-row:not(.dur-head):hover{background:rgba(201,169,106,.08)}
.dur-row > span:first-child{font-weight:700;color:var(--white)}
.dur-head{background:rgba(201,169,106,.16);color:var(--gold-300);font-weight:700;letter-spacing:1px}
.dur-note{background:rgba(255,255,255,.04)}

/* ---------- 交付物卡 ---------- */
.deliver-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.deliver-card{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:26px 26px 24px;position:relative;overflow:hidden;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.deliver-card::after{
  content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;
  background:var(--paper-deep);
}
.deliver-card:hover{border-color:var(--gold-400);transform:translateY(-4px)}
.deliver-card h3{font-size:17.5px;margin-bottom:8px}
.deliver-card p{font-size:14px;color:var(--ink-2);line-height:1.85}

/* ---------- 客户配合事项 ---------- */
.cooper-wrap{max-width:960px;margin:0 auto}
.cooper-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cooper-item{display:flex;gap:16px;align-items:flex-start;background:var(--white);border-radius:var(--r-md);padding:22px 24px;box-shadow:var(--shadow-sm)}
.cooper-item > span{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--navy-900);color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.cooper-item p{font-size:14.5px;color:var(--ink-2);line-height:1.85}

/* ---------- 错峰 ---------- */
.rv1{--d:.08s}.rv2{--d:.16s}.rv3{--d:.24s}.rv4{--d:.32s}.rv5{--d:.4s}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .step-ladder{grid-template-columns:repeat(3,1fr)}
  .deliver-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .step-split,.step-split.flip{grid-template-columns:1fr;gap:28px}
  .step-split.flip .step-photo{order:0}
  .cooper-list{grid-template-columns:1fr}
  .dur-row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  .step-ladder{grid-template-columns:repeat(2,1fr)}
  .deliver-grid{grid-template-columns:1fr}
  .step-photo img{height:240px}
}