/* ==========================================================================
   超分宝 · Pad 与移动端适配层（≤1180 由 media="(max-width:1180px)" 引入，桌面不下载）
   原则：只改窄屏表现、不重定义组件；正文 ≥15px、辅助 ≥12px、触控 ≥44px；
        节点不删只改呈现（不影响 SEO）。所有规则都是「为什么」型 HACK，改前先读。
   ========================================================================== */

/* ==========================================================================
   一、Pad：721–1180
   ========================================================================== */
@media (max-width: 1180px) {
  /* --- 1.0 版心留白 ---
     site.css 的 .container 基础值是左右各 48px，窄屏下没人覆盖，
     390 宽时内容只剩 294px（12% 被留白吃掉），标题被迫频繁折行。
     这里按屏宽收到 32/20，与横向轨道的 -20px 出血对齐。 */
  .container {
    padding-inline: 32px;
  }

  /* --- 1.1 字号下限：把 <12px 的辅助文字抬到可读区间 --- */
  /* 这里必须逐个点名组件：site.css 里多为「类 + 元素」复合选择器（.more-fig figcaption 之类），
     单靠 figcaption 这类元素选择器压不住。个别还被 `.page-features .cap-lb` 这种
     (0,2,0) 的规则压住，所以用「类名重复」把特异性提到 (0,2,0) 再靠加载顺序胜出。 */
  figcaption,
  .more-fig figcaption,
  .case-card figcaption,
  .case-facts dd,
  .hcmp-cap,
  .more-tag,
  .hv-tag,
  .cmp-pick.cmp-pick,
  .vs-kind.vs-kind,
  .cap-cat.cap-cat,
  .cap-lb.cap-lb,
  .cm-label,
  .cc-cap,
  .bit-rec.bit-rec,
  .rv-cue.rv-cue,
  .rv-num,
  .dw-name,
  .dw-plat,
  .dw-hot,
  .ft-addr,
  .case-facts dt,
  .cmp-tag {
    font-size: 12px;
  }
  .pt-en.pt-en {
    font-size: 12px;
    letter-spacing: .04em;
  }
  /* 页脚二维码小字与 vs 对照图注：site.css 里是「类 + 元素」选择器，需同样带上类名才压得住 */
  .ft-qr figcaption,
  .vs-obj figcaption,
  .vz-cell figcaption,
  .vz-cell .is-our,
  .vs-strip .is-our,
  .vs-strip__overlay span,
  .cmp-sub span,
  .vs-legend span {
    font-size: 12px;
  }

  /* --- 1.2 板块纵向间距：与 site.css 统一为 52 --- */
  :is(.defect-section, .more-section, .scale-section, .partners-section,
      .case-section, .features, .how-section, .pricing-section,
      .price-basis-section, .price-notes-section, .faq-section,
      .vs-compare, .vs-why, .plat-section, .val-sec, .cap-section,
      .ag-def-section, .ag-own-section, .ag-flow-section,
      .rf-basis-section, .rf-steps-section, .rf-payout-section, .rf-terms-section,
      .sc-section, .sc-spot-section, .cmp-account, .legal-section, .err-wrap) {
    padding-block: 52px;
  }

  /* --- 1.3 触控区：链接与按钮不低于 44px --- */
  .cta-band .btn,
  .hero-cmp .btn,
  .hero-compact .btn,
  .nav-actions .btn-console {
    min-height: 44px;
  }
  /* 页脚与正文内链接：Pad 上给到 40px，手机再抬到 44px */
  .site-footer a,
  .site-footer .ft-tel,
  .site-footer .ft-mail,
  .cta-more,
  .doc-related a,
  .arc-item,
  .legal-toc a,
  a.ilink {
    min-height: 40px;
  }
  .cta-more,
  .legal-toc a,
  a.ilink {
    display: inline-flex;
    align-items: center;
  }
  .site-footer .ft-col a {
    display: inline-flex;
    align-items: center;
    padding-block: 3px;
  }

  /* --- 1.4 首页「不止于清晰」：Pad 上改两列，否则四组竖排过长 --- */
  .more-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }
  .more-group + .more-group {
    margin-top: 0;
  }
}

/* site.css 在 ≤768 把 .more-pair 改成单列，本意是「一图一行」看得大些。
   但四组是 4:5 竖构图，一单列就变成「原图在上、增强图在下」，
   两张图被拆到两行，中间还隔着别的组，上下对比要靠来回滚——
   对比失效。Pad 上一律保住「两张并排」，宁可单张小一点。 */
@media (max-width: 1180px) and (min-width: 721px) {
  .more-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
}

