/* =============================================================================
 * best-sp-vs-rp-iw.css — Splashtop vs RemotePC 对比页（D2C-20261102-001）
 * 样式基准：同族已交付页 /best/psc-vs-sp-iw.html（best-psc-vs-sp-iw.css 整文件派生，类名契约不变）；
 * 文案正本：requirements/design2code/figma/20261102 req.txt（逐字）；Reviews 复制源 =
 *   /best/rp-alternatives-iw.html（req 开发说明指定）。
 *
 * ── 2026-11-03 反馈修正轮（同事「请按照设计图修改」）────────────────────────────
 * 形态基准改为 Figma frame 1901:16570 AV-EN-sp-vs-rp-iw（逐版块节点实测，id 记 HTML 注释），
 * 本轮形态级改动（其余沿用 psc 派生基线）：
 *   1) 版块底色节奏按稿重排：glance 白 / plans 灰#F8F9FA+Insight 白盒 / performance 灰+白盒 /
 *      security 版块白底（深表不变）/ licensing 白+灰盒。
 *   2) .cmp-features：表体居中（稿），勾/叉图标与括号注记上下两行（新增 .cmp-note 14px），
 *      行交替回归标准奇 #F9FAFF，表头白底彩标（去渐变图）。
 *   3) .reviews 整段重写为双面板并排（figma:1907:31956）：.reviews-panels grid + 品牌 logo 行 +
 *      72px 评分区 + 2 卡/屏 slick（卡高 320）+ 底部居中双圆箭头；tab 形态废弃。
 *   4) .wh 拆出独立版块 .wa（best-alternative，#F8F9FA 底 + 白卡 r40 图左文右）；
 *      .wh 卡改浅蓝渐变 #F3F6FF→#E6ECFF + 右上折角 accent（#7A9EE2→#B0CDFF）+
 *      头部品牌图标行（新增 .wh-card-head/.wh-card-ic）。
 *   5) .banner 去平台图标行与 hero-bg.webp（psc 帧 Parsec 残留），水印改品牌矢量重组
 *      （logo-splashtop-ic.svg 本轮派生 + logo-remotepc-white.svg）；要点勾图标 16px #0256FF。
 *   6) 深底表头（platforms/security）logo 改「白字+彩标」变体 logo-splashtop-dark.svg；
 *      RemotePC 字标无矢量源 → 图标呈现（HTML 注释/交付报告在案）。
 *
 * 形态总览（18 版块）：
 *   banner(深) → glance(白系三列表+卡内 Insight) → plans(4 列变体，灰底) → features(白系居中勾叉表)
 *   → platforms(深底白表) → licensing(白系) / performance(灰底) → security(白底深表)
 *   → scenario×5（星级表+hover tooltip）→ reviews（双面板并排 slick）→ faq(手风琴)
 *   → choose(渐变折角双卡) → best-alternative(.wa 灰底白卡) → conclusion(深底结语)
 *   → side-nav(左浮窗) + sticky-download(底横幅)
 *
 * rem 标定：≥768 时 1rem=10px（站点 main.css html {font-size:62.5%}；≤767 55.5%）。
 * ========================================================================== */

/* ===== 01 hero（figma:1901:16572，1920×690） =====
   节点实测：bg #091121；水印 = Splashtop splash 矢量 410×384 @(331,-74) #0D6DC0（部分越顶裁切）
   + 蓝辉光椭圆 480×480 @(1115,220)（#54C1EE→#258DCB→#0D72B9 渐变）+ RemotePC R 白 ~305×340
   居中于辉光；无位图导出源（assets=0）→ 以站内品牌矢量资产按上述几何重组（logo-splashtop-ic.svg
   本轮由 logo-splashtop-color.svg 派生；R 用 logo-remotepc-white.svg 低透明叠辉光）。
   pill 徽章 405×62 r8 渐变描边 2px [#2C53FF→#7CCFFF→#2C53FF]，文字 32/700 lh40 白；
   H1 60/700 lh78 白；要点 3 行 20/400 lh26 白 + 16 勾图标 #0256FF（行距 20）；段间 gap 60；
   CTA 346×64 #2258F6 r32 光晕(20,.4)。设计无「Available for」平台图标行（已随 HTML 移除）。 */
