/* =============================================================================
 * best-sp-vs-logm-iw.css — Splashtop vs LogMeIn 对比页（D2C-20261106-003）
 * 样式基准：同族已交付页 /best/sp-vs-rp-iw.html（best-sp-vs-rp-iw.css 整文件规则级派生，
 *   类名契约不变；派生工具 = work/d2c-20261106/003-splm/task/tools/build_css.py，
 *   本文件为构建产物，勿手改）。
 * 结构基线：/best/sp-vs-rp-iw.html（20 SECTION）；评论区先例 = /best/sp-vs-gtpc-iw.html
 *   （.rv-controls 自绘箭头 + 页面 JS 委托）；LogMeIn 面板卡源 = /best/gtpc-vs-logm-iw.html。
 * 文案正本：requirements/design2code/figma/20261106 003 req-raw.txt；形态基准 =
 *   Figma frame 2062:31504 AV-EN-sp-vs-logm-iw（逐版块节点实测，id 记 HTML 注释）。
 * 文案冲突以帧 characters 为准，与 req 差异逐条记「帧-req 差异清单」（见交付报告）。
 *
 * ── 相对派生基线（sp-vs-rp）的形态级改动（全部有 frame 2062:31504 节点数据依据）──
 *   1) hero：banner padding 12.5rem→12rem/7rem（节点 120/70，总高 700）；H1 下新增独立
 *      副标题行 .banner-desc（20/400 lh26，gap 8，节点 Hero/introduction @276）；
 *      水印改 DOM 图 .banner-ghost（左 splashtop-ic 460×460 @305,-52 opacity .16、
 *      右 LogMeIn 准星 logo-LogMeln.svg 480×480 @1115,280 opacity .14 + 渐隐 mask，
 *      几何 = sp-vs-gtpc banner-ghost 同款）。
 *   2) 版块底色节奏：Product Scope 复用 .cmp-compatibility 深底表（段底 #091121），
 *      thead 10rem（节点 100）/ 行 7.4rem（节点 74）/ col1 36rem（节点 360）；
 *      features 行高 8rem→7rem（节点 70）；performance 行高 9.2rem→8.8rem（节点 88）；
 *      security 段底 白→#F8F9FA（节点 Security fills=#F8F9FA）；FAQ 段底 #F8F9FA→白
 *      （节点 FAQ fills=#FFFFFF，卡仍白 r24）；how-to-choose 段底保持白色基规则（初版误提取帧隐藏层渐变，
 *      验收 P1-1 撤销；33325 自身 fill=SOLID #FFFFFF）。
 *   3) Insight 间距 2rem→2.4rem、glance 卡内白尾盒不变（节点 gap 24）；glance col1
 *      内边距 3.2rem→2.4rem（节点 x344）；features/pricing/performance/scenario col1
 *      1.8rem→2rem（节点 x340）；scenario col1 表头+行 3.2rem→2rem。
 *   4) .reviews：Trustpilot 方块星条图 168×32→210×40（squares-splashtop/logm.svg，
 *      节点 Frame 204 210×40）；双面板箭头 = .rv-controls 自绘 40 圆 prev 白底描边
 *      #E6E8E9 黑箭头 / next #2258F6 白箭头（节点 Splashtop/LogMeIn carousel controls；
 *      sp-vs-gtpc 2026-11-03 验收返工 P1-1 同款，HTML 自绘按钮 + 页面 JS 委托，
 *      slick 内建 arrows:false——slideCount<=slidesToShow 时内建箭头不渲染）；
 *      LogMeIn 品牌行 = 图标+字标组合 .review-logo-txt（LogMeIn 字标无矢量源，
 *      sp-vs-rp RemotePC「图标+文本」先例 + sp-vs-gtpc .rv-brand-txt 同构，待设计资产）。
 *   5) 场景表主品牌格 .sc-brand-splm（= 族 nth-child(2) #DEE9FF 的显式化改名，
 *      sc-brand-gtpc 先例）；.LogMeIn 表头字标 = .brand-txt 图标+文本组合
 *      （sp-vs-gtpc 先例，浅底黑字/深底白字 + MeIn 段黄划线 #FFE900）。
 *   6) how-to-choose 卡新增底部产品截图 .wh-card-shot（514×108 裁自帧渲染图；
 *      帧 514×375 位图被卡裁切，可见区 108px——无 Figma 导出通道，按渲染图逐像素取）。
 *   7) .wa 图 522×362→520×360（节点 img-1 520×360）；源 = 帧渲染图裁切（IMG fill
 *      1b7f501dbc244cfd 无导出通道）；ccl 背景沿用族 prefooter-bg.webp（11-03 先例）。
 *   8) 头像色 addendum：is-mint #DAFFE0（Richard）、is-deeporange #BF360C 白字（Jim）
 *      （gtpc-vs-logm 先例值）；头像照片 Kasandra = review-avatar-kasandra-logm.png
 *      （gtpc-vs-logm 防串用派生文件，复制进本页目录）。
 *
 * 形态总览（20 版块）：banner(深+双品牌水印) → glance(白系三列表+卡内 Insight) →
 *   product-scope(深底白表 .cmp-compatibility) → features(白系居中勾叉表 70 行高) →
 *   pricing(白系 280/500/500) → security(#F8F9FA 底深表) → performance(白系 88 行高)
 *   → scenario×5（#F8F9FA 星级表+hover tooltip）→ reviews（双面板并排 slick+自绘箭头）
 *   → faq(白底手风琴 12 问) → choose(白底+折角双卡带产品截图；初版隐藏层渐变误提取已按验收 P1-1 撤销，卡2头图标=帧气泡圆标复刻) →
 *   best-alternative(.wa 灰底白卡) → conclusion(.ccl 深底照片结语)
 *   → side-nav(左浮窗 15 锚) + 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: 12rem 0 7rem;
    color: #fff;
    background: #091121;
    text-align: center;
}


.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-logm-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 0.5rem 2rem rgba(39, 51, 86, .1);
}

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

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

.cmp-pricing table.cmp-table tbody td {
    text-align: left;
}

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

.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-logm-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: 10rem;
    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: 2.4rem;
    padding-right: 2.4rem;
}

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

.cmp-performance table.cmp-table tbody th:first-child,
.cmp-performance table.cmp-table thead th:first-child {
    padding-right: 1.6rem;
}

/* 列宽（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: 2.4rem 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-wrap {
    background: #F8F9FA;
}

.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 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: 2.4rem 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;
    width: 44px;
    height: 44px
}

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

.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: 210px;
    height: 40px
}

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

.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-logm-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-logm-iw/ic-arrow-R-24-hover@1x.svg")
}

.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-logm-iw/ic-arrow-L-24-hover@1x.svg")
}

.reviews .review-slick .slick-next:hover::before {
    background-image: url("/resource/images/best_sp-vs-logm-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;
    padding: 3.6rem 4.8rem 12.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-logm-iw/bg-Splashtop-interface.png) no-repeat center/cover;
}

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

/* 右上折角：白切角（透出卡体外对角区）+ accent 圆角三角（顶边下移 2，与卡体切线平行） */
.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-logm-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;
    }
}

