/* ============================================================
   合作申请页 · join.html
   ------------------------------------------------------------
   招商页的通病是"先讲情怀、后讲分成、最后藏一张表"。
   这一页反过来：标题下面先摆三条底线（不压货、不收入门费、随时能退），
   再让人选"我想做哪一种"，最后才问名字电话。
   表单的样式沿用 shop.css 的 .fld / .frow，这里只补这一段特有的。
   ============================================================ */

.shead .jsub{
  margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.85;
}

/* ---------- 三条底线 ---------- */
.jfacts{
  display:grid; gap:11px; margin:22px 0 6px;
  grid-template-columns:repeat(3, 1fr);
}
.jfacts > div{
  padding:14px 15px; border:1px solid var(--line); border-radius:3px;
  background:var(--card);
}
.jfacts b{
  display:block; font-family:var(--serif); font-size:14.5px;
  letter-spacing:.02em; color:var(--sea);
}
.jfacts span{
  display:block; margin-top:5px; font-size:11.5px;
  color:var(--ink-3); line-height:1.75;
}

/* ---------- 表单卡 ---------- */
.jcard{
  margin-top:20px; padding:22px 22px 24px;
  background:var(--card); border:1px solid var(--line); border-radius:3px;
}

.jstep{
  display:flex; align-items:center; gap:9px; margin:22px 0 12px;
  font-size:13.5px; color:var(--ink); letter-spacing:.01em;
}
.jcard .jstep:first-child{ margin-top:0; }
.jstep span{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--line-3); color:var(--ink-2);
  font-family:var(--num); font-size:11px; line-height:18px; text-align:center;
}
.jstep em{
  font-style:normal; font-size:11px; color:var(--ink-4);
  letter-spacing:.04em; margin-left:2px;
}

/* ---------- 三张选择卡 ---------- */
.jpick{ display:grid; gap:10px; grid-template-columns:repeat(3, 1fr); }
.jpick-i{
  appearance:none; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 14px 13px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:3px;
  font-family:inherit; color:inherit;
  transition:border-color .16s, background .16s, transform .16s;
}
.jpick-i b{
  font-family:var(--serif); font-size:15px; letter-spacing:.02em; color:var(--ink);
}
.jpick-i small{
  font-size:11.5px; color:var(--ink-2); line-height:1.7;
}
.jpick-i i{
  margin-top:auto; padding-top:6px; font-style:normal;
  font-size:11px; color:var(--ink-4); line-height:1.65;
}
.jpick-i:hover{ border-color:var(--line-3); transform:translateY(-1px); }
/* 选中态：不用对勾图标，直接用深海底 + 金边——
   在三张卡里一眼能挑出"我选的是这张" */
.jpick-i.on{ background:var(--sea); border-color:var(--sand); box-shadow:inset 0 0 0 1px var(--sand); }
.jpick-i.on b{ color:#fff; }
.jpick-i.on small{ color:rgba(255,255,255,.82); }
/* 深底上的小字要再亮一点。0.5 的白在深蓝上只有 3:1 左右，
   手机上正对着太阳看基本读不出来。 */
.jpick-i.on i{ color:rgba(255,255,255,.66); }

/* ---------- 错误 ---------- */
.jerr{
  margin-top:16px; padding:11px 13px;
  background:var(--red-bg); border:1px solid rgba(179,58,43,.22); border-radius:2px;
  font-size:12.5px; color:var(--red); line-height:1.8;
}

/* ---------- 脚注 ---------- */
.jnote{
  margin-top:14px; font-size:11.5px; color:var(--ink-3); line-height:1.85;
}
.jnote b{ color:var(--ink-2); }

/* ---------- 成功页补充 ---------- */
.done .ticket .row b.no{ font-family:var(--num); letter-spacing:.06em; }

/* ---------- 手机 ---------- */
@media (max-width:820px){
  .jfacts{ grid-template-columns:1fr; gap:9px; }
  .jpick{ grid-template-columns:1fr; }
  .jpick-i{ padding:13px 14px; }
  .jcard{ padding:18px 16px 20px; margin-top:16px; }
  .jstep{ margin:20px 0 10px; }
}