/* =============================================================================
 * best-psc-vs-sp-iw.css — Parsec vs Splashtop 对比页（D2C-20261009-002）
 * 设计帧：oUzdI5tgrzJLpvclZTr1v3 / 1729:24264（1920×18145，渲染图 work/av-psc/design/*.png）
 * 文案正本：requirement.txt（webpub 20261009 docx 全量提取）；冲突裁决见 work/av-psc/conflicts.md
 *
 * 形态总览（17 版块）：
 *   banner(深) → glance/features/performance/pricing（白系三列表）→ compatibility(深底白表)
 *   → security(浅底深表) → scenario×4（星级表+hover tooltip）→ reviews(双面板 slick)
 *   → faq(手风琴) → choose(双卡+AnyViewer 大卡) → conclusion(深底照片结语)
 *   → side-nav(左浮窗) + sticky-download(底横幅)
 *
 * 复用口径（AV best 族基准页 qa-alternative-iw）：
 *   - header/footer = 站点 main.css new-header/new-footer（族口径，设计内嵌组件实例不复刻）
 *   - .status 勾/叉图标、.faq 手风琴、.side-nav、.sticky-download、焦点环 = 族契约原样保留
 *   - 本页新增：三列品牌对比表（.cmp-*）、星级表（.sc-*）、双面板评价（.rv-*）、选择卡（.wh-*）
 *   - 表格首列固定：两族表体统一 .table-card > .table-scroll > table 结构；
 *     ≤1199 首列 sticky（未滚动时与静态流位置一致，故不改变设计稿静态版式），≤991 追加右缘渐隐遮罩；
 *     ≤767 星级表 tooltip 改贴首列宽度（原右侧 27.2rem 浮层会被滚动容器裁切且不可滚达），
 *     且 features 表首列由设计 37.5% 锁定为实像素 260px（其余两列均分余量）。
 *
 * rem 标定：≥768 时 1rem=10px（站点 main.css html{font-size:62.5%}；≤767 55.5%，
 *   由文末 page-fixes 以实像素锁定下限）。
 * 数值唯一权威 = 设计节点 JSON（work/av-psc/sections/node_*.json），非目测。
 * ========================================================================== */

/* ===== 01 hero（figma:1729:24266，1920×700） =====
   节点实测：bg #091121 + 水印合成图（banner-bg 1729:24267 导 WebP）；
   pill 徽章 358×62 r8 渐变描边 2px [#2C53FF→#7CCFFF→#2C53FF]，文字 32/700 lh40 白；
   H1 60/700 lh78 白；要点 3 行 20/400 lh26 白 + 18 勾图标，行距 20；段间 gap 60；
   CTA 346×64 #2258F6 r32 光晕(20,.4) —— 与族 .banner .btn-download 同款复用。 */
.banner {
    padding: 12.5rem 0;
    color: #fff;
    background: #091121 url("/resource/images/best-psc-vs-sp-iw/hero-bg.webp") no-repeat center / cover;
    text-align: center;
}

.banner>.container2.banner-content {
    max-width: 128rem;
    margin: 0 auto;
}

