/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* byc cps.css — 代理加盟页专属 (/cps/)
 *
 * 只强化两处内容表达: 代理级别卡 与 开通流程。
 * Hero / 区块底色 / 推广方式卡沿用 product.css 的系统样式, 本文件不覆盖 ——
 * 浅蓝 Hero + 白底浅灰交替是全站产品页的统一基调。
 * 色值一律用系统令牌, 不引入新色。
 */

/* ============ 双主线: 自用省钱 / 推广赚钱 ============ */
/* 这页原来 6 个区块全是"居中标题 + 网格"一个模子, 只靠白底/灰底交替。
   这一区用左右分栏打破节奏, 也把散在 hero 标签与 FAQ 里的两条核心价值正面讲一次。 */
.byc-twin {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .byc-twin { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.byc-twin-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-xl);
}
.byc-twin-tag {
  padding: 5px 12px;
  margin-bottom: 16px;
  border-radius: var(--byc-r-full);
  background: var(--byc-primary-50);
  color: var(--byc-primary);
  font-size: 12.5px;
  font-weight: 600;
}
.byc-twin-tag.is-gain { background: rgba(255, 106, 0, .10); color: var(--byc-accent); }
.byc-twin-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--byc-text);
  margin-bottom: 10px;
}
.byc-twin-desc {
  flex: 1;
  font-size: 14px;
  line-height: 1.8;
  color: var(--byc-text-sec);
  margin-bottom: 20px;
}
/* 数字块: 让两条主线各自落到一个可记的数上 */
.byc-twin-fig {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 18px;
  width: 100%;
  border-top: 1px solid var(--byc-border);
}
.byc-twin-fig b { font-size: 30px; font-weight: 800; line-height: 1; color: var(--byc-primary); }
.byc-twin-col:last-child .byc-twin-fig b { color: var(--byc-accent); font-size: 24px; }
.byc-twin-fig span { font-size: 13px; color: var(--byc-text-mut); }

/* ============ 怎么开通 / 怎么推广: 左右分栏 ============ */
/* 原为两个独立区块, 各带一套居中 sec-head, 白灰交替各占一屏。
   合并后共用一次留白, 左右并置也更像"先开通再推广"的先后关系。 */
.byc-howto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .byc-howto { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.byc-howto-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--byc-text);
  margin-bottom: 8px;
}
.byc-howto-desc {
  font-size: 14px;
  color: var(--byc-text-sec);
  margin-bottom: 28px;
}
/* 分栏内空间变窄: 4 步改两行两列, 3 渠道改纵向堆叠。
   必须一并覆盖 grid-auto-flow —— 全宽时那套时间轴用的是 auto-flow:column,
   它会无视 grid-template-columns, 只写列数不改流向是不生效的。 */
.byc-howto .byc-steps {
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 26px 16px;
}
/* 2×2 不再是一条直线, 节点间不画连接线 */
.byc-howto .byc-step::after { display: none !important; }
.byc-howto .byc-feats { grid-template-columns: 1fr !important; gap: 14px; }
.byc-howto .byc-feat {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 14px;
  text-align: left;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  box-shadow: none;
}
.byc-howto .byc-feat-ico { width: 42px; height: 42px; margin: 0; border-radius: var(--byc-r-md); }
.byc-howto .byc-feat h3 { grid-column: 2; font-size: 15px; margin: 0 0 4px; }
.byc-howto .byc-feat p  { grid-column: 2; font-size: 13px; line-height: 1.7; margin: 0; }

/* ============ 代理级别卡 ============ */
/* 档位区分用 nth-child 而不是 level 值 —— 组的 level 由后台配(现为 3/4/5),
   位置才是稳定的; 第 4 档起回落主蓝, 不会没颜色。 */
.byc-plans > .byc-plan              { --tier: var(--byc-primary); }
.byc-plans > .byc-plan:nth-child(1) { --tier: var(--byc-text-sec); }
.byc-plans > .byc-plan:nth-child(2) { --tier: var(--byc-accent); }
.byc-plans > .byc-plan:nth-child(3) { --tier: var(--byc-primary); }

/* 卡片沿用系统标准白卡 (1px 边框 + r-xl), 不加独有的彩色顶带 */
.byc-plans > .byc-plan {
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-xl);
  padding: var(--byc-card-pad);
}
.byc-plans > .byc-plan:hover {
  border-color: var(--byc-primary);
  box-shadow: var(--byc-sd-md);
}

