/* camps.css · 营页专用（2026-09-27 老板：「一堆字，把赢可视化」「学苹果：优美简洁，一眼看出哪是哪」）
   原则：一屏一句话；标题居中放大、留白拉大；一个板块一张图；字只留一句；框线少、圆角软；能点的长得像能点。颜色全部走 site.css 的变量。 */
.cp{max-width:var(--wrap);margin:0 auto;padding:0 2.5rem;--r:20px;--r-s:12px}
.cp svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cp-sec{padding-top:clamp(5rem,9vw,8rem)}
.cp-sec-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:2.8rem}
.cp-sec-head h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.2;margin:0;letter-spacing:0}
.cp-sec-head p{font-size:var(--fs-3);color:var(--text-secondary);margin:0;max-width:30em}

/* 1 开场：居中一句话 + 整幅 30 格 */
.cp-hero{padding:4.5rem 0 0;display:flex;flex-direction:column;align-items:center;gap:3rem;text-align:center}
.cp-hero-copy{display:flex;flex-direction:column;align-items:center;gap:1.2rem;max-width:40em}
.cp-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.12;margin:0;letter-spacing:0}
.cp-hero .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6;color:var(--text-secondary);max-width:26em;margin:0}
.cp-hero .lab-actions{justify-content:center;margin-top:.4rem}
.cp-cal{margin:0;width:100%;max-width:860px;display:flex;flex-direction:column;gap:1.2rem}
.cp-cal-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:.6rem}
.cp-cal .d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--border);font-size:var(--fs-2);font-variant-numeric:tabular-nums;color:var(--text-muted);position:relative;animation:cp-in .4s var(--ease) both;animation-delay:calc(var(--i,0)*30ms)}
.cp-cal .d.done{background:var(--gold);border-color:var(--gold);color:#15120f;font-weight:700}
.cp-cal .d.last{border:2px solid var(--gold);color:transparent;background:transparent}
.cp-cal .d.last::before{content:"🏆";position:absolute;font-size:1.3rem;left:50%;top:50%;transform:translate(-50%,-50%)}
@keyframes cp-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.cp-cal figcaption{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;font-size:var(--fs-0);color:var(--text-muted)}
.cp-cal figcaption span{display:inline-flex;align-items:center;gap:.4rem}
.cp-cal figcaption i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--border);animation:none}
.cp-cal figcaption i.done{background:var(--gold);border-color:var(--gold)}
.cp-cal figcaption i.last{border:2px solid var(--gold)}

/* 2 四步：大图标，无框 */
.cp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.cp-steps li{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cp-steps .ico{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);color:var(--gold);font-size:2.2rem;margin-bottom:.6rem}
.cp-steps b{font-size:var(--fs-4);font-weight:700;color:var(--text-primary)}
.cp-steps span:last-child{font-size:var(--fs-1);color:var(--text-secondary);line-height:1.6;max-width:16em}

