/* 路之五年星辰会 · 发售页
色值继承自 海报/发售长图.py 派生的 HTML，未新定义。
手机为设计基准，PC 是放大。 */
:root{
/* 蓝调星辰夜空。底色参考 Tailwind slate-950 #020618（业界验证最广的深色底），
往蓝里推了一点，免得显灰。正文用冷白不用纯白——深底上纯白刺眼且发虚。 */
--bg:#060A18; --panel:#0D1428; --panel-line:rgba(240,196,106,.14);
--ink:#E8EDF7; --soft:rgba(232,237,247,.84); --dim:rgba(232,237,247,.58);
--mute:rgba(232,237,247,.46); --line:rgba(232,237,247,.12); --dot:rgba(232,237,247,.17);
/* 强调色 · 方案 A 星光金（正文对比度 16.8:1，强调色 12.0:1，都远超 WCAG 4.5:1）
想换方案改这两行就行：
B 冷白蓝 → --accent:#7FD6FF; --on-accent:#04121C;
C 原黄绿 → --accent:#BFD465; --on-accent:#0D1208; */
--accent:#F0C46A; --on-accent:#1A1206;
--pad:clamp(20px,5.6vw,40px);
--maxw:720px;
--fs:clamp(16px,4.2vw,18px);
--lh:1.8;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important} /* 兜底：hidden 就是要藏住，别被后面的 display 规则顶掉 */
html{-webkit-text-size-adjust:100%} /* 安卓横屏别自作主张放大字 */
body{
background:var(--bg); color:var(--ink);
font:var(--fs)/var(--lh) "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
em{font-style:normal;color:var(--accent);font-weight:700}
/* ── 中文排版 ──
① 断行：中文任何两个字之间都能断，大字号的句子就会把「定位」「几千」劈成两行。
展示性的大字（标题、引语、硬话）改成只在标点和空格处断；一整段实在放不下，才退回任意断。
正文不这么做——正文行短，按词断会参差得很难看——只开 pretty，避免末行孤零零剩一两个字。
② 行首标点：「《 是全角字，字形只占右半格，放在行首看起来比上下文往里缩了半个字。
支持 text-spacing-trim 的内核（Chrome 123+）交给它；不支持的（iOS / 微信 X5）手动往回拉半格。 */
p,li,blockquote,h1,h2,h3{text-wrap:pretty}
.sec h2,.why5,.sub,.quote,.her p,.refuse .big-line,.refuse b,.qa h3,.more .mn{word-break:keep-all;overflow-wrap:anywhere}
/* 句中的加粗不按词断：它跟正文同一段，按词断会让它前面那行空出半截 */
.nw{white-space:nowrap}
body{text-spacing-trim:trim-start}
.pull{text-indent:-.5em} /* 只拉第一行，多行段落后面几行不动 */
@supports (text-spacing-trim:trim-start){.pull{text-indent:0}}
b{font-weight:600}
.dim{color:var(--dim)}
.num,time,.big,.yen,.days b,.ladder b,.total b{font-family:"Helvetica Neue","PingFang SC",sans-serif}
.bar{display:block;width:56px;height:3px;background:var(--accent);margin-bottom:28px}
/* ───────── ① 首屏星空 ───────── */
.hero{
position:relative; overflow:hidden;
min-height:100vh; min-height:100svh; /* svh 让安卓地址栏收起时不跳；vh 是老内核兜底 */
display:flex; flex-direction:column; justify-content:flex-end;
padding:calc(env(safe-area-inset-top,0px) + 40px) 0 clamp(88px,22vh,180px);
}
.sky{position:absolute;inset:0;z-index:0;
background:linear-gradient(180deg,
#04081A 0%, #060D26 15%, #0A1540 32%, #112050 48%,
#1D2C5C 62%, #33375F 73%, #5B4B58 82%, #8A6A52 89%,
#A8815A 93%, #55402F 97%, #060A18 100%);
}
#stars i{position:absolute;border-radius:50%;background:#fff;opacity:var(--o)}
/* 星星分三级，靠层次造「闪耀」——全做成一样大，等于没有一颗够格被看见。
① 微尘星：静止，构成星空的底子
② 普通星：缓慢呼吸，当底噪
③ 亮星：带光晕、尖峰式闪一下，这才是视线真正落到的地方 */
#stars i.tw{animation:tw var(--d) ease-in-out var(--dl) infinite}
#stars i.flare{box-shadow:0 0 var(--g) rgba(255,255,255,.8),0 0 calc(var(--g) * 2) rgba(190,205,255,.35);
animation:flare var(--d) ease-out var(--dl) infinite}
/* 亮星的十字星芒：一横一竖两道细光，中间亮、两头淡出——像照片里拍到的亮星。
只给亮星：暗星本来就是点，全带十字会像撒了一把亮片。
方向统一不转角度：真星芒来自同一只「镜头」，每颗都朝一个方向。
长度 --ray 由 JS 按端给（手机短、PC 长），闪的那一下光芒伸长、变亮。 */
#stars i.flare::before,#stars i.flare::after{content:"";position:absolute;left:50%;top:50%;
width:var(--ray);height:1px;margin:-.5px 0 0 calc(var(--ray) / -2);
background:linear-gradient(90deg,transparent,rgba(220,230,255,.55) 35%,#fff 50%,rgba(220,230,255,.55) 65%,transparent);
opacity:.6;animation:ray var(--d) ease-out var(--dl) infinite}
#stars i.flare::after{transform:rotate(90deg)}
@keyframes ray{
0%,38%{opacity:.6}
47% {opacity:1}
58%,100%{opacity:.6}
}
@keyframes tw{0%,100%{opacity:var(--o)}50%{opacity:calc(var(--o) * .45)}}
/* 尖峰曲线：大部分时间待着，第 47% 处「啪」地亮一下再收回去。
缩放会连 box-shadow 一起放大，所以 2px 的点在那一下视觉上接近 8px——
这是让小点被看见的唯一办法，光靠调 opacity 不行。 */
@keyframes flare{
0%,38%{opacity:var(--o);transform:scale(1)}
47% {opacity:1;transform:scale(1.85)}
58% {opacity:var(--o);transform:scale(1)}
100% {opacity:var(--o);transform:scale(1)}
}
/* 流星：划过时长锁死 1.2s（由 JS 决定什么时候放一颗，不用 CSS 循环撑等待时间——
周期一变，百分比写的可见段就会跟着变快变慢，那样没法控制） */
.meteor{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
box-shadow:0 0 9px 1.5px rgba(255,255,255,.8);opacity:0;pointer-events:none;
animation:meteor 1.2s linear forwards}
.meteor::after{content:"";position:absolute;left:0;top:0;width:var(--tail);height:1.4px;
transform-origin:left center;transform:rotate(-29deg); /* 尾巴指回来路（右上） */
background:linear-gradient(to right,rgba(255,255,255,.85),rgba(255,255,255,.12) 62%,transparent)}
@keyframes meteor{
0% {opacity:0;transform:translate(0,0)}
10% {opacity:1}
70% {opacity:.9}
100%{opacity:0;transform:translate(-340px,188px)} /* 左下 29°，跟尾巴角度一致 */
}
.milkyway{position:absolute;left:-18%;top:2%;width:150%;height:62%;
background:radial-gradient(closest-side,rgba(176,196,255,.22),rgba(130,150,225,.07) 55%,transparent 78%);
transform:rotate(-24deg); filter:blur(26px); pointer-events:none}
.horizon{position:absolute;left:0;right:0;bottom:4%;height:34%;
/* 明确写宽高：closest-side 遇上贴边的圆心会算出 0，渐变会塌掉 */
background:radial-gradient(54% 128% at 56% 100%,
rgba(242,200,136,.55),rgba(200,146,92,.15) 46%,transparent 72%);
filter:blur(14px); pointer-events:none}
:root{--hills:clamp(120px,26vh,260px)}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--hills)}
.h-far{fill:#141A33} .h-near{fill:#060A18}
.figures{position:absolute;left:56%;transform:translateX(-50%);
bottom:calc(var(--hills) * .438); /* 近处山脊在 SVG 高度的 43.8% 处，跟着一起缩 */
width:clamp(42px,6.2vw,68px);height:auto;overflow:visible} /* viewBox 36×20，人高 ≈ 宽 ×0.5 */
.figures g{fill:var(--bg);stroke:var(--bg);stroke-linecap:round;stroke-linejoin:round}
.figures path{fill:none}
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
padding:0 var(--pad)} /* 跟 .sec 同一个版心，滚动时左边缘不跳 */
.kicker{font-size:clamp(12px,3.2vw,14px);letter-spacing:.14em;color:var(--mute)}
.kicker b{font-weight:400;color:var(--soft)}
/* 大标题＝产品名（照长图老读者版：对熟人，「路之」这个名字本身就是最强的钩子） */
.hero h1{
margin-top:clamp(18px,4.6vw,28px);
font-size:clamp(38px,10.4vw,64px); font-weight:700; line-height:1.2; letter-spacing:.02em;
text-wrap:balance;
}
.hero .bar{margin:clamp(26px,6vw,36px) 0 clamp(20px,5vw,28px)}
.why5{margin-top:clamp(10px,2.6vw,14px);font-size:clamp(19px,5.2vw,26px);font-weight:600;color:var(--ink)}
.sub{font-size:clamp(16px,4.3vw,20px);line-height:1.75;color:var(--soft);text-wrap:pretty}
.path{margin-top:10px;font-size:clamp(13px,3.5vw,15px);color:var(--dim);letter-spacing:.02em}
.path span{margin:0 .5em;color:var(--mute)}
.hero-price{margin-top:14px;font-size:clamp(14px,3.7vw,16px);color:var(--dim)}
.hero-price b{margin-left:.3em;font-size:1.15em;color:var(--ink);font-family:"Helvetica Neue","PingFang SC",sans-serif}
.early{margin-top:clamp(28px,7vw,40px);font-size:clamp(14px,3.7vw,16px);color:var(--dim);line-height:1.7}
.early b{display:inline-block;margin-top:8px;font-size:clamp(26px,7.4vw,36px);font-weight:600;color:var(--accent)}
/* ───────── 版心 ───────── */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,16vw,110px) var(--pad)}
.sec h2{font-size:clamp(24px,6.4vw,34px);font-weight:600;line-height:1.35;letter-spacing:.02em}
.lead{margin-top:14px;color:var(--soft);text-wrap:pretty}
.eyebrow{font-size:clamp(12px,3.2vw,13px);letter-spacing:.1em;color:var(--mute)}
/* ───────── ② 成果 ───────── */
.proof{text-align:left}
.quote{margin-top:20px;font-size:clamp(21px,5.8vw,29px);line-height:1.62;font-weight:600}
/* 不悬挂：悬挂引号是西文排法，放在中文里像排错了。「本身只占右半格，往回拉半格正好跟正文齐 */
.quote::before{content:"「";color:var(--accent);margin-left:-.5em}
@supports (text-spacing-trim:trim-start){.quote::before,.quote::after{margin-left:0}} /* 这类内核自己会挤压「。」」，再手动收就把句号压没了 */
.quote::after{content:"」";color:var(--accent);margin-left:-.3em} /* 句号后面本来就有空，收一点 */
.cite{margin-top:18px;font-size:clamp(13px,3.4vw,14px);color:var(--mute)}
/* 心笛的时间线。律令「只有表达连续时才用线」——这里不画线，靠日期列对齐就够了 */
.story{list-style:none;margin-top:clamp(40px,10vw,56px)}
.story li+li{margin-top:clamp(18px,4.6vw,24px)}
.story time{display:block;font-size:clamp(13px,3.4vw,14px);color:var(--mute);letter-spacing:.04em}
.story p{margin-top:4px;color:var(--soft);text-wrap:pretty}
.her{margin-top:clamp(40px,10vw,56px);color:var(--ink);font-weight:500;text-wrap:pretty}
.her .who{margin-top:10px;font-size:clamp(13px,3.4vw,14px);font-weight:400;color:var(--mute)}
.more{display:flex;align-items:center;justify-content:space-between;gap:16px;
margin-top:clamp(32px,8vw,44px);padding:clamp(16px,4.2vw,20px) clamp(18px,4.6vw,24px);
background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;
text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.more:hover{border-color:rgba(240,196,106,.4)}
.more .ml{display:block;font-size:clamp(13px,3.4vw,14px);color:var(--accent)}
.more .mn{display:block;margin-top:4px;text-indent:-.5em;font-size:clamp(15px,4vw,17px);font-weight:500} /* 《 行首回拉半格 */
@supports (text-spacing-trim:trim-start){.more .mn{text-indent:0}}
.more .ma{flex:none;font-size:20px;color:var(--accent)}
.proof{padding-bottom:clamp(40px,10vw,64px)} /* 案例到此收住，别再空一大段才进权益 */
/* ───────── ②b 五年路线 ───────── */
/* 上面一块天吸在屏幕顶上，下面的阶段文字从它底下滑过去；滑到哪步，main.js 给哪步加 .on。
先写「全亮」的样子，.live（JS 接管后才有）再把没走到的压暗——脚本挂了也是一张完整的图。 */
.journey{padding-bottom:clamp(40px,10vw,64px)}
.jr-stage{position:sticky;top:0;z-index:2;
margin:clamp(28px,7vw,40px) calc(var(--pad) * -1) 0; /* 底色铺到版心外，文字滑过时两侧不露 */
padding:calc(env(safe-area-inset-top,0px) + 10px) var(--pad) 0;background:var(--bg)}
.jr-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;
background:linear-gradient(var(--bg),transparent);pointer-events:none} /* 文字是淡进天底下的，不是被一刀切掉 */
/* 天最多占 42vh：PC 上按宽度放大会把一屏吃光，文字就没地方滑了。宽高比 360:200。
不卡得更紧：常见的 PC 窗口（高 ≥ 843px）要能铺满版心，左右才跟正文对齐 */
.jr-sky{display:block;width:min(100%,76vh);height:auto;margin:0 auto;border-radius:14px}
.jr-dust circle{fill:#fff;opacity:.34}
.seg{fill:none;stroke:var(--accent);stroke-width:.9;opacity:.72;stroke-dasharray:1;stroke-dashoffset:0}
.seg.dip{stroke:var(--ink);opacity:.3} /* 进出低谷的两段不是金的 */
.star .halo{fill:url(#jrGlow)}
.star .ray{fill:none;stroke:var(--accent);stroke-width:.6;opacity:.75}
.star .core{fill:var(--accent)}
.star .ring{fill:none;stroke:var(--dim);stroke-width:1}
.star text{font-size:10px;fill:var(--soft);text-anchor:middle;letter-spacing:.04em}
.star.dip text{fill:var(--dim)}
.star text.side{text-anchor:start} /* 低谷的字放右边：放下面会压到走过来的小人头上 */
.jr-axis{font:9px "Helvetica Neue","PingFang SC",sans-serif;fill:var(--mute);text-anchor:middle;letter-spacing:.06em}
.jr-ground{fill:var(--bg)}
.jr-people{fill:var(--bg);stroke:var(--bg);stroke-linecap:round;stroke-linejoin:round}
.jr-people path{fill:none}
.jr-people .torso{stroke-width:2.1} .jr-people .leg{stroke-width:1.5} .jr-people .arm{stroke-width:1}
/* 153 = 地面 176 − 人高 20×1.15。x 由 main.js 按当前那颗星的 data-x 改 */
.jr-walk{transform:translate(308px,153px);transition:transform 1.3s cubic-bezier(.45,0,.3,1)}
.journey.walking .jr-bob{animation:jrbob .34s ease-in-out infinite}
@keyframes jrbob{0%,100%{transform:translateY(0) scale(1.15)}50%{transform:translateY(-1.1px) scale(1.15)}}
.jr-now{display:flex;align-items:baseline;gap:.8em;padding:10px 0 12px}
.jr-now span{font-size:clamp(12px,3.2vw,13px);letter-spacing:.1em;color:var(--mute)}
.jr-now b{font-size:clamp(17px,4.6vw,21px);font-weight:600;color:var(--accent)}
.jr-now b.swap{animation:jrswap .5s ease}
@keyframes jrswap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.steps{list-style:none;margin-top:clamp(8px,2vw,16px)}
.step{padding-top:clamp(44px,11vw,64px)}
.step h3{font-size:clamp(19px,5.1vw,23px);font-weight:600}
.step dl{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:10px 14px;margin-top:16px}
.step dt{font-size:clamp(12px,3.2vw,13px);letter-spacing:.1em;color:var(--mute)}
.step dd{color:var(--soft);text-wrap:pretty}
.step dd.to{color:var(--accent);font-weight:600}
.step.dip .qn{color:var(--mute)}
.step.dip p{margin-top:12px;color:var(--soft)}
.step.dip h3+p{margin-top:16px}
.step.dip b{color:var(--ink)}
.jr-end{margin-top:clamp(48px,12vw,72px);font-size:clamp(19px,5.1vw,23px);font-weight:600;line-height:1.6}
.journey.live .seg{stroke-dashoffset:1;transition:stroke-dashoffset .9s ease}
.journey.live .seg.on{stroke-dashoffset:0}
/* 线先画过去（.9s），星再亮——延迟 .6s 让两件事接上 */
.journey.live .star .halo,.journey.live .star .ray{opacity:0;transition:opacity .6s ease .6s}
.journey.live .star .core{fill:var(--ink);opacity:.3;transition:fill .6s ease .6s,opacity .6s ease .6s}
.journey.live .star .ring{opacity:.4;transition:opacity .6s ease .6s}
.journey.live .star text{opacity:.34;transition:opacity .6s ease .6s} /* 没走到的也留个淡影：前面有什么，一眼看得到 */
.journey.live .star.on .halo,.journey.live .star.on .ring,.journey.live .star.on text{opacity:1}
.journey.live .star.on .ray{opacity:.75}
.journey.live .star.on .core{fill:var(--accent);opacity:1}
.journey.live .star.cur .halo{animation:jrpulse 2.6s ease-in-out .6s infinite}
@keyframes jrpulse{0%,100%{opacity:1}50%{opacity:.45}}
.journey.live .step{opacity:.38;transition:opacity .5s ease}
.journey.live .step.on{opacity:1}
.journey.paused .star.cur .halo{animation-play-state:paused}
/* 横屏的手机太矮，天吸顶就没地方看字了，放它跟着滚走 */
@media (max-height:520px){.jr-stage{position:static}}
@media (prefers-reduced-motion:reduce){
.jr-walk,.journey.live .seg,.journey.live .step,
.journey.live .star .halo,.journey.live .star .ray,.journey.live .star .core,
.journey.live .star .ring,.journey.live .star text{transition:none}
.journey.walking .jr-bob,.journey.live .star.cur .halo,.jr-now b.swap{animation:none}
}
/* ───────── ③ 权益 ───────── */
/* 律令：这一段一根线都没有。分层全靠留白和字阶——照引子系列海报的做法。 */
.tier{margin-top:clamp(56px,14vw,88px)}
.tier h3{font-size:clamp(20px,5.4vw,26px);font-weight:600;letter-spacing:.01em}
.ts{margin-top:8px;font-size:clamp(14px,3.7vw,15px);color:var(--dim)}
.tier ul{list-style:none;margin-top:clamp(34px,8.5vw,46px)}
.tier li+li{margin-top:clamp(20px,5vw,26px)}
/* 18 条编号跨三层连续数（照长图：编号替读者报数）。冷白描边圆，不用金——18 个金点会把这一屏淹掉 */
.perks{counter-reset:perk}
.tier li{counter-increment:perk;position:relative;padding-left:clamp(34px,9vw,40px)}
.tier li::before{content:counter(perk);position:absolute;left:0;top:.2em;
width:clamp(22px,5.8vw,24px);height:clamp(22px,5.8vw,24px);border:1px solid var(--dot);border-radius:50%;
font:11px/1 "Helvetica Neue",sans-serif;color:var(--dim);display:flex;align-items:center;justify-content:center}
.r{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.r b{font-size:clamp(16px,4.3vw,18px);font-weight:500;color:var(--ink);text-wrap:balance}
.r em{flex:none;font-size:clamp(15px,3.9vw,17px);font-weight:400;color:var(--soft);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* 等宽数字，右边自成一列 */
.r em.t{font-size:clamp(13px,3.3vw,14px);color:var(--mute);letter-spacing:.08em}
.tier .d{margin-top:7px;font-size:clamp(14px,3.6vw,15px);line-height:1.7;color:var(--dim);
text-wrap:pretty;padding-right:12%} /* 说明比标题窄一截，右边留出呼吸 */
.sum{margin-top:clamp(64px,16vw,100px);text-align:center}
.sn{margin-top:12px;font-size:clamp(44px,12vw,64px);font-weight:300;color:var(--accent);
line-height:1.05;letter-spacing:-.02em}
.sum .d{margin-top:14px;font-size:clamp(14px,3.6vw,15px);color:var(--dim)}
.sn small{margin-left:.2em;font-size:.36em;color:var(--soft)}
/* ───────── ③b 问答 ───────── */
.qa{margin-top:clamp(44px,11vw,64px)}
.qa h3{font-size:clamp(19px,5.1vw,23px);font-weight:600}
.qn{display:block;margin-bottom:6px;font:500 clamp(13px,3.4vw,14px)/1 "Helvetica Neue",sans-serif;
color:var(--accent);letter-spacing:.08em}
.qa p{margin-top:12px;color:var(--soft);text-wrap:pretty}
.qa h3+p{margin-top:16px}
.qa b{color:var(--ink);font-weight:600}
.foot-note{margin-top:clamp(44px,11vw,64px);font-size:clamp(14px,3.6vw,15px);
color:var(--dim);line-height:1.9;text-wrap:pretty}
.foot-note b{color:var(--soft)}
/* ───────── ⑤ 价格 ───────── */
.now{margin-top:clamp(36px,9vw,52px);text-align:center;
background:var(--panel);border:1px solid var(--panel-line);border-radius:24px;
padding:clamp(30px,8vw,44px) var(--pad)}
.now .tag{font-size:clamp(12px,3.2vw,13px);letter-spacing:.1em;color:var(--accent)}
.big{margin-top:10px;font-size:clamp(58px,17vw,96px);font-weight:300;color:var(--accent);
line-height:1;letter-spacing:-.03em}
.big .yen{font-size:.48em;font-weight:400;margin-right:.04em}
.anchor{margin-top:14px;font-size:clamp(14px,3.6vw,15px);color:var(--mute);letter-spacing:.04em}
.anchor s{color:var(--dim)}
.ladder{list-style:none;margin-top:clamp(28px,7vw,40px)}
.ladder li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding:11px 0;color:var(--dim)}
.ladder time{font-size:clamp(14px,3.7vw,15px)}
.ladder b{font-weight:500;font-size:clamp(16px,4.3vw,18px);font-variant-numeric:tabular-nums}
.ladder li.cur{color:var(--ink)}
.ladder li.cur b{color:var(--accent);font-weight:600}
.ladder li.cur time::before{content:"▸ ";color:var(--accent)}
.ladder li.past{display:none} /* 过了的档不给看：用户看见更便宜的价，只会觉得自己来晚了 */
.ladder li.end{margin-top:6px;color:var(--mute)}
.early-box{margin-top:clamp(32px,8vw,48px);padding:clamp(26px,7vw,38px) var(--pad);
border:1px dashed rgba(240,196,106,.34);border-radius:22px;color:var(--soft)}
.early-box p+p{margin-top:8px}
.early-box .eyebrow+p{margin-top:16px}
.early-box .days{margin-top:6px;text-align:center}
.early-box .days span{font-size:clamp(15px,3.9vw,16px);color:var(--soft);margin-right:.3em}
.early-box .days b{font-size:clamp(46px,13vw,68px);font-weight:600;color:var(--accent);line-height:1.1}
.early-box .days b::after{content:" 天";font-size:.32em;font-weight:400;color:var(--soft)}
/* ───────── ⑥ 劝退（比正文更深一档：这一段是熄了灯说实话，下沉不上浮） ───────── */
.refuse{max-width:none;width:100%;color:var(--ink);
/* 单靠「比正文深一档」看不出来——这个明度区间已经压不动了。
改用上下更深、中间略亮的渐变做出凹槽，配合更大的上下留白，这段才真的沉得下去。 */
background:linear-gradient(180deg,#01030A 0%,#050912 26%,#050912 74%,#01030A 100%);
padding-top:clamp(84px,21vw,140px);padding-bottom:clamp(84px,21vw,140px)}
.refuse .in{max-width:calc(var(--maxw) - 2 * var(--pad));margin:0 auto} /* 扣掉 .sec 两侧的 pad，左边缘才跟别的段落对齐（PC 上原来差 40px） */ /* 包一层，bar 才跟别处一样左对齐 */
.refuse .bar{background:var(--accent)}
.refuse h2{color:var(--accent)}
.refuse p{margin-top:20px;color:var(--soft);text-wrap:pretty}
.refuse .big-line{margin-top:26px;font-size:clamp(24px,6.6vw,34px);font-weight:700;
line-height:1.4;color:var(--ink)} /* 硬话用白，比金色更冷更有力 */
.refuse b{color:var(--ink);font-weight:700}
.refuse .dim{color:var(--mute);font-size:clamp(15px,3.9vw,16px)}
/* ───────── ⑦ 加入 ───────── */
.jsteps{list-style:none;margin-top:clamp(32px,8vw,46px);display:flex;flex-direction:column;
gap:clamp(20px,5vw,26px)}
.jsteps li{display:flex;gap:16px;align-items:flex-start}
.jsteps b{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);
color:var(--on-accent);display:grid;place-items:center;font-size:15px;font-weight:600;margin-top:2px}
.jsteps p{font-weight:600}
.jsteps span{display:block;margin-top:4px;font-size:clamp(14px,3.6vw,15px);color:var(--dim)}
.qr{margin:clamp(40px,10vw,60px) auto 0;width:min(240px,62vw);text-align:center}
.qr img{width:100%;height:auto;display:block;background:#fff;border-radius:16px;padding:14px;
box-shadow:0 0 70px rgba(240,196,106,.15)}
.qr figcaption{margin-top:16px;font-size:clamp(14px,3.6vw,15px);color:var(--soft);letter-spacing:.1em}
footer{text-align:center;padding:clamp(48px,12vw,72px) var(--pad)
calc(env(safe-area-inset-bottom,0px) + clamp(40px,10vw,64px));
border-top:1px solid var(--line);font-size:clamp(13px,3.4vw,14px);color:var(--mute)}
footer .dim{margin-top:8px;letter-spacing:.06em}
footer .beian{margin-top:20px;font-size:12px;letter-spacing:.04em}
footer .beian a{color:inherit;text-decoration:none}
footer .beian a:hover{text-decoration:underline}
/* ───────── ⑦b 微信支付 ───────── */
.paybox{margin-top:clamp(32px,8vw,44px);padding:clamp(26px,6.4vw,38px) clamp(20px,5vw,32px);
background:var(--panel);border:1px solid var(--panel-line);border-radius:20px;text-align:center}
.pb-price{font-family:"Helvetica Neue","PingFang SC",sans-serif;line-height:1;
display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.pb-price .yen{font-size:clamp(22px,5.6vw,26px);color:var(--accent);font-weight:400}
.pb-price b{font-size:clamp(50px,13vw,68px);font-weight:300;color:var(--accent);letter-spacing:-.03em} /* 跟价格卡同一种细体大字 */
.pb-price s{font-size:clamp(14px,3.6vw,15px);color:var(--mute);font-weight:400;letter-spacing:.04em}
.pb-seat{margin-top:14px;font-size:clamp(14px,3.6vw,15px);color:var(--dim)}
.pb-seat b{color:var(--accent)}
.paybtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
margin-top:clamp(22px,5.6vw,30px);width:100%;max-width:340px;
padding:16px 28px;border:0;border-radius:999px;cursor:pointer;
background:var(--accent);color:var(--on-accent);
font:600 clamp(16px,4.2vw,18px)/1 "PingFang SC","Hiragino Sans GB",sans-serif;
letter-spacing:.04em;box-shadow:0 10px 34px rgba(240,196,106,.24);
transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}
.paybtn svg{fill:currentColor;flex:none}
.paybtn:hover{transform:translateY(-2px);box-shadow:0 14px 42px rgba(240,196,106,.34)}
.paybtn:active{transform:translateY(0)}
.paybtn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.paybtn.small{max-width:220px;padding:13px 24px;font-size:15px;margin-top:20px}
.pb-note{margin-top:18px;font-size:clamp(14px,3.6vw,15px);color:var(--dim);line-height:1.7}
.talk-first{margin-top:clamp(40px,10vw,56px);padding-top:clamp(32px,8vw,44px);
border-top:1px solid var(--line);text-align:center}
.talk-first .tf-q{font-size:clamp(15px,3.9vw,16px);color:var(--soft)}
.talk-first .qr{margin-top:clamp(24px,6vw,32px);width:min(200px,54vw)}
.talk-first .tf-note{margin-top:20px;font-size:clamp(14px,3.6vw,15px);color:var(--mute);
line-height:1.75;text-wrap:pretty}
/* 后端不通 / 没配好 / 满员：支付整块收起来，「先聊聊」升格成唯一入口 */
.join.pay-off .paybox{display:none}
.join.pay-off .talk-first{margin-top:clamp(32px,8vw,44px);padding-top:0;border-top:0}
.join.pay-off .talk-first .tf-q{display:none} /* 降级后它成了唯一入口，不用再问「想先聊聊吗」 */
.join.pay-off .talk-first .qr{width:min(240px,62vw)}
/* ───────── 支付弹层 ───────── */
/* ⚠️ 作者样式表压过浏览器默认的 [hidden]{display:none}，所以给元素加了 hidden 属性
还写 display:xxx 的话，它根本藏不住——这里就翻过车：一层 opacity:0 的全屏遮罩
一直盖在页面上，整个页面都点不动，而 JS 的 element.click() 绕过命中检测照样能过，
自动化测试发现不了。下面那条 [hidden] 兜底规则别删。 */
.pay-mask{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);
background:rgba(4,8,22,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;transition:opacity .22s ease;overflow-y:auto}
.pay-mask.on{opacity:1}
.pay-mask[hidden]{display:none}
.pay-card{position:relative;width:min(400px,100%);max-height:100%;overflow-y:auto;
padding:clamp(28px,6.4vw,38px) clamp(20px,5vw,30px);
background:var(--panel);border:1px solid var(--panel-line);border-radius:22px;
text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.55);
transform:translateY(14px) scale(.98);transition:transform .22s ease}
.pay-mask.on .pay-card{transform:none}
.pay-close{position:absolute;top:10px;right:14px;width:36px;height:36px;border:0;
background:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.pay-close:hover{color:var(--ink)}
.pay-title{text-wrap:balance;font-size:clamp(17px,4.4vw,19px);font-weight:600;color:var(--ink);letter-spacing:.04em}
.pay-amount{margin-top:10px;font-family:"Helvetica Neue","PingFang SC",sans-serif;line-height:1}
.pay-amount .yen{font-size:20px;color:var(--accent);font-weight:400}
.pay-amount b{font-size:clamp(38px,10vw,46px);color:var(--accent);font-weight:300}
.pay-qr{margin:clamp(20px,5vw,26px) auto 0;width:min(220px,58vw);aspect-ratio:1;
background:#fff;border-radius:16px;padding:12px;display:grid;place-items:center;
box-shadow:0 0 60px rgba(240,196,106,.18)}
.pay-qr svg{width:100%;height:100%;display:block}
.pay-qr-fallback{font-size:12px;color:#333;line-height:1.6;word-break:break-all;padding:6px}
.pay-qr-fallback code{font-size:11px;color:#0a5}
/* 出二维码之前转一下，别让人对着空白框发愣 */
.pay-spin{width:34px;height:34px;border-radius:50%;
border:3px solid rgba(0,0,0,.12);border-top-color:#07c160;animation:payspin .8s linear infinite}
@keyframes payspin{to{transform:rotate(360deg)}}
.pay-tip{margin-top:20px;font-size:clamp(14px,3.6vw,15px);color:var(--soft)}
.pay-meta{margin-top:14px;font-size:13px;color:var(--mute);line-height:1.9}
.pay-meta .pay-no b{font-family:"Helvetica Neue",monospace;color:var(--dim);font-weight:500;letter-spacing:.04em}
/* 成功态 */
.pay-check svg{display:block;margin:0 auto;fill:none;stroke:var(--accent);stroke-width:3;
stroke-linecap:round;stroke-linejoin:round}
.pay-check circle{opacity:.34}
.pay-check path{stroke-dasharray:36;stroke-dashoffset:36;animation:paycheck .45s .1s ease-out forwards}
@keyframes paycheck{to{stroke-dashoffset:0}}
#viewDone .pay-title{margin-top:16px;font-size:clamp(19px,5vw,22px);color:var(--accent)}
.pay-done-sub{margin-top:10px;font-size:13px;color:var(--mute)}
.pay-done-sub b{color:var(--dim);font-family:"Helvetica Neue",monospace;font-weight:500}
.pay-done-qr{margin:clamp(22px,5.6vw,28px) auto 0;width:min(180px,48vw)}
.pay-done-note{text-wrap:pretty;margin-top:18px;font-size:clamp(14px,3.6vw,15px);color:var(--soft);line-height:1.75}
/* 失败 / 过期态 */
.pay-fail-msg{margin-top:12px;font-size:clamp(14px,3.6vw,15px);color:var(--dim);line-height:1.75;text-wrap:pretty}
.pay-fallback{margin-top:clamp(26px,6.4vw,34px);padding-top:clamp(22px,5.6vw,28px);border-top:1px solid var(--line)}
.pay-fallback p{font-size:14px;color:var(--mute)}
.pay-fallback .qr{margin-top:18px;width:min(170px,46vw)}
@media (prefers-reduced-motion:reduce){
.pay-mask,.pay-card{transition:none}
.pay-spin{animation-duration:1.6s}
.pay-check path{animation:none;stroke-dashoffset:0}
}
/* ───────── 兜底 ───────── */
/* 系统开了「减弱动态效果」就全静下来 */
@media (prefers-reduced-motion:reduce){
#stars i.tw,#stars i.flare,#stars i.flare::before,#stars i.flare::after,.meteor{animation:none}
.meteor{display:none}
}
/* 首屏滚出视口就停，别在后台空转耗电 */
.sky.paused i.tw,.sky.paused i.flare,.sky.paused i.flare::before,.sky.paused i.flare::after,.sky.paused .meteor{animation-play-state:paused}
@media (min-width:768px){
:root{--lh:1.85}
.hero{justify-content:center}
}