/* =========================================================================
   ccrelay 服务介绍页专属样式（纯静态，零第三方依赖）
   仅放本页独有规则：链路条 .svc-hero-rail* / 机房 vs 住宅对比 .svc-compare*
   / 专属访问环境 facet 网格 / 价格卡领起图标等。
   颜色/圆角/阴影/字体一律取 landing.css :root token，禁硬编码十六进制。
   图标统一用全站 engraved sprite：<svg class="icon"><use href="#i-..."/></svg>。
   价格卡骨架 .price-grid/.price-card/.price-badge/.price-stock 在 shared.css；
   链路 .flow/.flow-hub/.flow-link/.flow-tag、facet/icon-chip 在 landing.css 复用。
   ========================================================================= */

/* ---------------------------------------------------------------------- */
/* hero 链路条 .svc-hero-rail / .svc-rail-node(.is-hub) / .svc-rail-link    */
/* 节点带 engraved 内联小图标，克制识别；连接 hairline + 末端三角箭头。     */
/* ---------------------------------------------------------------------- */

.svc-hero-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  max-width: 720px;
  margin: 44px auto 0;
}

.svc-rail-node {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.svc-rail-node .icon {
  width: 16px;
  height: 16px;
  vertical-align: 0;
  color: var(--text);
}

/* 中枢节点点睛：accent-soft 底 + accent 细边（克制，不加光环）。
   13px 文字走 --accent-text（--accent 对 --accent-soft 只有 3.53:1）；描边是非文本，
   保持 --accent。内联图标紧贴文字，跟着文字色走，避免同一胶囊里出现深浅两档赭橙。 */
.svc-rail-node.is-hub {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.svc-rail-node.is-hub .icon { color: var(--accent-text); }

/* 连接：实线 hairline + 末端三角箭头（与首页 .flow-link 同语言） */
.svc-rail-link {
  position: relative;
  flex: 0 1 28px;
  min-width: 18px;
  height: 1px;
  border-top: 1px solid var(--border);
}

.svc-rail-link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--border);
}

/* ---------------------------------------------------------------------- */
/* 专属访问链路 .flow 节点内的领起小图标（与首页 flow 同款，克制点缀）     */
/* ---------------------------------------------------------------------- */

.flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 4px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--text);
}

.flow-icon .icon { width: 20px; height: 20px; vertical-align: 0; color: inherit; }

/* 中枢节点 chip 跟随 hub 点睛 */
.flow-hub .flow-icon {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------- */
/* 机房 vs 住宅对比 .svc-compare / .svc-compare-card / .svc-tag            */
/* 破格：两卡略错落（住宅卡更突出），编辑式领起 kicker + 衬线标题。        */
/* ---------------------------------------------------------------------- */

.svc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
  align-items: stretch;
}

.svc-compare-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

/* 机房一侧：中性灰底，不用红，仅靠图标 + 中性标签语义区分 */
.svc-compare-card.is-plain {
  background: var(--bg-subtle);
}

/* 住宅一侧：accent-soft 底 + accent 左条强调，靠底色/左条而非位移制造对照张力 */
.svc-compare-card.is-good {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.svc-compare-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.svc-compare-card.is-good .svc-compare-head { border-bottom-color: #EAD2C6; }

.svc-compare-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

/* kicker 在标题上方做轻领起；中性卡用更淡的墨色，避免赭橙误指语义 */
.svc-compare-card.is-plain .svc-compare-title .kicker {
  margin: 0;
  color: var(--text-secondary);
}

.svc-compare-card.is-plain .svc-compare-title .kicker::before {
  background: var(--text-secondary);
}

.svc-compare-card.is-good .svc-compare-title .kicker { margin: 0; }

.svc-compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--text-secondary);
}

.svc-compare-icon .icon { width: 22px; height: 22px; vertical-align: 0; color: inherit; }