.banner {
    position: relative;
    overflow: hidden;
    padding: 12.5rem 0;
    color: #fff;
    background: #091121;
    text-align: center;
}

/* 品牌矢量水印（几何 = 节点实测，见上） */
.banner::before {
    content: "";
    position: absolute;
    left: 17%;
    top: -7.4rem;
    width: 41rem;
    height: 38.4rem;
    background: url("/resource/images/best_sp-vs-rp-iw/logo-splashtop-ic.svg") no-repeat center / contain;
    opacity: .32;
    pointer-events: none;
}

.banner::after {
    content: "";
    position: absolute;
    right: 16.5%;
    bottom: 0;
    width: 48rem;
    height: 48rem;
    background:
        url("/resource/images/best_sp-vs-rp-iw/hero-remotepc.svg") no-repeat center 42% / 30.5rem auto,
        radial-gradient(closest-side, rgba(37, 141, 203, .34), rgba(37, 141, 203, 0) 74%);
    pointer-events: none;
}

.banner>.container2 {
    position: relative;
    z-index: 1;
}

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

/* pill 徽章（figma:1901:16572 节点 Frame 304：405×62 r8 渐变描边 2px；文字 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；勾图标 16 #0256FF 圆 + 白勾，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: .5rem;
    width: 1.6rem;
    height: 1.6rem;
    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='%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") 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;
}

/* 版块底色（figma 实测：glance/features/licensing/security 白；plans/performance #F8F9FA） */
.cmp-features,
.cmp-pricing,
.cmp-glance,
.cmp-security {
    background: #ffffff;
}

.cmp-plans,
.cmp-performance {
    background: #F8F9FA;
}

/* 深底版块（compatibility）：#091121 + 水印图（1729:24490），标题/导语白 */
.cmp-compatibility {
    background: #091121 url("/resource/images/best_sp-vs-rp-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: 0 5px 20px 0 rgba(39, 51, 86, 0.20);
}

.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；features 同稿标准交替，psc 反转已废弃） */
.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;
}

/* 行高档位：features 80（figma:1901:16732 row 80）/ perf+pricing 92 / compat 80 / security 80 / glance 74 */
.cmp-features table.cmp-table tbody tr {
    height: 8rem;
}

.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；col2/3 品牌格 = bg-title 渐变底图 780×130 cover + logo。
   features 表头 = 素白（figma:1901:16732 header Cell 无填充、无底图），白系彩标） */
.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_sp-vs-rp-iw/table-title-bg.png") no-repeat center / cover;
}

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

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

.cmp-compatibility 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 {
    height: 8rem;
    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;
}

/* Insight 盒底（figma 实测）：features/licensing 灰盒；plans/performance 白盒+shadow（灰底上）；
   compat/security 白盒+shadow（深/白底上）；glance 表卡内白尾盒 */
.cmp-features .insight,
.cmp-pricing .insight {
    background: #F8F9FA;
}

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

.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: 7rem;
}

.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 (min-width:1024px) {
    .sc {
        position: sticky;
        top: 0%;
        overflow: hidden;
        will-change: transform;
        transform-style: preserve-3d;
        opacity: 1 !important;
    }

    .sc-wrap {
        background: #F8F9FA;
    }
}
@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:1907:31956 重写：双面板并排，tab 形态废弃） =====
   节点实测：面板 628×772 r16 #F8F9FA ×2（gap 24，卡区内缩 16）；品牌 logo 顶部居中
   （顶部 40，高 44）；评分区 margin-top 44（左缩 46/右 28）：分值 72/700 + 标签 24 +
   星条图 168×32 ‖ 右侧分布条 196×12 轨 #D2D2D2 r6（label 56 + gap8，pitch 38）；
   卡 294×320 r16 白 ×2（gap 8）margin-top 50；箭头 40 圆（prev 白描边/next #2258F6）
   底部居中 gap 8、距卡 24 距底 40。卡片系沿用 rp-alternatives 契约（正文 15/400 lh22 定高滚动）。
   RemotePC 字标无矢量源 → 图标 + 文本（.review-logo-remote）。 */
.reviews {
    padding: 120px 0;
    text-align: center
}

