/* =====================================================================
   jx-xtm.com · 分片1 服务·流程·工具
   services.css —— 工具 / 流程 / 票据质感组件库
   体系：米白 + 浅绿 + 浅卡其，步骤圆点、虚线连接、单据卡片、胶带角标、大表
   ===================================================================== */

/* ============ 1. 内页 Hero（页头带图） ============ */
.sv-hero {
  position: relative; padding: calc(var(--nav-h) + 56px) 0 64px;
  background:
    radial-gradient(1200px 400px at 85% -10%, var(--green-100), transparent 60%),
    linear-gradient(180deg, var(--cream-200), var(--cream-100));
  overflow: hidden;
}
.sv-hero .container { position: relative; z-index: 2; }
.sv-hero h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: 2px; margin: 14px 0 16px; }
.sv-hero h1 em { color: var(--green-600); font-style: normal; }
.sv-hero .lead { max-width: 680px; color: var(--ink-500); font-size: 16.5px; }
.sv-hero .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sv-hero-img { position: absolute; right: -40px; top: 50%; transform: translateY(-40%);
  width: 44%; max-width: 560px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 6px solid var(--cream-50); opacity: .96; }
.sv-hero.no-img h1, .sv-hero.no-img .lead, .sv-hero.no-img .hero-meta { max-width: 780px; }
.sv-hero.plain { padding-bottom: 48px; }