/* 721–768：整组再占一列，两图并排时每张才够宽 */
@media (max-width: 768px) and (min-width: 721px) {
  .more-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ==========================================================================
   二、手机：≤720
   ========================================================================== */
@media (max-width: 720px) {
  .container {
    padding-inline: 20px;
  }

  /* --- 2.1 排版基准 --- */
  .doc-body p,
  .doc-body li,
  .section-desc,
  .faq-item p {
    font-size: 15.5px;
    line-height: 1.75;
  }

  /* --- 2.1b 中文标题均衡断行 ---
     不等宽断行会把「细节」「账单」这种双字词劈成两行，
     用 text-wrap: balance 让两行长度接近，词群自然落在一起。 */
  .section-title,
  .scale-title,
  .partners-title,
  .case-head h2 {
    text-wrap: balance;
  }

  /* --- 2.1c 数据墙滚轮：修掉数位格顶部漏出的上一格底边 ---
     1em 行高装不下字体实际行盒（约 1.2em），相邻数位的下缘会
     从窗口顶部渗出，远看像一排虚线。用 clip-path 再内缩 8%。 */
  .s-num .od-cell.od-d {
    -webkit-clip-path: inset(8% 0 8% 0);
    clip-path: inset(8% 0 8% 0);
  }
  /* 数据卡在手机上偏松，收紧一档 */
  .scale-stat {
    padding: 22px 16px;
  }
  .scale-stat .s-num {
    font-size: 24px;
  }
  .scale-stat .s-label {
    margin-top: 6px;
  }

  /* --- 2.2 板块间距再收一档 --- */
  :is(.defect-section, .more-section, .scale-section, .partners-section,
      .case-section, .features, .how-section, .pricing-section,
      .price-basis-section, .price-notes-section, .faq-section,
      .vs-compare, .vs-why, .plat-section, .val-sec, .cap-section,
      .ag-def-section, .ag-own-section, .ag-flow-section,
      .rf-basis-section, .rf-steps-section, .rf-payout-section, .rf-terms-section,
      .sc-section, .sc-spot-section, .cmp-account, .legal-section, .err-wrap) {
    padding-block: 40px;
  }

  /* --- 2.3 通用横向轨道：只留给「图集」 ---
     2026-10-31：原来把 .pt-grid 与 .more-list 也塞进这里，实测是手机端
     「杂乱」的主因——五条轨道卡宽 44%/78%/84% 各不相同，右缘切在不同位置，
     而且露出来的是下一张卡的半截文字，不是一张图的边缘。
     现在横滑只留给「浏览更多」的图集（剧集墙、样片墙、合作伙伴 logo 墙），
     要读的内容一律改纵向（见 2.6 / 2.7）。 */
  .case-wall,
  .pt-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* 吸附点要把左右留白算进去，否则第一张会贴到屏幕左边缘、首字被切掉 */
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;
    padding-inline: 20px;
    padding-bottom: 4px;
  }
  .case-wall::-webkit-scrollbar,
  .pt-grid::-webkit-scrollbar {
    display: none;
  }

  /* 能力页样片：8 张卡改为 88% 宽横滑
     原先 78%（273px）露出的下一张有 105px，正好把它的标题与参数行切一半，
     看起来像排版断了。88% 之后露出量只剩 30 余像素，基本落在右缘渐隐里，
     读起来是「图还有一张」，不是「文字被砍断」。 */
  .case-wall > .case-card,
  .case-wall > .case-card.is-wide,
  .case-wall > .case-card.is-tall {
    flex: 0 0 88%;
    width: 88%;
    scroll-snap-align: start;
  }
  /* 竖版样片的封面在桌上/平板是 9:16（媒体在左 300px 宽），到手机上改成整列后
     9:16 会变成 292×519，与横版卡的 292×165 相差三倍多。同一排放两张差三倍高的卡，
     短的要么被拉到和长的一样高、正文下面空出三百多像素，要么缩回原高、行尾参差 ——
     两种都难看。这里统一到 16:9：`.cm-img` 本来就是 absolute + object-fit:cover，
     封面会居中裁切，卡片高度一致；点开弹窗里仍是原始画幅，`横屏 16:9 / 竖屏 9:16`
     的标注也照旧，不影响「原比例」的说法。 */
  .case-wall > .case-card.is-tall .case-media {
    aspect-ratio: 16 / 9;
    max-width: none;
    margin: 0;
  }

  /* 合作伙伴：12 格横滑，一屏内滑完 */
  .pt-grid > .pt-item {
    flex: 0 0 44%;
    width: 44%;
    height: 76px;
    scroll-snap-align: start;
  }

  /* 首页「不止于清晰」四组：改纵向，每组是一张「原片/增强」对比卡（见 2.7）。
     之前是两图上下叠成两张 4:5，同一场景看两遍还看不出差别，对比等于没有。
     合成一张图后每组只占一个卡位、高度减半，四组就都留得下；
     默认仍折叠到前两组，展开按钮由 mobile.js 插入。 */
  .more-list {
    display: block;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  /* 这里不能写 !important：site.css 最后一条 `.more-group + .more-group{margin-top:0}`
     （它的间距交给网格 gap）会用 !important 把下面那条「相邻组留 40px」整段压死，
     表现是四组对比图上下无缝贴在一起 —— 2026-10-31 实测间隔为 0，就是这条造成的。 */
  .more-list > .more-group {
    width: auto;
    margin-top: 0;
  }
  .more-list > .more-group + .more-group {
    margin-top: 48px;
  }
  /* 只在折叠态隐藏，展开态不写 display，避免覆盖组件自身的排布 */
  .more-list:not(.is-open) > .more-group:nth-child(n + 3) {
    display: none;
  }

  /* --- 2.3b 首页「修复瑕疵」四组：改纵向单列 + 折叠 ---
     ① 横滑时右缘露出的是下一张的半截文字列，看起来像排版断了；
     ② 标注是绝对定位在 600×450 画布上的（引线只有 26/600≈4%），
        缩到 350 宽时引线不足 15px，文字反而盖住人脸 —— 引线与标签一起隐掉，
        靠下方 .rv-points 承担说明；
     ③ 四组竖排约 1.7 屏，默认只展开第一组，其余由 mobile.js 的按钮展开。 */
  .rv-list {
    display: block;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    border-top: 0;
    max-width: none;
  }
  .rv-list > .rv-item {
    width: auto;
    border-bottom: 0;
  }
  /* 只在折叠态隐藏，展开态不要写 display —— .rv-item 在 ≤1024 是
     flex column + .rv-shot{order:-1}（图在上、文在下），一旦被 display:block
     覆盖就退回 DOM 顺序，展开后的两组会变成「文在上、图在下」，与第一组不一致。 */
  .rv-list:not(.is-open) > .rv-item + .rv-item {
    display: none;
  }
  /* 展开后相邻两组的间距：30 → 48，并去掉那条 1px 分隔线。
     卡片以整幅图开头，48px 留白本身就够分隔；1px 线夹在「要点胶囊」和
     「下一张图」之间的 30px 里，看起来更像一道游离的横杠。
     用 padding-top 而不是 margin-top：site.css 里 `.rv-item { margin: 0 !important }`
     是给桌面网格用的，margin 一律被它吃掉（实测写 40 也只得到 0）。
     .rv-item 自身没有底色和边框，padding 与 margin 在这里视觉等价。 */
  .rv-list.is-open > .rv-item + .rv-item {
    padding-top: 48px;
  }
  .rv-shot {
    border: 0;
    margin-bottom: 14px;
  }
  .rv-shot img {
    border-radius: var(--r-lg);
  }
  /* 标注与卡片里的 .rv-points 列表内容完全一致，手机上重复出现两次没有意义：
     引线和标签一起隐掉，让图干净，靠下方要点列表承担说明。 */
  .rv-cues,
  .rv-cue {
    display: none;
  }

  /* --- 2.4 剧集墙：卡宽放宽到 172，剧名不再被截成四五个字 ---
     site.css 在 ≤640 把卡压到 196px、剧名压到 11px，加上我上一版又收到 148px，
     结果「破城·逆袭归来」只能显示半截。放宽卡宽并把剧名放回 12.5px，
     两行 clamp 足以容纳现有剧名。 */
  .drama-wall .dw-card {
    width: 172px;
    flex-basis: 172px;
  }
  .drama-wall .dw-name {
    font-size: 12.5px;
  }
  .drama-wall .dw-plat,
  .drama-wall .dw-hot {
    font-size: 12px;
  }

  /* --- 2.5 触控区 --- */  .cta-more,
  .site-footer a,
  .site-footer .ft-tel,
  .site-footer .ft-mail,
  .doc-related a,
  .legal-toc a,
  .arc-item {
    min-height: 44px;
  }
  .cta-more {
    display: inline-flex;
    align-items: center;
  }
  .site-footer .ft-col a {
    display: inline-flex;
    align-items: center;
    padding-block: 4px;
  }

  /* --- 2.6 表格：价格/码率表横滚 + 首列冻结 + 右缘渐隐（C1） ---
     只处理 .calc-table（首页、产品价值、套餐、适用场景的价格表与码率表，
     实测 640/720/560px，390 上右侧那一列结论直接被裁掉）。
     内容页的 .doc-table 不动：content.css 在 ≤640 已经按 data-label
     把它变成「一行一张卡」，比横滑更好；这里若给它加 min-width 会把卡片撑破。 */
  .calc-table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .calc-table::-webkit-scrollbar {
    display: none;
  }
  .calc-table table {
    min-width: 560px;
  }
  .calc-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-card);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  /* 表头冻结格的底色必须和同排其它格一致，否则表头会多出一块深色方块 */
  .calc-table th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-card-2);
    box-shadow: 1px 0 0 var(--line-soft);
  }
  .calc-table.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
  }
  .calc-table.is-scrollable.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* --- 2.6b 首页「不止于清晰」对比卡：一张图 + 触摸拖动分割线（B1） ---
     四组图都是 440×550 / 864×1080，比例 4:5，所以两张叠进一个 4:5 画框不裁切。
     原片在上层、按 --p 从左侧裁；增强在底层露出右侧；分割线与手柄用伪元素。
     只有手机上这么叠，桌面上 .more-pair 仍是两图并排。 */
  .more-pair {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #0b0c10;
    touch-action: pan-y;
    --p: 50%;
  }
  .more-pair .more-fig {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    margin: 0;
  }
  .more-pair .more-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
  }
  .more-pair .more-fig:first-child {
    z-index: 2;
    -webkit-clip-path: inset(0 calc(100% - var(--p)) 0 0);
    clip-path: inset(0 calc(100% - var(--p)) 0 0);
  }
  .more-pair .more-fig:last-child {
    z-index: 1;
  }
  /* 两张图的角标都锚在左下，叠起来会重叠：增强那张挪到右下 */
  .more-pair .more-fig:last-child .more-tag {
    left: auto;
    right: 12px;
  }
  .more-pair::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--p);
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
    box-shadow: 0 0 12px rgba(95, 214, 200, .7);
    z-index: 3;
    pointer-events: none;
  }
  .more-pair::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--p);
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(9, 10, 13, .5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    z-index: 4;
    pointer-events: none;
  }

  /* --- 2.6c 折叠按钮（由 mobile.js 插入，桌面端不生成） --- */
  .m-fold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 46px;
    /* 上方卡片间距已抬到 40（中卡 24），按钮离卡片太近会读成「卡的一部分」 */
    margin-top: 32px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--tx-2);
    font: inherit;
    font-size: 14px;
    letter-spacing: .2px;
    cursor: pointer;
  }
  .m-fold-btn:active {
    background: var(--bg-card-2);
  }
  .m-fold-btn i {
    font-style: normal;
    color: var(--c-cyan);
    transition: transform .2s ease;
  }
  .m-fold-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  /* --- 2.7 FAQ：先修列数，再折叠 ---
     site.css 在 ≤640 把 .faq-list 强制回两列，390 宽下每列仅 137px，
     文字被挤成十来行，这是 FAQ 页高达 10 屏的真正原因。这里改回单列。 */
  .faq-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* 折叠：答案仍在 DOM 内，只改是否显示。类名由 /assets/mobile.js 添加。 */
  .faq-item.is-collapsible {
    padding-block: 0;
  }
  .faq-item.is-collapsible > h3 {
    position: relative;
    padding: 16px 34px 16px 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-item.is-collapsible > h3::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 1.5px solid var(--tx-3, #8b8f9a);
    border-bottom: 1.5px solid var(--tx-3, #8b8f9a);
    transform: rotate(45deg);
    transition: transform .22s ease, margin-top .22s ease;
  }
  .faq-item.is-collapsible.is-open > h3::after {
    margin-top: -2px;
    transform: rotate(-135deg);
  }
  .faq-item.is-collapsible > p {
    display: none;
  }
  .faq-item.is-collapsible.is-open > p {
    display: block;
    padding-bottom: 20px;
  }
  .faq-item.is-collapsible + .faq-item.is-collapsible {
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
}

/* ==========================================================================
   三、小屏手机：≤400
   ========================================================================== */
@media (max-width: 400px) {
  .pt-grid > .pt-item {
    flex: 0 0 52%;
    width: 52%;
  }
  .case-wall > .case-card {
    flex: 0 0 86%;
    width: 86%;
  }
  .drama-wall .dw-card {
    width: 132px;
  }
}

/* ==========================================================================
   四、页脚与尾部 CTA（手机）：CTA 收成「标题 + 满宽按钮」；四列导航隐藏
   （导航里已有）；品牌与联系各占整行；底栏左对齐。≤720，桌面不动。
   ========================================================================== */
@media (max-width: 720px) {
  /* 1. 尾部 CTA：原来整块 display:none，长文滚到底没有任何入口。
     收成一条：标题 + 主按钮满宽，副文案 / 次要链接 / 脚注全部省掉。 */
  .cta-band { padding-block: 40px 44px; }
  .cta-band::after { width: 420px; height: 300px; }
  .cta-band .inner { padding: 0; }
  .cta-band h2 { font-size: 21px; line-height: 1.42; }
  .cta-band .inner > p { display: none; }
  .cta-band .cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
  }
  /* site.css 给 .cta-band .btn 压了 max-width:320，按钮只能到 320，
     比两侧各差 15。这里解除，让尾部按钮真正左右铺满。 */
  .cta-band .cta-actions > .btn { width: 100%; max-width: none; }
  .cta-band .cta-more { display: none; }

  /* 3. 四列导航隐藏 */
  .ft-col {
    display: none;
  }

  /* 收成单列后品牌与联系各占整行 */
  .ft-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .ft-brand,
  .ft-contact {
    grid-column: 1 / -1;
  }

  /* 2. 品牌介绍：解除 310px 上限，说明文字拉满 */
  .ft-tagline {
    max-width: none;
    margin-top: 14px;
    line-height: 1.7;
  }

  /* 4. 联系方式：信息占满、二维码靠右，行距收紧 */
  .ft-contact-row {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .ft-contact-info {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* 电话与邮箱之前被 .site-footer a 的 44px 触控高度撑开，两行文字之间
     空出二十多像素。这两个是纵向排列的文本链接，收回到 38 / 32，
     既保住可点区域，又把行距压回正常。 */
  .site-footer .ft-tel {
    font-size: 17px;
    min-height: 38px;
    line-height: 38px;
    margin: 0;
  }
  .site-footer .ft-mail {
    min-height: 32px;
    line-height: 32px;
    margin: 0;
  }
  .ft-contact h3 {
    margin-bottom: 10px;
  }
  .ft-addr {
    margin: 8px 0 0;
    line-height: 1.6;
  }
  .ft-qr {
    flex: 0 0 auto;
  }

  /* 5. 底栏：三行统一左对齐，去掉两端对齐造成的错位 */
  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ft-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .ft-copy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    width: 100%;
  }
  .ft-copy-links::before {
    display: none;
  }
  .ft-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    line-height: 1.55;
  }
  .ft-legal > * + *::before {
    display: none;
  }
  .ft-legal a {
    display: inline-block;
    min-height: 28px;
    line-height: 28px;
  }
}

/* ==========================================================================
   三、首页「修复瑕疵」：偶数卡的图文顺序统一
   --------------------------------------------------------------------------
   site.css 在 ≤1024 把 .rv-list 改成三列网格、每张卡是 flex column，
   靠 `.rv-item .rv-shot { order: -1 }` 把图放到文字上面。
   但同一个断点里还留着一条为旧版「两栏左右交替」写的
   `.rv-item:nth-child(even) .rv-shot { order: 0 }`，特异性更高，
   于是第 2 张卡的图掉到文字下面 —— 同排三张卡里只有它一个不一样，
   手机端展开后尤其明显（第 1、3 组图在上，第 2 组文在上）。
   这里把偶数卡也统一成图在上。
   ≥1025 不动：那个区间仍是左右交替的两栏，交替顺序是有意为之。
   ========================================================================== */
@media (max-width: 1024px) {
  .rv-item:nth-child(even) .rv-shot { order: -1; }
  .rv-item:nth-child(even) .rv-copy { order: 0; }
}

/* ==========================================================================
   四、竞品对比页：手机端只留「绿框即对比部位」定位图（2026-10-31）
   --------------------------------------------------------------------------
   上一版是把五路连图做成横滑、每路 180px（总宽 900px）。实际读起来仍不成立：
   900px 的连图在 390 屏上要滑四五次才看得全，而「五路并排」这个语义在滑动中
   就没了 —— 一次只看到两路，还得记住上一路长什么样。真正的逐帧对比交给
   「看动态 PK」弹窗（五路同帧同步播放）更说得通。
   所以手机端隐掉 `.vs-strip`，只保留定位图：它回答的是「对比画面里哪一处」，
   这件事一张竖图就够，与连图无关。
   `.vs-obj` 是 520×927 竖图，右栏让出来后给到 240px 并居中，图注保留在下方。
   桌面（≥721）不动，仍是「定位图 + 五路连图」两栏。
   ========================================================================== */
@media (max-width: 720px) {
  .vs-visual {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 16px 14px;
    align-items: start;
  }
  .vs-strip { display: none; }
  /* 定位图占满内容宽：520×927 竖图在 316 宽下是 563 高，比原来的 240/425 更大，
     绿框里的细节才看得清。site.css 在 ≤640 有 `.vs-obj{max-width:150/180px}`，
     这里要同时把 max-width 放开，否则 width:100% 仍被限住。 */
  .vs-obj,
  .vs-obj img { max-width: none; width: 100%; }
  /* 但 460 以上就别再放大了：520×927 的竖图在 646 宽下是 1148 高，
     一张定位图顶掉一屏半。手机（内容宽 316–420）仍是占满，宽屏收到 420 居中。 */
  .vs-obj { max-width: 420px; margin-inline: auto; }
  /* 但 460 以上就别再放大了：520×927 的竖图在 646 宽下是 1148 高，
     一张定位图顶掉一屏半。手机（内容宽 316–420）仍是占满，宽屏收到 420 居中。 */
  .vs-obj { max-width: 420px; margin-inline: auto; }

  /* 按钮挪到标题右侧，省掉一整行的纵向空间。
     `.vs-head__txt` 里是「标题 + 说明」两块，用 display:contents 把它拆开，
     让标题、说明、按钮三者直接参与 .vs-head 的网格：
     第 1 行 = 标题 + 按钮，第 2 行 = 说明（跨整行，不被按钮挤窄）。 */
  .vs-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
  }
  .vs-head__txt { display: contents; }
  .vs-title { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .vs-pk { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .vs-desc { grid-column: 1 / -1; grid-row: 2; }
}

/* 图集横滑的右缘渐隐：把「截断」读成「右边还有」。
   只作用于含 .case-wall 的板块（能力页），别把种子方案页的整卡也压暗。
   .case-wall 有 -20px 出血，右缘在视口外，所以遮罩挂在不滚动的 section 上。 */
@media (max-width: 720px) {
  .case-section.has-wall { position: relative; }
  .case-section.has-wall::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    inset: 0 0 0 auto;
    /* 52px：正好覆盖「卡片右缘 → 屏幕右缘」那段露出量，
       下一张卡的文字落进渐变里就散了，只剩「还有一张」的暗示。 */
    width: 52px;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(11, 12, 16, 0) 0%, var(--bg-body) 72%);
  }
}