.reviews h2 {
    font-size: 40px;
    line-height: 46px;
    margin-bottom: 24px
}

.reviews p.desc {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 80px
}

.reviews-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: left
}

.reviews-panels>.review-panel {
    min-width: 0
}

.reviews .review-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 40px 16px 104px;
    border-radius: 16px;
    background: #F8F9FA
}

.reviews .review-logo {
    display: block;
    height: 44px;
    width: auto;
    margin: 0 auto;
    max-width: 100%
}

.reviews .review-logo-remote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    color: #0D72B9;
    font-size: 26px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -.2px
}

.reviews .review-logo-remote img {
    display: block;
}

.reviews .review-score {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 44px;
    padding: 0 12px;
}

.reviews .review-score .score-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

.reviews .review-score .score-value {
    font-family: 'Trustpilot Sans', Arial, sans-serif;
    font-size: 72px;
    line-height: 70px;
    font-weight: 700
}

.reviews .review-score .score-label {
    font-size: 24px;
    line-height: 30px
}

.reviews .review-score .score-stars {
    display: flex;
    height: 32px;
    align-items: center
}

.reviews .review-score .score-stars-image {
    display: block;
    width: 168px;
    height: 32px
}

.reviews .review-score .score-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 260px;
    max-width: 100%
}

.reviews .review-score .score-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 260px;
    height: 24px;
    font-size: 18px;
    line-height: 24px
}

.reviews .review-score .score-row>span {
    width: 56px;
    flex: 0 0 56px
}

.reviews .review-score .score-row>i {
    display: block;
    width: 196px;
    height: 12px;
    overflow: hidden;
    border-radius: 6px;
    background: #d2d2d2;
    font-style: normal
}

.reviews .review-score .score-row>i b {
    display: block;
    height: 12px;
    border-radius: 6px
}

/* 显式宽度约束：slick 轨道在 flex/grid 自动宽容器内会宽度倍增（2^n 反馈），
   必须钉死 100% + min-width:0（psc/rp 源页同为定宽容器） */
.reviews .review-slick {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 50px 0 0;
    text-align: left
}

.reviews .review-slick .slick-list {
    margin: 0 -4px
}

.reviews .review-slick .review-slide.slick-slide {
    box-sizing: border-box;
    padding: 0 4px
}

.reviews .review-slick .slick-slide {
    max-width: 100%;
    margin: 0 0.8rem;
}

.reviews .review-slick img {
    display: block;
    max-width: 100%;
    border-radius: 16px
}

/* 轮播箭头（prev 白底深箭头 / next 蓝底白箭头）：面板底部居中一对，间距 8、距卡 24、距面板底 40。
   【验收返修 P0-1】箭头布局不得进入 slick 测宽路径：slider 根节点保持块级正常流
   （grid/flex 方案会使 .slick-list 含格仅 88px、slick 测宽 44px → 卡片塌缩）；
   改为覆盖 slick 给 .slick-list 的 position:relative，让绝对定位箭头的包含块
   回落到 .review-panel（面板加 padding-bottom 104px = 卡距 24 + 箭头 40 + 底距 40）。 */
.reviews .review-slick.slick-slider {
    position: static
}

.reviews .review-slick .slick-list {
    position: static
}

.reviews .review-slick .slick-arrow {
    position: absolute;
    bottom: 40px;
    z-index: 2;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background: #ffffff;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(39, 51, 86, .08);
    transition: all .2s;
    transform: none
}

.reviews .review-slick .slick-arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    background: url("/resource/images/best_sp-vs-rp-iw/ic-arrow-L-24@1x.svg") no-repeat;
    background-size: cover;
    transform: translate(-50%, -50%)
}

.reviews .review-slick .slick-prev {
    left: calc(50% - 44px);
    right: auto
}

.reviews .review-slick .slick-next {
    left: calc(50% + 4px);
    right: auto;
    /* background: #2258F6;
    border-color: #2258F6 */
}

.reviews .review-slick .slick-next::before {
    /* background-image: url("/resource/images/best_sp-vs-rp-iw/ic-arrow-R-24-hover@1x.svg") */
    transform: translate(-50%, -50%) rotate(180deg);
}

