/* 全站共用的两屏:常见问题(.blk-faq,components/shared/faq.js)、底部注册条(.blk-cta,components/shared/cta.js)
   首页、/ai、/channels/web 都用这一份;原来是首页 v3 的 .hv3 .fq / .hv3 .cta14,搬出来时外观一字不改。
   这些页面各自的全局环境不同(首页、/ai 用 home-shell.css,/channels/web 用 bulma + hecong.css),
   所以字体、行高、外边距这些在根上自己重置一遍,不依赖页面根(.hv3 / .aip / .cw-page)。
   本目录是 static/css/blocks.css 的源文件,改完跑 node scripts/build-css.js 生成(会自动补老浏览器兼容)。 */

.blk-faq, .blk-cta { --ink:#1d2129; --mid:#5b6472; --soft:#8a93a3; --brand:#2f6fe4;
  font-family:"PingFang SC",-apple-system,"Helvetica Neue",sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased;
  line-height:normal; font-size:16px; box-sizing:border-box; text-align:left }
.blk-faq *, .blk-cta * { box-sizing:border-box; margin:0 }
.blk-faq small, .blk-cta small { font-size:smaller }
.blk-faq svg, .blk-cta svg { max-width:none; max-height:none }
.blk-faq a, .blk-cta a { cursor:pointer; text-decoration:none }
.blk-faq p, .blk-faq .an, .blk-cta p { text-wrap:pretty }

/* hecong.css 给 html、body 都加了 overflow-x: hidden,body 因此变成滚动容器,position: sticky 失效(常见问题左栏、首页第 4 屏舞台都靠它)
   用这几屏的页面把 body 改成 clip:同样裁掉横向溢出,但不建滚动容器;不支持 clip 的老浏览器保持原样,只是不吸顶。
   放在共用样式里而不是各页面自己写:左栏吸顶是这个组件的一部分,哪个页面用了它都得有这一条,免得新页面漏掉 */
@supports (overflow-x: clip) {
  html body { overflow-x: clip; }
}