/* ==========================================================================
   五、手机端卡片间距节奏（2026-10-31）
   --------------------------------------------------------------------------
   实测 390 下各卡片组的组内间距是 12 / 14 / 16 / 18 / 20 混用，而且偏小：
   整幅图卡（每张三四百像素高）之间只隔 14–20，滚起来像一叠贴住的卡片，
   读不出「换了一张」。按卡片的视觉重量分三档，全站统一，只作用于 ≤720：

     图卡 48  以整幅图开头、无边框无底色，全靠留白分隔（约等于卡片宽的 1/7）
     中卡 24  有边框或底色的信息卡，自身已是完整盒子，不需要那么多空白
     小卡 20  一行一两条信息的小块

   Pad（721–1180）多是两列并排，横向已有间隔，纵向不必再放大，保持原样。
   ========================================================================== */
@media (max-width: 720px) {
  /* --- 图卡 --- */
  .cmp-wall,
  .sc-spot-list {
    row-gap: 48px;
  }

  /* --- 中卡 --- */
  .price-notes,
  .vs-reasons,
  .sc-grid,
  .how-steps,
  .val-tri,
  .rf-steps,
  .rf-payout,
  .ag-def,
  .ag-own,
  .ag-flow {
    row-gap: 24px;
  }

  /* --- 小卡 --- */
  .val-quad,
  .rf-terms,
  .scale-band,
  .faq-list {
    row-gap: 20px;
  }
}