.reviews .review-slick .slick-arrow:hover {
    background: #2258f6;
    border-color: #2258f6
}

.reviews .review-slick .slick-arrow:hover::before {
    background-image: url("/resource/images/best_sp-vs-rp-iw/ic-arrow-L-24-hover@1x.svg")
}

/* .reviews .review-slick .slick-next:hover::before {
    background-image: url("/resource/images/best_sp-vs-rp-iw/ic-arrow-R-24-hover@1x.svg")
} */

.reviews .review-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    height: 320px;
    padding: 20px 5px 20px 20px;
    overflow: hidden;
    border: 1px solid #e6e2df;
    border-radius: 16px;
    background: #fff;
    color: #000;
    text-align: left
}

.reviews .review-card-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0
}

.reviews .review-card-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 0 0 auto
}

.reviews .review-card-profile {
    display: flex;
    align-items: center;
    gap: 8px
}

.reviews .review-card-avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px
}

.reviews .review-card-avatar.is-yellow {
    background: #fff7c4
}

.reviews .review-card-avatar.is-orange {
    background: #ffe1ba
}

.reviews .review-card-avatar.is-green {
    background: #daffe0
}

.reviews .review-card-avatar.is-pink {
    background: #ffdde8
}

.reviews .review-card-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.reviews .review-card-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0
}

.reviews .review-card-identity strong {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px
}

.reviews .review-card-identity time {
    color: #666;
    font-size: 14px;
    line-height: 18px
}

.reviews .review-card-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 16px
}

.reviews .review-slick img.review-card-star {
    display: block;
    flex: 0 0 84px;
    width: 84px;
    height: 16px;
    border-radius: 0
}

.reviews .review-slick img.review-card-action-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 0
}

.reviews .review-card-copy {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 8px;
    color: #000;
    font-size: 15px;
    line-height: 22px
}

.reviews .review-card-copy::-webkit-scrollbar {
    width: 10px
}

.reviews .review-card-copy::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0
}

.reviews .review-card-copy::-webkit-scrollbar-track {
    border-radius: 99px;
    background: #ebedf3
}

.reviews .review-card-copy::-webkit-scrollbar-thumb {
    min-height: 111px;
    border: 2px solid #ebedf3;
    border-radius: 99px;
    background: #fff
}

.reviews .review-card-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 24px;
    color: #666;
    font-size: 14px;
    line-height: 18px
}

.reviews .review-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.reviews .review-card-flag {
    display: inline-flex;
    align-items: center
}

@media (max-width:1200px) {
    .reviews-panels {
        grid-template-columns: 1fr;
        max-width: 628px
    }

    .reviews .review-slick {
        max-width: 100%
    }
}

@media (max-width:992px) {
    .reviews {
        padding: 80px 0 90px
    }

    .reviews h2 {
        font-size: 36px;
        line-height: 42px
    }

    .reviews p.desc {
        margin-bottom: 50px
    }
}

@media (max-width:900px) {
    .reviews .review-score {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 0 14px
    }

    .reviews .review-score .score-bars {
        width: 100%
    }

    .reviews .review-score .score-row {
        width: 100%
    }

    .reviews .review-score .score-row>i {
        flex: 1 1 auto;
        width: auto;
        min-width: 0
    }
}

@media (max-width:767px) {
    .reviews {
        padding: 60px 0 80px
    }

    .reviews h2 {
        font-size: 30px;
        line-height: 38px
    }

    .reviews p.desc {
        margin-bottom: 40px;
        font-size: 16px;
        line-height: 22px
    }

    .reviews-panels {
        gap: 16px
    }

    .reviews .review-panel {
        padding: 28px 12px 96px
    }

    .reviews .review-score {
        margin-top: 28px;
        gap: 20px
    }

    .reviews .review-score .score-value {
        font-size: 56px;
        line-height: 56px
    }

    .reviews .review-slick {
        margin-top: 32px;
        margin-bottom: 20px
    }

    .reviews .review-slick .slick-arrow {
        bottom: 32px;
        width: 34px;
        height: 34px
    }
}


