/* ============================================================
   World Backup Project（海外版）· 本页专属组件
   ------------------------------------------------------------
   ★ Design Token / base / 按钮 + 视觉锤 / hero / reveal / FAQ / 分段控件
     全部复用 campaign.css（同一套组件，同一份 token）。
     这里只补【国内版没有的新板块】：资格三行 / 四步 / Ideas 卡 / 时间线 /
     奖品阶梯 / Signed Creator / 合作平台 / Follow。
   ★ 禁 emoji：原文案稿用了 🎃☕💌🔁✨🗺️📣⏳🏆🔄⭐🔗🚀，
     全部换成线性 SVG（项目铁律：图标一律 SVG，避免 AI 感）。
   ============================================================ */

/* ---------- 通用：小节头（复用 .sec-head / .kicker / .sec-title） ---------- */
/* ★ 去掉 .kicker 左侧蓝色圆点（用户：「蓝色文字要不去掉左侧的圆点？有点多余？」） */
.kicker::before { display: none; }

.wb-lead {
  max-width: 820px; margin: 0 auto 40px; text-align: center;
  font-size: 1rem; line-height: 1.8; color: var(--color-text-secondary);
}
.wb-lead b { color: var(--color-text-primary); font-weight: 600; }
.wb-note {
  margin-top: 26px; text-align: center;
  font-size: 0.875rem; line-height: 1.75; color: var(--color-text-muted);   /* AA：tertiary 实测 2.53:1 */
}
.wb-note b { color: var(--color-text-secondary); font-weight: 600; }

/* ---------- Ideas 末尾提示标签 ---------- */
.wb-ideas-hint {
  margin-top: 32px; text-align: center;
}
.wb-hint-pill {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 100px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* ---------- 资格：三类工具（Hardware / Software / Plugins） ---------- */
/* ★ 2×2 而不是 4 列（2026-08-13 文档从 3 类工具变 4 类）：
   4 列时每卡仅约 370px，Software 卡那 5 个产品名 + 3 条能力描述会挤成多行；
   2×2 每卡约 780px，读起来舒展。窄屏由下方 @1100px 统一收成 1 列。 */
.wb-elig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* 产品名清单（文档「标题」列）。不用 h4 —— 它是 · 分隔的清单而不是标题，
   塞进 h4 会变成一个很长的标题行；这里按"强调过的正文"处理，允许折行。 */
.wb-elig-names {
  font-size: 1rem; font-weight: 700; line-height: 1.55;
  color: var(--color-text-primary); margin-bottom: 10px;
}
.wb-elig-card {
  padding: 0; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  overflow: hidden;
}
/* ★ 卡片封面图（16:9 比例） */
.wb-elig-img {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
.wb-elig-img img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
/* 卡片文字区内边距 */
.wb-elig-card .wb-tag,
.wb-elig-card .wb-elig-names,
.wb-elig-card > p,
.wb-elig-card > .wb-list { margin-left: 26px; margin-right: 26px; }
.wb-elig-card .wb-tag { margin-top: 20px; }
.wb-elig-card > p:last-child,
.wb-elig-card > .wb-list:last-child { padding-bottom: 24px; }
.wb-tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px;
  border-radius: var(--radius-sm);              /* 信息标注 = 小圆角 */
  background: rgba(51, 100, 255, 0.09); color: var(--color-brand-press);   /* AA：品牌蓝在此底 4.23:1 */
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.wb-elig-card h4 {
  font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 10px;
}
.wb-elig-card p { font-size: 0.875rem; line-height: 1.8; color: var(--color-text-secondary); }
.wb-elig-card .wb-list { margin-top: 4px; }
.wb-list { display: flex; flex-direction: column; gap: 7px; }
.wb-list span {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.875rem; line-height: 1.6; color: var(--color-text-secondary);
  /* ★ 390px 实测溢出 80px：hashtag「#WorldBackupProject」是 19 字符不可断词，
     在 flex 里的匿名文本项虽然能 shrink，但长单词本身断不开就会顶出容器。
     overflow-wrap:anywhere 允许在单词内断行；min-width:0 让文本项真的能收缩
     （flex item 默认 min-width:auto，不会缩到内容宽以下 —— 这是 flex 的经典坑）。 */
  overflow-wrap: anywhere;
  min-width: 0;
}
/* ★ 与国内版兑换两列同一处理：清单项前缀改圆点（视觉锤在并列清单里退化成噪点）。
   margin-top 8px = (行高 14px×1.6 = 22.4 − 圆点 6) / 2。 */
.wb-list .mk {
  flex: none; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--color-brand);
}

/* ---------- 四步（How to join） ---------- */
/* ★ 2026-08-17：列数随卡数从 4 改 3（文案稿把 HOW TO JOIN 改成三步）。
   改卡数时必须回来同步这个数，否则会空出一格。 */
.wb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wb-step {
  position: relative; padding: 26px 22px;
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* ★ 非可点击卡片不要有 hover 反馈（用户：「无法点击的东西，不要有悬浮的反馈」） */
}
.wb-step .step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(51, 100, 255, 0.1); color: var(--color-brand);
  font-size: 0.9375rem; font-weight: 700; margin-bottom: 14px;
}
.wb-step h4 { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 8px; }
.wb-step p { font-size: 0.8125rem; line-height: 1.75; color: var(--color-text-secondary); }
/* ★ 2026-08-17：以下两族规则（.wb-step--opt / .wb-step-cta）当前【没有消费者】——
   文案稿把 HOW TO JOIN 改成三步后，那个可选的第 3 步与它的按钮已从 HTML 删除。
   刻意保留而不删：这一步有可能回来（恢复片段见 _backups/20260817-en-creator/）。
   ⚠️ 若确定不再需要，连 .wb-step-cta 一起删，别只删一半。 */