/* ===== 常见问题:左栏吸顶 + 折叠问答 ===== */
.blk-faq { padding:110px 80px; background:#f6f8fc }
.blk-faq.is-white { background:#fff }
.blk-faq .fq-w { display:grid; grid-template-columns:380px 1fr; gap:64px; max-width:1280px; margin:0 auto; align-items:start }
.blk-faq .fq-l { position:sticky; top:96px }
.blk-faq .eb { font-size:14px; font-weight:600; color:var(--brand); display:block; margin-bottom:12px }
.blk-faq .fq-l h2 { font-size:40px; line-height:1.3; font-weight:800; letter-spacing:-.4px; color:var(--ink) }
.blk-faq .fq-l>p { margin-top:14px; font-size:16px; line-height:1.8; color:var(--mid) }
.blk-faq .fq-ask { margin-top:28px; border-radius:20px; background:#fff; padding:20px; box-shadow:0 0 0 1px rgba(15,23,42,.06),0 24px 50px -36px rgba(15,23,42,.4) }
.blk-faq .fq-ask .who { display:flex; align-items:center; gap:12px }
.blk-faq .fq-ask .who span { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#4f8ef7,#2563eb); display:grid; place-items:center; position:relative }
.blk-faq .fq-ask .who span svg { width:19px; height:19px; color:#fff }
.blk-faq .fq-ask .who span:after { content:""; position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px #fff }
.blk-faq .fq-ask b { display:block; font-size:15.5px; font-weight:bolder; color:var(--ink) }
.blk-faq .fq-ask small { display:block; font-size:13px; color:var(--soft); margin-top:2px }
.blk-faq .fq-ask .go { margin-top:16px; display:flex; gap:10px }
.blk-faq .fq-ask .go a, .blk-faq .fq-ask .go button { flex:1; height:42px; border:0; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14.5px; font-weight:600; font-family:inherit; line-height:normal; cursor:pointer; padding:0; margin:0 }
.blk-faq .fq-ask .go svg { width:16px; height:16px }
.blk-faq .fq-ask .go .p { background:var(--brand); color:#fff }
.blk-faq .fq-ask .go .g { background:#f3f6fb; color:#3b4250 }
.blk-faq .s13l { display:flex; flex-direction:column; gap:10px }
.blk-faq .s13l details { border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.06); transition:box-shadow .3s }
.blk-faq .s13l details[open] { box-shadow:inset 0 0 0 1px rgba(47,111,228,.25),0 14px 30px -24px rgba(15,23,42,.35) }
.blk-faq .s13l summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px }
.blk-faq .s13l summary::-webkit-details-marker { display:none }
.blk-faq .s13l summary:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:16px }
.blk-faq .s13l h3 { font-size:17px; font-weight:600; line-height:normal; color:var(--ink) }
.blk-faq .s13l .pl { flex:none; width:26px; height:26px; border-radius:50%; background:#f1f4f9; position:relative; transition:transform .35s,background .3s }
.blk-faq .s13l .pl:before, .blk-faq .s13l .pl:after { content:""; position:absolute; left:8px; top:12.5px; width:10px; height:1.6px; background:#5b6472; border-radius:1px }
.blk-faq .s13l .pl:after { transform:rotate(90deg); transition:transform .35s }
.blk-faq .s13l details[open] .pl { background:#e8efff }
.blk-faq .s13l details[open] .pl:after { transform:rotate(0) }
.blk-faq .s13l .an { padding:0 24px 22px; font-size:15.5px; line-height:1.85; color:var(--mid) }
.blk-faq .s13l .an a { color:var(--brand) }

/* ===== 底部注册条:两侧飘的气泡是装饰 ===== */
.blk-cta { position:relative; overflow:hidden; padding:100px 80px; text-align:center; color:#fff; background:linear-gradient(135deg,#2f6fe4 0%,#2459c7 55%,#3b3fd0 100%) }
.blk-cta:before { content:""; position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; background:radial-gradient(40% 70% at 15% 120%,rgba(255,255,255,.18),transparent 70%),radial-gradient(35% 60% at 90% -10%,rgba(255,255,255,.16),transparent 70%) }
.blk-cta>* { position:relative }
.blk-cta h2 { font-size:40px; line-height:1.3; font-weight:800; letter-spacing:-.4px; color:#fff }
.blk-cta p { margin-top:14px; font-size:17px; color:#dbe7ff }
.blk-cta .bt { margin-top:32px; display:flex; justify-content:center; gap:14px }
.blk-cta .bt a { display:inline-flex; align-items:center; gap:6px; height:54px; padding:0 40px; border-radius:27px; font-size:17px; font-weight:700 }
.blk-cta .bt a.w { background:#fff; color:#2459c7; box-shadow:0 14px 34px -12px rgba(10,20,60,.55) }
.blk-cta .bt a.o { color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55) }
.blk-cta .bt svg { width:17px; height:17px }
.blk-cta .cb { position:absolute; font-size:14px; color:#1d2129; background:#fff; border-radius:16px; padding:10px 14px; box-shadow:0 18px 40px -16px rgba(10,20,60,.5); opacity:.95; text-align:left }
.blk-cta .cb.u { background:#1a1a1a; color:#fff }
.blk-cta .cb small { display:flex; align-items:center; gap:4px; font-size:11px; color:#7c5cff; font-weight:600; margin-bottom:2px }
.blk-cta .cb svg { width:12px; height:12px }
@keyframes blk-fl { 50% { transform:translateY(-8px) } }
@media (prefers-reduced-motion:no-preference) {
  .blk-cta .cb { animation:blk-fl 6s ease-in-out infinite }
  .blk-cta .cb:nth-of-type(2) { animation-delay:-2s }
  .blk-cta .cb:nth-of-type(3) { animation-delay:-4s }
}

/* ===== 平板、手机 ===== */
@media (max-width: 1199px) {
  .blk-faq, .blk-cta { padding-left:40px; padding-right:40px }
  .blk-cta .cb { display:none }
}
@media (max-width: 1023px) {
  .blk-faq .fq-w { display:block }
  .blk-faq .fq-l { position:static; margin-bottom:40px; max-width:560px }
}
@media (max-width: 600px) {
  .blk-faq, .blk-cta { padding:64px 20px }
  /* 窄屏换行:大标题只在标点、空格处断(放不下才硬断),小标题按字数均分 */
  .blk-faq h2, .blk-cta h2 { word-break:keep-all; overflow-wrap:anywhere }
  .blk-faq h3 { text-wrap:balance }
  .blk-faq .fq-l h2 { font-size:30px }
  .blk-faq .fq-l>p { font-size:15px }
  .blk-faq .s13l summary { padding:16px 18px; gap:12px }
  .blk-faq .s13l h3 { font-size:16px }
  .blk-faq .s13l .an { padding:0 18px 18px; font-size:15px }
  .blk-cta h2 { font-size:26px }
  .blk-cta p { font-size:15px }
  .blk-cta .bt { flex-direction:column; align-items:stretch; gap:12px }
  .blk-cta .bt a { justify-content:center }
}