/* 胶带标签角标 */
.tape {
  position: relative; display: inline-block; padding: 7px 18px;
  background: rgba(220, 203, 164, .55); color: var(--ink-900);
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  transform: rotate(-2deg); box-shadow: var(--shadow-sm);
}
.tape::before, .tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12px;
  background: rgba(220, 203, 164, .35);
}
.tape::before { left: -10px; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.tape::after { right: -10px; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.tape.green { background: rgba(177, 201, 166, .5); color: var(--green-700); }
.tape.green::before, .tape.green::after { background: rgba(177, 201, 166, .3); }

/* ============ 2. 横向步骤轴（大圆点 + 虚线连接） ============ */
.h-steps { display: grid; gap: 0; counter-reset: hstep; }
.h-steps.cols-6 { grid-template-columns: repeat(6, 1fr); }
.h-steps.cols-5 { grid-template-columns: repeat(5, 1fr); }
.h-steps.cols-4 { grid-template-columns: repeat(4, 1fr); }
.h-step { position: relative; text-align: center; padding: 0 10px; }
.h-step .dot {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--cream-50); border: 2px dashed var(--green-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: var(--green-600); position: relative; z-index: 2;
  transition: background .3s ease, transform .3s ease;
}
.h-step:hover .dot { background: var(--green-100); transform: translateY(-4px); }
.h-step h3 { font-size: 16px; margin-bottom: 6px; }
.h-step p { font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.h-step::before {
  content: ""; position: absolute; top: 29px; left: -50%; width: 100%; height: 0;
  border-top: 2px dashed var(--khaki-200); z-index: 1;
}
.h-step:first-child::before { display: none; }

/* ============ 3. 竖向时间轴（三列：时间 / 轴线 / 内容） ============ */
.v-tl { display: grid; grid-template-columns: 1fr; gap: 0; }
.v-tl .tl-item { display: grid; grid-template-columns: 130px 34px 1fr; }
.v-tl .tl-time {
  text-align: right; padding: 18px 16px 18px 0; font-weight: 700; color: var(--green-700);
  font-size: 14.5px; line-height: 1.5;
}
.v-tl .tl-axis { position: relative; }
.v-tl .tl-axis::before {
  content: ""; position: absolute; top: 8px; bottom: -8px; left: 50%; width: 2px;
  border-left: 2px dashed var(--khaki-200); transform: translateX(-50%);
}
.v-tl .tl-item:last-child .tl-axis::before { display: none; }
.v-tl .tl-dot {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--green-500);
  border: 3px solid var(--green-100); box-shadow: 0 0 0 2px var(--green-400); z-index: 2;
}
.v-tl .tl-body { padding: 12px 0 28px 22px; }
.v-tl .tl-body .card { padding: 20px 24px; }
.v-tl .tl-body h3 { font-size: 17px; margin-bottom: 8px; }
.v-tl .tl-body p { font-size: 14.5px; color: var(--ink-500); }

/* ============ 4. 单据卡片（顶部色条 + 虚线毛边） ============ */
.receipt {
  background: var(--cream-50); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft); position: relative; overflow: hidden;
}
.receipt::before {
  content: ""; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--green-500) 0 18px, var(--green-200) 18px 36px);
}
.receipt.khaki::before { background: repeating-linear-gradient(90deg, var(--khaki-400) 0 18px, var(--khaki-200) 18px 36px); }
.receipt-body { padding: 26px 26px 24px; }
.receipt-body h3 { font-size: 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.receipt-body h3 .no {
  flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--green-100);
  color: var(--green-700); font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.receipt-body ul li {
  padding: 7px 0 7px 22px; position: relative; font-size: 14.5px; color: var(--ink-700);
  border-bottom: 1px dashed var(--line-soft);
}
.receipt-body ul li:last-child { border-bottom: none; }
.receipt-body ul li::before {
  content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px;
  border: 1.6px solid var(--green-500); transform: rotate(45deg); border-radius: 2px;
}

/* ============ 5. 大表格（显式列宽） ============ */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); background: var(--cream-50); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.tbl caption { text-align: left; padding: 16px 20px 0; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.tbl thead th {
  background: var(--green-600); color: var(--cream-50); text-align: left;
  padding: 13px 16px; font-size: 14px; letter-spacing: 1px; font-weight: 600; white-space: nowrap;
}
.tbl tbody td { padding: 12px 16px; border-bottom: 1px dashed var(--line); vertical-align: top; color: var(--ink-700); }
.tbl tbody tr:nth-child(even) { background: var(--cream-100); }
.tbl tbody tr:hover { background: var(--green-100); }
.tbl .price { font-weight: 800; color: var(--green-700); white-space: nowrap; }
.tbl .center { text-align: center; }
.tbl th.center { text-align: center; }

/* ============ 6. 双栏对照（合格 / 待改） ============ */
.vs { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: stretch; }
.vs-col { border-radius: var(--radius-md); padding: 28px; }
.vs-col.good { background: var(--green-100); border: 1px solid var(--green-200); }
.vs-col.bad { background: #FBF1EC; border: 1px solid #EBD3C4; }
.vs-col h3 { font-size: 17px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.vs-col.good h3 { color: var(--green-700); }
.vs-col.bad h3 { color: #A5673F; }
.vs-col ul li { padding: 6px 0 6px 26px; position: relative; font-size: 14.5px; color: var(--ink-700); }
.vs-col.good ul li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green-600); font-weight: 800;
}
.vs-col.bad ul li::before {
  content: "✕"; position: absolute; left: 0; color: #B5714B; font-weight: 800;
}
.vs-mid { display: flex; align-items: center; justify-content: center; }
.vs-mid span {
  width: 44px; height: 44px; border-radius: 50%; background: var(--cream-50);
  border: 2px solid var(--khaki-200); color: var(--khaki-400); font-weight: 800;
  display: flex; align-items: center; justify-content: center; transform: rotate(0);
}

/* ============ 7. 提示框 / 政策框 ============ */
.note-box {
  border-radius: var(--radius-md); padding: 22px 26px; display: flex; gap: 16px;
  border: 1px solid var(--line-soft); background: var(--cream-50); box-shadow: var(--shadow-sm);
}
.note-box .n-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--khaki-100); display: flex; align-items: center; justify-content: center; }
.note-box .n-ico svg { width: 22px; height: 22px; stroke: var(--khaki-400); stroke-width: 1.8; fill: none; }
.note-box h4 { font-size: 15.5px; margin-bottom: 6px; }
.note-box p, .note-box li { font-size: 14px; color: var(--ink-500); }
.note-box.green { background: var(--green-100); border-color: var(--green-200); }
.note-box.green .n-ico { background: var(--green-200); }
.note-box.green .n-ico svg { stroke: var(--green-700); }
.note-box.warn { background: #FBF1EC; border-color: #EBD3C4; }
.note-box.warn .n-ico { background: #F0DCC9; }
.note-box.warn .n-ico svg { stroke: #B5714B; }

/* ============ 8. 检查清单 ============ */
.check-list { display: grid; gap: 12px; }
.check-list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px;
  background: var(--cream-50); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 14.5px; color: var(--ink-700);
}
.check-list li i {
  flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px;
  border: 2px solid var(--green-400); display: flex; align-items: center; justify-content: center;
  font-style: normal; color: var(--green-700); font-size: 12px; font-weight: 800;
}

/* ============ 9. 进度条 ============ */
.prog-item { margin-bottom: 18px; }
.prog-item .prog-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.prog-item .prog-head strong { color: var(--ink-900); }
.prog-item .prog-head span { color: var(--green-600); font-weight: 700; }
.prog-track { height: 10px; border-radius: 999px; background: var(--cream-200); overflow: hidden; }
.prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-400), var(--green-600)); width: 0; transition: width 1.2s ease; }
.reveal.in .prog-fill { width: var(--w, 60%); }