.wb-step--opt { border-style: dashed; }
.wb-step--opt .step-n { background: rgba(159, 162, 179, 0.16); color: var(--color-text-tertiary); }

/* ---------- 投稿要求 + 平台（两列） ---------- */
.wb-req { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
.wb-req-col {
  padding: 26px 24px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
}
.wb-req-col--must { border-color: rgba(51, 100, 255, 0.28); background: rgba(51, 100, 255, 0.03); }
.wb-req-col h4 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 16px;
}
.wb-hash {
  /* ★ 去掉 XGRIDS 品牌字体（2026-08-13 用户定调）。 */
  font-family: var(--font-family); font-weight: normal; font-synthesis: none;
  color: var(--color-brand-press); letter-spacing: 0.5px;
  /* ★ hashtag 不断词：作为一个整体显示，排不下时整个换到下一行，而不是从中间断开。
     用 nowrap 保证标签完整性，让包裹它的文本行自然在 hashtag 前后断行。 */
  white-space: nowrap;
}

/* ---------- Ideas 卡（6 个，线性 icon） ---------- */
.wb-ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wb-idea {
  padding: 26px 24px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
}
.wb-ic {
  width: 38px; height: 38px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(51, 100, 255, 0.09); color: var(--color-brand);
}
.wb-ic svg { width: 21px; height: 21px; }
.wb-idea h4 { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 9px; }
.wb-idea p { font-size: 0.875rem; line-height: 1.8; color: var(--color-text-secondary); }