/* pill 徽章（节点 1729:24274：358×62 r8 渐变描边；文字 32/700 lh40） */
.banner .banner-badge {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    height: 6.2rem;
    box-sizing: border-box;
    padding: 0 4rem;
    border: .2rem solid transparent;
    border-radius: .8rem;
    background:
        linear-gradient(#091121, #091121) padding-box,
        linear-gradient(90deg, #2C53FF 0%, #7CCFFF 50%, #2C53FF 100%) border-box;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 4rem;
}

.banner .banner-title {
    margin: .8rem 0 0;
    color: #fff;
    font-size: 6rem;
    font-weight: 700;
    line-height: 7.8rem;
}

/* 要点组（节点 Frame 135：3×26 + 行距 20；勾图标 18 族同款 data URI） */
.banner .banner-content .banner-list {
    width: fit-content;
    margin: 6rem auto;
    text-align: left;
}

.banner .banner-content .banner-list li {
    position: relative;
    padding-left: 2.6rem;
    color: #fff;
    font-size: 2rem;
    line-height: 2.6rem;
}

.banner .banner-content .banner-list li:not(:last-child) {
    margin-bottom: 2rem;
}

.banner .banner-content .banner-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .4rem;
    width: 1.8rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%232258F6'/%3E%3Cpath d='M6 9.9L8.9 12.2L12.4 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.banner .btn-download {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 6.4rem;
    padding: 0 5.6rem;
    border-radius: 3.2rem;
    background: #2258F6;
    box-shadow: 0 1rem 2rem rgba(34, 88, 246, .4);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.4rem;
    text-align: center;
    transition: background-color .15s ease;
}

.banner .btn-download svg {
    display: block;
    flex: none;
}

.banner .btn-download:hover,
.banner .btn-download:focus {
    background: #1748db;
    color: #fff;
}

.banner .btn-download:active {
    background: #1E46D6;
}

@media (max-width: 1199px) {
    .banner {
        padding: 8rem 0;
    }
}

@media (max-width: 991px) {
    .banner .banner-badge {
        font-size: 2.4rem;
        min-height: 5.2rem;
    }

    .banner .banner-title {
        font-size: 4rem;
        line-height: 5.2rem;
        margin-top: 4rem;
    }
}

@media (max-width: 767px) {
    .banner {
        padding: 4.8rem 0;
    }

    .banner .banner-badge {
        font-size: 2rem;
        min-height: 4.4rem;
        padding: .8rem 2.4rem;
    }

    .banner .banner-title {
        font-size: 3.2rem;
        line-height: 4.2rem;
        margin-top: 3.2rem;
    }

    .banner .banner-content .banner-list {
        margin: 4rem auto;
    }

    .banner .banner-content .banner-list li {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .banner .banner-content .banner-list li:not(:last-child) {
        margin-bottom: 1.2rem;
    }

    .banner .btn-download {
        padding: 0 3.2rem;
        font-size: 1.6rem;
    }
}

/* ===== 02–07 三列品牌对比表（glance 1729:24289 / features 1729:24352 /
   compatibility 1729:24489 / performance 1729:24564 / security 1729:24617 /
   pricing 1729:24668） =====
   节点实测（共性）：内容列 1280；padding 120/120；标题组 gap16 + 表 gap80；
   表卡白底 r14（glance/compat r16 头格 r24 顶）+ shadow #273356@.10 [0,5] r20；
   行交替 #F9FAFF/#FFFFFF；竖分隔 1px #F1F1F1 inset；单元格 14/400 lh20 居中；
   行头 18/400 lh28 #000 左对齐；表头 20/700（glance/features）/18/700（其余）；
   Insight：白系版块 = #F8F9FA r16；深系版块 = #FFF r16+shadow；glance = 卡内尾盒 #FFF。
   列宽：glance 360/460/460；features 480/400/400；compat+perf+security+pricing 280/500/500。 */
.cmp {
    padding: 12rem 0;
    text-align: center;
}

.cmp .section-head {
    margin: 0 auto 8rem;
}

.cmp .section-head h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
}

.cmp .section-head p {
    max-width: 128rem;
    margin: 1.6rem auto 0;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
}

.cmp-features,
.cmp-performance,
.cmp-pricing {
    background: #ffffff;
}

.cmp-glance,
.cmp-security {
    background: #F8F9FA;
}

/* 深底版块（compatibility）：#091121 + 水印图（1729:24490），标题/导语白 */
.cmp-compatibility {
    background: #091121 url("/resource/images/best-psc-vs-sp-iw/compat-bg.webp") no-repeat top center / 100% auto;
}

.cmp-compatibility .section-head h2,
.cmp-compatibility .section-head p {
    color: #ffffff;
}

.table-card thead th:first-child {
    border-top-left-radius: 1.4rem;
}

.table-card thead th:last-child {
    border-top-right-radius: 1.4rem;
}

.table-card tbody tr:last-child th:first-child {
    border-bottom-left-radius: 1.4rem;
}

.table-card tbody tr:last-child th:last-child {
    border-bottom-right-radius: 1.4rem;
}

@media (max-width: 1199px) {

    .table-card th,
    .table-card td {
        border-radius: 0 !important;
    }
}

/* 表卡外壳 */
.cmp .table-card {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    max-width: 128rem;
    border-radius: 1.4rem;
    box-shadow: 0 0.5rem 2rem rgba(39, 51, 86, .1);
    text-align: left;
}

.cmp-features .table-card,
.cmp-glance .table-card {
    /* box-shadow: 0 2.5rem 2rem rgba(39, 51, 86, .1); */
    /* box-shadow: 1rem 0 2rem -1rem rgba(39, 51, 86, 0.12), -1rem 0 2rem -1rem rgba(39, 51, 86, 0.12); */
    box-shadow:
        1rem 0.5rem 2rem -1rem rgba(39, 51, 86, 0.12),
        -1rem 0.5rem 2rem -1rem rgba(39, 51, 86, 0.12),
        0 2rem 2rem -1rem rgba(39, 51, 86, 0.08);
}

.cmp .table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.cmp .table-scroll:focus-visible,
.sc .table-scroll:focus-visible {
    outline: .2rem solid #2258F6;
    outline-offset: .2rem;
}

.cmp table.cmp-table {
    table-layout: fixed;
    width: 100%;
    min-width: 96rem;
    border-collapse: collapse;
}

.cmp table.cmp-table th,
.cmp table.cmp-table td {
    box-sizing: border-box;
    padding: 1.4rem 2.4rem;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
    text-align: center;
    vertical-align: middle;
    /* 1px #F1F1F1 竖分隔（strokeAlign=INSIDE → inset 阴影复现，占位 0） */
    box-shadow: inset -.1rem 0 0 #f1f1f1;
}

.cmp table.cmp-table th:last-child,
.cmp table.cmp-table td:last-child {
    box-shadow: none;
}

.cmp table.cmp-table thead th:first-child {
    text-align: left;
}

.cmp table.cmp-table thead th {
    height: 7.6rem;
    padding: 0 2.4rem;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.8rem;
}

.cmp table.cmp-table tbody th {
    text-align: left;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
}

/* 行交替底色（节点 fill：奇 #F9FAFF / 偶 #FFFFFF） */
.cmp table.cmp-table tbody tr:nth-child(odd)>th,
.cmp table.cmp-table tbody tr:nth-child(odd)>td {
    background: #F9FAFF;
}

.cmp table.cmp-table tbody tr:nth-child(even)>th,
.cmp table.cmp-table tbody tr:nth-child(even)>td {

    background: #ffffff;
}

.cmp-features table.cmp-table tbody tr:nth-child(odd)>th,
.cmp-features table.cmp-table tbody tr:nth-child(odd)>td {
    background: #ffffff;
}

.cmp-features table.cmp-table tbody tr:nth-child(even)>th,
.cmp-features table.cmp-table tbody tr:nth-child(even)>td {

    background: #F9FAFF;
}

/* 行高档位：features 70 / perf+pricing 92 / compat 80 / security 80 / glance 74 */
.cmp-features table.cmp-table tbody tr {
    height: 7rem;
}

.cmp-performance table.cmp-table tbody tr,
.cmp-pricing table.cmp-table tbody tr {
    height: 9.2rem;
}

.cmp-compatibility table.cmp-table tbody tr,
.cmp-security table.cmp-table tbody tr {
    height: 8rem;
}

.cmp-glance table.cmp-table tbody tr {
    height: 7.4rem;
}

/* glance 表头（节点 100 高；col1 #F9FAFF 20/700；col2/3 品牌格 = bg-title 渐变底图 780×130 cover + logo） */
.cmp-glance table.cmp-table thead th {
    height: 10rem;
    border-radius: 2.4rem 2.4rem 0 0;
}

.cmp-glance table.cmp-table thead th.cmp-brand {
    background: url("/resource/images/best-psc-vs-sp-iw/table-title-bg.png") no-repeat center / cover;
}

.cmp-glance table.cmp-table thead th:first-child {
    background: #eef1ff;
}

.cmp-features table.cmp-table thead th.cmp-brand {
    background: url("/resource/images/best-psc-vs-sp-iw/table-title-bg.png") no-repeat center / cover;
}

.cmp-features table.cmp-table thead th:first-child {
    background: #eef1ff;
}

/* 品牌表头格（白系表：彩色 logo；深系表：白色 logo） */
.cmp table.cmp-table thead th.cmp-brand .brand-logo {
    display: inline-block;
    vertical-align: middle;
}

.cmp-compatibility table.cmp-table thead th,
.cmp-features table.cmp-table thead th {
    border-radius: 2.4rem 2.4rem 0 0;
}

/* compatibility/security：表头深色（compat #233149 头 9rem、分隔线 #151C2B 设计实测；
   security 整行 #091121） */
.cmp-compatibility table.cmp-table thead th {
    background: #233149;
    color: #ffffff;
    font-size: 2rem;
    height: 9rem;
    box-shadow: inset -.1rem 0 0 #151c2b;
}

.cmp-compatibility table.cmp-table thead th:last-child {
    box-shadow: none;
    border-top-right-radius: 1.6rem;
}

.cmp-compatibility table.cmp-table thead th:first-child {
    border-top-left-radius: 1.6rem;
    text-align: left;
}

.cmp-security table.cmp-table thead th {
    background: #091121;
    color: #ffffff;
    box-shadow: inset -.1rem 0 0 #364560;
}

.cmp-security table.cmp-table thead th:last-child {
    box-shadow: none;
}

.cmp-security table.cmp-table tbody th,
.cmp-security table.cmp-table tbody td {
    color: #ffffff;
    box-shadow: inset -.1rem 0 0 #364560;
}

.cmp-security table.cmp-table tbody tr:nth-child(odd)>th,
.cmp-security table.cmp-table tbody tr:nth-child(odd)>td {
    background: #233149;
}

.cmp-security table.cmp-table tbody tr:nth-child(even)>th,
.cmp-security table.cmp-table tbody tr:nth-child(even)>td {
    background: #15223A;
}

.cmp-security table.cmp-table tbody th:last-child,
.cmp-security table.cmp-table tbody td:last-child {
    box-shadow: none;
}

/* col1 内边距（节点：glance 360-296=32×2；features/perf/pricing 280-244=18×2） */
.cmp-glance table.cmp-table tbody th:first-child,
.cmp-glance table.cmp-table thead th:first-child {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
}

.cmp-features table.cmp-table tbody th:first-child,
.cmp-features table.cmp-table thead th:first-child,
.cmp-performance table.cmp-table tbody th:first-child,
.cmp-performance table.cmp-table thead th:first-child,
.cmp-pricing table.cmp-table tbody th:first-child,
.cmp-pricing table.cmp-table thead th:first-child {
    padding-left: 1.8rem;
    padding-right: 1.8rem;
}

/* 列宽（colgroup 主导，这里兜底） */
.cmp-glance th:first-child,
.cmp-glance td:first-child {
    width: 36rem;
}

.cmp-features th:first-child,
.cmp-features td:first-child {
    width: 48rem;
}

.cmp-compatibility th:first-child,
.cmp-compatibility td:first-child,
.cmp-performance th:first-child,
.cmp-performance td:first-child,
.cmp-security th:first-child,
.cmp-security td:first-child,
.cmp-pricing th:first-child,
.cmp-pricing td:first-child {
    width: 28rem;
}

.cmp-glance table.cmp-table tbody tr:nth-child(odd)>th,
.cmp-glance table.cmp-table tbody tr:nth-child(odd)>td {
    background: #ffffff;
}

.cmp-glance table.cmp-table tbody tr:nth-child(even)>th,
.cmp-glance table.cmp-table tbody tr:nth-child(even)>td {
    background: #F9FAFF;
}

/* 勾/叉图标（族契约：16 勾 #0256FF 圆 + 白勾；18 叉 #BCBCBC 圆 + 白叉；CSS data URI 自足） */
.cmp .status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: middle;
    background: none;
    border-radius: 0;
}

.cmp .status::before {
    content: "";
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cmp .status.status-yes::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%230256FF'/%3E%3Cpath d='M6 9.9L8.9 12.2L12.4 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.cmp .status.status-no {
    background: none;
}

.cmp .status.status-no::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23BCBCBC'/%3E%3Cpath d='M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Insight 框（两种形态：白系版块灰盒 / 深系版块白盒；glance 在表卡内为白尾盒） */
.cmp .insight {
    margin: 2rem auto 0;
    max-width: 128rem;
    padding: 2.4rem;
    border-radius: 1.6rem;
    text-align: left;
}

.cmp .insight h4 {
    margin: 0 0 .8rem;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.8rem;
}

.cmp .insight p {
    margin: 0;
    color: #333333;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

.cmp-features .insight,
.cmp-performance .insight,
.cmp-pricing .insight {
    background: #F8F9FA;
}

.cmp-compatibility .insight,
.cmp-security .insight {
    background: #ffffff;
    box-shadow: 0 .5rem 2rem rgba(39, 51, 86, .1);
}

/* glance：Insight 为表卡内尾盒（Summary 帧 1280×132 r[0,0,16,16] 白底） */
.cmp-glance .table-card .insight {
    margin: 0;
    max-width: none;
    border-radius: 0 0 1.6rem 1.6rem;
    box-shadow: none;
    background: #ffffff;
}

/* ===== 08–11 场景星级表（creative 1729:24721 / gaming 1729:24859 /
   office 1729:24996 / itsupport 1729:25136） =====
   节点实测：#F8F9FA 底；表头 80（col1 #E5EDFF 18/700 / col2 #DEE9FF / col3 #E5EDFF，白竖分隔）；
   行 100 交替；分类格 18/400，hover 态 #2258F6；分值格 = 数字 14/700 + 5 星 18px gap4；
   星：实心 GRAD #2258F6→#4C7AFF / 空心 #A4AAB9；tooltip 272 宽 r8 白底 shadow(10,.2) 内 240 文本 14/400 lh20；
   Insight = 白盒 r16 无阴影。列宽 320/480/480。 */
.sc {
    padding: 12rem 0;
    background: #F8F9FA;
    text-align: center;

    /* position: sticky;
    top: -70px;
    box-shadow: none;
    will-change: transform;
    transform-origin: center top;
    transform-style: preserve-3d; */
}

/* 叠放动效口径 = /best/anyviewer-vs-ad.html 的 .use-cases/.use-item：逐块 sticky 叠放，
   JS 按「下一块自 0.8 视口高顶上来」的进度写 transform/opacity/visibility。
   末块留在常规流内 —— 否则会吸顶并盖住其后的 .rv/.faq/.wh 等静态版块（后者 z 序更低）。 */
.sc:last-child {
    position: relative;
    top: auto;
}

/* 与源页同口径：≤1279（桌面设计画布 1280 以下）关闭叠放动效，回落常规滚动
   （visibility 一并兜底：JS 重置为 rAF 节流，避免过渡窗口内留下空白块） */
@media (max-width: 1279px) {
    .sc {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    .sc {
        position: static;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.sc .section-head {
    margin: 0 auto 8rem;
}

.sc .section-head h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
}

.sc .section-head p {
    max-width: 128rem;
    margin: 1.6rem auto 0;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
}

.sc .table-card {
    position: relative;
    /* overflow: hidden; */
    margin: 0 auto;
    max-width: 128rem;
    border-radius: 1.4rem;
    background: #ffffff;
    box-shadow: 0 .5rem 2rem rgba(39, 51, 86, .1);
    text-align: left;
}

.sc table.sc-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.sc table.sc-table th,
.sc table.sc-table td {
    box-sizing: border-box;
    padding: 1.4rem 2.4rem;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
    text-align: center;
    vertical-align: middle;
    box-shadow: inset -.1rem 0 0 #f1f1f1;
}

.sc table.sc-table th:last-child,
.sc table.sc-table td:last-child {
    box-shadow: none;
}

/* 表头：#E5EDFF / #DEE9FF 交替品牌格（节点 Cell fill），白色竖分隔 */
.sc table.sc-table thead th {
    height: 8rem;
    padding: 0 2.4rem;
    background: #E5EDFF;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.8rem;
    box-shadow: inset -.1rem 0 0 #ffffff;
}

.sc table.sc-table thead th.sc-brand-parsec {
    background: #DEE9FF;
}

.sc table.sc-table thead th:first-child {
    text-align: left;
}

.sc table.sc-table thead th:last-child {
    box-shadow: none;
}

.sc table.sc-table tbody tr {
    height: 10rem;
}

.sc table.sc-table tbody tr:nth-child(odd)>th,
.sc table.sc-table tbody tr:nth-child(odd)>td {
    background: #F9FAFF;
}

.sc table.sc-table tbody tr:nth-child(even)>th,
.sc table.sc-table tbody tr:nth-child(even)>td {
    background: #ffffff;
}

.sc table.sc-table tbody th {
    padding: 0 3.2rem;
    text-align: left;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 2.8rem;
}

@media (max-width: 768px) {
    .sc .table-scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }
    .sc table.sc-table{
        width: 700px;
    }
}

/* 分类格（th 内）：hover 变蓝 + tooltip（txt「Hover内容」逐字） */
.sc .sc-cat {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: default;
}

.sc .sc-cat:focus-visible {
    outline: .2rem solid #2258F6;
    outline-offset: .2rem;
}

.sc .sc-cat .sc-tip {
    display: none;
    position: absolute;
    z-index: 5;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 27.2rem;
    /* margin-left: 1.2rem; */
    padding: 1.6rem;
    border-radius: .8rem;
    background: #ffffff;
    box-shadow: 0 1rem 2rem rgba(39, 51, 86, .2);
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
    text-align: left;
    cursor: default;
}

.sc .sc-cat:hover,
.sc .sc-cat:focus-visible {
    color: #2258F6;
}

.sc .sc-cat:hover .sc-tip,
.sc .sc-cat:focus-visible .sc-tip {
    display: block;
}

/* 星级格：数字 14/700 + 5 星 18px gap4（节点 Frame 306：20 + 12 + 106） */
.sc .sc-score {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
}

.sc .sc-num {
    color: #000000;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2rem;
}

.sc .sc-stars {
    display: inline-flex;
    gap: .4rem;
}

.sc .sc-stars i {
    width: 1.8rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232258F6'/%3E%3Cstop offset='1' stop-color='%234C7AFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M9 .6l2.42 5.53 6 .55-4.53 4 1.33 5.9L9 13.44l-5.22 3.14 1.33-5.9-4.53-4 6-.55z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sc .sc-stars i.is-empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23A4AAB9' d='M9 .6l2.42 5.53 6 .55-4.53 4 1.33 5.9L9 13.44l-5.22 3.14 1.33-5.9-4.53-4 6-.55z'/%3E%3C/svg%3E");
}

/* 星级 Insight：白盒 r16 无阴影 */
.sc .insight {
    margin: 2rem auto 0;
    max-width: 128rem;
    padding: 2.4rem;
    border-radius: 1.6rem;
    background: #ffffff;
    text-align: left;
}

.sc .insight h4 {
    margin: 0 0 .8rem;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.8rem;
}

.sc .insight p {
    margin: 0;
    color: #333333;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

/* ===== 12 reviews（figma:1729:25276，#FFFFFF 底） =====
   节点实测：双面板 628×768 #F8F9FA r16 gap24；面板 pad 16/24；
   logo（parsec 165×40 / splashtop 172×40）居中；
   评分区：分数 Trustpilot Sans ~72/700 + 标签 24/400（Poor/Great）+ Trustpilot 方块条 210×40 + 分布条
   （轨 196×12 #D2D2D2 r6；Parsec 53/62/2/12/85px；Splashtop 150/16/10/6/20px；
   色 #00B67A/#73CF11/#FFCE00/#FF8622/#FF3722）；标签 18/400 lh24；
   卡片 294×320 白 r16 边 1px #E6E2DF；头像 40 圆（#FFE1BA/#FFDDE8）DIN 16/500 缩写；
   名 16/400；日期 14/400 #666666；星条 84×16；正文 15/400 lh22 定高滚动；动作 14/400 #666666 图标 16；
   轮播控制 40 圆：prev 白底描边 #2258F6 蓝箭头 / next #2258F6 白箭头，位于面板下方居中。 */
.rv {
    padding: 12rem 0;
    background: #ffffff;
    text-align: center;
}

.rv .section-head {
    margin: 0 auto 8rem;
}

.rv .section-head h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
}

.rv .section-head p {
    margin: 1.6rem auto 0;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
}

.rv .rv-panels {
    display: flex;
    gap: 2.4rem;
    max-width: 128rem;
    margin: 0 auto;
    text-align: left;
}

.rv .rv-panel {
    flex: 1;
    min-width: 0;
    padding: 2.4rem 1.6rem 3.2rem;
    border-radius: 1.6rem;
    background: #F8F9FA;
}

.rv .rv-brand {
    display: block;
    margin: 0 auto 3.2rem;
}

/* 评分摘要（左分数右分布条） */
.rv .rv-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    margin-bottom: 2.4rem;
}

.rv .rv-score-main {
    flex: none;
}

.rv .rv-score-num {
    color: #000000;
    font-family: "Trustpilot Sans", "PT Sans", sans-serif;
    font-size: 7.2rem;
    font-weight: 700;
    line-height: 7rem;
}

.rv .rv-score-label {
    margin: .4rem 0 0;
    color: #000000;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 2.8rem;
}

.rv .rv-score-stars {
    display: block;
    margin-top: .8rem;
}

.rv .rv-bars {
    flex: 1;
    min-width: 0;
}

.rv .rv-bar-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.rv .rv-bar-row+.rv-bar-row {
    margin-top: 1rem;
}

.rv .rv-bar-row>span {
    flex: none;
    width: 5.6rem;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.4rem;
}

.rv .rv-bar-row>i {
    position: relative;
    flex: 1;
    max-width: 19.6rem;
    height: 1.2rem;
    border-radius: .6rem;
    background: #D2D2D2;
    overflow: hidden;
}

.rv .rv-bar-row>i>b {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: .6rem;
}

/* 卡片轮播（slick 容器；卡片 294×320 r16 边 #E6E2DF） */
.rv .rv-slick .review-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 32rem;
    margin: 0 .6rem;
    padding: 2rem;
    border: 1px solid #E6E2DF;
    border-radius: 1.6rem;
    background: #ffffff;
}

.rv .rc-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.rv .rc-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 2.4rem;
    color: #000000;
    font-family: "DIN", "PT Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8rem;
}

.rv .rc-avatar.is-orange {
    background: #FFE1BA;
}

.rv .rc-avatar.is-pink {
    background: #FFDDE8;
}

.rv .rc-avatar.is-green {
    background: #DFF5E3;
}

.rv .rc-meta {
    min-width: 0;
}

.rv .rc-meta strong {
    display: block;
    color: #000000;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2rem;
}

.rv .rc-meta time {
    display: block;
    color: #666666;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
}

.rv .rc-stars {
    display: block;
    margin: .8rem 0 0;
}

.rv .rc-copy {
    flex: none;
    height: 16.4rem;
    margin: 1.2rem 0 0;
    overflow-y: auto;
    color: #000000;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.2rem;
    scrollbar-width: thin;
    scrollbar-color: #ffffff #EBEDF3;
}

.rv .rc-copy::-webkit-scrollbar {
    width: 1rem;
}

.rv .rc-copy::-webkit-scrollbar-track {
    border-radius: 5rem;
    background: #EBEDF3;
}

.rv .rc-copy::-webkit-scrollbar-thumb {
    border-radius: 5rem;
    background: #ffffff;
    border: .2rem solid #EBEDF3;
}

.rv .rc-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: auto;
    padding-top: 1.2rem;
    color: #666666;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
}

