/* ============================================================================
     玄狐传媒官网 · 章节层
     ----------------------------------------------------------------------------
     只放各章节自己的规则，令牌与通用样式在 styles.css。两页共用。
     章节顺序：facts 行业事实 / pains 痛点 / pipeline 创作链路 / channels 平台覆盖
              forwho 三类身份 / guards 保障 / about 关于 / faq 问答 / loop 闭环
     ============================================================================ */

  /* ============ 行业事实 ============ */
  /* 全站唯一出现第三方数字的地方，每项都必须有出处，页脚小字标注 */
  .facts{position:relative}
  .facts::before{content:'';position:absolute;inset:-10% 40% auto -10%;height:380px;pointer-events:none;
    background:radial-gradient(ellipse at 30% 0%,rgba(122,122,255,.1),transparent 64%)}
  .fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative}
  .fact{background:var(--bg-2);padding:26px 24px}
  .fact b{display:block;font-family:var(--font-num);font-size:clamp(26px,3vw,34px);color:var(--accent);
    line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:.01em}
  .fact b i{font-style:normal;font-size:.55em;margin-left:2px;color:var(--accent-3)}
  .fact span{display:block;font-size:13px;color:var(--text-3);margin-top:10px;line-height:1.6}

  /* ============ 痛点 ============ */
  .pains-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .pain{border:1px solid var(--line-2);border-radius:14px;padding:22px 20px;background:rgba(255,255,255,.02);
    transition:border-color .24s,background .24s}
  .pain:hover{border-color:rgba(122,122,255,.4);background:var(--accent-dim)}
  .pain .x{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(236,72,153,.14);color:var(--pink);margin-bottom:14px}
  .pain .x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .pain h3{font-size:15.5px;font-weight:600;margin-bottom:8px}
  .pain p{font-size:13px;color:var(--text-2);line-height:1.68}

  /* ============ AI 创作链路 ============ */
  .pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .pipe-card{border:1px solid var(--line-2);border-radius:16px;padding:24px;background:var(--card);
    display:flex;flex-direction:column;gap:12px;transition:border-color .24s,transform .24s}
  .pipe-card:hover{border-color:rgba(122,122,255,.42);transform:translateY(-3px)}
  .pipe-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:var(--accent-dim);color:var(--accent);border:1px solid var(--line)}
  .pipe-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .pipe-n{font-family:var(--font-num);font-size:12px;color:var(--text-3);letter-spacing:.12em}
  .pipe-card h3{font-size:16px;font-weight:600}
  .pipe-card p{font-size:13px;color:var(--text-2);line-height:1.7}
  /* 链路顺序提示：卡片下方一条细线把它们串起来 */
  .pipe-foot{margin-top:26px;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-3)}
  .pipe-foot::before{content:'';flex:none;width:26px;height:1px;background:var(--accent)}

  /* ============ 平台覆盖 ============ */
  .chan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .chan{border:1px solid var(--line);border-radius:12px;padding:18px 10px;text-align:center;
    background:var(--bg-2);font-family:var(--serif);font-size:15px;letter-spacing:.06em;
    transition:border-color .24s,color .24s}
  .chan:hover{border-color:var(--accent);color:var(--accent)}
  /* 已接入账号授权的平台用高亮标出，与仅覆盖范围区分 */
  .chan.on{border-color:rgba(122,122,255,.46);color:var(--accent);background:var(--accent-dim)}
  /* 海外社媒平台：群控建号，与 OAuth 账号授权区分 */
  .chan.overseas{border-color:rgba(16,185,129,.46);color:var(--ok);background:rgba(16,185,129,.10)}
  .chan-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--text-3)}
  .chan-legend span{display:inline-flex;align-items:center;gap:8px}
  .chan-legend i{width:10px;height:10px;border-radius:3px;flex:none}
  .chan-legend .k-on{background:var(--accent);border:1px solid rgba(122,122,255,.46)}
  .chan-legend .k-off{background:var(--bg-2);border:1px solid var(--line)}
  .chan-legend .k-overseas{background:var(--ok);border:1px solid rgba(16,185,129,.46)}

  /* ============ 三类身份 ============ */
  .roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .role{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--card);
    display:flex;flex-direction:column}
  .role-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
  .role-hd h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--accent)}
  .role-hd em{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
  .role .desc{font-size:13.5px;color:var(--text-2);margin-bottom:20px;line-height:1.7}
  .role-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
  .role-list li{display:flex;gap:11px;font-size:13.5px;color:var(--text-2);line-height:1.6}
  .role-list li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;margin-top:8px;
    background:var(--accent)}
  .role .btn{margin-top:auto;height:44px;font-size:14px;align-self:flex-start}
  .role-pending{margin-top:auto;font-size:12.5px;color:var(--text-3)}
  .role-cta{margin-top:auto;align-self:flex-start}

  /* ============ 四道保障 ============ */
  .guards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .gd{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg-2)}
  .gd b{font-size:15px;display:block;margin-bottom:8px}
  .gd p{font-size:13px;color:var(--text-2);line-height:1.68}

  /* ============ 关于 ============ */
  .about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,52px);align-items:start}
  .about-grid p{color:var(--text-2);font-size:15px;line-height:1.85}
  .about-grid p+p{margin-top:16px}
  .about-facts{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--bg-2)}
  .about-facts dl{display:flex;flex-direction:column;gap:16px}
  .about-facts dt{font-size:12px;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
  .about-facts dd{font-size:14px;margin-top:5px;color:var(--text)}
  .about-facts dd a{color:var(--accent);text-decoration:none}
  .about-facts dd a:hover{text-decoration:underline}

  /* ============ 常见问题 ============ */
  /* 原生 details/summary：键盘与读屏天然可用，无需脚本 */
  .faq-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2)}
  .faq-list details+details{border-top:1px solid var(--line-2)}
  .faq-list summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:15px;
    display:flex;align-items:center;gap:14px;transition:color .2s}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary:hover{color:var(--accent)}
  .faq-list summary::after{content:'';margin-left:auto;flex:none;width:9px;height:9px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .24s var(--ease)}
  .faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .faq-list .a{padding:0 24px 22px;font-size:14px;color:var(--text-2);line-height:1.8;max-width:88ch}

  /* ============ 合作闭环 ============ */
  .loop-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .loop-step{background:var(--bg-2);padding:24px 20px;position:relative}
  .loop-step .n{font-family:var(--font-num);font-size:12px;color:var(--accent);letter-spacing:.14em}
  .loop-step h3{font-size:15px;font-weight:600;margin:12px 0 8px}
  .loop-step p{font-size:12.5px;color:var(--text-2);line-height:1.65}

  @media(max-width:1000px){
    .fact-grid,.guards{grid-template-columns:repeat(2,1fr)}
    .pains-grid{grid-template-columns:repeat(2,1fr)}
    .pipe,.roles-grid{grid-template-columns:repeat(2,1fr)}
    .chan-grid{grid-template-columns:repeat(4,1fr)}
    .about-grid{grid-template-columns:1fr}
    .loop-steps{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:620px){
    .pains-grid,.pipe,.roles-grid,.loop-steps{grid-template-columns:1fr}
    .fact-grid{grid-template-columns:1fr}
    .chan-grid{grid-template-columns:repeat(2,1fr)}
    .guards{grid-template-columns:1fr}
    .fact{padding:22px 20px}
    .role{padding:22px}
    .faq-list summary{padding:18px 20px}
    .faq-list .a{padding:0 20px 20px}
  }