/* ==========================================================================
   六、手机端板块标题：统一 24px，短标题保证一行
   --------------------------------------------------------------------------
   改前实测（390）：多数页 24px，但有两处例外 ——
     · `/scenarios/` `.page-scenarios .section-title` 32px
     · 首页剧集墙 `.drama-wall--home .section-title` 30px
   而这两条还带着 `.grad-text { display: block }`，把标题从渐变色块处强制断成两行，
   像「这些剧集，/ 用过我们的产品」12 个字也占两行 —— 与「标题居中、一行读完」的
   节奏相冲。另外 `.section-title` 在窄屏带 `padding: 0 12px`，可用宽度只剩 326，
   14 个字就被挤到第二行。
   这里一并抹平：所有板块标题 24px、去掉横向内距（容器本身已有 20px）、
   渐变色块回到行内，短标题（≤14 字）自然一行，长的照常折两行。
   ≥721 不动。
   ========================================================================== */
@media (max-width: 720px) {
  .section-title {
    font-size: 22px;
    padding-inline: 0;
    line-height: 1.32;
  }
  /* 副标从 15.5 收到 15：手机上这段是「要读的导语」，不低于 15 才不费眼，
     同时与 22px 标题保持 1.47 倍的层级差（低于 1.4 就会读成同一层）。 */
  .section-desc {
    font-size: 15px;
  }
  .page-scenarios .section-title,
  .drama-wall--home .section-title {
    font-size: 22px;
    line-height: 1.32;
  }
  .page-scenarios .section-title .grad-text,
  .drama-wall--home .section-title .grad-text {
    display: inline;
  }
}