.rv .rc-actions .rc-action {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #666666;
}

.rv .rc-actions img {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
}

.rv .rc-flag {
    margin-left: auto;
}

/* slick 排版：两卡/行（面板内 596 → 卡 294） */
.rv .rv-slick .slick-slide {
    margin: 0 .6rem;
}

.rv .rv-slick .slick-list {
    margin: 0 -.6rem;
}

/* 轮播控制（面板内底部居中：prev 白底蓝边蓝箭头 / next 蓝底白箭头，40 圆；
   设计 1729-25276 实测：卡→按钮 28、按钮→面板底 40。
   按钮为绝对定位，须显式 top:0——否则浏览器按 static 位置放会向下溢出 2rem） */
.rv .rv-controls {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    gap: 1.2rem;
    margin-top: 2.8rem;
}

.rv .rv-controls .slick-prev,
.rv .rv-controls .slick-next {
    top: 0;
    bottom: auto;
    left: auto;
    right: auto;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: .1rem solid #2258F6;
    border-radius: 2rem;
    background: #ffffff;
    transform: none;
}

.rv .rv-controls .slick-prev {
    left: calc(50% - 4.6rem);
}

.rv .rv-controls .slick-next {
    left: calc(50% + .6rem);
    /* background: #2258F6; */
}

