@charset "utf-8";
/**
 * PT1958 招商合作页样式
 * ---------------------------------------------------------------------------
 * 覆盖：合作总览的双路径分流、门店招商、供应链入驻三页的专属组件。
 * 通用区块（section / sec-head / card / flow / compare / stat-strip）在 base.css。
 */

/* ===== 双路径分流 ======================================================= */
.join-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.join-path {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius-xl);
  background: var(--grad-ink);
  color: var(--c-on-ink);
  border: 1px solid var(--c-neon-line);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.join-path::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 100% 0%, rgba(47, 143, 255, .28) 0%, transparent 62%);
  z-index: -1;
}

.join-path--brand::before {
  background: radial-gradient(70% 60% at 100% 0%, rgba(216, 176, 106, .22) 0%, transparent 62%);
}

.join-path:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 190, 255, .55);
  box-shadow: 0 24px 60px rgba(2, 10, 22, .45);
  color: var(--c-on-ink);
}

.join-path__role {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 14px;
  margin-bottom: var(--sp-5);
  border-radius: 999px;
  background: rgba(47, 143, 255, .16);
  border: 1px solid rgba(120, 190, 255, .34);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  color: var(--c-neon-light);
}

.join-path--brand .join-path__role {
  background: rgba(216, 176, 106, .14);
  border-color: rgba(216, 176, 106, .38);
  color: #f0d7a4;
}

.join-path__title {
  font-size: var(--fs-xl);
  color: #fff;
  letter-spacing: .01em;
}

.join-path__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-on-ink-dim);
}

.join-path__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(120, 190, 255, .16);
}

.join-path__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-on-ink);
}

.join-path__list svg { color: var(--c-neon); flex-shrink: 0; }
.join-path--brand .join-path__list svg { color: var(--c-gold); }

.join-path__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-neon-light);
}

.join-path--brand .join-path__cta { color: #f0d7a4; }
.join-path:hover .join-path__cta svg { transform: translateX(4px); }
.join-path__cta svg { transition: transform var(--dur) var(--ease); }

/* ===== 卡片副标题 ======================================================= */
.card__tagline {
  margin-top: 2px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-accent);
}

/* ===== 勾选清单 ========================================================= */
.join-list { display: grid; gap: var(--sp-3); }

.join-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-secondary);
}

.join-list svg { flex-shrink: 0; margin-top: 5px; color: var(--c-accent); }
.join-list + .join-list { margin-top: var(--sp-4); }

/* 深色卡片里的清单 */
.join-list--ink li { color: var(--c-on-ink-dim); }
.join-list--ink svg { color: var(--c-neon-light); }

/* ===== 步骤卡（无列表版） =============================================== */
.flow__text-s {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-secondary);
}

/* ===== 困境收束句 ======================================================= */
.store-turn {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(120, 190, 255, .18);
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.8;
  color: var(--c-on-ink);
}

.store-turn br { display: none; }

/* ===== 响应式 =========================================================== */
@media (max-width: 980px) {
  .join-paths { grid-template-columns: 1fr; }
  .join-path { padding: var(--sp-6) var(--sp-5); }
}

@media (max-width: 768px) {
  .join-path__list { grid-template-columns: 1fr; }
  .store-turn { text-align: left; font-size: var(--fs-base); }
  .store-turn br { display: block; }
}