/* ===== 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（figma:1901:17770） =====
   节点实测：版块白底（无渐变层，choose-bg.webp 废弃）；双卡 610×344 gap60 r24
   渐变 [#F3F6FF→#E6ECFF]；右上折角 accent 230×160（顶边下移 20）渐变
   [#7A9EE2→#B0CDFF]，卡体对角切线 = accent 斜边平行内缩（白底透出）；
   卡内：头部品牌图标 40 + 标题 24/700 lh30（gap 12）、列表 16/400 lh24（disc 点 4，
   间距 6）；卡底产品截图为设计位图（无导出源，暂缺——差异清单在案），卡形 344 保留。 */
.wh {
    padding: 12rem 0;
    background: #ffffff;
    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: 6rem;
    max-width: 128rem;
    margin: 0 auto;
    text-align: left;
}

.wh .wh-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 34.4rem;
    padding: 3.6rem 4.8rem 4rem;
    border-radius: 2.4rem;
    background: linear-gradient(180deg, #F3F6FF 0%, #E6ECFF 100%);
}

.wh .wh-card:nth-child(1) {
    background: url(/resource/images/best_sp-vs-rp-iw/bg-kuang-Splashtop.png) no-repeat center/cover;
}

.wh .wh-card:nth-child(2) {
    background: url(/resource/images/best_sp-vs-rp-iw/bg-kuang-RemotePC.png) no-repeat center/cover;
}

/* 右上折角：白切角（透出卡体外对角区）+ accent 圆角三角（顶边下移 2，与卡体切线平行） */
/* .wh .wh-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 25.9rem;
    height: 18rem;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
} */

/* .wh .wh-card::after {
    content: "";
    position: absolute;
    top: 2rem;
    right: 0;
    z-index: 2;
    width: 23rem;
    height: 16rem;
    border-radius: 0 2.4rem 0 0;
    background: linear-gradient(120deg, #7A9EE2 0%, #B0CDFF 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
} */