.rv .rv-controls .slick-prev::before,
.rv .rv-controls .slick-next::before {
    display: block;
    width: 1rem;
    height: 1.6rem;
    margin: 0 auto;
    content: "";
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M8.5 1.5 2 8l6.5 6.5' stroke='%232258F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rv .rv-controls .slick-next::before {
    transform: rotate(180deg);
    /* filter: brightness(0) invert(1); */
}

.rv .rv-controls .slick-arrow:hover {
    background: #2258F6;
}

.rv .rv-controls .slick-arrow:hover::before {
    filter: brightness(0) invert(1);
}

.rv .rv-slick .slick-slide img {
    display: inline-block;
}

/* ===== 13 faq（figma:1729:25494，#F8F9FA 底） =====
   族契约原样：.faq-mn[data-parent=accordion] > .box > button.title.faq-q + .tt-ic + p.faq-answer；
   白卡 1280 r24 shadow；项 pad 40；分隔 #E6E8E9；问 20/700（open #2258F6）；答 16/400 lh24 #333333。 */
.faq {
    padding: 12rem 0;
    background: #F8F9FA;
}

.faq .section-head {
    margin: 0;
}

.faq .section-head h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
    text-align: center;
}

.faq .faq-mn {
    margin: 8rem auto 0;
    padding: 0;
    border-radius: 2.4rem;
    background: #FFFFFF;
    box-shadow: 0 .5rem 2rem rgba(39, 51, 86, .10);
}