.svc-compare-card.is-good .svc-compare-icon {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.svc-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-tag {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.svc-tag .icon-inline {
  flex: 0 0 auto;
  margin-top: 0.22em;
  width: 16px;
  height: 16px;
  vertical-align: 0;
}

.svc-tag.is-plain { color: var(--text-secondary); }

.svc-tag.is-plain .icon-inline { color: var(--text-secondary); }

.svc-tag.is-good { color: var(--text); }

/* 对勾点睛走正向绿语义（sprite i-check 的 .ac 即赭橙，这里要绿：用 --accent 覆写）。
   绿用 --ok-text：--terminal-string 在这张 --accent-soft 底的卡上只有 1.88:1。 */
.svc-tag.is-good .icon-inline { --accent: var(--ok-text); color: var(--ok-text); }

/* #svc-broadband：1 主卡 + 4 卫星 = 5 卡。让主卡占上排左两列 + 1 卫星占上排第三列，
   其余 3 卫星平铺下排：每行恰好 3 格无空洞，align-items:start 让卡片停在内容高度、
   不被行高拉伸出卡内空白。仅覆写本区，不改全局 feature-grid。 */
@media (min-width: 901px) {
  #svc-broadband .feature-grid { align-items: start; }

  #svc-broadband .feature-grid .feature-main { grid-column: span 2; grid-row: auto; }

  #svc-broadband .feature-grid .feature-card:last-child { grid-column: auto; }
}

/* ---------------------------------------------------------------------- */
/* 核心服务 02：专属访问环境区                                              */
/* 链路图整行铺满（每节点约 1/4）、标题单行不断字；说明文案用 facet 双列。 */
/* ---------------------------------------------------------------------- */

.svc-relay-flow { margin-top: 48px; }

.svc-relay-copy { margin-top: 44px; }

/* facet 双列：编辑式错落——最后一条奇数项独占左列、留白制造呼吸，不强行填满 */
.svc-relay-facets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}

.svc-relay-facets .facet + .facet { margin-top: 0; }

/* ---------------------------------------------------------------------- */
/* 价格卡领起图标 + 勾选要点（与 shared.css price-card 骨架协同）          */
/* ---------------------------------------------------------------------- */

.price-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--radius-control);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--text);
}

.price-icon .icon { width: 22px; height: 22px; vertical-align: 0; color: inherit; }

/* featured 档领起图标点睛：accent-soft 底（呼应 feature-icon 语言） */
.price-icon.is-accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

/* 勾选要点：engraved i-check 前缀（正向绿），替代散装圆点 */
.price-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.price-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.price-points .icon-inline {
  flex: 0 0 auto;
  margin-top: 0.2em;
  width: 16px;
  height: 16px;
  vertical-align: 0;
  /* 对勾走正向绿语义点睛（--ok-text：白卡底上 --terminal-string 只有 2.25:1） */
  --accent: var(--ok-text);
  color: var(--ok-text);
}

.price-card .price-points + .btn { margin-top: auto; }

/* 实时库存状态 .price-stock 已于 07-30 移入 shared.css：首页价格快照也用同一
   批 data-sku-* 钩子，而首页不加载本表——规则留在这里等于只有服务介绍页有
   有货/缺货配色。同理适用于任何被首页价格快照复用的价格卡 class。 */

/* ---------------------------------------------------------------------- */
/* 响应式：≤900 折单列 / ≤768 facet 单列 / ≤600 链路条竖排                 */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .svc-compare { grid-template-columns: 1fr; }

  /* #svc-broadband 有 4 张卫星卡，两列下 2+2 恰好铺满；取消全局末卡跨列，避免空洞 */
  #svc-broadband .feature-grid .feature-card:last-child { grid-column: auto; }
}

@media (max-width: 768px) {
  .svc-relay-facets { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 600px) {
  /* 链路条竖排，照搬 landing.css .flow ≤768 的降级形态 */
  .svc-hero-rail { flex-direction: column; }

  .svc-rail-node { width: 100%; justify-content: center; }

  .svc-rail-link {
    flex: 0 0 auto;
    min-width: 0;
    width: 1px;
    height: auto;
    min-height: 24px;
    border-top: none;
    border-left: 1px solid var(--border);
  }

  .svc-rail-link::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-width: 6px 4px 0 4px;
    border-color: var(--border) transparent transparent transparent;
  }
}

/* ---------------------------------------------------------------------- */
/* 激活码开通入口：价格区下方的一行轻引导（已购用户跳注册开通）             */
/* ---------------------------------------------------------------------- */

.price-redeem-entry {
  margin: 28px 0 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
}

/* 15px 行内链接（下划线滑入的 ::after 取 currentColor，一并压暗） */
.price-redeem-entry .link-underline {
  color: var(--accent-text);
  font-weight: 600;
}