/* ===== 99 本页差异（D2C-20261106-003；相对 sp-vs-rp 派生基线的新增/覆盖，均注明节点依据） ===== */

/* -- 99.1 hero 水印（改 DOM .banner-ghost：节点 AnyViewer-Logo/splat 460×460 @(305,-52)、
   logo-new/LogMeIn 480×480 @(1115,280)；矩形渐隐遮罩 = sp-vs-gtpc banner-ghost 同构；
   品牌矢量在制品无导出源 → 站内既有品牌资产 + 低透明度复刻） */
.banner .banner-ghost {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.banner .banner-ghost-l {
    position: absolute;
    left: 15.9%;
    top: -7.4%;
    width: 46rem;
    height: auto;
    opacity: .16;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 78%, transparent 100%);
}

.banner .banner-ghost-r {
    position: absolute;
    right: 17%;
    top: 40%;
    width: 48rem;
    height: auto;
    opacity: .14;
    -webkit-mask-image: linear-gradient(200deg, #000 8%, rgba(0, 0, 0, .3) 60%, transparent 96%);
    mask-image: linear-gradient(200deg, #000 8%, rgba(0, 0, 0, .3) 60%, transparent 96%);
}

/* H1 下独立副标题行（节点 Hero / introduction：20/400 lh26，与 H1 间距 8） */
.banner .banner-desc {
    max-width: 128rem;
    margin: .8rem auto 0;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.6rem;
}

@media (max-width: 991px) {

    .banner .banner-ghost-l,
    .banner .banner-ghost-r {
        width: 26rem;
    }
}

@media (max-width: 767px) {

    .banner .banner-ghost-l,
    .banner .banner-ghost-r {
        width: 18rem;
    }

    .banner .banner-desc {
        font-size: 1.6rem;
        line-height: 2.4rem;
        padding: 0 1.6rem;
    }
}

/* -- 99.2 Product Scope（复用 .cmp-compatibility 深底白表；节点 2062:31593：
   段底 #091121、thead 100、行 74、col1 360、Summary 白盒独立 r16） */
.cmp-compatibility table.cmp-table th:first-child,
.cmp-compatibility table.cmp-table td:first-child {
    width: 36rem;
}

/* 行高 88（节点 row 88——基线替换时 performance 选择器并入 pricing 组被拆出，此处补回） */
.cmp-performance table.cmp-table tbody tr {
    height: 8.8rem;
}

/* perf/scope 段头 h2→副题间距 24（帧段头盒 1280×98 = 46+24+28） */
.cmp-performance .section-head p,
.cmp-compatibility .section-head p {
    margin-top: 2.4rem;
}

/* scope Insight 间距 20（帧表→Summary gap 20，族默认 24） */
.cmp-compatibility .insight {
    margin-top: 2rem;
}

/* compat 行竖向内边距 9（节点行 74：两行文本 56 + 18 恰好收进 7.4rem，14px 撑破行高） */
.cmp-compatibility table.cmp-table tbody th,
.cmp-compatibility table.cmp-table tbody td {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

/* -- 99.3 security 段底（节点 Security fills=#F8F9FA）与 FAQ 段底（节点 FAQ fills=#FFFFFF） */
.cmp-security {
    background: #F8F9FA;
}

.faq {
    background: #ffffff;
}

/* -- 99.4 how-to-choose 段底（验收 P1-1 更正）：33325 帧自身 fill=SOLID #FFFFFF，
   蓝渐变位于 visible:false 的背景容器层——按「帧隐藏层不实现」回落白色基规则
   （初版误提取隐藏层渐变，已撤销；渲染图 8 采样点全白三源一致）。
   段高 758 = 120+94(head)+80+卡344+120。卡内产品截图 = 帧位图 514×375 @卡内 (48,236)
   被卡 344 裁切 → 可见 514×108（内容宽 514，贴卡底圆角收边；帧位图无导出通道，
   按帧渲染图 scale=1 同像素裁切）——不外扩负边距（否则 610 宽重采样高度 +20 → 卡高 366 超差）。 */
.wh .wh-card-shot {
    position: relative;
    z-index: 3;
    margin: 2.4rem 0 -4rem;
    overflow: hidden;
}

.wh .wh-card-shot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .wh .wh-card-shot {
        margin: 2rem 0 -3.2rem;
    }
}

/* -- 99.5 LogMeIn 品牌字标（字标无矢量源 → 文本近似：20/700 收紧字距 + MeIn 段黄划线
   #FFE900（logo SVG fill 实测）；无图标（帧表头实例 130×44 为纯字标）；深底表白字；
   待设计确认：LogMeIn 官方字标矢量） */
.cmp table.cmp-table thead th .brand-txt,
.sc table.sc-table thead th .brand-txt {
    display: inline-block;
    box-sizing: border-box;
    min-width: 13rem;
    color: #000000;
    font-size: 3rem;
    font-weight: 700;
    line-height: 4.4rem;
    letter-spacing: -.1rem;
    vertical-align: middle;
    font-style: italic;
}

.brand-txt .lm-mark,
.review-logo-txt .lm-mark {
    position: relative;
    display: inline;
}

.brand-txt .lm-mark::after,
.review-logo-txt .lm-mark::after {
    content: "";
    position: absolute;
    left: .2rem;
    right: 0;
    bottom: 0;
    height: .5rem;
    background: #FFE900;
    transform: skewY(-3deg);
}

.cmp-compatibility table.cmp-table thead th .brand-txt,
.cmp-security table.cmp-table thead th .brand-txt {
    color: #ffffff;
}

@media (max-width: 1199px) {

    .cmp table.cmp-table thead th .brand-txt,
    .sc table.sc-table thead th .brand-txt {
        font-size: 2.4rem;
        line-height: 3.6rem;
        min-width: 10.4rem;
        letter-spacing: -.08rem;
    }
}

/* -- 99.6 场景表主品牌格显式化（族 nth-child(2) #DEE9FF 的改名版，sc-brand-gtpc 先例） */
.sc table.sc-table thead th.sc-brand-splm {
    background: #DEE9FF;
}

/* -- 99.7 .reviews 自绘箭头 + LogMeIn 品牌行（节点 Splashtop/LogMeIn carousel controls
   40 圆 prev 白底描边黑箭头 / next #2258F6 白箭头；面板 padding-bottom 104 内绝对定位
   底部居中；布局不进入 slick 测宽路径——slider 根与 .slick-list 维持块级正常流） */
.reviews .rv-controls {
    position: absolute;
    left: 1.6rem;
    right: 1.6rem;
    bottom: 4rem;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    height: 4rem;
    pointer-events: none;
}

.reviews .rv-controls .rv-arrow {
    flex: none;
    width: 4rem;
    height: 4rem;
    padding: 0;
    border: .1rem solid #E6E8E9;
    border-radius: 2rem;
    background: #ffffff;
    cursor: pointer;
    pointer-events: auto;
}

.reviews .rv-controls .rv-arrow::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='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}


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

.reviews .rv-controls .rv-arrow:focus-visible {
    outline: .2rem solid #2258F6;
    outline-offset: .2rem;
}

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

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

/* LogMeIn 面板品牌行（图标+字标；面板 logo 行高 44 对齐 Splashtop 图标行） */
.reviews .review-logo-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 13rem;
    height: 4.4rem;
    color: #000000;
    font-size: 3rem;
    font-weight: 700;
    line-height: 4.4rem;
    letter-spacing: -.1rem;
    font-style: italic;
}

.reviews .review-logo-txt img {
    display: block;
    width: 4.4rem;
    height: 4.4rem;
}

@media (max-width: 767px) {
    .reviews .rv-controls {
        bottom: 3.2rem;
    }

    .reviews .rv-controls .rv-arrow {
        width: 3.4rem;
        height: 3.4rem;
    }
}

/* -- 99.8 头像新色变体（gtpc-vs-logm 先例值；Jim=J 深橙白字 / Richard=RI 薄荷绿） */
.reviews .review-card-avatar.is-mint {
    background: #DAFFE0;
}

.reviews .review-card-avatar.is-deeporange {
    background: #BF360C;
    color: #ffffff;
}

/* -- 99.12 浮窗导航宽度按帧（验收 P2-4：帧组件 280 宽；基线族 24rem → 28rem，
   内列 234 ≈ 280−两侧内边距；高度为内容流，帧 672 bbox 含投影余量，登记差异清单） */
@media (min-width: 992px) {
    .side-nav[data-side-nav] {
        width: 24rem;
    }
}

@media (max-width: 767px) {

    .reviews .review-card-avatar.is-mint,
    .reviews .review-card-avatar.is-deeporange {
        color: #000000;
    }
}

/* -- 99.9 .wa 图 520×360（节点 img-1；基线 522×362） */
.wa .wa-img img {
    width: 52rem;
    height: 36rem;
}


/* -- 99.10 conclusion（.ccl：节点 2062:33713 实测 上下留白 140、要点→按钮间距 60、
   要点行高 32（族 3 行 96 无换行）；基线 108/28 依帧覆盖） */
.ccl {
    padding: 14rem 0;
}

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

.ccl .btn-download {
    margin-top: 6rem;
}

/* -- 99.11 reviews 段头/面板内距（帧 2062:32989 实测：h2→副题 16、副题 lh28；
   score 块 margin-top 24（Frame214 @panel+108）、卡行 margin-top 64（Frame299 @panel+348）、
   面板 772 = 40+44+24+score176+64+卡320+104；箭头绝对定位 bottom40 → 卡→箭头 24） */
.reviews .section-head h2 {
    margin-bottom: 1.6rem;
}

.reviews .section-head p.desc {
    line-height: 2.8rem;
}

.reviews .review-score {
    margin-top: 2.4rem;
}

.reviews .review-slick {
    margin-top: 2.4rem;
}

/* 深底版块内 LogMeIn 图标呼吸位（表头 <img> 与 .brand-txt 混排基线对齐兜底） */
.cmp table.cmp-table thead th.cmp-brand img.brand-logo,
.sc table.sc-table thead th.cmp-brand img.brand-logo {
    display: inline-block;
    vertical-align: middle;
}