.faq .box {
    padding: 4rem;
}

.faq .box:not(:last-child) {
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 #E6E8E9;
}

.faq .box .title,
.faq .box .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.faq .box .faq-q-text {
    display: block;
    flex: 1;
    min-width: 0;
    padding-right: 2.4rem;
    color: #000000;
    font-size: 2rem;
    font-weight: 700;
    line-height: 3rem;
}

.faq .box.active .faq-q-text {
    color: #2258F6;
}

.faq .box .tt-ic {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
}

.faq .box .tt-ic::before,
.faq .box .tt-ic::after {
    content: "";
    position: absolute;
    left: .2rem;
    top: 1.1rem;
    width: 2rem;
    height: .2rem;
    border-radius: .2rem;
    background: #2258F6;
    transition: transform .15s, opacity .15s;
}

.faq .box .tt-ic::after {
    transform: rotate(90deg);
}

.faq .box.active .tt-ic::after {
    opacity: 0;
    transform: rotate(-45deg);
}

.faq .box .faq-answer {
    max-width: none;
    margin: 2.4rem 0 0;
    padding: 0;
    color: #333333;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

/* ===== 14 how-to-choose + best alternative（figma:1729:25571） =====
   节点实测：底 #FFF + 浅蓝渐变层（Which-bg 1920×810 导 WebP，810 高后纯白）；
   双卡 620×228 白 r24 shadow gap40；卡内：logo 瓷片 180×180 r16（导图）+ 右侧
   标题 20/700 lh24 + 列表 16/400 lh24（disc）；AnyViewer 大卡 1280×596 r40
   渐变 [#EFF6FF@.1→#F5F7FF@.52→#E3EFFF] 白描边 4px shadow(30,.1)；
   左文右图（745×719 底对齐裁切）；Try for Free 280×64 r32。 */
.wh {
    padding: 12rem 0;
    background: #ffffff url("/resource/images/best-psc-vs-sp-iw/choose-bg.webp") no-repeat top center / 100% auto;
    text-align: center;
}

.wh .section-head {
    margin: 0 auto 8rem;
}

.wh .section-head h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
}