/* ============ 10. FAQ 手风琴 ============ */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  background: var(--cream-50); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  margin-bottom: 12px; overflow: hidden; transition: border-color .25s ease;
}
.faq details[open] { border-color: var(--green-300); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--ink-900);
  font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600); transform: rotate(45deg); transition: transform .25s ease; margin-top: -4px;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq .faq-body { padding: 0 22px 18px; font-size: 14.5px; color: var(--ink-500); line-height: 1.9; }

/* ============ 11. CTA 横幅 ============ */
.sv-cta {
  position: relative; border-radius: var(--radius-lg); padding: 56px 8%;
  background: linear-gradient(120deg, var(--green-700), var(--green-500));
  color: var(--cream-50); overflow: hidden; text-align: center;
}
.sv-cta h2 { color: var(--cream-50); font-size: clamp(24px, 3vw, 34px); margin-bottom: 12px; letter-spacing: 2px; }
.sv-cta p { color: rgba(253,251,245,.85); max-width: 620px; margin: 0 auto 26px; }
.sv-cta .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sv-cta .cta-tel {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
  color: var(--cream-50); font-weight: 700; font-size: 16px;
}
.sv-cta .cta-tel svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ============ 12. 图文双栏 ============ */
.img-text { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.img-text.rev .it-media { order: 2; }
.it-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); position: relative; }
.it-media img { width: 100%; }
.it-body h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 16px; letter-spacing: 1px; }
.it-body p { color: var(--ink-500); margin-bottom: 14px; }

/* ============ 13. 数字条 ============ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat {
  background: var(--cream-50); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 28px 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat .num { font-size: clamp(30px, 3vw, 42px); font-weight: 800; color: var(--green-600); line-height: 1.1; }
.stat .num em { font-size: 16px; font-style: normal; color: var(--khaki-400); margin-left: 2px; }
.stat .lab { margin-top: 8px; font-size: 13.5px; color: var(--ink-500); }

/* ============ 14. 服务矩阵卡片 ============ */
.svc-card { padding: 28px 26px; position: relative; overflow: hidden; }
.svc-card .svc-ico {
  width: 52px; height: 52px; border-radius: 14px; background: var(--green-100);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.svc-card .svc-ico svg { width: 26px; height: 26px; stroke: var(--green-600); stroke-width: 1.8; fill: none; }
.svc-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.svc-card p { font-size: 14px; color: var(--ink-500); margin-bottom: 12px; }
.svc-card a.more { color: var(--green-600); font-weight: 700; font-size: 14px; }
.svc-card a.more:hover { padding-left: 4px; }

/* ============ 15. 工种 chips ============ */
.trade-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.trade-chips a {
  padding: 10px 20px; border-radius: 999px; background: var(--cream-50); border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink-700); transition: all .25s ease;
}
.trade-chips a:hover { border-color: var(--green-400); color: var(--green-700); background: var(--green-100); transform: translateY(-2px); }

/* ============ 16. 资料/渠道卡片 ============ */
.channel-card { padding: 30px 26px; text-align: center; }
.channel-card .ch-ico {
  width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--khaki-100); display: flex; align-items: center; justify-content: center;
}
.channel-card .ch-ico svg { width: 28px; height: 28px; stroke: var(--khaki-400); stroke-width: 1.8; fill: none; }
.channel-card h3 { font-size: 17px; margin-bottom: 8px; }
.channel-card p { font-size: 13.5px; color: var(--ink-500); }

/* ============ 17. 横幅大卡（团报用） ============ */
.band {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.band img { width: 100%; display: block; }
.band .band-mask {
  position: absolute; inset: 0; background: linear-gradient(90deg, rgba(46,45,38,.82) 0%, rgba(46,45,38,.45) 55%, transparent 100%);
  display: flex; align-items: center;
}
.band .band-in { padding: 8% 6%; max-width: 620px; color: var(--cream-50); }
.band .band-in h2 { color: var(--cream-50); font-size: clamp(26px, 3.4vw, 40px); letter-spacing: 2px; margin-bottom: 14px; }
.band .band-in p { color: rgba(253,251,245,.88); margin-bottom: 22px; }

/* ============ 18. 选项卡 ============ */
.sv-tabs { margin-bottom: 34px; }
.sv-tab-head { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 26px; }
.sv-tab-head button {
  padding: 12px 22px; font-size: 15px; font-weight: 700; color: var(--ink-500);
  border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .25s ease;
}
.sv-tab-head button.active { color: var(--green-700); border-color: var(--green-600); }
.sv-tab-pane { display: none; }
.sv-tab-pane.active { display: block; animation: pageIn .4s ease both; }

/* ============ 19. 竖向步骤（小节点列表） ============ */
.mini-steps { display: grid; gap: 0; }
.mini-step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding-bottom: 26px; position: relative; }
.mini-step::before {
  content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; border-left: 2px dashed var(--khaki-200);
}
.mini-step:last-child::before { display: none; }
.mini-step .ms-no {
  width: 46px; height: 46px; border-radius: 50%; background: var(--green-100); color: var(--green-700);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
  border: 2px solid var(--green-300);
}
.mini-step h3 { font-size: 16.5px; margin: 8px 0 6px; }
.mini-step p { font-size: 14px; color: var(--ink-500); }