/* ==========================================================================
   七、样片卡墙改为「纵向单列 + 折叠」（2026-11-01）
   --------------------------------------------------------------------------
   三处：/features/ 的 .case-wall（8 张）、/seedance/ 的
   .cmp-wall--wide 与 .cmp-wall--tall（各 5 张）。
   原来 ≤720 是横滑轨道（.case-wall 88% 宽 / .cmp-wall 两列），8 张要滑七八次，
   而且每次只看得见一张半 —— 和首页「修复瑕疵」「不止于清晰」当初的问题是同一个：
   要一张张读的卡，不适合塞进轨道。
   现在与首页同一套：纵向单列（图卡间距 48），默认露前 2 张，其余留 DOM，
   由 mobile.js 在列表后插「展开看另外 N 组」按钮。
   折叠只写 :not(.is-open) 的隐藏，展开态不碰 display（铁律，见 3.2）。
   ≥721 完全不动。
   ========================================================================== */
@media (max-width: 720px) {
  .case-wall {
    display: flex;
    flex-direction: column;
    gap: 48px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .case-wall > .case-card,
  .case-wall > .case-card.is-wide,
  .case-wall > .case-card.is-tall {
    flex: 0 0 auto;
    width: 100%;
  }
  .case-wall:not(.is-open) > .case-card:nth-child(n + 3) {
    display: none;
  }

  .cmp-wall--wide,
  .cmp-wall--tall {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .cmp-wall:not(.is-open) > .cmp-card:nth-child(n + 3) {
    display: none;
  }

  /* 横滑没了，那条右缘渐隐也就没有意义了 */
  .case-section.has-wall::after {
    display: none;
  }
}

/* ==========================================================================
   九、首屏文案整块左对齐（2026-11-01）
   --------------------------------------------------------------------------
   ≤960 时 site.css 把 `.hero-copy`（首页）与 `.hero .container`（产品页）整体
   居中，H1、kicker、副标、按钮一起居中。中文标题在 26px 下折成两三行时，
   每行长度都不同，居中会让左右两头都参差（副标更明显，4–7 行像一个菱形块）。
   这里把首屏文案整块改成左对齐：所有文字共用容器左缘一条竖线，与下方
   数据条、按钮的起始边一致。紧凑首屏 `.hero-compact` 本来就左对齐，不在范围内。
   ≥721 不动。
   ========================================================================== */
@media (max-width: 720px) {
  /* (0,2,0)：压过 site.css 的 `.hero .container` 与 `.hero-page .container` */
  .hero-hero .hero-copy,
  .hero-page .hero-copy,
  .hero-cmp .hcmp-copy,
  .hero-page .container,
  .hero.hero-page .container {
    text-align: left;
  }

  /* 副标不能只靠继承：site.css 里 `.hero-cmp .sub` / `.hero-page .sub` 自己写了
     text-align:center（0,2,0），必须按同样特异性逐个点名，否则产品页仍是居中。
     另外 site.css ≤900 给 `.hero .sub` 留了 `padding: 0 12px` 的居中留白，
     左对齐后这 12px 会让副标比主标题右移一格（实测 value/features/scenarios/
     seedance/vs 五页差 12px），这里用 `.sub.sub` 提一档特异性压掉。 */
  .sub,
  .hero-hero .sub,
  .hero-page .sub,
  .hero-cmp .sub {
    text-align: left;
  }
  .hero .sub.sub { padding: 0; }

  /* 按钮组：flex 的 justify-content / align-items 都不吃 text-align，得单独改。
     ≤640 时 site.css 把 .hero-cta 改成 column + align-items:center，
     按钮窄 320 居中，与上面的左对齐文案错开一截；这里统一靠左拉满。 */
  .hero-hero .hero-cta,
  .hero-page .hero-cta,
  .hero-page .hcmp-cta,
  .hero-cmp .hcmp-cta {
    justify-content: flex-start;
    align-items: stretch;
  }

  .hero-hero .hero-cta > .btn,
  .hero-page .hero-cta > .btn,
  .hero-page .hcmp-cta > .btn,
  .hero-cmp .hcmp-cta > .btn {
    max-width: none;
  }
}

/* ==========================================================================
   十、产品页 kicker 前导横线对齐（2026-11-01）
   --------------------------------------------------------------------------
   site.css 在 ≤1080 给 `.hero-cmp .hero-tag` 写了 `align-items: center`（0,2,0），
   而手机端适配层的 `.hero-tag { align-items: flex-start }` 只有 0,1,0，压不过它。
   结果：产品页（/value/ /features/ /scenarios/ /seedance/ /vs/）的 kicker 横线
   在居中基础上又叠加了 `margin-top: 9px`，被推到文字底部，看起来像下划线；
   首页（无 .hero-cmp 父级）走 flex-start + 9px，横线正好落在第一行中线。
   这里把产品页补到同一套：flex-start，让横线与文字第一行中线对齐。
   ≥721 不动。
   ========================================================================== */
@media (max-width: 720px) {
  .hero-tag,
  .hc-kicker,
  .hero-cmp .hero-tag,
  .hero-compact .hc-kicker {
    white-space: normal;
    align-items: flex-start;
    letter-spacing: .06em;
  }
}

/* ==========================================================================
   十一、推广返佣页首屏（≤720）
   --------------------------------------------------------------------------
   三数字在 390 下挤成一排每个只剩 100px，说明文字要断三四行。
   改成纵向三条：数字与说明并排一行，条间用细线分隔，读起来像三行账目。
   测算卡同步收内距与列宽，保证 8px 的条在手机上还能看出长短差别。
   ========================================================================== */
@media (max-width: 720px) {
  .rf-hero h1 { font-size: 25px; }
  .rf-hero h1 .grad-text { white-space: nowrap; }

  /* 按钮组从右列挪进左列后，两个按钮宽度不一，统一拉满 */
  .rf-hero .hc-action {
    flex-direction: column;
    align-items: stretch;
  }
  .rf-hero .hc-action .btn { width: 100%; }

  .rf-viz {
    max-width: none;
    padding: 20px 18px 18px;
  }
  .rf-viz-row {
    grid-template-columns: 72px minmax(0, 1fr) 78px;
    gap: 8px;
  }
  .rf-viz-v { font-size: 14px; }
  .rf-viz-row + .rf-viz-row { margin-top: 16px; }
}

/* ==========================================================================
   十二、代理加盟页首屏（≤720）
   --------------------------------------------------------------------------
   与返佣页同一套：三项权益转纵向三行、按钮满宽、价差轴收内距。
   价差轴右侧青色段里的「你的毛利」在 350 宽下仍要留得住，故把 bar 高度
   从 44 收到 38，标签字号不变。
   ========================================================================== */
@media (max-width: 720px) {
  .ag-hero h1 { font-size: 25px; }
  /* 「差价就是你的毛利」是一个整体，不能被断成「差」/「价就是…」 */
  .ag-hero h1 .grad-text { white-space: nowrap; }

  .ag-hero .hc-action {
    flex-direction: column;
    align-items: stretch;
  }
  .ag-hero .hc-action .btn { width: 100%; }

  .ag-axis {
    max-width: none;
    padding: 20px 18px 18px;
  }
  .ag-axis-bar { height: 38px; }
  .ag-axis-marks { font-size: 12px; }
}

/* ==========================================================================
   十三、首屏按钮统一纵向满宽（2026-11-01）
   --------------------------------------------------------------------------
   手机端首屏的按钮组原先有四种长相：首页纵向满宽；产品价值 / 增强能力 /
   经典方案 / 竞品对比并排两枚（209 + 117，右端空出一截）；适用场景与常见问题
   因为文案更长被挤成「一枚在上、一枚贴着左边在下一行」；套餐页的容器还被
   内容撑窄到 295，同样两枚并排。
   统一成纵向两枚、等宽拉满：触摸目标 350×56，主次靠上下顺序表达，不再靠
   宽度差。紧凑首屏还要把 .hc-row 的 align-items 从 flex-start 改成 stretch，
   否则 .hc-action 的宽度仍由内容决定（套餐页就是被它压到 295 的）。
   ≥721 不动。
   ========================================================================== */
@media (max-width: 720px) {
  .hero-hero .hero-cta,
  .hero-page .hero-cta,
  .hero-page .hcmp-cta,
  .hero-cmp .hcmp-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* 三组按钮原本 56 / 44+46 / 56 三种高度、16 / 10 / 12 三种间距；
     产品页那两枚还一高一低（主按钮 44、描边 46）。这里统一成 56 + 12。 */
  .hero-page .hcmp-cta > .btn,
  .hero-cmp .hcmp-cta > .btn {
    height: 56px;
    padding-block: 0;
  }

  .hero-hero .hero-cta > .btn,
  .hero-page .hero-cta > .btn,
  .hero-page .hcmp-cta > .btn,
  .hero-cmp .hcmp-cta > .btn {
    width: 100%;
    max-width: none;
  }

  .hero-compact .hc-row { align-items: stretch; }

  .hero-compact .hc-action {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-compact .hc-action > .btn { width: 100%; }
}
/* 三步卡序号标签：手机端卡片内距收到 24，顶部补到 30 让开标签（标题位置与其它卡一致） */
@media (max-width: 720px) {
  .rf-step { padding-top: 30px; }
}

/* ==========================================================================
   十五、板块副标：≤720 左对齐 + balance（2026-11-01）
   --------------------------------------------------------------------------
   副标在手机上要折 3–6 行。居中时每行长度都不同，左右两头都在变，所以改左
   对齐：各行共用一条左缘，也正好与下方卡片、表格的左缘对齐。
   折行用 balance 而不是 pretty——实测 31 条副标里，pretty 有 17 条末行不足
   120px（最短 30px，等于两三个字单独一行），balance 是 0 条。balance 偶尔会
   把 5 行推成 6 行，但每行等长，视觉上比一条两字尾巴干净。
   特异性：`.page-referral/.page-agency .section-desc`（site.css，≤640 里写着
   pretty）与 `.page-scenarios` 的居中都是 (0,2,0)，所以这里用重复类名
   `.section-desc.section-desc` 提到同档、靠加载顺序胜出。
   ≥721 保持居中（Pad 宽，两行即可读）。
   ========================================================================== */
@media (max-width: 720px) {
  .section-desc.section-desc,
  body.page-scenarios .section-desc {
    text-align: center;
    /* site.css 在 ≤900 又给副标加了 padding:0 16px，与容器内距叠加成 36px，
       行宽从 350 掉到 318（每行只剩 20 字，多折一行且右端不齐）。这里退回 0，
       与卡片、表格共用同一条左缘，行宽回到 350（每行 23 字）。 */
    padding: 0;
    /* 不用 balance：它把每行压到容器的 87% 再断词，看着像窄一截的菱形块。
       wrap 让每行吃满，断点只落在行满的位置。 */
    text-wrap: wrap;
  }
}

/* ==========================================================================
   十六、套餐页 / 常见问题页首屏（≤720）
   --------------------------------------------------------------------------
   与招商双页对齐：H1 降到 25px，并把「增强1集3分钟54元」整段设为不断行——
   这一段是套餐页的落点句，被拆成「增强」/「1集3分钟54元」时读着像两个意思。
   测算卡沿用 `.rf-viz` 的手机档内距，只是标签「5 万 / 22 万 / 250 万宝石」
   比返佣页的金额短，列宽不需要再收。
   ========================================================================== */
@media (max-width: 720px) {
  .pk-hero h1,
  .fq-hero h1 { font-size: 25px; }
  .pk-hero h1 .grad-text,
  .fq-hero h1 .grad-text { white-space: nowrap; }
}

/* ==========================================================================
   十七、手机端首屏顶距统一收窄（2026-11-01）
   --------------------------------------------------------------------------
   原先手机上首屏 padding-top 是 56（首页 hero-hero 更是 88），加上 kicker 自身
   约 9px 的行盒偏移，正文第一行距导航 65–97，头部占掉近 1/6 屏。全部收到 36，
   kicker 距导航统一 45（首页原先单独留 52，导致它比其它页低 16px，已并入）。
   特异性要带 body：site.css 那条 `main > section.hero-compact{padding-block:…!important}`
   是 (0,2,1)，而 responsive.css 在它之前加载，同特异性同 !important 会输。
   ========================================================================== */
@media (max-width: 720px) {
  body main > section.hero-page,
  body main > section.hero-compact,
  body main > section.hero-cmp,
  body main > section.hero-legal,
  body main > section.hero-hero {
    padding-top: 36px !important;
  }
}

/* ==========================================================================
   十八、手机端触控区补足 44（2026-11-01）
   --------------------------------------------------------------------------
   页脚电话 38、邮箱 32、备案号 28，都在可点但够不着的位置；竞品页的
   「看动态 PK」按钮 36。正文内链（ilink，40）不动——为了 4px 去撑大行距
   不划算，WCAG 2.2 AA 的下限是 24px，它已经达标。
   ========================================================================== */
@media (max-width: 720px) {
  .site-footer .ft-tel,
  .site-footer .ft-mail,
  .site-footer .ft-copy-links a,
  .site-footer .ft-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* .foot-note 里的正文内链只补竖向命中区（hex 不影响行盒），不撑行距 */
  .foot-note a { padding-block: 14px; }
  .vs-pk {
    min-height: 44px;
    padding-block: 12px;
  }
}

/* ==========================================================================
   十九、手机端首页主标题与产品页对齐（2026-11-01）
   --------------------------------------------------------------------------
   实测 h1 顶部（相对首屏顶）：首页 81、产品页 93、招商/套餐/FAQ 79。
   首页的 kicker 是胶囊标签（.hero-tag，含 7px padding），产品页同一个标签
   却因为标题字号更大而多出 12px 间距。这里给首页 h1 补 12，与产品页齐平。
   ========================================================================== */
@media (max-width: 720px) {
  .hero-hero h1 { margin-top: 12px; }
}

/* ==========================================================================
   二十、手机端首屏按钮风格统一（2026-11-01）
   --------------------------------------------------------------------------
   首页和招商 / 套餐 / FAQ 的按钮已经是 350×56、圆角 12、16px；产品页那五个
   （.hero-page 用的 .hcmp-cta）宽度高度圆角都一样，只有字号停在 14，看起来
   比首页小一号。这里补到 16。
   特异性要写成 .hero-page.hero-cmp：site.css 的 `.hero-cmp .hcmp-cta .btn`
   与 `.hero-page .hcmp-cta .btn` 同为 (0,3,0)，responsive.css 先加载会输。
   ========================================================================== */
@media (max-width: 720px) {
  .hero-page.hero-cmp .hcmp-cta .btn {
    font-size: 16px;
    min-height: 56px;
  }
}

/* ==========================================================================
   二十一、≤360 头部压缩（2026-11-01）
   --------------------------------------------------------------------------
   320 宽下 header 里 logo(145) + 汉堡(40) + 进入控制台(131) 加两侧内距 40
   一共 356，撑破视口 6px，汉堡被 flex 挤到只剩 2px 宽——不只是溢出，
   菜单按钮在 SE 上几乎点不到。这里把三样各收一档，让 320 也放得下。
   ========================================================================== */
@media (max-width: 360px) {
  .site-header .container { padding-inline: 12px; }
  .logo-img { height: 30px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-console { padding: 8px 10px; font-size: 13.5px; }
}

/* ==========================================================================
   二十二、正文里的长 URL 在窄屏会撑破（2026-11-01）
   --------------------------------------------------------------------------
   /cost/data/ 的「引用格式」带了一整条 https://… 末尾没有空格可断，
   320 宽下把 .doc-note 撑到 329（容器只有 277），进而把整页推到 352。
   给正文与注释块放开任意位置断行，只影响这类没有断点的长串。
   ========================================================================== */
@media (max-width: 720px) {
  .doc-body,
  .doc-note { overflow-wrap: anywhere; }
}

/* ==========================================================================
   二十三、横版 LOGO 在窄屏收一档（2026-11-04）
   --------------------------------------------------------------------------
   横版组合图 585×156（比例 3.75:1），52px 高时宽 195，比原来的「50 标记 +
   27 字标」（141）宽 54px；1180 以下是汉堡布局，给汉堡与「进入控制台」
   留出余量。≤360 已在第二十一节收到 30px，这里只管 361–1180。
   ========================================================================== */
@media (min-width: 361px) and (max-width: 1180px) {
  .logo-img { height: 42px; }
}

/* 抽屉展开时，右侧面板会从 86px 处盖住页头左侧的横版 LOGO，露出半截很难看。
   mobile.js 已经会给 body 挂 is-drawer-open，这里直接跟着淡出，不额外改脚本。 */
.logo { transition: opacity .16s ease; }
body.is-drawer-open .site-header .logo { opacity: 0; pointer-events: none; }

/* ==========================================================================
   二十四、页脚手机直线的触控高度（2026-11-05）
   --------------------------------------------------------------------------
   座机、邮箱在这一层都是 44；手机号是同一组里的第二行，没必要同样高，
   给 34（手机 40）既能点准，也不会把联系方式拉成一列按钮。
   ========================================================================== */
@media (max-width: 1180px) {
  .site-footer a.ft-tel-2 { min-height: 34px; }
}
@media (max-width: 720px) {
  .site-footer a.ft-tel-2 { min-height: 40px; }
}