.wh .section-head p {
    margin: 1.6rem auto 0;
    color: #000000;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 2.8rem;
}

.wh .wh-cards {
    display: flex;
    gap: 4rem;
    max-width: 128rem;
    margin: 0 auto;
    text-align: left;
}

.wh .wh-card {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 2.4rem;
    padding: 2.4rem;
    border-radius: 2.4rem;
    background: #ffffff;
    box-shadow: 0 .5rem 2rem rgba(39, 51, 86, .1);
}

.wh .wh-tile {
    flex: none;
    width: 18rem;
    height: 18rem;
    border-radius: 1.6rem;
}

.wh .wh-info h3 {
    margin: .8rem 0 1.6rem;
    color: #000000;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.4rem;
}

.wh .wh-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh .wh-info li {
    position: relative;
    padding-left: 1.6rem;
    color: #000000;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

.wh .wh-info li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #000000;
}

.wh .wh-info li+li {
    margin-top: .8rem;
}

/* AnyViewer 大卡（Best Alternative） */
.wh .wh-alt {
    position: relative;
    overflow: hidden;
    max-width: 128rem;
    margin: 4rem auto 0;
    height: 59.6rem;
    padding: 4.8rem;
    border: .4rem solid #ffffff;
    border-radius: 4rem;
    background: linear-gradient(180deg, rgba(239, 246, 255, .1) 10%, #F5F7FF 52%, #E3EFFF 100%);
    box-shadow: 0 3rem 3rem rgba(39, 51, 86, .1);
    text-align: left;
}

.wh .wh-alt-inner {
    position: relative;
    z-index: 1;
    max-width: 64rem;
}

.wh .wh-alt h2 {
    margin: 0;
    color: #000000;
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.6rem;
}

.wh .wh-alt .wh-desc {
    margin: 2.4rem 0 0;
    color: #000000;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

.wh .wh-alt h4 {
    margin: 2.4rem 0 1.2rem;
    color: #000000;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
}

.wh .wh-alt ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wh .wh-alt li {
    position: relative;
    padding-left: 1.4rem;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
}

.wh .wh-alt li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #000000;
}

.wh .wh-alt li+li {
    margin-top: .6rem;
}

.wh .btn-download {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 6.4rem;
    margin-top: 3.2rem;
    padding: 0 4rem;
    border-radius: 3.2rem;
    background: #2258F6;
    box-shadow: 0 1rem 2rem rgba(34, 88, 246, .4);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.4rem;
    text-align: center;
    transition: background-color .15s ease;
}

.wh .btn-download:hover,
.wh .btn-download:focus {
    background: #1748db;
    color: #fff;
}

.wh .btn-download:active {
    background: #1E46D6;
}

.wh .wh-alt-img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    /* width: 74.5rem; */
    max-width: 60%;
    height: auto;
}

/* ===== 15 conclusion 深底结语（figma:1729:25664；requirement「Footer」文案） =====
   节点实测：bg 照片图 1920×610 导 WebP；H2 50/700 lh64 白居中；导语 20/400 lh32；
   要点 3 行 16/400 lh32 白（点 4px 圆 + gap8）；CTA 346×64 同 hero。 */
.ccl {
    padding: 12rem 0;
    background: #091121 url("/resource/images/best-psc-vs-sp-iw/prefooter-bg.webp") no-repeat center / cover;
    color: #ffffff;
    text-align: center;
}

.ccl .ccl-inner {
    max-width: 128rem;
    margin: 0 auto;
}

.ccl h2 {
    margin: 0;
    color: #ffffff;
    font-size: 5rem;
    font-weight: 700;
    line-height: 6.4rem;
}

.ccl .ccl-desc {
    max-width: 100rem;
    margin: 2.4rem auto 0;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.2rem;
}

.ccl .ccl-list {
    width: fit-content;
    margin: 4rem auto 0;
    text-align: left;
}

.ccl .ccl-list li {
    position: relative;
    padding-left: 1.6rem;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 3.2rem;
}

.ccl .ccl-list li+li {
    margin-top: .8rem;
}

.ccl .ccl-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.4rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: #ffffff;
}

.ccl .ccl-list a {
    color: #ffffff;
    text-decoration: underline;
}

.ccl .btn-download {
    display: flex;
    width: fit-content;
    margin: 4.8rem auto 0;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 6.4rem;
    padding: 0 5.6rem;
    border-radius: 3.2rem;
    background: #2258F6;
    box-shadow: 0 1rem 2rem rgba(34, 88, 246, .4);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.4rem;
    transition: background-color .15s ease;
}

.ccl .btn-download:hover,
.ccl .btn-download:focus {
    background: #1748db;
    color: #fff;
}

.ccl .btn-download:active {
    background: #1E46D6;
}

/* ===== 16 side-nav（figma:1729:25680）＝ 族契约原样 =====
   卡 240 宽 r16 白底描边 #E6E8E9 shadow；分组 16/700 + 条目 14/400 + 按钮 194×48 r24 #2258F6。 */
.side-nav[data-side-nav] {
    position: fixed;
    left: 2.2rem;
    top: 10rem;
    z-index: 20;
    display: block;
    width: 24rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-2rem);
    transition: opacity .25s, visibility .25s, transform .25s
}

.side-nav[data-side-nav].show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.side-nav .side-nav-inner {
    padding: 3.2rem 2.2rem 1.8rem;
    border: 1px solid #e6e8e9;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 5px 20px rgba(39, 51, 86, .1)
}

