/* 加入我们 page + homepage closing QR. QR stays a plain <img> (no overlays, no pointer-events tricks) so WeChat long-press recognition works. */
.join-qr{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto;pointer-events:auto}

/* Device-aware hint: desktop scans, phones long-press. */
.join-only-touch{display:none}
@media (max-width:760px){.join-only-touch{display:block;color:var(--paper);font-weight:700}}
@media (hover:none) and (pointer:coarse){.join-only-touch{display:block;color:var(--paper);font-weight:700}.join-only-desktop{display:none}}

/* Hero */
.join-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(36px,5vw,72px) clamp(56px,7vw,104px)}
.join-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,34px);min-width:0}
.join-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-top:1px solid var(--line)}
.join-topics li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 14px;padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.join-topics li>span{grid-row:span 2;font-family:monospace;font-size:.8125rem;color:#bc3518}
.join-topics strong{font-size:1.0625rem}
.join-topics small{font-size:.75rem;letter-spacing:.12em;color:var(--muted)}

/* QR card */
.join-card{justify-self:end;width:min(100%,420px);background:var(--ink);color:var(--paper);padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;gap:18px}
.join-card__head{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:700;letter-spacing:.12em}
.join-card__head span:last-child{color:var(--accent)}
.join-card__qr{background:#fff;padding:clamp(8px,1.4vw,14px)}
.join-card__body{display:flex;flex-direction:column;gap:6px}
.join-card__name{font-size:clamp(1.375rem,1rem + 1.2vw,1.875rem);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.join-card__cta{font-size:1rem;color:#d3d5ca}
.join-card__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;border-top:1px solid #ffffff2e;padding-top:14px}
.join-card__foot .text-link{color:var(--paper)}
.join-card__foot .text-link:hover{color:#ff7a58}
.join-card__note{font-size:.8125rem;color:#b4b8ab}

/* Steps */
.join-how{padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.join-how__head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:clamp(24px,3vw,40px)}
.join-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.join-steps li{display:flex;flex-direction:column;gap:12px;background:#e9e9df;padding:clamp(22px,2.6vw,34px)}
.join-steps__num{font-family:monospace;font-size:.875rem;color:#bc3518}
.join-steps h2{font-size:clamp(1.375rem,1rem + 1vw,1.75rem);letter-spacing:-.03em}
.join-steps p{font-size:1rem;line-height:1.85;color:#5c6056}
.join-steps b{color:var(--ink)}
.join-steps small{margin-top:auto;padding-top:8px;font-size:.75rem;letter-spacing:.12em;color:var(--muted)}

@media(max-width:900px){
.join-hero{grid-template-columns:1fr;align-items:start}
.join-card{justify-self:start}
.join-steps{grid-template-columns:1fr}
}
@media(max-width:760px){
.join-hero{padding-top:28px;gap:36px}
.join-card{width:100%;max-width:420px;justify-self:center}
.join-how__head{flex-direction:column;align-items:flex-start;gap:6px}
.join-how__head .section-note{text-align:left;max-width:none}
}

/* Homepage closing band: compact QR next to the CTA. */
.closing-join{display:flex;align-items:center;gap:18px;margin-top:40px;padding-top:28px;border-top:1px solid #15171333}
.closing-join__qr{flex:0 0 auto;width:112px;background:#fff;padding:6px}
.closing-join__copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.closing-join__copy strong{font-size:1.0625rem}
.closing-join__copy span{font-size:.9375rem;line-height:1.7}
.closing-join__copy .text-link{margin-top:4px}
.closing-join__copy .text-link:hover{color:var(--paper)}
@media(max-width:760px){.closing-join{margin-top:32px;align-items:flex-start}.closing-join__qr{width:104px}}