/* cn- : slate/sky product compare, table-first, metric chips, progress steps, dl FAQ */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }

body.cn-body {
  margin: 0;
  background: #F8FAFC;
  color: #0F172A;
  font-family: "IBM Plex Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.65;
}

.cn-frame { min-height: 100vh; }

.cn-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  padding: 12px 36px;
  background: #0F172A;
  color: #F8FAFC;
}

.cn-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7DD3FC;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.cn-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
}

.cn-menu a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13px;
}

.cn-menu a:hover { color: #7DD3FC; }

.cn-intro {
  padding: 36px 36px 20px;
  max-width: 820px;
}

.cn-intro h1 {
  margin: 0 0 12px;
  font-size: 30px;
  line-height: 1.3;
  color: #0F172A;
}

.cn-intro p { margin: 0; color: #334155; font-size: 16px; }

.cn-slab {
  padding: 28px 36px 48px;
}

.cn-slab h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: #334155;
}

.cn-note { margin: 0 0 18px; max-width: 52em; color: #334155; }

.cn-matrix {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.cn-matrix th,
.cn-matrix td {
  border: 1px solid #cbd5e1;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.cn-matrix thead th {
  background: #334155;
  color: #F8FAFC;
  font-weight: 600;
}

.cn-matrix tbody th {
  background: #e2e8f0;
  width: 18%;
}

.cn-matrix td.ok { color: #0369a1; }
.cn-matrix td.dim { color: #64748b; }

.cn-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cn-metric {
  background: #fff;
  border: 1px solid #bae6fd;
  padding: 20px 18px 22px;
  box-shadow: 0 1px 0 #e0f2fe;
}

.cn-metric svg { display: block; margin-bottom: 10px; }

.cn-metric strong {
  display: block;
  font-size: 28px;
  color: #0EA5E9;
  line-height: 1.1;
  margin-bottom: 6px;
}

.cn-metric h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #0F172A;
}

.cn-metric p { margin: 0; font-size: 14px; color: #334155; }

.cn-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cn-choice {
  background: #fff;
  padding: 22px;
  border-top: 6px solid #0EA5E9;
}

.cn-choice.soft { border-top-color: #334155; }

.cn-choice h3 { margin: 0 0 10px; font-size: 18px; }
.cn-choice p { margin: 0 0 10px; font-size: 14px; }
.cn-choice p:last-child { margin-bottom: 0; }

.cn-progress {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.cn-phase {
  flex: 1;
  padding: 18px 14px 20px;
  position: relative;
}

.cn-phase + .cn-phase { border-left: 1px solid #e2e8f0; }

.cn-bar {
  height: 6px;
  background: #e2e8f0;
  margin-bottom: 12px;
  overflow: hidden;
}

.cn-bar > span {
  display: block;
  height: 100%;
  background: #0EA5E9;
}

.cn-phase:nth-child(1) .cn-bar > span { width: 25%; }
.cn-phase:nth-child(2) .cn-bar > span { width: 50%; }
.cn-phase:nth-child(3) .cn-bar > span { width: 75%; }
.cn-phase:nth-child(4) .cn-bar > span { width: 100%; }

.cn-phase h3 { margin: 0 0 8px; font-size: 15px; color: #0F172A; }
.cn-phase p { margin: 0; font-size: 13px; color: #334155; }

.cn-burden {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #0F172A;
  color: #e2e8f0;
}

.cn-burden th,
.cn-burden td {
  padding: 12px 14px;
  border-bottom: 1px solid #334155;
  text-align: left;
  vertical-align: top;
}

.cn-burden th { color: #7DD3FC; font-weight: 600; }
.cn-burden caption {
  caption-side: bottom;
  padding-top: 8px;
  color: #64748b;
  text-align: left;
  font-size: 12px;
}

.cn-cost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cn-cost article {
  background: #fff;
  padding: 16px;
  border: 1px dashed #0EA5E9;
}

.cn-cost h3 { margin: 0 0 8px; font-size: 15px; color: #0369a1; }
.cn-cost p { margin: 0; font-size: 13px; }

.cn-mix {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

.cn-mix aside {
  background: #0EA5E9;
  color: #0F172A;
  padding: 16px;
  font-weight: 700;
}

.cn-mix ul { margin: 0; padding-left: 18px; }
.cn-mix li { margin-bottom: 8px; }

.cn-glossary { margin: 0; }

.cn-glossary dt {
  margin: 18px 0 6px;
  font-weight: 700;
  color: #0F172A;
  font-size: 16px;
}

.cn-glossary dd {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 14px;
}

.cn-end {
  background: #334155;
  color: #cbd5e1;
  padding: 28px 36px;
  font-size: 12px;
}

.cn-end p { margin: 0 0 8px; }
.cn-end p:last-child { margin: 0; }

@media (max-width: 900px) {
  .cn-head { grid-template-columns: 1fr; gap: 10px; padding: 12px 16px; }
  .cn-menu { justify-content: flex-start; }
  .cn-intro, .cn-slab, .cn-end { padding-left: 16px; padding-right: 16px; }
  .cn-metrics, .cn-fork, .cn-progress, .cn-cost, .cn-mix { display: block; }
  .cn-phase { border-left: 0 !important; border-top: 1px solid #e2e8f0; }
  .cn-matrix, .cn-burden { display: block; overflow-x: auto; }
}