/* ============================================================================
   爆款口播（#sub-copy-kb）· 子页顶部「差异化」介绍 banner
   ----------------------------------------------------------------------------
   2026-09-19 用户原话：
   「这个地方，你可以加一个 banner 作为介绍啊。不然我没看懂这个爆款口播跟普通的文案
     它有什么区别，它的差异化在哪里。包括这个 UI、布局啊、这个颜色搭配啊，
     他一定是要做出它的特色出来，差异化。你看我，我一打开我就没看懂是干啥的。
     我感觉，不是有『爆款文案』了吗？这有啥区别呢？」

   → 所以这条 banner 只干三件事：
     ① 一句话说清「这条视频怎么变成你的脚本」（拆爆款 → 换你的行业 → 出可拍脚本）
     ② 直接摆出跟「爆款文案」的区别（两行对照，不让人猜）
     ③ 有自己的辨识色 —— 用它自己那张功能卡的色（`.f-red` 珊瑚红 #ff8a7a→#ef4444），
        与「爆款文案」的蓝卡（f-blue 💎）、「提取文案」的紫卡（f-purple 🧲）明确区分。

   🔴 三条必须守的规矩：
   1. **独立文件、不动 style.css**（并发安全；加载在它之后即可覆盖）。
   2. 装饰件（右侧声浪）是 absolute → **容器必须 position:relative + overflow:hidden**，
      否则会撑宽 document、手机端整页缩水（本项目踩过）。
   3. 纯亮珊瑚上白字对比不足 → 左侧压一层暖深衬底（::before），保证标题与正文可读。
   ========================================================================== */

#sub-copy-kb .kbi {
  position: relative;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 14px 15px 13px;
  border-radius: 16px;
  background: linear-gradient(118deg, #ef4444 0%, #ff7a5c 46%, #ffa178 100%);
  box-shadow: 0 10px 22px -12px rgba(190, 40, 20, 0.55);
  color: #fff;
}
/* 左侧暖深衬底：白字对比度靠它 */
#sub-copy-kb .kbi::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(124, 15, 6, 0.66) 0%,
    rgba(150, 26, 12, 0.40) 44%,
    rgba(190, 45, 25, 0.00) 74%);
}
#sub-copy-kb .kbi > * { position: relative; }

/* ---------- 右侧声浪（装饰件 · 容器已 relative+hidden） ---------- */
#sub-copy-kb .kbi-wave {
  position: absolute; right: 13px; top: 14px;
  display: flex; align-items: flex-end; gap: 3px; height: 26px;
  opacity: 0.5;
}
#sub-copy-kb .kbi-wave i {
  display: block; width: 3px; border-radius: 2px; background: #fff;
  transform-origin: bottom center;
  animation: kbiWave 1.6s ease-in-out infinite;
}
#sub-copy-kb .kbi-wave i:nth-child(1) { height: 10px; animation-delay: 0s; }
#sub-copy-kb .kbi-wave i:nth-child(2) { height: 17px; animation-delay: 0.16s; }
#sub-copy-kb .kbi-wave i:nth-child(3) { height: 25px; animation-delay: 0.32s; }
#sub-copy-kb .kbi-wave i:nth-child(4) { height: 14px; animation-delay: 0.48s; }
#sub-copy-kb .kbi-wave i:nth-child(5) { height: 9px;  animation-delay: 0.64s; }
@keyframes kbiWave {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  #sub-copy-kb .kbi-wave i { animation: none; }
}

/* ---------- 头部：图标 + 标题 + 身份胶囊 ---------- */
#sub-copy-kb .kbi-hd { display: flex; align-items: center; gap: 8px; }
#sub-copy-kb .kbi-ico { font-size: 17px; line-height: 1; }
#sub-copy-kb .kbi-t { font-size: 16.5px; font-weight: 800; letter-spacing: 0.3px; }
#sub-copy-kb .kbi-badge {
  margin-left: auto; margin-right: 36px;      /* 给右侧声浪让位 */
  font-size: 11px; font-weight: 700; line-height: 1.5;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.34);
  white-space: nowrap;
}

/* ---------- 一句话说清它干什么 ---------- */
#sub-copy-kb .kbi-s {
  margin: 7px 0 10px;
  font-size: 12.5px; line-height: 1.72;
  color: rgba(255, 255, 255, 0.94);
}
#sub-copy-kb .kbi-s b { color: #fff; font-weight: 800; }

/* ---------- 跟「爆款文案」的区别（两行对照） ---------- */
#sub-copy-kb .kbi-vs {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 9px 10px 10px;
}
#sub-copy-kb .kbi-vs-h {
  font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}
#sub-copy-kb .kbi-r { display: flex; align-items: baseline; gap: 7px; font-size: 12px; line-height: 1.62; }
#sub-copy-kb .kbi-r + .kbi-r { margin-top: 6px; }
#sub-copy-kb .kbi-k {
  flex: none; font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
  background: #fff;
}
#sub-copy-kb .kbi-k-blue { color: #2f6fed; }
#sub-copy-kb .kbi-k-red  { color: #d92b1c; }
#sub-copy-kb .kbi-v { color: rgba(255, 255, 255, 0.95); }

/* 步骤条自带 padding-top:18px —— banner 已经在下面留了 12px，这里收一点 */
#sub-copy-kb .kbi + .kb-steps { padding-top: 10px; }

/* ---------- 窄屏微调 ---------- */
@media (max-width: 420px) {
  #sub-copy-kb .kbi { padding: 13px 13px 12px; }
  #sub-copy-kb .kbi-badge { margin-right: 32px; font-size: 10.5px; }
  #sub-copy-kb .kbi-wave { opacity: 0.38; }
}