.side-nav .side-nav-inner strong {
    display: block;
    margin: 0 0 .8rem;
    color: #000;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.4rem;
    white-space: nowrap
}

.side-nav .side-nav-inner strong:not(:first-child) {
    margin-top: 2rem
}

.side-nav .side-nav-inner a {
    display: block;
    color: #000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem
}

.side-nav .side-nav-inner a+a {
    margin-top: .6rem
}

.side-nav .side-nav-inner a.active {
    color: #2258f6;
    font-weight: 700
}

.side-nav .side-nav-inner a.side-nav-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 4.8rem;
    margin-top: 2.4rem;
    border: 0;
    border-radius: 2.4rem;
    background: #2258f6;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2rem;
    text-align: center
}

.side-nav .side-nav-inner a.side-nav-download .ic-down {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.9v8.3'/%3E%3Cpath d='M4.7 7.1 8 10.4l3.3-3.3'/%3E%3Cpath d='M2.4 13.7h11.2'/%3E%3C/svg%3E") no-repeat center / contain
}

@media (max-width:991px) {
    .side-nav[data-side-nav] {
        display: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .side-nav[data-side-nav] {
        transition: none
    }
}

/* ===== 17 sticky-download（requirement 1.2；设计帧未含节点）＝ 族外壳原样，文案换本页 txt ===== */
.sticky-download[data-sticky-download] {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 90;
    width: 100%;
    padding: 1rem 0;
    background-color: #091121;
    background-image: linear-gradient(90deg, #251f95 0%, #1d1f8e 25%, #1f3a83 50%, #081d56 75%, #112f99 100%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 130%);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease
}

.sticky-download[data-sticky-download].show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.sticky-download[data-sticky-download].show.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 100%)
}

.sticky-download[data-sticky-download] .sticky-download-content {
    display: flex;
    align-items: center;
    gap: 2.4rem
}

.sticky-download[data-sticky-download] .sticky-download-text {
    flex: 1;
    min-width: 0
}

.sticky-download[data-sticky-download] .sticky-download-text .text-box {
    position: relative;
    height: 2.8rem
}

.sticky-download[data-sticky-download] .sticky-download-text .text-box strong {
    display: block;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.8rem
}

.sticky-download[data-sticky-download] .sticky-download-text span {
    display: block;
    margin-top: .4rem;
    color: #c9d3e7;
    font-size: 1.4rem;
    line-height: 1.45
}

.sticky-download[data-sticky-download] .sticky-download-btns {
    flex-shrink: 0
}

.sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue {
    width: 24rem;
    height: 5.2rem;
    border-radius: 2.8rem;
    background: #0256ff;
    background-image: none;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 5.2rem;
    box-shadow: 0 12px 22px rgba(2, 86, 255, .32)
}

.sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue:hover {
    background: #1748db;
    color: #fff
}

.sticky-download[data-sticky-download] .sticky-download-close {
    position: absolute;
    right: 1.8rem;
    top: 1.4rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer
}

.sticky-download[data-sticky-download] .sticky-download-close::before,
.sticky-download[data-sticky-download] .sticky-download-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2rem;
    height: .2rem;
    border-radius: .1rem;
    background: #fff
}

.sticky-download[data-sticky-download] .sticky-download-close::before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.sticky-download[data-sticky-download] .sticky-download-close::after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

@media (max-width:991px) {
    .sticky-download[data-sticky-download] {
        padding: 1.2rem 0
    }

    .sticky-download[data-sticky-download] .sticky-download-content {
        display: block;
        padding-right: 5.6rem
    }

    .sticky-download[data-sticky-download] .sticky-download-text .text-box {
        height: auto
    }

    .sticky-download[data-sticky-download] .sticky-download-text span {
        margin-top: .6rem;
        font-size: 1.3rem;
        line-height: 1.8rem
    }

    .sticky-download[data-sticky-download] .sticky-download-btns {
        margin-top: 1rem
    }

    .sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue {
        width: 20rem;
        height: 4.4rem;
        font-size: 1.5rem;
        line-height: 4.4rem
    }
}

@media (max-width:767px) {
    .sticky-download[data-sticky-download] .sticky-download-content {
        padding-right: 5.2rem
    }

    .sticky-download[data-sticky-download] .sticky-download-text span {
        font-size: 1.2rem;
        line-height: 1.7rem
    }

    .sticky-download[data-sticky-download] .sticky-download-close {
        right: 6%;
        top: 1.2rem
    }

    .sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue {
        width: 18rem;
        height: 4rem;
        font-size: 1.4rem;
        line-height: 4rem
    }
}

@media (prefers-reduced-motion:reduce) {
    .sticky-download[data-sticky-download] {
        transition: none
    }
}

/* ===== 18 交互基线 ===== */
main a:focus-visible,
main button:focus-visible {
    outline: 2px solid #2258f6;
    outline-offset: 2px
}

/* 深底版块内链接显式覆盖站点全局 a{color:#2258f6}（AGENTS av 族口径） */
.banner a,
.ccl a {
    color: #fff;
}

/* ===== 19 响应式（desktop-first：≤1199 / ≤991 / ≤767） ===== */
@media (max-width: 1199px) {

    .cmp,
    .sc,
    .rv,
    .wh,
    .faq,
    .ccl {
        padding: 8rem 0;
    }

    .cmp .table-card,
    .cmp .insight,
    .sc .table-card,
    .sc .insight,
    .rv .rv-panels,
    .wh .wh-cards,
    .wh .wh-alt,
    .faq .faq-mn {
        max-width: none;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    /* 表格首列固定（sticky）：卡片宽 < 表格 min-width 96rem 时横向滚动同步保持首列可见。
       未滚动时 sticky 与常规流位置一致，故不影响静态版式与桌面设计稿。 */
    .cmp table.cmp-table th:first-child,
    .cmp table.cmp-table td:first-child,
    .sc table.sc-table th:first-child,
    .sc table.sc-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }

    /* performance/pricing 表头首格原为透明（透出白底段），固定后需显式底色，避免下方内容透出 */
    .cmp-performance table.cmp-table thead th:first-child,
    .cmp-pricing table.cmp-table thead th:first-child {
        background: #ffffff;
    }
}

