/* join.html · 企业批量报名通道 —— 专属命名空间 .pg-join */
.pg-join { background: var(--c-cream); }

.join-hero { padding: 150px 0 90px; background:
  linear-gradient(120deg, rgba(51,80,60,.82), rgba(51,80,60,.5)),
  url("../images/banner-join.jpg") center/cover no-repeat; color: var(--c-cream); }
.join-hero .crumb { color: rgba(251,247,240,.85); margin-bottom: 1rem; }
.join-hero .crumb a { color: var(--c-sage); }
.join-hero h1 { color: var(--c-cream); font-size: clamp(2rem,4.5vw,3rem); margin-bottom: .8rem; }
.join-hero p { max-width: 640px; color: #E9EFE4; }

/* 价值数据带 */
.join-value { padding: 70px 0; }
.value-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; text-align: center; }
.value-cell .vc-num { font-size: 2.4rem; font-weight: 800; color: var(--c-green-d); line-height: 1.1; }
.value-cell .vc-num span { font-size: 1.1rem; }
.value-cell .vc-label { font-size: .9rem; color: var(--c-ink); margin-top: .3rem; }

/* 流程：带箭头 4 步 */
.join-flow { padding: 60px 0 80px; background: var(--c-sand); }
.join-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.join-step { position: relative; background: var(--c-white); border-radius: var(--radius); padding: 1.8rem 1.4rem; box-shadow: var(--shadow-card); }
.join-step .js-no { display: inline-block; background: var(--c-forest); color: var(--c-cream); border-radius: 999px; padding: .2rem .9rem; font-size: .82rem; margin-bottom: .8rem; }
.join-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.join-step p { font-size: .88rem; color: var(--c-ink); }
.join-step:not(:last-child)::after { content: "→"; position: absolute; right: -1.1rem; top: 50%; transform: translateY(-50%); color: var(--c-green-d); font-size: 1.4rem; font-weight: 700; z-index: 2; }

/* 服务内容卡片 */
.join-cards { padding: 80px 0; }
.jc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; }
.jc-card { border-radius: var(--radius); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card); transition: transform .3s; }
.jc-card:hover { transform: translateY(-6px); }
.jc-card img { width: 100%; height: 200px; object-fit: cover; }
.jc-card .jcb { padding: 1.4rem 1.5rem 1.8rem; }
.jc-card h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.jc-card p { font-size: .9rem; color: var(--c-ink); }

/* 为什么企业要配齐 */
.join-why { padding: 50px 0 10px; }
.why-wrap { background: var(--c-white); border-radius: var(--radius); padding: 2.2rem 2.5rem; box-shadow: var(--shadow-card); }
.why-wrap h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.why-wrap p { font-size: .96rem; color: var(--c-ink); margin-bottom: .8rem; }

/* 合作表单 + 案例引用 */
.join-form { padding: 80px 0; background: var(--c-forest); }
.join-form .jf-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; }
.join-form h2 { color: var(--c-cream); font-size: 1.6rem; margin-bottom: 1.2rem; }
.jf-form { background: var(--c-white); border-radius: var(--radius); padding: 2.2rem; }
.jf-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jf-form textarea { min-height: 110px; resize: vertical; }
.jf-quote { background: rgba(251,247,240,.07); border: 1px solid rgba(216,228,208,.25); border-radius: var(--radius); padding: 2rem; color: #DCE6D6; }
.jf-quote h3 { color: var(--c-cream); margin-bottom: 1rem; }
.jf-quote blockquote { font-size: 1.02rem; line-height: 1.9; border-left: 3px solid var(--c-green); padding-left: 1rem; margin-bottom: 1.2rem; color: #E9EFE4; }
.jf-quote cite { font-style: normal; font-size: .88rem; color: var(--c-apricot); }
.jf-quote cite a.jf-link { color: var(--c-apricot); text-decoration: underline; }
.jf-quote p.jf-note { margin-top: 1.2rem; font-size: .9rem; color: #C6D3C0; }

/* 企业常见顾虑 */
.join-faq { padding: 60px 0 20px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.join-faq .faq-item { background: var(--c-white); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-card); border-left: 4px solid var(--c-green-d); }
.join-faq .faq-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.join-faq .faq-item p { font-size: .92rem; color: var(--c-ink); }
.join-faq .faq-note { margin-top: 1.4rem; font-size: .92rem; color: var(--c-ink); opacity: .9; text-align: center; }

/* 合同与费用说明 */
.join-contract { padding: 50px 0 10px; }
.jc-wrap { background: var(--c-white); border-radius: var(--radius); padding: 2.2rem 2.5rem; box-shadow: var(--shadow-card); border-left: 5px solid var(--c-forest); }
.jc-wrap h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.jc-wrap p { font-size: .95rem; color: var(--c-ink); margin-bottom: .8rem; }

/* 分阶段交付清单 */
.join-deliver { padding: 60px 0 10px; }
.deliver-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.deliver-item { background: var(--c-white); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-card); }
.deliver-item img { border-radius: 10px; width: 100%; height: auto; margin-bottom: .8rem; }
.deliver-item h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.deliver-item p { font-size: .88rem; color: var(--c-ink); }
@media (max-width: 768px) { .deliver-grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .value-band { grid-template-columns: repeat(2,1fr); }
  .join-steps { grid-template-columns: repeat(2,1fr); }
  .join-step:not(:last-child)::after { display: none; }
  .jc-grid { grid-template-columns: 1fr; }
  .jf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .join-steps { grid-template-columns: 1fr; }
  .jf-form .form-row { grid-template-columns: 1fr; }
}