.byc-plan-name {
  color: var(--tier);
  font-size: 15px; font-weight: 600;
  margin-bottom: 16px;
}

/* ---- 门槛 → 回报 对照 ----
   原来价格与折扣是上下堆叠的两个独立块(通用定价卡那套), 读的人得自己把
   "花多少"和"换到什么"连起来。这里并到一行左右对照, 中间箭头点明因果。 */
.byc-plan-deal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--byc-border);
  border-bottom: 1px solid var(--byc-border);
}
.byc-plan-deal-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 0;
}
.byc-plan-deal-num {
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--byc-text);
  white-space: nowrap;
}
.byc-plan-deal-num i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--byc-text-mut); margin-left: 2px; }
/* 回报侧用档位色, 门槛侧保持中性 —— 视线落在"换到了什么"上 */
.byc-plan-deal-num--gain { color: var(--tier); }
.byc-plan-deal-num--text { font-size: 20px; }
.byc-plan-deal-cap { font-size: 12px; color: var(--byc-text-mut); }

/* 箭头用边框画, 不引图标 */
.byc-plan-deal-to {
  width: 8px; height: 8px;
  border-top: 2px solid var(--byc-border-strong);
  border-right: 2px solid var(--byc-border-strong);
  transform: rotate(45deg);
}

/* 适用范围: 一行胶囊, 取代原来的逐条 li 列表 */
.byc-plan-scope {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 0 0 14px;
}
.byc-plan-scope span {
  padding: 4px 10px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-full);
  font-size: 12px;
  color: var(--byc-text-sec);
}
.byc-plan-scope .is-rebate {
  border-color: var(--byc-primary-100);
  background: var(--byc-primary-50);
  color: var(--byc-primary);
}

/* 预存款去向是这页最需要打消的顾虑, 用系统绿给一条轻提示 */
.byc-plan-note {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, .10);
  color: var(--byc-green);
  border-radius: var(--byc-r-full);
  font-size: 12px;
  line-height: 1.5;
}

/* 行动按钮统一主色: 档位区分已由名称与折扣数字承担, 按钮全站一个样 */
.byc-plan-btn { background: var(--byc-primary); border-color: var(--byc-primary); color: #fff; font-weight: 600; }
.byc-plan-btn:hover { background: var(--byc-primary-dark); border-color: var(--byc-primary-dark); color: #fff; }

/* ============ 开通流程: 横向时间轴 ============ */
/* 四个并排白卡表达不出"步骤递进", 序号缩在卡片一角、右侧大片留白, 箭头也太弱。
   去掉卡片框, 让序号成为轴上的节点, 连接线只走节点之间。 */
.byc-steps::before { display: none; }   /* product.css 那条贯穿整行的虚线 */
.byc-steps { gap: 0; }

.byc-step {
  position: relative;
  text-align: center;
  padding: 0 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.byc-step-no {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--byc-primary);
  color: var(--byc-primary);
  font-size: 16px; font-weight: 700;
  box-shadow: none;
  transition: var(--byc-trans);
}
.byc-step:hover .byc-step-no { background: var(--byc-primary); color: #fff; }

/* 连接线只连相邻两个节点, 不穿过圆圈, 末步不画 */
@media (min-width: 1024px) {
  .byc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 23px;                          /* 节点垂直中心 */
    left: calc(50% + 31px);             /* 圆半径 23 + 8 留白 */
    right: calc(-50% + 31px);
    height: 2px;
    background: var(--byc-primary-100);
  }
}

.byc-step h3 { font-size: 15px; margin-bottom: 6px; }
.byc-step p  { font-size: 13px; line-height: 1.6; color: var(--byc-text-mut); }

/* 预存款条款提示: 涉及资金的约束, 要压过周围的说明文字但不做成报错。
   本区块是浅灰底(byc-sec-light), 所以用白底把它托起来, 左侧一道强调色。 */
.byc-steps-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 720px;
  margin: 34px auto 0;
  padding: 13px 18px;
  background: #fff;
  border: 1px solid var(--byc-border);
  border-left: 3px solid var(--byc-accent);
  border-radius: var(--byc-r-md);
  font-size: 13px;
  line-height: 1.7;
  color: var(--byc-text-sec);
  text-align: left;
}
.byc-steps-notice svg {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 3px;
  color: var(--byc-accent);
}
.byc-steps-notice b { color: var(--byc-accent); font-weight: 700; }

@media (max-width: 640px) {
  .byc-plan-deal-num { font-size: 26px; }
}