/* 3 三期标签 + 营卡（上图下字） */
.cp-tabs{display:flex;justify-content:center;gap:.4rem;margin-bottom:2rem;padding:.3rem;border-radius:999px;background:var(--panel);border:1px solid var(--border);width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.cp-tabs button{display:flex;flex-direction:column;align-items:center;gap:0;padding:.55rem 1.3rem;border:none;border-radius:999px;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--sans);min-width:130px;transition:all .2s var(--ease)}
.cp-tabs button b{font-size:var(--fs-1);font-weight:600;color:inherit}
.cp-tabs button span{font-size:.72rem;letter-spacing:.02em;opacity:.8}
.cp-tabs button:hover{color:var(--text-primary)}
.cp-tabs button.on{background:var(--gold);color:#15120f}
.cp-round{display:none;grid-template-columns:1fr 1fr;gap:1.5rem}
.cp-round.on{display:grid}
.cp-camp{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .2s}
.cp-camp:hover{transform:translateY(-3px);border-color:var(--gold)}
.cp-camp.is-mine{border:2px solid var(--gold)}
.cp-camp.is-mine .cp-camp-body::before{content:"测出来推荐你进这个";align-self:flex-start;font-size:var(--fs-0);color:#15120f;background:var(--gold);padding:.2rem .7rem;border-radius:999px;letter-spacing:.02em}
html[lang="en"] .cp-camp.is-mine .cp-camp-body::before{content:"Recommended for your type"}
.cp-art{background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:2.2rem 1rem 1.8rem;text-align:center;border-bottom:1px solid var(--border)}
.cp-art svg{font-size:3.4rem;color:var(--gold);margin-bottom:.6rem}
.cp-art b{font-size:2rem;font-weight:700;color:var(--text-primary);letter-spacing:-.01em;line-height:1.1}
.cp-art span{font-size:var(--fs-1);color:var(--text-muted)}
.cp-camp-body{padding:1.6rem 1.8rem 1.6rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.cp-pill{align-self:flex-start;font-size:var(--fs-0);letter-spacing:.02em;color:var(--text-muted)}
.cp-pill.open{color:var(--gold);font-weight:600}
.cp-pill.open::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:.4rem;vertical-align:1px}
.cp-camp h3{font-size:clamp(1.5rem,2vw,1.9rem);margin:0;letter-spacing:0;line-height:1.25}
.cp-camp>div>p{font-size:var(--fs-2);color:var(--text-secondary);margin:0;line-height:1.7}
.cp-kv{list-style:none;margin:.4rem 0 0;padding:1rem 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.6rem}
.cp-kv li{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-1);color:var(--text-secondary);line-height:1.5}
.cp-kv svg{color:var(--gold);font-size:1.15rem}
.cp-kv b{color:var(--text-primary);font-weight:600;min-width:5.5em}
.cp-more{margin:0}
.cp-more summary{cursor:pointer;font-size:var(--fs-0);color:var(--text-muted);list-style:none;display:inline-flex;gap:.3rem;align-items:center}
.cp-more summary::-webkit-details-marker{display:none}
.cp-more summary::after{content:"+"}
.cp-more[open] summary::after{content:"–"}
.cp-more ul{margin:.6rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.cp-more li{font-size:var(--fs-0);color:var(--text-secondary);line-height:1.65}
.cp-camp-foot{margin-top:auto;padding-top:.8rem}
.cp-camp-foot .btn{width:100%;justify-content:center;padding:1rem 1.4rem;font-size:var(--fs-2);border-radius:var(--r-s)}

/* 4 赢：三块软面板 */
.cp-win-grid{display:grid;grid-template-columns:1fr 1.2fr 1.3fr;gap:1.5rem;align-items:stretch}
.cp-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem 1.7rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem}
.cp-card h3{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-4);margin:0;letter-spacing:0}
.cp-card h3 svg{color:var(--gold)}
.cp-card h3 small{margin-left:auto;font-size:var(--fs-0);font-weight:500;color:var(--text-muted)}
.cp-fine{font-size:var(--fs-0);color:var(--text-muted);line-height:1.6;margin:auto 0 0}
.cp-podium-sw{display:flex;gap:.3rem;padding:.25rem;border-radius:999px;background:var(--deep);width:max-content}
.cp-podium-sw button{font-family:var(--sans);font-size:var(--fs-0);padding:.4rem .9rem;border:none;border-radius:999px;background:transparent;color:var(--text-secondary);cursor:pointer}
.cp-podium-sw button.on{background:var(--gold);color:#15120f}
.cp-podium-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;align-items:end;height:200px;padding-top:.4rem}
.pb{display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;justify-content:flex-end}
.pb b{font-size:var(--fs-3);font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pb i{display:block;width:100%;height:var(--h);background:var(--gold-soft);border-radius:var(--r-s) var(--r-s) 0 0;transition:height .5s var(--ease)}
.pb.first i{background:var(--gold)}
.pb.first b{color:var(--gold);font-size:var(--fs-4)}
.pb span{font-size:var(--fs-0);color:var(--text-muted)}
.cp-board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.cp-board-list li{display:grid;grid-template-columns:1.2em 34px minmax(0,1fr) minmax(60px,1.2fr) auto;gap:.7rem;align-items:center;font-size:var(--fs-1)}
.cp-board-list .rk{color:var(--text-muted);font-variant-numeric:tabular-nums}
.cp-board-list li:first-child .rk{color:var(--gold);font-weight:700}
.cp-board-list .av{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-1)}
.cp-board-list li:last-child .av{background:var(--text-primary);color:var(--paper)}
.cp-board-list .nm{color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-board-list .bar{height:8px;border-radius:4px;background:var(--gold-soft);position:relative;overflow:hidden}
.cp-board-list .bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--gold);border-radius:4px}
.cp-board-list .ct{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-fish-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.cp-fish-btns button{font-family:var(--sans);display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.8rem .4rem;border:1px solid var(--border);border-radius:var(--r-s);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.72rem;line-height:1.3;transition:all .15s}
.cp-fish-btns button b{font-size:var(--fs-4);color:var(--gold);font-weight:700}
.cp-fish-btns button:hover{border-color:var(--gold);color:var(--text-primary);background:var(--gold-soft)}
.cp-fish-btns button.pop{animation:cp-pop .3s var(--ease)}
@keyframes cp-pop{50%{transform:scale(1.06)}}
.cp-meter{display:flex;flex-direction:column;gap:.5rem;padding-top:.4rem}
.cp-meter-bar{height:14px;border-radius:7px;background:var(--gold-soft);position:relative;overflow:hidden}
.cp-meter-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:7px;transition:width .5s var(--ease)}
.cp-meter-marks{position:relative;height:3.4rem}
.cp-meter-marks span{position:absolute;left:var(--at);transform:translateX(-100%);display:flex;flex-direction:column;align-items:flex-end;font-size:.7rem;color:var(--text-muted);line-height:1.3;text-align:right;white-space:nowrap;transition:color .2s}
.cp-meter-marks span svg{font-size:1.1rem;margin-bottom:.1rem}
.cp-meter-marks span b{font-size:var(--fs-1);color:var(--text-secondary)}
.cp-meter-marks span.hit,.cp-meter-marks span.hit b{color:var(--gold)}
.cp-fish-now{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;font-size:var(--fs-1);color:var(--text-secondary)}
.cp-fish-now b{font-size:2.2rem;font-weight:700;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.cp-fish-now em{font-style:normal;color:var(--gold);margin-left:.4rem}
.cp-fish-now button{margin-left:auto;font-family:var(--sans);font-size:var(--fs-0);background:none;border:none;color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 5 垒代表作 */
.cp-wall{display:flex;flex-direction:column;align-items:center;gap:.7rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:2.4rem 1.5rem}
.cp-wall-top,.cp-wall-base{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-1);color:var(--text-secondary)}
.cp-wall-top svg,.cp-wall-base svg{color:var(--gold)}
.cp-wall-top{font-weight:700;color:var(--text-primary);font-size:var(--fs-3)}
.cp-bricks{display:grid;grid-template-columns:repeat(2,minmax(160px,230px));gap:.5rem;width:100%;max-width:480px}
.cp-bricks span{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem .6rem;background:var(--gold-soft);border-radius:var(--r-s);color:var(--text-primary);font-size:var(--fs-1);font-weight:600}
.cp-wall-base{border-top:2px solid var(--gold);padding-top:.9rem;width:100%;max-width:480px;justify-content:center;text-align:center}

/* 6 作品墙 */
.cp-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.cp-tiles div{aspect-ratio:1;border:1px dashed var(--border);border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;text-align:center;padding:.6rem;font-size:var(--fs-0);color:var(--text-muted);line-height:1.4}
.cp-tiles span{font-size:var(--fs-2);font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}

/* 7 FAQ */
#faq .lab-faq{max-width:40em;margin:0 auto}
#faq .cp-sec-head{margin-bottom:1.6rem}

@media(max-width:1024px){
  .cp-steps{grid-template-columns:repeat(2,1fr)}
  .cp-round{grid-template-columns:1fr}
  .cp-win-grid{grid-template-columns:1fr}
  .cp-tiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .cp{padding:0 1.15rem}
  .cp-sec{padding-top:4rem}
  .cp-hero{padding-top:2.5rem;gap:2rem}
  .cp-cal-grid{grid-template-columns:repeat(6,1fr);gap:.4rem}
  .cp-cal .d{font-size:var(--fs-1);border-radius:8px}
  .cp-steps{gap:1.4rem 1rem}
  .cp-steps .ico{width:64px;height:64px;font-size:1.7rem}
  .cp-steps b{font-size:var(--fs-3)}
  .cp-tabs{width:100%}
  .cp-tabs button{min-width:0;flex:1;padding:.5rem .4rem}
  .cp-art{padding:1.6rem 1rem 1.4rem}
  .cp-camp-body{padding:1.3rem 1.3rem 1.2rem}
  .cp-fish-btns{grid-template-columns:repeat(2,1fr)}
  .cp-tiles{grid-template-columns:repeat(2,1fr)}
  .cp-bricks{grid-template-columns:1fr 1fr}
}