/* 统一版式层（M05–M15 排版规范）：卡片文字层级 / 面板 / 清单 / 数据表 / 流程步骤 / CTA 元件
   拆分自 assets/css/design-system.css（2026-08-30）
   各页用到其中不同子集，作为公共层统一引入。 */

/* =========================================================
   统一版式层（M05–M15 排版规范）
   ========================================================= */

/* ----- 卡片内文字层级 ----- */
.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-700);
  line-height: 1.45;
  margin: 0 0 6px;
}
.card-title.with-icon { display: flex; align-items: center; gap: 8px; }
.card-title.sm { font-size: 15.5px; }
.card-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-600);
  margin: 0;
}
.card-text.dim { color: var(--muted-500); }
.card.compact { padding: var(--sp-3); }
.card-stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ----- 图标容器尺寸变体 ----- */
.icon-box.sm { width: 36px; height: 36px; border-radius: var(--r-s); }
.icon-box.xs { width: 26px; height: 26px; border-radius: var(--r-s); }
.icon-box.round { border-radius: var(--r-full); }
.icon-box.danger { background: var(--danger-100); color: var(--danger-600); }
.icon-box.gold-strong { background: var(--gold-100); color: var(--gold-700); }

/* ----- 图文行 ----- */
.media { display: flex; gap: var(--sp-3); align-items: flex-start; }
.media > div { min-width: 0; }
.media .card-title { margin-bottom: 4px; }

/* ----- 模块脚注 / 收束句 ----- */
.foot-note { font-size: 13px; line-height: 1.7; color: var(--muted-500); margin: 0; }
.foot-note.center { text-align: center; }
.foot-note.light { color: rgba(255, 255, 255, 0.6); }
.closing {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: var(--navy-700);
}

/* ----- 面板 ----- */
.panel {
  background: #fff;
  border: 1px solid var(--line-200);
  border-radius: var(--r-m);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.panel.gold { border-color: var(--gold-100); }
.panel.dim { background: var(--bg-soft); box-shadow: none; }
.panel-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-100);
  text-align: center;
}
.panel.gold .panel-foot { border-top-color: var(--gold-100); }

/* ----- 勾选清单 ----- */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-600);
}
.check-list .mark {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: var(--r-full);
  background: var(--gold-50);
  color: var(--gold-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.check-list.muted li { color: var(--muted-500); }
.check-list.muted .mark { background: var(--line-100); color: var(--muted-400); }
.check-list.teal .mark { background: var(--teal-100); color: var(--teal-600); }

/* ----- 编号清单 ----- */
.num-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: num;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.num-list li {
  counter-increment: num;
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-600);
}
.num-list li::before {
  content: counter(num);
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: var(--r-full);
  background: var(--gold-50);
  color: var(--gold-600);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* ----- 对照卡 ----- */
.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-100);
}
.compare-head .card-title { margin: 0; }
.card.dim .compare-head { border-bottom-color: #DFE5EB; }
.card.dim .compare-head .card-title { color: var(--muted-500); }
.card.tint {
  background: var(--bg-tint);
  border-color: #BFE0E3;
}
.card.tint .compare-head { border-bottom-color: #BFE0E3; }
.card.tint .compare-head .card-title { color: var(--teal-600); }

/* ----- 数据表（≤920px 堆叠为卡片） ----- */
.dtable-wrap {
  border: 1px solid var(--line-200);
  border-radius: var(--r-m);
  overflow: hidden;
  background: #fff;
}
.dtable { width: 100%; border-collapse: collapse; }
.dtable th,
.dtable td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.7;
  border-bottom: 1px solid var(--line-100);
}
.dtable thead th {
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-700);
  border-bottom: 1px solid var(--line-200);
  white-space: nowrap;
}
.dtable thead th.dim { font-weight: 600; color: var(--muted-500); }
.dtable th + th,
.dtable td + td { border-left: 1px solid var(--line-100); }
.dtable tbody th {
  width: 132px;
  background: var(--bg-tint);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-700);
}
.dtable tbody td { color: var(--ink-600); }
.dtable tbody td.dim { color: var(--muted-500); }
.dtable tbody td.strong { color: var(--ink-800); font-weight: 600; }
.dtable tbody tr:last-child th,
.dtable tbody tr:last-child td { border-bottom: none; }