/* ---------- 时间线（4 个日期） ---------- */
.wb-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wb-tl {
  padding: 24px 22px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  text-align: center;
}
.wb-tl .wb-ic { margin: 0 auto 14px; }
.wb-tl h4 { font-size: 0.875rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
.wb-tl .wb-date { font-size: 1.125rem; font-weight: 700; color: var(--color-text-primary); }
/* ★ 2026-08-17：去掉 timeline 第一项的选中态（用户：「四个感觉都是一样的就行」）。
   恢复：取消注释并给第一个 .wb-tl 加回 .wb-tl--now 类。 */
/* .wb-tl--now { border-color: var(--color-brand); background: rgba(51, 100, 255, 0.04); } */

/* ---------- 奖品阶梯 ---------- */
/* ---------- 奖品阶梯（参考图3：顶部突出大卡 + 下方四列小卡，亮色模式） ---------- */
.wb-prizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wb-prize {
  padding: 28px 22px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  text-align: center;
}
.wb-prize--top {
  grid-column: 1 / -1;
  border-color: rgba(51, 100, 255, 0.3);
  background: rgba(51, 100, 255, 0.03);
  padding: 40px 32px;
}
.wb-prize-tier { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.wb-prize-tier small {
  display: block; margin-top: 3px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.wb-prize--top .wb-prize-tier { font-size: 1.25rem; }
.wb-prize-what {
  font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin-top: 10px;
}
.wb-prize-what b { color: var(--color-brand); font-weight: 600; }
.wb-prize-n {
  display: inline-block; margin-top: 14px;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--radius-sm, 6px);
  background: rgba(19, 20, 25, 0.05); color: var(--color-text-secondary);
}
.wb-prize--top .wb-prize-n { background: var(--color-brand); color: var(--color-white); }
/* ---------- Campaign Rules（11 条编号条款）---------- */
/* ★ 用编号列表而不是卡片：条款是长文本，卡片网格会读不动。
   计数器手写（counter-reset/increment）而不是用 list-style —— 需要给序号
   单独配色与字重，原生 marker 的可控性不够。 */
.wb-rules {
  counter-reset: wbrule;
  list-style: none;
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.wb-rules li {
  counter-increment: wbrule;
  position: relative;
  padding: 16px 20px 16px 52px;
  border-radius: var(--radius-md);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  font-size: 0.875rem; line-height: 1.85;
  color: var(--color-text-secondary);
}
.wb-rules li::before {
  content: counter(wbrule);
  position: absolute; left: 18px; top: 16px;
  min-width: 22px;
  font-size: 0.8125rem; font-weight: 700;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}
/* ★ 收纳：默认只显示前 3 条，点「Show all rules」展开 */
.wb-rules--collapsed li:nth-child(n+4) { display: none; }
.wb-rules-toggle {
  display: block; margin: 20px auto 0; padding: 10px 24px;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--color-brand); background: none;
  border: 1px solid var(--color-border); border-radius: 100px;
  cursor: pointer; transition: border-color .22s, background .22s;
}
.wb-rules-toggle:hover { border-color: var(--color-brand); background: rgba(51,100,255,0.04); }
@media (max-width: 640px) {
  .wb-rules li { padding: 14px 16px 14px 44px; }
  .wb-rules li::before { left: 14px; top: 14px; }
}

/* ---------- Hero 双 CTA（文档「Hero / CTAs」）---------- */
/* nowrap：宽屏两按钮保持一行并排（覆盖 campaign.css 基础的 wrap）。 */
.hero-cta { display: flex; flex-wrap: nowrap; gap: 14px; margin-top: 30px; justify-content: center; }
/* ★ 小屏（≤480，覆盖 360/375/390/430 等主流手机）：两按钮一行放不下（174+166+14=354
   > 内容区宽），nowrap 会撑破 hero 被 overflow:hidden 裁掉右侧按钮。改为换行 + 全宽竖排，
   移动端 CTA 标准做法，绝不溢出。 */
@media (max-width: 480px) {
  .hero-cta { flex-wrap: wrap; }
  .hero-cta .btn { width: 100%; max-width: 320px; }
}
/* ⚠️ hero 是暗底：主按钮用 .btn-primary，次按钮必须用 .btn-on-dark
   （白字+玻璃底）。裸 .btn-secondary 在这里是蓝字蓝描边，对比不足。 */

/* ---------- HOW TO JOIN 第 3 步的可选跳转按钮 ---------- */
/* 用 <button> 而不是 <a>：它触发的是"切身份 + 页内滚动"两步动作，不是导航。
   （button 管动作、a 管地址 —— 且裸 href="#further" 在本页会被当锚点直跳，
    而 #further 在 Tab 2 里默认 hidden，跳过去是空的。） */
.wb-step-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 15px;
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  /* ★★★ 文字必须用 brand-press(#2952E0) 而不是 brand(#3364FF)：
     品牌蓝在【纯白】上就只有 4.53:1，本来就贴着 AA 下限（4.5）；
     这个按钮又有一层浅蓝底 rgba(51,100,255,0.07) => 合成后 bg=rgb(241,244,255)，
     品牌蓝掉到 4.34:1，实测不达标（_audit-contrast.mjs 报出来的）。
     压深一档后 5.63:1。
     ⚠️ 以后在浅蓝底上放品牌蓝小字，都要先过一遍 _audit-contrast.mjs —— 
        这个组合几乎必然掉线。 */
  color: var(--color-brand-press); background: rgba(51, 100, 255, 0.07);
  border: 1px solid rgba(51, 100, 255, 0.28); border-radius: 100px;
  cursor: pointer; transition: background .22s, border-color .22s, transform .22s;
}
.wb-step-cta:hover {
  background: rgba(51, 100, 255, 0.12);
  border-color: rgba(51, 100, 255, 0.5);
  transform: translateY(-1px);
}
.wb-step-cta:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ---------- Signed Creator（参考 Prizes 排版：顶部突出卡 + 下方 3 列） ---------- */
.wb-signed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.wb-signed-card {
  padding: 28px 26px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  text-align: center;
}
.wb-signed-card h4 { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 9px; }
.wb-signed-card p { font-size: 0.875rem; line-height: 1.8; color: var(--color-text-secondary); }
/* ★ 顶部突出卡：跨满三列，品牌蓝左边框 + 浅蓝底 */
.wb-signed-card--hero {
  grid-column: 1 / -1;
  border-left: 3px solid var(--color-brand);
  background: rgba(51, 100, 255, 0.03);
  border-color: rgba(51, 100, 255, 0.22);
  text-align: center;
  padding: 36px 32px;
}
.wb-signed-card--hero h4 { font-size: 1.25rem; }

/* ---------- 合作平台（3 个，带外链） ---------- */
.wb-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wb-partner {
  display: flex; flex-direction: column;
  padding: 28px 26px; border-radius: var(--radius-md);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  transition: border-color .3s var(--ease-hover), box-shadow .3s var(--ease-hover), transform .3s var(--ease-hover);
}
.wb-partner:hover { border-color: var(--color-brand); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.wb-partner-act {
  display: inline-block; align-self: flex-start; margin-bottom: 13px;
  padding: 4px 11px; border-radius: var(--radius-sm);
  background: rgba(51, 100, 255, 0.09); color: var(--color-brand-press);   /* AA：品牌蓝在此底 4.23:1 */
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.wb-partner h4 { font-size: 1.0625rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 10px; }
.wb-partner p { font-size: 0.875rem; line-height: 1.8; color: var(--color-text-secondary); flex: 1; }
.wb-partner .wb-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-size: 0.875rem; font-weight: 600; color: var(--color-brand);
}
.wb-partner:hover .wb-go { color: var(--color-brand-press); }
.wb-partner .wb-go .h5-hover-mark,
.wb-partner .wb-go .btn-vh-auto-mark { flex: none; }
.wb-legal {
  max-width: 900px; margin: 44px auto 0;
  font-size: 0.75rem; line-height: 1.85; color: var(--color-text-muted);
}

/* ---------- 响应式（1100 是唯一进入移动端断点） ---------- */
@media (max-width: 1400px) {
  .wb-ideas--cards { grid-template-columns: repeat(2, 1fr); }
  .wb-elig { grid-template-columns: repeat(2, 1fr); }
  .wb-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .wb-elig, .wb-ideas, .wb-partners, .wb-signed, .wb-req { grid-template-columns: 1fr; }
  .wb-signed-card--hero { grid-column: 1; }
  /* ★ R8：要求列在 390px 时溢出：
     1) 4 个 QR 码 88px + gap 挤爆单列宽度 → 改小码/允许 wrap
     2) hashtag 不可断词 → break-word */
  .wb-req-col { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
  /* ★ 移动端：隐藏二维码，显示平台 icon 直接跳转 */
  .wb-plat-qr { display: none !important; }
  .wb-plat-ic { display: flex !important; align-items: center; justify-content: center; }
  .wb-plat { flex-wrap: wrap; gap: 16px; }
  .wb-steps { grid-template-columns: repeat(2, 1fr); }
  .wb-timeline { grid-template-columns: repeat(2, 1fr); }
  /* ★ 列数切换与配套修正必须同一个 @media：奖品卡四列在窄屏会挤 */
  /* ★ min-width:0：grid item 默认 min-width:auto，会被卡片内长英文词（One PortalCam /
     LCC Studio Premium 等）的 max-content 撑破分配的列宽 → 溢出 grid 容器被裁（实测 300px
     下 .wb-prize 撑到 right297 > vw290）。min-width:0 + 断词让卡片老实收缩到列内。 */
  .wb-prize { text-align: center; min-width: 0; }
  .wb-prize-tier, .wb-prize-what { overflow-wrap: break-word; }
  .wb-prizes { grid-template-columns: repeat(2, 1fr); }
  .wb-prize--top { grid-column: 1 / -1; }
  .wb-prize-n { justify-self: center; }
}
@media (max-width: 640px) {
  .wb-steps { grid-template-columns: 1fr; }
  .wb-timeline { grid-template-columns: 1fr; }
  /* ★ 移动端第二板块字号缩小：24px 在 390px 上一行只能放 14 个字，太挤 */
  .wb-intro-text { font-size: 1.125rem; line-height: 1.85; }
  .wb-intro-line b { font-size: 1.25rem; }
  /* ★ 640px 以下再次确保二维码彻底隐藏、icon 显示 */
  .wb-plat-qr { display: none !important; }
  .wb-plat-ic { display: flex !important; align-items: center; justify-content: center; }
}


/* ============================================================
   Eligible platforms —— 平台 icon + 账号链接 + hover 弹二维码
   范式照搬官网海外版 footer 的 .footer-social-icon.has-qr。
   ★ 三条约束（都别拆）：
     ① 二维码显示尺寸 250px = 源图 500 的一半，是 qr/README.md 的下限。
        再小会模糊到扫不出（官网踩过：误用 62×62 的 logo 图当二维码）。
     ② 白底不反色。黑码白底在任何底色上都能扫；反色（白码黑底）部分扫码器
        识别率下降 —— 二维码是功能件不是装饰件。
     ③ hover:none（触屏）下不弹二维码：手机上点链接直接打开 app，
        "用手机扫手机屏幕"没有意义。
   ============================================================ */
/* ★ 2026-08-14：Eligible platforms 改为【横排二维码】，对齐官网 footer .footer-qr-row 范式。
   旧版是「竖排文字列表 + hover 弹二维码浮层」，用户要求按 footer 那种「横排码图常驻」来。
   每项 = 二维码图（88px 方形白底圆角卡）+ 下方平台名称。居中排列，gap 响应式。 */
.wb-plat {
  display: flex; justify-content: center; align-items: flex-start;
  flex-wrap: nowrap;       /* ★ 5 个二维码一行放完，不换行 */
  gap: clamp(8px, 2.5vw, 48px);
  margin-top: 20px;
  overflow: hidden;
}
.wb-plat-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--color-text-secondary);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.wb-plat-item:hover { transform: translateY(-2px); }
/* 平台 icon：桌面隐藏（用 QR 码图）；移动端显示 */
.wb-plat-ic {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 9px;
  color: var(--color-text-primary);
}
.wb-plat-ic svg { width: 100%; height: 100%; }
/* ★ 触屏设备（无 hover 能力）：不管视口多宽，都显示 icon 隐藏二维码。
   二维码是给用手机扫桌面屏幕的人设计的，手机上扫自己屏幕没有意义。 */
@media (hover: none) {
  .wb-plat-qr { display: none !important; }
  .wb-plat-ic { display: flex !important; align-items: center; justify-content: center; }
  .wb-plat { flex-wrap: wrap; gap: 16px; }
}
/* 文字区：平台名居中、账号名居下 */
.wb-plat-txt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.wb-plat-txt b { font-size: 0.75rem; font-weight: 600; color: var(--color-text-primary); }
/* .wb-plat-txt em 已删（R8：去掉 @handle 第二行） */
.wb-plat-item:hover .wb-plat-txt b { color: var(--color-brand); }
/* 二维码：常驻可见（不再是 hover 浮层），对齐 footer .footer-qr-item img */
.wb-plat-qr {
  position: static; transform: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 1; visibility: visible; pointer-events: auto;
  padding: 0; border: none; box-shadow: none; background: none;
  z-index: auto;
}
.wb-plat-qr img {
  width: clamp(60px, 18vw, 88px); height: clamp(60px, 18vw, 88px); border-radius: 8px; display: block;
  background: var(--color-white, #fff); padding: 4px;
  border: 1px solid var(--color-border, #EAECF2);
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.wb-plat-item:hover .wb-plat-qr img {
  transform: scale(1.06);
  border-color: transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #3364FF, #46C8FF, #78A0FF, #8B5CF6, #5078FF);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 6px 20px rgba(51,100,255,0.15);
}
.wb-plat-qr > span { display: none; }  /* 扫码提示文字隐藏（码已常驻，无需说明） */
@media (prefers-reduced-motion: reduce) {
  .wb-plat-item, .wb-plat-qr img { transition: none; }
}


/* ============================================================
   海外版二级菜单栏移动端横滑修正（2026-08-13）
   ------------------------------------------------------------
   ★ 实测问题：390px 下 .scx-tabs-row 宽 580px，整页 scrollWidth=600 / clientWidth=390，
     溢出 210px —— 二级菜单栏右半截被切在视口外，第二个 tab 点不到。
   ★ 根因：.scx-tabs 的 overflow-x 是 visible，而海外版两个 tab 文案很长
     （"Back up a piece of the world" / "Step into other saved worlds"，各 275px，
     合计 566px > 390px）。国内版同组件没暴露，只因它的 tab 文案短、放得下。
   ★ 修法用官网既有范式，不是新发明：
     · justify-content: safe center —— 装得下居中、装不下自动退化为靠左可滑
       （safe 关键字的语义就是"对齐但不许因此裁掉内容"）；
     · overflow-x:auto 必须配 overflow-y:hidden（规范会把另一轴的 visible 强制算成 auto）；
     · tab 必须 flex:none + nowrap，否则会被压缩折行。
   ★ 只写在海外版专属文件里：共用的 campaign.css 正被另一条编辑线改动，
     且国内版当前无此问题 —— 改共用文件属于无收益的风险。
   ============================================================ */
@media (max-width: 1100px) {
  .wb-page .scx-tabs,
  body:has(.wb-hero) .scx-tabs {
    justify-content: flex-start;      /* fallback：不支持 safe 的浏览器 */
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;               /* ★ 必须配对，否则另一轴被强制算成 auto */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wb-page .scx-tabs::-webkit-scrollbar,
  body:has(.wb-hero) .scx-tabs::-webkit-scrollbar { display: none; }
  .wb-page .scx-tab,
  body:has(.wb-hero) .scx-tab { flex: none; white-space: nowrap; }

  /* ★ 上面的 overflow-x:auto 单独不够 —— 实测还差两刀（祖先链量出来的）：
     ① .scx-tabs 的 min-width 默认是 auto：flex item 不会收缩到内容宽以下，
        于是 overflow 不触发、直接把父级撑破。必须显式 min-width:0。
     ② .scx-tabs-row 是 display:inline-flex，宽度 shrink-to-fit 按内容算（实测 580px），
        不受 block 父级 390px 的约束。不能改成 flex（那是灵动岛 pill 收成内容宽的基础），
        改用以【视口】为基准的 max-width —— 与官网移动端同款。
        用 100vw 而不是 100% 的理由：各页 wrap 宽度不同，100% 会算出不同结果。 */
  .wb-page .scx-tabs,
  body:has(.wb-hero) .scx-tabs { min-width: 0; }
  .wb-page .scx-tabs-row,
  body:has(.wb-hero) .scx-tabs-row { max-width: min(calc(100vw - 48px), 100%); }
}


/* ---------- Intro 文案放大 + 逐行陆续加载（2026-08-15）---------- */
/* ★ 用户要求「英文这里的字号可以大一些，第一次显示的时候可以有陆续加载的感觉」。
   字号从继承的 1rem(16px) 提到 1.25rem(20px)；
   逐行 stagger 用 @keyframes + animation-delay，不用 JS，IntersectionObserver
   在 campaign.js 的 data-reveal 系统里已经会给 .sec-head 加 .in。 */
.wb-intro-text {
  font-size: 1.125rem;         /* 18px，比标题明显小一档 */
  line-height: 1.9;
}
/* ★ 主次关系三档：
     · <b> 主句（首行提问 + 末行结论）：大字号 + 纯白 + 700
     · 普通行（例子列表）：基础 18px + 二级灰
     · 末行加粗额外加品牌蓝底色调 */
.wb-intro-line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
  animation: wbLineIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-play-state: paused;  /* 等 data-reveal 触发 */
  color: var(--color-text-secondary);   /* 例子列表 = 二级灰 */
}
/* 加粗行 = 收口结论（末行），用品牌色强调 */
.wb-intro-line b {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-brand-bright);
  display: inline;
}
/* data-reveal 触发后（父 .sec-head 加 .in）才播动画 */
.sec-head.in .wb-intro-line { animation-play-state: running; }
/* stagger：每行延迟 80ms */
.wb-intro-line:nth-child(1) { animation-delay: 0s; }
.wb-intro-line:nth-child(2) { animation-delay: 0.08s; }
.wb-intro-line:nth-child(3) { animation-delay: 0.16s; }
.wb-intro-line:nth-child(4) { animation-delay: 0.24s; }
.wb-intro-line:nth-child(5) { animation-delay: 0.32s; }
.wb-intro-line:nth-child(6) { animation-delay: 0.40s; }
.wb-intro-line:nth-child(7) { animation-delay: 0.48s; }
.wb-intro-line:nth-child(8) { animation-delay: 0.56s; }
.wb-intro-line:nth-child(9) { animation-delay: 0.64s; }
@keyframes wbLineIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-intro-line { opacity: 1; transform: none; animation: none; }
}

/* ---------- Ideas 改为资讯卡组件（2026-08-15）---------- */
/* ★ 用户：「这里5个板块，都是和新闻资讯的卡片组件保持一致，悬浮有图片，
   四个角有视觉锤的那种，直接把组件拿过来用就好，图片可以先拿别的占位先。」
   结构与官网 .card.news-card 逐字一致 → 可继承全站既有的 hover / 圆角 / 阴影语言。
   本页自包含（不依赖官网 main.css 的 .news-card 规则），全部独立声明在这里。 */
.wb-ideas--cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.wb-idea-card {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  cursor: default;         /* ★ 不可点击，保持默认鼠标 */
  /* ★ 2026-08-17：去掉 hover 上浮（用户：「没有悬浮的状态」） */
}
/* .wb-idea-card:hover { transform: translateY(-3px); box-shadow: ...; } — 已禁用 */
.wb-idea-card .card-image-wrapper {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.wb-idea-card .card-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* .wb-idea-card:hover .card-image { transform: scale(1.04); } — 已禁用 */
/* ★ hover 视频：默认静态图，PC 端 hover 淡入覆盖播放的视频；移动端不显示（见下方 @media） */
.wb-idea-card .card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;   /* 视频不拦截鼠标，hover 状态始终由卡片本身判定 */
  z-index: 1;
}
.wb-idea-card:hover .card-video { opacity: 1; }
.wb-idea-card .card-body { padding: 20px 22px 24px; }
.wb-idea-card .card-tag {
  display: inline-block;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-brand); margin-bottom: 10px;
}
.wb-idea-card .card-title {
  font-size: 1rem; font-weight: 700; line-height: 1.5;
  color: var(--color-text-primary); margin-bottom: 8px;
}
.wb-idea-card .card-description {
  font-size: 0.8125rem; line-height: 1.8; color: var(--color-text-secondary);
}
/* 四角视觉锤 */
.wb-idea-card .h4-corner-container {
  position: absolute; inset: 10px; pointer-events: none; z-index: 2;
}
.wb-idea-card .h4-corner-mark {
  position: absolute; width: 36px; height: 36px;
}
.wb-idea-card .h4-corner-mark:nth-child(1) { top: 0; left: 0; }
.wb-idea-card .h4-corner-mark:nth-child(2) { top: 0; right: 0; transform: rotate(90deg); }
.wb-idea-card .h4-corner-mark:nth-child(3) { bottom: 0; right: 0; transform: rotate(180deg); }
.wb-idea-card .h4-corner-mark:nth-child(4) { bottom: 0; left: 0; transform: rotate(270deg); }
.wb-idea-card .h4-corner-mark svg {
  width: 100%; height: 100%; opacity: 0;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.7);
}
.wb-idea-card:hover .h4-corner-mark svg { opacity: 1; transform: scale(1); }
/* 响应式 */
@media (max-width: 1400px) { .wb-ideas--cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wb-ideas--cards { grid-template-columns: 1fr; } }
/* ★ 移动端（≤1100px）无 hover 交互：隐藏视频，只保留静态图；配合 preload="none" 不下载视频 */
@media (max-width: 1100px) { .wb-idea-card .card-video { display: none; } }

/* ---------- Ideas 末尾「Explore more」CTA（去 LCC Gallery） ---------- */
/* 卡片网格是 24px gap，这里给 32px 上边距 —— 比卡间距明显大一档，读作「另起一层」而非第 5 张卡。
   移动端单列时按钮拉满宽度，与 .wb-rules-toggle 等既有移动端按钮同处理。 */
.wb-ideas-cta { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 640px) {
  .wb-ideas-cta .btn { width: 100%; }
}

/* ---------- Follow 板块（亮底 + icon 社交链接） ---------- */
.wb-follow-card {
  max-width: 900px; margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
}
/* Follow 板块里的 .wb-plat-ic 始终显示（不是二维码区、不受桌面端隐藏规则影响） */
.wb-follow-plat .wb-plat-ic { display: flex; align-items: center; justify-content: center; }
.wb-follow-plat .wb-plat-qr { display: none; }
/* ★ Follow 社交 icon 行：允许换行，移动端 2 行（4+3）更舒服 */
.wb-follow-plat { flex-wrap: wrap; max-width: 900px; margin: 20px auto 0; }
@media (max-width: 640px) {
  /* ★ 移动端改 grid 4 列 → 7 个 icon 自然分成 4+3 两行，下行居中
     ⚠⚠ 这四行都是 APP-2086 的修复，别改回去（实测数据见下）⚠⚠
     原来是 `repeat(4, auto)` + `gap: 20px 28px`：390 视口下本行容器实测只有 270px，
     减掉 3 个 28px 的横向 gap 只剩 186px 分给 4 列 = 每列 46.5px，而最长标签
     Instagram 需要 58px ⇒ `auto` 列被压到小于 max-content，文字溢出后被
     `.wb-plat` 的 `overflow: hidden` 从两端剪掉，显示成「uTube / ebook / Lnke」
     （YouTube / Facebook / LinkedIn 中间没有空格、无法折行，所以只能溢出）。
     本地 Chromium 实测余量只剩 0.2~0.5px，属于「刚好没裁」的临界态，
     App 内置浏览器里字体度量稍宽（系统字体或 web 字体未加载完的回退字体）就会裁。
     三处改动：
       ① 4 列改 minmax(0, 1fr) 等宽可收缩 —— 列宽不再由内容决定，也不会撑破容器；
       ② 横向 gap 28 → 12，把每列可用宽度从 46.5px 提到 58.5px（够放最长的 Instagram）；
       ③ overflow: visible + 长单词允许断行 —— 双重兜底：万一字体再宽，
          宁可折行也绝不把文字剪掉。 */
  .wb-follow-plat {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center;
    gap: 20px 12px;
    overflow: visible;
  }
  /* grid 项要允许收缩，否则内容仍会撑破列（min-width 默认是 auto = max-content） */
  .wb-follow-plat .wb-plat-item { min-width: 0; }
  /* 兜底：YouTube / Facebook / LinkedIn 这类词内无空格，必要时允许断行，不要溢出被裁 */
  .wb-follow-plat .wb-plat-txt b { overflow-wrap: anywhere; }
}
.wb-follow-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 32px;
}