/* ============ 20. 小标签条 ============ */
.mini-note {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px;
  color: var(--ink-500);
}
.mini-note b { color: var(--green-700); }
.mini-note.mn-mt-8 { margin-top: 8px; }
.mini-note.mn-mt-14 { margin-top: 14px; }
.mini-note.mn-mt-18 { margin-top: 18px; }

/* ============ 21. 票据内工具类（替代内联样式） ============ */
.receipt-body .rp { font-size: 14px; color: var(--ink-500); margin-bottom: 12px; line-height: 1.8; }
.price-big { font-size: 26px; font-weight: 800; line-height: 1.2; }
.price-big.green { color: var(--green-700); }
.price-big.khaki { color: var(--khaki-400); }
.price-big small { font-size: 13px; font-weight: 400; color: var(--ink-400); }
.receipt-link { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--green-600); }
.receipt-link:hover { padding-left: 4px; }
.receipt-link.khaki { color: var(--khaki-400); }
.tape.light { background: rgba(253, 251, 245, .18); color: var(--cream-50); }
.tape.light::before, .tape.light::after { background: rgba(253, 251, 245, .12); }
.lk { color: var(--green-600); font-weight: 600; }
.lk:hover { text-decoration: underline; }
.sec-head.tight { margin-bottom: 30px; }
.sv-form-card { padding: 28px; }
.grid-custom { display: grid; gap: var(--gutter); }
.grid-12-8 { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 991px) {
  .grid-12-8 { grid-template-columns: 1fr; }
}

/* ============ 响应式 ============ */
@media (max-width: 1199px) {
  .sv-hero-img { display: none; }
  .h-steps.cols-6 { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .h-steps.cols-5 { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .h-step::before { display: none; }
  .img-text { grid-template-columns: 1fr; gap: 30px; }
  .img-text.rev .it-media { order: 0; }
  .vs { grid-template-columns: 1fr; }
  .vs-mid { padding: 6px 0; }
  .vs-mid span { transform: rotate(90deg); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sv-hero { padding: calc(var(--nav-h) + 36px) 0 44px; }
  .h-steps.cols-6, .h-steps.cols-5, .h-steps.cols-4 { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .v-tl .tl-item { grid-template-columns: 74px 22px 1fr; }
  .v-tl .tl-time { font-size: 12.5px; padding-right: 8px; }
  .v-tl .tl-body { padding-left: 12px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 20px 12px; }
  .receipt-body { padding: 20px 18px; }
  .band .band-mask { background: linear-gradient(180deg, rgba(46,45,38,.55), rgba(46,45,38,.8)); align-items: flex-end; }
  .band .band-in { padding: 26px 20px; }
  .sv-cta { padding: 40px 22px; }
}

/* ============ 列宽类（colgroup 显式列宽走类） ============ */
col.cw6 { width: 6%; }
col.cw14 { width: 14%; }
col.cw16 { width: 16%; }
col.cw18 { width: 18%; }
col.cw20 { width: 20%; }
col.cw22 { width: 22%; }
col.cw24 { width: 24%; }
col.cw26 { width: 26%; }
col.cw30 { width: 30%; }
col.cw33 { width: 33%; }
col.cw34 { width: 34%; }
col.cw35 { width: 35%; }
col.cw36 { width: 36%; }
col.cw38 { width: 38%; }
col.cw40 { width: 40%; }
col.cw42 { width: 42%; }
col.cw48 { width: 48%; }
col.cw50 { width: 50%; }
col.cw60 { width: 60%; }
col.cw66 { width: 66%; }

/* ============ 内联样式替代工具类 ============ */
.it-body h2 { margin-top: 8px; }
.h22 { font-size: 22px; }
.tl-narrow { grid-template-columns: 90px 22px 1fr; }
.gap-sm { gap: 14px; }
.rp-tight { margin-top: 10px; }
.lk-dark { color: var(--cream-50); }
.mt-sm { margin-top: 16px; }

@media (max-width: 767px) {
  .tl-narrow { grid-template-columns: 74px 22px 1fr; }
}