/* ----- 流程步骤 ----- */
.step-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
.step-card { display: flex; flex-direction: column; }
.step-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-500);
  margin-bottom: var(--sp-2);
}
.step-card .card-text { flex: 1; margin-bottom: var(--sp-3); }
.step-deliver {
  border-top: 1px dashed var(--line-200);
  padding-top: 10px;
}
.step-deliver .label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-500);
  margin-bottom: 4px;
}
.step-deliver .value {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* ----- 紧凑流程条（五步，仅表明流程） ----- */
.flow-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-rail::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 12px;
  right: 12px;
  border-top: 1px dashed var(--line-steel);
  z-index: 0;
}
.flow-node {
  position: relative;
  z-index: 1;
  padding-right: var(--sp-2);
}
.flow-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-dark);
  background: var(--teal-soft);
  border: 1px solid var(--line-steel);
  margin-bottom: 10px;
}
.flow-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-800);
  margin: 0 0 3px;
}
.flow-out {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted-500);
  margin: 0;
}

/* ----- 价格卡 / 占位框 ----- */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured {
  border-color: var(--gold-200);
  box-shadow: 0 4px 16px rgba(176, 118, 32, 0.1);
}
.price-badge {
  position: absolute;
  top: -11px;
  left: var(--sp-4);
  padding: 3px 12px;
  background: var(--gold-500);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
}
.price-tag {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-700);
  margin: var(--sp-2) 0 var(--sp-3);
}
.price-tag span { font-size: 13px; font-weight: 400; color: var(--muted-500); }
.ph-box {
  border: 1.5px dashed #C3CFDA;
  border-radius: var(--r-m);
  background: #fff;
  padding: var(--sp-6);
  text-align: center;
}

/* ----- 深底 CTA 元件 ----- */
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.chip-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.fact-list { max-width: 420px; margin: 0 auto; }
.fact-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
  color: #C6DAE8;
  text-align: left;
}
.fact-row:last-child { border-bottom: none; }
.fact-row .k { color: #8FA9BE; flex-shrink: 0; }

/* ----- FAQ 默认收起 ----- */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-a { display: none; }
.faq-item.open .faq-a { display: block; }

/* ----- 深底上的图标 ----- */
.bg-navy .icon-gold,
.bg-navy-deep .icon-gold { color: var(--gold-300); }
.stats-grid .icon-gold { display: grid; place-items: center; }

/* ----- 对齐工具 ----- */
.mx-auto { margin-left: auto; margin-right: auto; }
.items-start { align-items: start; }

/* ----- 跨列 ----- */
.span-2 { grid-column: span 2; }
@media (max-width: 920px) {
  .span-2 { grid-column: auto; }
}

/* ----- 统一版式层响应式 ----- */
@media (max-width: 1080px) {
  .step-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .flow-rail { gap: var(--sp-2); }
  .flow-node { padding-right: var(--sp-1); }
  .flow-name { font-size: 14.5px; }
}
@media (max-width: 720px) {
  .flow-rail {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .flow-rail::before {
    top: 8px;
    bottom: 8px;
    left: 13px;
    right: auto;
    border-top: none;
    border-left: 1px dashed var(--line-steel);
  }
  .flow-node {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: start;
    gap: 10px;
    padding: 7px 0;
  }
  .flow-dot { margin-bottom: 0; }
  .flow-name { font-size: 14.5px; margin-bottom: 1px; }
  .flow-out { font-size: 12px; }
}
@media (max-width: 920px) {
  .panel { padding: var(--sp-4); }
  .step-grid { grid-template-columns: 1fr; }
  .dtable-wrap { border-radius: var(--r-m); }
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable thead { display: none; }
  .dtable tbody tr { border-bottom: 1px solid var(--line-200); padding-bottom: 12px; }
  .dtable tbody tr:last-child { border-bottom: none; }
  .dtable tbody th,
  .dtable tbody td {
    width: auto;
    border-left: none;
    border-bottom: none;
    padding: 6px 16px;
  }
  .dtable tbody th { padding-top: 12px; }
  .dtable tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted-500);
    margin-bottom: 2px;
  }
}