@media (max-width: 991px) {

    .cmp .section-head h2,
    .sc .section-head h2,
    .rv .section-head h2,
    .wh .section-head h2,
    .faq .section-head h2 {
        font-size: 3.2rem;
        line-height: 4rem;
    }

    .wh .wh-alt h2 {
        font-size: 3.2rem;
        line-height: 4rem;
    }

    .ccl h2 {
        font-size: 3.6rem;
        line-height: 4.8rem;
    }

    .rv .rv-panels {
        flex-direction: column;
    }

    .wh .wh-cards {
        flex-direction: column;
    }

    .rv .rv-score {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 移动端表格：首列右缘渐隐遮罩，下方内容横向滚过时不至硬切
       （对齐族基准页 qa-alternative-iw 的 table-x 首列口径） */
    .cmp table.cmp-table th:first-child::before,
    .cmp table.cmp-table td:first-child::before,
    .sc table.sc-table th:first-child::before,
    .sc table.sc-table td:first-child::before {
        content: "";
        position: absolute;
        top: 0;
        right: -1.2rem;
        width: 1.2rem;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(270deg, rgba(9, 17, 33, 0), rgba(9, 17, 33, .14));
    }
}

@media (max-width: 767px) {

    .cmp,
    .sc,
    .rv,
    .wh,
    .faq,
    .ccl {
        padding: 4.8rem 0;
    }

    .cmp .section-head,
    .sc .section-head,
    .rv .section-head,
    .wh .section-head {
        margin-bottom: 4.8rem;
    }

    .cmp .section-head h2,
    .sc .section-head h2,
    .rv .section-head h2,
    .wh .section-head h2,
    .faq .section-head h2 {
        font-size: 2.6rem;
        line-height: 3.4rem;
    }

    .cmp .section-head p,
    .sc .section-head p,
    .rv .section-head p,
    .wh .section-head p {
        font-size: 1.6rem;
        line-height: 2.6rem;
    }

    .wh .wh-card {
        flex-direction: column;
    }

    .wh .wh-alt {
        padding: 2.4rem;
        min-height: 0;
    }

    .wh .wh-alt h2 {
        font-size: 2.6rem;
        line-height: 3.4rem;
    }

    .wh .wh-alt-img {
        position: static;
        display: block;
        max-width: 100%;
        margin-top: 2.4rem;
    }

    .ccl h2 {
        font-size: 2.8rem;
        line-height: 3.8rem;
    }

    .ccl .ccl-desc {
        font-size: 1.6rem;
        line-height: 2.6rem;
    }

    .rv .rv-score-num {
        font-size: 5.6rem;
        line-height: 5.6rem;
    }

    /* 移动端 features 表首列锁定实像素 260px（设计 37.5% 在手机上过宽，挤占品牌列）。
       colgroup 宽为行内 style，故需 !important 覆盖；其余两列按 auto 均分剩余宽度。 */
    .cmp-features table.cmp-table col:first-child {
        width: 260px !important;
    }

    .cmp-features table.cmp-table col:nth-child(2),
    .cmp-features table.cmp-table col:nth-child(3) {
        width: auto !important;
    }
}

/* ===== 99 page-fixes（站点 main.css ≤767 html 55.5% 压 rem → 实像素锁定下限） ===== */
@media (max-width: 991px) {

    .banner .btn-download,
    .wh .btn-download,
    .ccl .btn-download {
        min-height: 44px;
    }

    .faq .box .title {
        min-height: 44px;
    }

    .sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue {
        min-height: 44px;
    }

    .sticky-download[data-sticky-download] .sticky-download-close {
        min-width: 44px;
        min-height: 44px;
    }

    .side-nav .side-nav-inner a.side-nav-download {
        min-height: 44px;
    }

    .sticky-download[data-sticky-download] .sticky-download-text span {
        font-size: 14px;
    }

    .wh .btn-download,
    .ccl .btn-download {
        min-height: 44px;
    }
}

@media (max-width: 767px) {

    .banner .btn-download,
    .wh .btn-download,
    .ccl .btn-download {
        min-height: 48px;
        font-size: 16px;
    }

    .faq .box .title {
        min-height: 48px;
        font-size: 16px;
    }

    .sticky-download[data-sticky-download] .sticky-download-btns .btn.btn-blue {
        min-height: 44px;
        font-size: 16px;
    }

    .sticky-download[data-sticky-download] .sticky-download-close {
        min-width: 44px;
        min-height: 44px;
    }

    .banner .banner-content .banner-list li {
        font-size: 16px;
        line-height: 24px;
    }

    .cmp table.cmp-table tbody th {
        font-size: 14px;
        line-height: 22px;
    }

    .cmp table.cmp-table th,
    .cmp table.cmp-table td {
        font-size: 14px;
    }

    .sc table.sc-table tbody th {
        font-size: 14px;
        line-height: 22px;
    }

    .sc table.sc-table th,
    .sc table.sc-table td {
        font-size: 14px;
    }

    .sc .sc-cat .sc-tip {
        font-size: 14px;
    }

    /* 首列固定后，原右侧 27.2rem tooltip 在窄屏会被滚动容器裁切且无法滚达 →
       改为贴合首列宽度的浮层（末行向上展开，避免超出表卡下缘） */
    .sc .sc-cat {
        position: static;
    }

    .sc .sc-cat .sc-tip {
        left: 0;
        right: 0;
        width: auto;
    }

    .sc table.sc-table tbody tr:last-child .sc-cat .sc-tip {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .faq .box .faq-q-text {
        font-size: 16px;
        line-height: 24px;
    }

    .faq .box .faq-answer,
    .faq .box .faq-answer p {
        font-size: 14px;
        line-height: 22px;
    }

    .rv .rc-meta strong,
    .rv .rc-actions {
        font-size: 12px;
    }

    .rv .rc-copy {
        font-size: 14px;
    }

    .rv .rv-bar-row>span {
        font-size: 14px;
    }

    .ccl .ccl-list li {
        font-size: 14px;
    }

    .wh .wh-info li,
    .wh .wh-alt li {
        font-size: 14px;
    }

    .sticky-download[data-sticky-download] .sticky-download-text strong {
        font-size: 16px;
    }
}

/* 20261009 反馈 135648：reviews 轮播按钮下间距按设计（按钮底距面板底 40px） */
.rv .rv-panel {
    padding-bottom: 4rem;
}

@media (max-width: 767px) {
    .download-button {
        margin-top: 20px;
    }
}