.wh .wh-card-head {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.wh .wh-card-ic {
    flex: none;
    width: 4rem;
    height: 4rem;
}

.wh .wh-card-head h3 {
    margin: 0;
    color: #000000;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 3rem;
}

.wh .wh-card ul {
    position: relative;
    z-index: 3;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

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

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

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

/* ===== 14b best-alternative（.wa 新版块；figma:1901:17839） =====
   节点实测：#F8F9FA 版块；heading/desc 居中（同 .wh 段头）；白卡 1280×480 r40
   padding 59；图左 522×362 r12 + 文右（x=640 起）：标题 32/700、列表 16/400 lh30、
   Try for Free 280×64 r32 #2258F6（icon 24 + gap 8）。人像照片设计无导出源，
   沿用站内 alt-man.png（构图不同，object-fit cover 裁切，差异清单在案）。 */
.wa {
    padding: 12rem 0;
    background: #F8F9FA;
    text-align: center;
}

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

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

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

.wa .wa-card {
    display: flex;
    align-items: center;
    gap: 6rem;
    max-width: 128rem;
    margin: 0 auto;
    padding: 5.9rem 6rem;
    border-radius: 4rem;
    background: #ffffff;
    text-align: left;
}

.wa .wa-img {
    flex: 0 0 52.2rem;
}

.wa .wa-img img {
    display: block;
    width: 52.2rem;
    height: 36.2rem;
    object-fit: cover;
    object-position: 50% 22%;
    border-radius: 1.2rem;
}

/* Try for Free（figma:1901:17839：280×64 r32 #2258F6；标记为站点 .btn.btn-blue，需本页覆写） */
.wa .download-button .btn.btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-width: 28rem;
    height: 6.4rem;
    margin-top: 3.6rem;
    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;
}

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

.wa .wa-body {
    flex: 1;
    min-width: 0;
}

.wa .wa-body h3 {
    margin: 0;
    color: #000000;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 3.8rem;
}

.wa .wa-body ul {
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

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

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

.wa .wa-body li+li {
    margin-top: .6rem;
}

.wh .btn-download,
.wa .btn-download {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 6.4rem;
    margin-top: 3.6rem;
    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,
.wa .btn-download:hover,
.wa .btn-download:focus {
    background: #1748db;
    color: #fff;
}

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

/* ===== 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 {
    /* 间距校准（验收返修 P2-①；figma:1901:18139 实测 h=640：顶/底 108、
       h2→desc 16、desc→list 28、list 项距 16、list→CTA 28） */
    padding: 10.8rem 0;
    background: #091121 url("/resource/images/best_sp-vs-rp-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: 1.6rem auto 0;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3.2rem;
}

.ccl .ccl-list {
    width: fit-content;
    margin: 2.8rem 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: 1.6rem;
} */

.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: 2.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,
    .wh,
    .faq,
    .ccl {
        padding: 8rem 0;
    }

    .cmp .table-card,
    .cmp .insight,
    .sc .table-card,
    .sc .insight,
    .wh .wh-cards,
    .wa .wa-card,
    .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,
    .wh .section-head h2,
    .wa .section-head h2,
    .faq .section-head h2 {
        font-size: 3.2rem;
        line-height: 4rem;
    }

    .wa .wa-card {
        flex-direction: column;
        align-items: stretch;
        gap: 3.2rem;
        padding: 3.2rem;
    }

    .wa .wa-img {
        flex: none;
    }

    .wa .wa-img img {
        width: 100%;
        height: auto;
    }

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

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

    /* 移动端表格：首列右缘渐隐遮罩，下方内容横向滚过时不至硬切
       （对齐族基准页 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,
    .wh,
    .faq,
    .ccl {
        padding: 4.8rem 0;
    }

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

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

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

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

    /* 折角几何随卡宽收缩：切角/accent 等比缩位（固定尺寸小于移动卡宽即整块隐藏） */
    .wh .wh-card::before {
        width: 18rem;
        height: 12.5rem;
    }

    /* .wh .wh-card::after {
        top: 1.4rem;
        width: 16rem;
        height: 11rem;
        border-radius: 0 1.8rem 0 0;
    } */

    .wa .wa-card {
        padding: 2.4rem;
        border-radius: 2.4rem;
    }

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

    .ccl .ccl-desc {
        font-size: 1.6rem;
        line-height: 2.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,
    .wa .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,
    .wa .btn-download,
    .ccl .btn-download {
        min-height: 44px;
    }
}

@media (max-width: 767px) {

    .banner .btn-download,
    .wh .btn-download,
    .wa .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;
    }

    /* features 表（验收返修 P1-1，AV-003 先例）：sticky 首列 260px 在手机上完全遮蔽
       勾选值列 → 取消 sticky；其首列渐隐遮罩为 sticky 语义，一并停用。 */
    .cmp-features table.cmp-table th:first-child,
    .cmp-features table.cmp-table td:first-child {
        position: static;
    }

    .cmp-features table.cmp-table th:first-child::before,
    .cmp-features table.cmp-table td:first-child::before {
        content: none;
    }

    .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;
    }

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

    .wh .wh-card li,
    .wa .wa-body li {
        font-size: 14px;
    }

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

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

/* ===== 98 本页差异（D2C-20261102-001；相对 psc 基准的新增/覆盖，均注明依据） ===== */
/* Plan Comparison：4 列等宽（colgroup 25%×4 主导，此处兜底 + 形态挂靠白系定价表）；
   底色/Insight 已上移至分组规则（灰底 + 白盒 shadow）。 */
.cmp-plans table.cmp-table tbody tr {
    height: 9.2rem;
}

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

/* Feature Comparison（figma:1901:16732）：表体居中；勾/叉图标独占一行，括号注记另起一行
   （.cmp-note 14px，间距 8）——req「内容靠左」口径被设计稿取代（差异清单在案）。 */
.cmp-features table.cmp-table td {
    text-align: center;
}

.cmp-features table.cmp-table td .cmp-note {
    display: block;
    margin-top: .8rem;
    color: #000000;
    font-size: 1.4rem;
    line-height: 2rem;
}

/* 场景星级表：表头第二列交替底色（psc .sc-brand-parsec 的结构化替身，令牌不变） */
.sc table.sc-table thead th:nth-child(2) {
    background: #DEE9FF;
}

/* 深底版块内勾/叉图标说明文字换行紧凑（图标 inline-flex，随文本基线对齐） */
.cmp-compatibility table.cmp-table td .status,
.cmp-features table.cmp-table td .status {
    vertical-align: middle;
}

@media (max-width: 767px) {

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