/* 本站专属样式。通用组件的样式在 assets/engine/style.css，不要改那份。 */

/* 首页右侧的示意漏斗 */
.hero-funnel{ background:var(--card); border:1.5px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px 16px; max-width:400px; justify-self:end; width:100%; }
.hf-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:2px dashed var(--line); }
.hf-tag{ font-size:.8rem; font-weight:700; padding:3px 12px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); }
.hf-shop{ font-family:var(--f-ms); font-weight:700; color:var(--ink-3); font-size:.92rem; }
.hf-steps{ list-style:none; margin:16px 0 8px; padding:0; display:flex; flex-direction:column; gap:8px; align-items:center; }
.hf-steps li{ width:var(--w); display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; background:var(--go-soft); color:var(--ink); font-size:.9rem; }
.hf-steps li:nth-child(2){ background:color-mix(in srgb,var(--go-soft) 60%,var(--gold-soft)); }
.hf-steps li:nth-child(3){ background:var(--gold-soft); }
.hf-steps li.is-win{ background:var(--accent); color:var(--on-accent); font-weight:700; }
.hf-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hf-num{ font-weight:700; font-variant-numeric:tabular-nums; }
.hf-note{ margin:10px 0 0; text-align:center; color:var(--ink-3); font-size:.85rem; }

/* 分隔线：三色条，对应漏斗的三层 */
.rebung-rule{ height:6px; margin-top:0; background:linear-gradient(90deg,var(--go) 0 33%,var(--gold) 33% 66%,var(--chili) 66% 100%); opacity:.6; -webkit-mask:none; mask:none; }

@media (max-width:900px){ .hero-funnel{ justify-self:stretch; max-width:none; margin-top:8px; } }