/* ==========================================================================
   通用信息页组件（关于我们 / 联系我们 / 联盟计划 / 各类政策页）
   --------------------------------------------------------------------------
   这些页面共用一个页头（.pg-hero）和板块外壳（.pg-sec），
   风格与 tags.html 的 .tg-hero 同族：浅紫渐变 + 两团品牌色柔光，
   下沿收到 body 的 #F6F6F6，避免与白色正文区之间出现色阶断层。
   政策类页面再叠一层两栏布局（.lg-layout）：左侧粘性目录 + 右侧正文。
   ========================================================================== */

/* --- 色板 ---
   原先这一组页面的卡片一律是 #FFFFFF + 1px #ece9f5 描边，
   而 body 底色本身就接近白，结果整页看着像没上样式的线框图。
   统一换成浅紫填充（取自参考站联系页的卡片底色），
   靠色块而不是描边划分区块，和站内蓝紫主色也对得上。 */
:root{
    --pg-card:      #EFEAFC;   /* 卡片底 */
    --pg-card-2:    #E6DEFA;   /* hover 加深一档 */
    --pg-card-line: #E1D9F6;   /* 需要描边时用 */
    --pg-panel:     #F6F2FE;   /* 大面积面板，比卡片浅一档 */
}

/* --- 分区导航 ---
   放在面包屑下面、页头上面。纯文字 + 选中项一条渐变下划线，
   不做成胶囊按钮：这一条紧贴在页眉下方，做成实心块会和页眉抢注意力。 */
.pg-tabs{
    display: block;
    position: relative;
    z-index: 21;
    background: transparent;
}
.pg-tabs .zs-wp{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 48px;
}
.pg-tabs a{
    display: block;
    position: relative;
    padding: 17px 2px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #4b4361;
    transition: color .3s ease;
}
.pg-tabs a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--zs-btn-grad);
    transform: scaleX(0);
    transition: transform .3s ease;
}
.pg-tabs a:hover{
    color: #6d28d9;
}
.pg-tabs a:hover::after{
    transform: scaleX(1);
}
.pg-tabs a.on{
    color: #170b33;
    font-weight: 600;
}
.pg-tabs a.on::after{
    transform: scaleX(1);
}

/* --- 页头区 ---
   渐变画在 .pg-top 这一层，面包屑、分区导航、标题都在它里面。
   之前渐变只画在 .pg-hero 上，面包屑和 Tab 各自是白底，
   于是页头上边缘出现两道横向接缝，颜色也接不上。
   下沿收到纯白：这一组页面的 body 是 body.zs-page 的 #FFF。 */
.pg-top{
    display: block;
    position: relative;
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg,
        #e4d7fb 0%,
        #e9dffc 22%,
        #eee7fc 46%,
        #f5f1fd 74%,
        #FFFFFF 100%);
    /* 必须是 clip 而不是 hidden：hidden 会让这一层成为 BFC，
       而页眉里的浮动元素没被完全包住，BFC 盒会主动避开浮动，
       结果整块被挤窄并右移（实测 rect 变成 216,70 1368x425）。
       clip 同样能裁掉下面两团溢出的柔光，但不建立 BFC。
       页眉那边的浮动也已经补了 clearfix，见 style.css。 */
    overflow: clip;
}
/* 两团柔光铺得比容器大一圈，收缩得太急会在左上角切出一块发白的楔形 */
.pg-top::before{
    content: "";
    position: absolute;
    left: -18%;
    top: -55%;
    width: 62%;
    height: 190%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(43, 127, 255, .11) 0%, rgba(43, 127, 255, 0) 72%);
    pointer-events: none;
}
.pg-top::after{
    content: "";
    position: absolute;
    right: -18%;
    top: -58%;
    width: 62%;
    height: 190%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(195, 31, 209, .12) 0%, rgba(195, 31, 209, 0) 72%);
    pointer-events: none;
}
.pg-top .path,
.pg-top .pg-tabs,
.pg-top .pg-hero{
    position: relative;
    z-index: 2;
    background: transparent;
}
.pg-hero{
    display: block;
    position: relative;
    padding: 40px 0 60px 0;
}
/* is-solo：这一页的 .pg-top 里既没有面包屑也没有分区 Tab（目前只有
   contact.html），标题会直接顶到页眉下沿，所以把上内边距补回来。 */
.pg-hero.is-solo{
    padding-top: 92px;
}
/* is-noeyebrow：标题上方原来有一枚 32px 高的胶囊小标签（.pg-eyebrow），
   现在标签去掉但整块高度要保持不变，所以把那 32px 加到上内边距里。
   terms / support / cancel / refund / privacy / editor / ip 七页都用它。 */
.pg-hero.is-noeyebrow{
    padding-top: 72px;
}
.pg-hero .zs-wp{
    position: relative;
    z-index: 2;
}
/* 居中变体：关于我们、联盟计划这类营销页用 */
.pg-hero.is-center .zs-wp{
    text-align: center;
}
/* 文档变体：政策页用。以前这里要额外收窄，是为了对齐 .lg-layout 那个
   1240px 的居中块；现在 .lg-layout 已经跟着 .zs-wp 铺满，页头不用再收，
   标题自然和下面的目录、以及页眉页脚左边缘对齐。 */
.pg-hero.is-center .pg-desc{
    margin-left: auto;
    margin-right: auto;
}

.pg-hero .pg-title{
    display: block;
    margin: 18px 0 0 0;
    font-size: 50px;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #170b33;
}
.pg-hero .pg-desc{
    display: block;
    max-width: 900px;
    margin: 20px 0 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: #4b4361;
}
.pg-hero .pg-desc strong{
    font-weight: 600;
    color: #2b1a4d;
}
/* 生效日期 / 更新时间 */
.pg-updated{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    color: #6f6a80;
}
.pg-updated svg{
    display: block;
    width: 16px;
    height: 16px;
    color: #a78bfa;
}

/* --- 板块外壳 --- */
.pg-sec{
    display: block;
    padding: 56px 0 0 0;
}
/* 带 id 的板块是锚点目标，页眉 80 + 余量，跳转时自动让开 */
.pg-sec[id]{
    scroll-margin-top: 106px;
}
/* 收尾留白收到原来的 60%（24 -> 14），和 .dl-sec.is-last 同步 */
.pg-sec.is-last{
    padding-bottom: 14px;
}
.pg-sec-head{
    display: block;
    max-width: 1000px;
    margin-bottom: 32px;
}
.pg-sec-head.is-center{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.pg-sec-head .title{
    display: block;
    margin: 0;
    font-size: 38px;
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #170b33;
}
.pg-sec-head .desc{
    display: block;
    margin: 14px 0 0 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: #6f6a80;
}

/* --- 折叠问答。本组页面共用，不再各写一份 --- */
.pg-faq{
    display: block;
}
.pg-faq details{
    display: block;
    margin-bottom: 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: var(--pg-card);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.pg-faq details[open]{
    border-color: rgba(124, 58, 237, .3);
    box-shadow: 0 16px 34px -28px rgba(76, 29, 149, .45);
}
.pg-faq summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 24px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: #1c1230;
    cursor: pointer;
    list-style: none;
}
.pg-faq summary::-webkit-details-marker{
    display: none;
}
.pg-faq summary::after{
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    color: #7c3aed;
}
.pg-faq details[open] summary::after{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}
.pg-faq summary:hover{
    color: #6d28d9;
}
.pg-faq .pf-a{
    display: block;
    padding: 0 24px 22px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: #4b4361;
}
.pg-faq .pf-a p{
    margin: 0 0 12px 0;
}
.pg-faq .pf-a p:last-child{
    margin-bottom: 0;
}
.pg-faq .pf-a ul{
    display: block;
    margin: 0 0 12px 0;
    padding: 0;
}
.pg-faq .pf-a li{
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    list-style: none;
}
.pg-faq .pf-a li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
}
.pg-faq .pf-a a{
    font-weight: 600;
    color: #6d28d9;
}
.pg-faq .pf-a a:hover{
    text-decoration: underline !important;
}

/* ==========================================================================
   政策页：左侧粘性目录 + 右侧正文
   ========================================================================== */
/* 宽度不再由这里自己收窄居中，统一交给外层 .zs-wp，
   这样政策页的目录左边缘和页眉、页脚、首页内容带对齐。
   右侧留白改由 .lg-body 的上限控制（目录 288 + 间距 48 + 正文 1040）。 */
.lg-layout{
    display: flex;
    align-items: flex-start;
    gap: 48px;
    max-width: none;
    padding: 46px 0 20px 0;
}
.lg-toc{
    flex: 0 0 288px;
    width: 288px;
    /* 目录跟着滚动，长政策页里随时能跳章节。
       80px 是 fixed 页眉的高度。 */
    position: sticky;
    top: 104px;
}
.lg-toc .toc-title{
    display: block;
    margin: 0 0 14px 0;
    font-size: 14px
    ;font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #908ba0;
}
.lg-toc ol{
    display: block;
    counter-reset: lgtoc;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--pg-card-line);
}
.lg-toc li{
    display: block;
    list-style: none;
    counter-increment: lgtoc;
}
.lg-toc a{
    display: block;
    position: relative;
    padding: 9px 0 9px 18px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 15px;
    line-height: 1.5;
    color: #6f6a80;
    transition: color .3s ease, border-color .3s ease;
}
.lg-toc a::before{
    content: counter(lgtoc) ".";
    margin-right: 6px;
    font-weight: 600;
    color: #c4bcd8;
    transition: color .3s ease;
}
.lg-toc a:hover{
    color: #6d28d9;
}
.lg-toc a.on{
    color: #1c1230;
    font-weight: 600;
    border-left-color: #7c3aed;
}
.lg-toc a.on::before{
    color: #7c3aed;
}

/* 正文：不设上限，吃掉目录之外的全部宽度，右侧不留空档 */
.lg-body{
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    font-size: 16px;
    line-height: 1.85;
    color: #4b4361;
}
.lg-body .lg-sec{
    display: block;
    /* 页眉 70 + 余量，锚点跳转时自动让出这段距离 */
    scroll-margin-top: 106px;
    padding-bottom: 38px;
}
.lg-body .lg-sec + .lg-sec{
    padding-top: 38px;
    border-top: 1px solid #ece9f5;
}
.lg-body h2{
    display: block;
    margin: 0 0 16px 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #170b33;
}
.lg-body h3{
    display: block;
    margin: 28px 0 12px 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: #1c1230;
}
.lg-body p{
    margin: 0 0 16px 0;
}
.lg-body p:last-child{
    margin-bottom: 0;
}
.lg-body strong{
    font-weight: 600;
    color: #2b1a4d;
}
.lg-body a{
    color: #6d28d9;
    font-weight: 500;
}
.lg-body a:hover{
    text-decoration: underline !important;
}
.lg-body ul,
.lg-body ol{
    display: block;
    padding: 0;
    margin: 0 0 16px 0;
}
.lg-body ul li{
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    list-style: none;
}
.lg-body ul li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a78bfa;
}
.lg-body ol{
    counter-reset: lgol;
}
.lg-body ol li{
    position: relative;
    counter-increment: lgol;
    padding-left: 34px;
    margin-bottom: 10px;
    list-style: none;
}
.lg-body ol li::before{
    content: counter(lgol);
    position: absolute;
    left: 0;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    border-radius: 50%;
    background: var(--zs-btn-grad);
}
/* 提示框：适用范围、重要提醒等 */
.lg-note{
    display: block;
    padding: 20px 24px;
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.75;
    border-radius: 14px;
    border-left: 3px solid #7c3aed;
    background: var(--pg-panel);
    color: #4b4361;
}
.lg-note strong{
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #2b1a4d;
}
/* 定义表：术语 + 解释 */
.lg-deflist{
    display: block;
    margin: 0 0 20px 0;
}
.lg-deflist dt{
    font-size: 16px;
    font-weight: 600;
    color: #1c1230;
    margin-top: 16px;
}
.lg-deflist dd{
    margin: 4px 0 0 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6f6a80;
}
/* 政策页底部的联系条 */
.lg-contact{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    margin-top: 8px;
    padding: 28px 32px;
    border-radius: 18px;
    background: var(--pg-card);
    border: 1px solid transparent;
}
.lg-contact .lc-text strong{
    display: block;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 600;
    color: #1c1230;
}
.lg-contact .lc-text span{
    display: block;
    font-size: 15px;
    color: #6f6a80;
}
.lg-contact .lc-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 46px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 23px;
    background: var(--zs-btn-grad);
    transition: background .3s ease;
}
.lg-contact .lc-btn:hover{
    background: var(--zs-btn-grad-hover);
}

/* ==========================================================================
   关于我们
   ========================================================================== */
/* 数据墙 */
.ab-stats{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* 价值观卡 */
.ab-values{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.ab-values li{
    display: block;
    padding: 34px 30px;
    list-style: none;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ab-values li:hover{
    border-color: rgba(124, 58, 237, .28);
    background: var(--pg-card-2);
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -26px rgba(76, 29, 149, .42);
}
.ab-values .av-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.ab-values .av-ico svg{
    display: block;
    width: 24px;
    height: 24px;
}
.ab-values .av-title{
    display: block;
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1c1230;
}
.ab-values .av-desc{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6f6a80;
}

/* ==========================================================================
   关于页：紫色渐变数据条
   --------------------------------------------------------------------------
   参考站这里铺的是一张 3D 渲染图，但那张图下缘带着对方的品牌水印，
   所以底纹改成纯 CSS：主渐变 + 两团柔光 + 右侧一个大的同心圆装饰，
   观感对得上，也没有外部依赖。
   ========================================================================== */
.ab-banner{
    display: block;
    position: relative;
    /* 上下各多给 20px，整块比原来高 40px */
    padding: 78px 64px 66px 64px;
    border-radius: 24px;
    background-color: #6d28d9;
    background-image:
        radial-gradient(60% 70% at 88% 22%, rgba(255, 138, 76, .55) 0%, rgba(255, 138, 76, 0) 62%),
        radial-gradient(52% 60% at 96% 40%, rgba(236, 72, 255, .5) 0%, rgba(236, 72, 255, 0) 60%),
        linear-gradient(104deg, #5b21b6 0%, #6d28d9 34%, #7c3aed 62%, #9333ea 100%);
    overflow: hidden;
}
/* 右侧同心圆装饰，呼应参考图里的 3D 圆环 */
.ab-banner::after{
    content: "";
    position: absolute;
    right: -90px;
    top: -70px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 46px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 34px rgba(255, 255, 255, .06);
    pointer-events: none;
}
.ab-banner .abn-in{
    position: relative;
    z-index: 2;
}
.ab-banner .abn-title{
    display: block;
    max-width: 620px;
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-weight: 800;
    color: #FFFFFF;
}
.ab-banner .abn-desc{
    display: block;
    max-width: 560px;
    margin: 16px 0 0 0;
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
}
.ab-banner .abn-stats{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px 20px;
    margin: 46px 0 0 0;
    padding: 34px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, .26);
}
.ab-banner .abn-stats li{
    display: block;
    flex: 1 1 0;
    min-width: 120px;
    text-align: center;
    list-style: none;
}
.ab-banner .abn-stats b{
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #FFFFFF;
}
.ab-banner .abn-stats span{
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   关于页：Our Products
   ========================================================================== */
.ab-pro{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.ab-pro li{
    display: block;
    list-style: none;
}
.ab-pro a{
    display: block;
    position: relative;
    height: 100%;
    min-height: 380px;
    border-radius: 22px;
    overflow: hidden;
    background: #2b1a4d;
}
.ab-pro img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.ab-pro a:hover img{
    transform: scale(1.05);
}
/* 底部压一层渐变遮罩，白字才压得住图 */
.ab-pro .apr-mask{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 28px 26px 28px;
    background-image: linear-gradient(180deg, rgba(23, 11, 51, 0) 0%, rgba(23, 11, 51, .74) 46%, rgba(23, 11, 51, .92) 100%);
}
.ab-pro .apr-title{
    display: block;
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
}
.ab-pro .apr-desc{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}
.ab-pro .apr-more{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #c9b6fd;
    transition: color .3s ease;
}
.ab-pro .apr-more svg{
    display: block;
    width: 15px;
    height: 15px;
    transition: transform .3s ease;
}
.ab-pro a:hover .apr-more{
    color: #FFFFFF;
}
.ab-pro a:hover .apr-more svg{
    transform: translateX(3px);
}

/* ==========================================================================
   关于页：What's New
   ========================================================================== */
.ab-newshead{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 32px;
}
.ab-newshead .title{
    display: block;
    margin: 0;
    font-size: 38px;
    line-height: 1.22;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #170b33;
}
.ab-newshead .more{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #6d28d9;
    transition: color .3s ease;
}
.ab-newshead .more svg{
    display: block;
    width: 17px;
    height: 17px;
    transition: transform .3s ease;
}
.ab-newshead .more:hover svg{
    transform: translateX(3px);
}
.ab-news{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.ab-news li{
    display: block;
    list-style: none;
}
.ab-news a{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ab-news .abn-pic{
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: var(--pg-card);
}
.ab-news .abn-pic img{
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .6s ease;
}
.ab-news a:hover .abn-pic img{
    transform: scale(1.05);
}
.ab-news .abn-date{
    display: block;
    margin: 18px 0 8px 0;
    font-size: 13px;
    letter-spacing: .04em;
    color: #908ba0;
}
.ab-news .abn-h{
    display: block;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    color: #170b33;
    transition: color .3s ease;
    /* 两行截断，卡片高度才齐 */
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ab-news a:hover .abn-h{
    color: #6d28d9;
}

/* ==========================================================================
   关于页：Our Service
   ========================================================================== */
.ab-serv{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.ab-serv li{
    display: flex;
    flex-direction: column;
    padding: 36px 32px;
    list-style: none;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
    transition: border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ab-serv li:hover{
    border-color: rgba(124, 58, 237, .28);
    background: var(--pg-card-2);
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -26px rgba(76, 29, 149, .42);
}
.ab-serv .abs-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 22px;
    border-radius: 18px;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.ab-serv .abs-ico svg{
    display: block;
    width: 28px;
    height: 28px;
}
.ab-serv .abs-title{
    display: block;
    margin: 0 0 10px 0;
    font-size: 21px;
    font-weight: 600;
    color: #1c1230;
}
.ab-serv .abs-desc{
    display: block;
    margin: 0 0 18px 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6f6a80;
}
.ab-serv .abs-link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 600;
    color: #6d28d9;
}
.ab-serv .abs-link svg{
    display: block;
    width: 15px;
    height: 15px;
    transition: transform .3s ease;
}
.ab-serv .abs-link:hover svg{
    transform: translateX(3px);
}

/* ==========================================================================
   关于页：Follow Us（一行 5 个，共 10 个）
   --------------------------------------------------------------------------
   图标形状直接复用 style.css 里给页脚定义的 .icon-* mask，
   这里只负责尺寸和配色，不再重复一遍 SVG。
   ========================================================================== */
/* 标题上下留白取齐：上方留白是 .pg-sec 的 padding-top，
   所以这里把标题的下外边距设成同一个值，各断点跟着 .pg-sec 走。 */
.ab-follow .pg-sec-head{
    margin-bottom: 56px;
}
/* 收尾留白收到 75%：原来是 .pg-sec.is-last 的 24 + .content 的 30
   + 页脚的 70 = 124px，卡片网格本身已有内边距，叠起来偏空。
   改成 12 + 30 + 51 = 93px。is-flush 只挂在 about.html 的 .content 上。 */
.ab-follow.is-last{
    padding-bottom: 12px;
}
.content.is-flush + .zs-footer{
    margin-top: 51px;
}
/* 5 列 × 222px + 4 × 26px 间距 = 1214px */
.ab-social{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    max-width: 1214px;
    margin: 0 auto;
}
.ab-social li{
    display: block;
    list-style: none;
}
/* 必须把 <a> 上的 mask 清掉：style.css 里的 .icon-xxx a 会命中这里的
   <a>，而 mask 会连同子元素一起裁剪，整张卡片都会被裁成图标的形状。
   形状只应该落在里面的 .abso-ico 上。 */
.ab-social li a{
    -webkit-mask-image: none;
    mask-image: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px 16px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
    transition: border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ab-social li a:hover{
    border-color: rgba(124, 58, 237, .3);
    background: var(--pg-card-2);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -26px rgba(76, 29, 149, .42);
}
/* 形状由 .icon-* 的 mask 给，这里给出尺寸和底色 */
.ab-social .abso-ico{
    display: block;
    width: 34px;
    height: 34px;
    background-color: #6d28d9;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: background-color .3s ease;
}
.ab-social li a:hover .abso-ico{
    background-color: #4c1d95;
}
.ab-social .abso-name{
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #1c1230;
}

/* 图文分栏：左侧正文，右侧配图 + 浮出的标注卡 */
.ab-split{
    display: flex;
    align-items: flex-start;
    gap: 60px;
}
.ab-split .as-text{
    flex: 1 1 auto;
    min-width: 0;
}
.ab-split .as-text .pg-sec-head{
    margin-bottom: 22px;
}
.ab-split .as-pic{
    flex: 0 0 44%;
    width: 44%;
    position: relative;
    /* 和左侧首段正文齐平，而不是和 h2 齐平 */
    margin-top: 8px;
    padding-bottom: 46px;
}
/* 图片背后错开一块渐变，让配图不至于孤零零贴在白底上 */
.ab-split .as-pic::before{
    content: "";
    position: absolute;
    left: 22px;
    top: -18px;
    right: -22px;
    height: 82%;
    border-radius: 24px;
    background-image: linear-gradient(150deg, #ded2fb 0%, #eae2fc 52%, #fbe9ef 100%);
}
.ab-split .as-pic figure{
    display: block;
    position: relative;
    z-index: 2;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -32px rgba(45, 16, 102, .5);
}
.ab-split .as-pic img{
    display: block;
    width: 100%;
    height: auto;
}
/* 浮在图片左下角的标注 */
.ab-split .as-badge{
    display: flex;
    align-items: center;
    gap: 14px;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 26%;
    bottom: 0;
    padding: 16px 20px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 20px 44px -22px rgba(45, 16, 102, .38);
}
.ab-split .as-badge b{
    flex: none;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    background: var(--zs-btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: #2B7FFF;
}
@supports (-webkit-text-fill-color: transparent){
    .ab-split .as-badge b{
        -webkit-text-fill-color: transparent;
    }
}
.ab-split .as-badge span{
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #4b4361;
}

/* 里程碑时间轴 */
.ab-timeline{
    display: block;
    position: relative;
    padding-left: 30px;
    margin: 0;
}

/* 收尾的 CTA。
   原来是一条通栏深色块，紧接黑色页脚，视觉上黑压黑、也和这组页面的浅紫体系脱节。
   改成一张内收的圆角渐变卡：左上浅紫 -> 右下浅粉。
   卡片直接做在 .zs-wp 上，省掉一层包裹 div，各页 HTML 不用动。 */
.pg-cta{
    display: block;
    position: relative;
    margin-top: 30px;
    padding: 10px 0 37px 0;
    background: #FFFFFF;
}
.pg-cta .zs-wp{
    position: relative;
    z-index: 2;
    max-width: 1400px;
    padding-top: 62px;
    padding-bottom: 66px;
    text-align: center;
    border-radius: 28px;
    /* 底色取 pricing 页套餐区那一段的紫（#5b21b6 ~ #a855f7），
       两角再各压一团蓝和洋红的光斑，与站内按钮渐变 --zs-btn-grad 同族。
       底色变深之后标题、描述、按钮都改成白色系，见下面几条。 */
    background-color: #7c3aed;
    background-image:
        radial-gradient(58% 82% at 10% 4%, rgba(43, 127, 255, .52) 0%, rgba(43, 127, 255, 0) 62%),
        radial-gradient(56% 86% at 93% 98%, rgba(217, 70, 239, .5) 0%, rgba(217, 70, 239, 0) 60%),
        linear-gradient(152deg,
            #5b21b6 0%,
            #6d28d9 32%,
            #7c3aed 60%,
            #8b5cf6 82%,
            #a855f7 100%);
    box-shadow: 0 30px 60px -34px rgba(76, 29, 149, .6);
    overflow: hidden;
}
/* 顶部一道很淡的白色高光，大面积纯色会显得发闷 */
.pg-cta .zs-wp::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -70%;
    width: 74%;
    height: 170%;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.pg-cta .pc-title,
.pg-cta .pc-desc,
.pg-cta .pc-btn{
    position: relative;
    z-index: 2;
}
.pg-cta .pc-title{
    display: block;
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #FFFFFF;
}
.pg-cta .pc-desc{
    display: block;
    max-width: 760px;
    margin: 14px auto 0 auto;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
}
.pg-cta .pc-btn{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}
/* 主按钮在紫底上改成实心白 + 紫字：再用 --zs-btn-grad 会跟底色糊在一起 */
.pg-cta .pc-btn a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 34px;
    font-size: 16px;
    font-weight: 600;
    color: #5b21b6;
    border: 1px solid transparent;
    border-radius: 26px;
    background: #FFFFFF;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pg-cta .pc-btn a:hover{
    color: #4c1d95;
    background: #FFFFFF;
    box-shadow: 0 14px 30px -14px rgba(12, 2, 34, .55);
}
.pg-cta .pc-btn a.ghost{
    color: #FFFFFF;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .58);
}
.pg-cta .pc-btn a.ghost:hover{
    color: #FFFFFF;
    background: rgba(255, 255, 255, .26);
    border-color: #FFFFFF;
    box-shadow: none;
}

/* ==========================================================================
   联系我们
   ========================================================================== */
.ct-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.ct-grid li{
    display: block;
    list-style: none;
}
.ct-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px 30px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
    transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.ct-card:hover{
    border-color: rgba(124, 58, 237, .28);
    background: var(--pg-card-2);
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -26px rgba(76, 29, 149, .42);
}
.ct-card .cc-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: 14px;
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.ct-card .cc-ico svg{
    display: block;
    width: 24px;
    height: 24px;
}
/* 卡片里用的是裸 h3 / p（.cc-title / .cc-desc 是设计稿里的写法，实际没用上）。
   全站有一条 h1-h6{font-weight:normal}，所以不补规则的话标题就是 400，
   和正文一样粗，层级完全出不来。数值沿用下面 .cc-title / .cc-desc 的设计值。 */
.ct-card h3{
    display: block;
    margin: 0 0 12px 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    color: #1c1230;
}
.ct-card p{
    margin: 0 0 14px 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6f6a80;
}
/* 卡片是等高的 flex 列，最后一段（邮箱）推到底部，三张卡的邮箱才会对齐成一行 */
.ct-card p:last-child{
    margin-top: auto;
    margin-bottom: 0;
}
.ct-card p a{
    font-weight: 600;
    color: #6d28d9;
}
.ct-card p a:hover{
    text-decoration: underline !important;
}
.ct-card .cc-title{
    display: block;
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #1c1230;
}
.ct-card .cc-desc{
    display: block;
    margin: 0 0 16px 0;
    font-size: 15px;
    line-height: 1.75;
    color: #6f6a80;
}
.ct-card .cc-link{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 600;
    color: #6d28d9;
}
.ct-card .cc-link svg{
    display: block;
    width: 14px;
    height: 14px;
    transition: transform .3s ease;
}
.ct-card .cc-link:hover svg{
    transform: translateX(3px);
}
.ct-card .cc-meta{
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: #908ba0;
}

/* 表单 + 侧栏信息 */
.ct-wrap{
    display: flex;
    align-items: flex-start;
    gap: 48px;
}
/* 表单壳走比卡片更浅的一档，里面的输入框才留白底：
   两层都用白的话，输入框边界只能靠 1px 描边撑，很容易看成一片空白。 */
.ct-formbox{
    flex: 1 1 auto;
    min-width: 0;
    padding: 38px 40px 40px 40px;
    border: 1px solid var(--pg-card-line);
    border-radius: 20px;
    background: var(--pg-panel);
}
/* 表单标题原来一条规则都没有，吃的是全站 h1-h6{font-weight:normal} 加 body 的
   16px，所以标题和正文一样粗、分不出层级。 */
.ct-formbox h2{
    display: block;
    margin: 0 0 24px 0;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -.01em;
    font-weight: 700;
    color: #1c1230;
}
.ct-form{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.ct-form .cf-row{
    display: block;
}
.ct-form .cf-row.is-full{
    grid-column: 1 / -1;
}
.ct-form label{
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1c1230;
}
.ct-form label .req{
    color: #C31FD1;
}
.ct-form input,
.ct-form select,
.ct-form textarea{
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
    font-family: inherit;
    color: #1c1230;
    background: #FFFFFF;
    border: 1px solid var(--pg-card-line);
    border-radius: 12px;
    outline: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.ct-form textarea{
    height: auto;
    min-height: 140px;
    padding: 14px 16px;
    line-height: 1.7;
    resize: vertical;
}
.ct-form select{
    /* 自绘箭头，各浏览器原生样式差异太大 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.1 6.5 8 10.6 4 6.5' stroke='%236f6a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}
.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus{
    border-color: rgba(124, 58, 237, .6);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .14);
}
.ct-form input::-webkit-input-placeholder,
.ct-form textarea::-webkit-input-placeholder{ color: #a5a1b0; }
.ct-form input::placeholder,
.ct-form textarea::placeholder{ color: #a5a1b0; }
.ct-form .cf-check{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #6f6a80;
}
.ct-form .cf-check input{
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: #7c3aed;
}
.ct-form .cf-check a{
    color: #6d28d9;
    font-weight: 500;
}
.ct-form .cf-check a:hover{
    text-decoration: underline !important;
}
/* 最后一行：按钮 + 隐私说明。
   两者直接放进网格的话，说明会落到第二列、从容器 50% 处才开始，左边空一大片，
   文案也被压成两行。所以包一层 .cf-foot 跨满两列，内部用 flex 让说明紧跟按钮，
   只隔一个 gap，一行就能放完。 */
.ct-form .cf-foot{
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 22px;
}
.ct-form .cf-submit{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 宽度跟着文案走：不设 width，靠 justify-self:start 摆脱网格拉伸，
       左右各留 30px 内边距 */
    width: auto;
    height: 54px;
    padding: 0 30px;
    white-space: nowrap;
    font-size: 16px;
    font-family: inherit;
    font-weight: 600;
    color: #FFFFFF;
    border: 0;
    border-radius: 27px;
    cursor: pointer;
    background: var(--zs-btn-grad);
    transition: background .3s ease;
}
.ct-form .cf-submit:hover{
    background: var(--zs-btn-grad-hover);
}
/* 隐私说明紧跟按钮，占满剩下的宽度 */
.ct-form .cf-note{
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #8a8598;
}
.ct-form .cf-note a{
    font-weight: 600;
    color: #6d28d9;
}
.ct-form .cf-note a:hover{
    text-decoration: underline !important;
}
/* 右侧：地址 / 时间 / 社媒 */
.ct-aside{
    flex: 0 0 340px;
    width: 340px;
}
/* 三段信息合并成一张卡。.ct-wrap 是 align-items:flex-start 的 flex，
   要让这一列跟左侧表单一样高，得先让侧栏拉伸、再让卡片吃满高度。 */
.ct-wrap{
    align-items: stretch;
}
.ct-aside .ca-block{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 28px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
}
/* 卡内分段：用分隔线区隔，而不是三张独立卡片 */
.ct-aside .ca-part + .ca-part{
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(124, 58, 237, .16);
}
.ct-aside .ca-note{
    margin-top: 12px;
    font-size: 14px;
    color: #908ba0;
}
.ct-aside .ca-title{
    display: block;
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1c1230;
}
.ct-aside .ca-text{
    display: block;
    margin: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.75;
    color: #6f6a80;
}
.ct-aside .ca-text a{
    color: #6d28d9;
    font-weight: 500;
}
.ct-aside .ca-text a:hover{
    text-decoration: underline !important;
}
.ct-aside .ca-list{
    display: block;
    margin: 0;
    padding: 0;
}
.ct-aside .ca-list li{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    font-size: 15px;
    list-style: none;
    color: #6f6a80;
}
.ct-aside .ca-list li span:last-child{
    color: #1c1230;
    font-weight: 500;
}

/* ==========================================================================
   联盟计划
   ========================================================================== */
/* 流程步骤 */
.af-steps{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    counter-reset: afstep;
}
.af-steps li{
    display: block;
    position: relative;
    counter-increment: afstep;
    padding: 32px 28px;
    list-style: none;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--pg-card);
}
.af-steps li::before{
    content: counter(afstep);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    border-radius: 12px;
    background: var(--zs-btn-grad);
}
.af-steps .as-title{
    display: block;
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1c1230;
}
.af-steps .as-desc{
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #6f6a80;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media only screen and (max-width:1440px){
    .pg-hero{
        padding: 50px 0 54px 0;
    }
    .pg-hero.is-solo{
        padding-top: 84px;
    }
    .pg-hero.is-noeyebrow{
        padding-top: 82px;
    }
    .pg-hero .pg-title{
        font-size: 44px;
    }
    .pg-sec-head .title{
        font-size: 34px;
    }
    .lg-layout{
        gap: 40px;
    }
    .lg-toc{
        flex: 0 0 260px;
        width: 260px;
    }
    .ab-split{
        gap: 46px;
    }
    .pg-cta .zs-wp{
        max-width: 1280px;
        padding-top: 54px;
        padding-bottom: 58px;
    }
    .pg-cta .pc-title{
        font-size: 35px;
    }
    .ct-wrap{
        gap: 36px;
    }
    .ct-aside{
        flex: 0 0 310px;
        width: 310px;
    }
}

@media only screen and (max-width:1280px){
    .pg-tabs .zs-wp{
        gap: 0 32px;
    }
    .pg-tabs a{
        font-size: 15px;
    }
    .pg-hero .pg-title{
        font-size: 38px;
    }
    .pg-hero .pg-desc{
        font-size: 17px;
    }
    .pg-sec{
        padding-top: 48px;
    }
    .ab-follow .pg-sec-head{
        margin-bottom: 48px;
    }
    .pg-sec-head .title{
        font-size: 30px;
    }
    .ab-split{
        gap: 36px;
    }
    .ab-split .as-pic{
        flex: 0 0 46%;
        width: 46%;
    }
    .ab-split .as-badge{
        right: 18%;
        padding: 14px 16px;
        gap: 12px;
    }
    .ab-split .as-badge b{
        font-size: 23px;
    }
    .ab-split .as-badge span{
        font-size: 13px;
    }
    .pg-cta{
        padding-bottom: 31px;
    }
    .pg-cta .zs-wp{
        padding-top: 46px;
        padding-bottom: 50px;
        border-radius: 24px;
    }
    .pg-cta .pc-title{
        font-size: 30px;
    }
    .lg-toc{
        flex: 0 0 232px;
        width: 232px;
    }
    .lg-body h2{
        font-size: 24px;
    }
    .ab-values{
        gap: 18px;
    }
    .ab-values li{
        padding: 28px 24px;
    }
    .af-steps{
        gap: 16px;
    }
    .af-steps li{
        padding: 26px 20px;
    }
    .ct-formbox{
        padding: 32px 30px 34px 30px;
    }
    .ct-aside{
        flex: 0 0 280px;
        width: 280px;
    }
    .pg-cta .pc-title{
        font-size: 30px;
    }
}

/* 平板：目录移到正文上方，多列降两列 */
@media only screen and (max-width:1023px){
    /* Tab 条改横向滚动：6 项挤到平板宽度会换行，换行后下划线对不上 */
    .pg-tabs .zs-wp{
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0 26px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pg-tabs a{
        flex: none;
        white-space: nowrap;
        padding: 15px 2px;
    }
    .pg-faq summary{
        font-size: 16px;
        padding: 16px 18px;
    }
    .pg-faq .pf-a{
        padding: 0 18px 18px 18px;
    }
    .pg-hero{
        padding: 40px 0 44px 0;
    }
    .pg-hero.is-solo{
        padding-top: 66px;
    }
    .pg-hero.is-noeyebrow{
        padding-top: 72px;
    }
    .pg-hero .pg-title{
        font-size: 32px;
    }
    .pg-hero .pg-desc{
        font-size: 16px;
        margin-top: 16px;
    }
    .pg-sec{
        padding-top: 40px;
    }
    .pg-sec-head{
        margin-bottom: 26px;
    }
    .pg-sec-head .title{
        font-size: 26px;
    }
    .pg-sec-head .desc{
        font-size: 15px;
    }
    .lg-layout{
        flex-direction: column;
        gap: 28px;
        padding-top: 34px;
    }
    /* 粘性目录在窄屏没有意义（会挡住正文），改成正文上方的普通块 */
    .lg-toc{
        position: static;
        flex: 0 0 100%;
        width: 100%;
        padding: 22px 24px;
        border-radius: 14px;
        background: var(--pg-panel);
        border: 1px solid #ece9f5;
    }
    .lg-toc ol{
        border-left: 0;
        column-count: 2;
        column-gap: 24px;
    }
    .lg-toc a{
        padding: 7px 0;
        margin-left: 0;
        border-left: 0;
    }
    .lg-toc a.on{
        border-left: 0;
    }
    .lg-body{
        max-width: none;
        font-size: 15px;
    }
    .lg-body h2{
        font-size: 22px;
    }
    .lg-body h3{
        font-size: 18px;
    }
    .ab-values,
    .ct-grid,
    .af-steps{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ab-follow .pg-sec-head{
        margin-bottom: 40px;
    }
    /* 10 个社媒卡在平板保持一行 5 个，只收紧间距和内边距 */
    .ab-social{
        gap: 20px;
    }
    .ab-social li a{
        gap: 11px;
        padding: 22px 10px;
    }
    .ab-social .abso-ico{
        width: 28px;
        height: 28px;
    }
    .ab-social .abso-name{
        font-size: 13.5px;
    }
    /* 图文分栏改上下堆叠，配图放到正文上方 */
    .ab-split{
        flex-direction: column;
        gap: 28px;
    }
    .ab-split .as-pic{
        flex: none;
        width: 100%;
        order: -1;
        margin-top: 0;
        padding-bottom: 40px;
    }
    .ab-split .as-pic::before{
        left: 16px;
        right: -16px;
        top: -12px;
    }
    .ab-split .as-badge{
        right: 28%;
    }
    .ct-wrap{
        flex-direction: column;
        gap: 24px;
    }
    .ct-aside{
        flex: 0 0 100%;
        width: 100%;
    }
    .pg-cta{
        margin-top: 23px;
        padding: 6px 0 25px 0;
    }
    .pg-cta .zs-wp{
        padding-top: 38px;
        padding-bottom: 42px;
        border-radius: 20px;
    }
    .pg-cta .pc-title{
        font-size: 26px;
    }
    .pg-cta .pc-desc{
        font-size: 15px;
    }
}

/*Mobile v1*/
@media only screen and (max-width:767px){
.pg-tabs .zs-wp{
    gap: 0 20px;
}
.pg-tabs a{
    padding: 13px 2px;
    font-size: 14px;
}
.pg-faq summary{
    font-size: 15px;
    padding: 14px 16px;
    gap: 12px;
}
.pg-faq summary::after{
    width: 19px;
    height: 19px;
}
.pg-faq .pf-a{
    padding: 0 16px 16px 16px;
    font-size: 14px;
}
.pg-hero{
    padding: 18px 0 34px 0;
}
.pg-hero.is-solo{
    padding-top: 44px;
}
/* 手机上胶囊是 28px 高 */
.pg-hero.is-noeyebrow{
    padding-top: 46px;
}
.ab-split{
    gap: 22px;
}
.ab-split .as-pic{
    padding-bottom: 34px;
}
.ab-split .as-pic::before{
    left: 12px;
    right: -12px;
    top: -10px;
    border-radius: 18px;
}
.ab-split .as-pic figure{
    border-radius: 16px;
}
.ab-split .as-badge{
    right: 12%;
    padding: 13px 15px;
    gap: 11px;
    border-radius: 14px;
}
.ab-split .as-badge b{
    font-size: 21px;
}
.ab-split .as-badge span{
    font-size: 12.5px;
}

.pg-hero .pg-title{
    font-size: 25px;
    margin-top: 14px;
}
.pg-hero .pg-desc{
    font-size: 15px;
    line-height: 1.7;
    margin-top: 14px;
}
.pg-updated{
    margin-top: 16px;
    font-size: 13px;
}
.pg-sec{
    padding-top: 32px;
}
.pg-sec-head{
    margin-bottom: 20px;
}
.pg-sec-head .title{
    font-size: 21px;
}
.pg-sec-head .desc{
    font-size: 14px;
    margin-top: 10px;
}
.lg-layout{
    gap: 22px;
    padding-top: 26px;
}
.lg-toc{
    padding: 18px 18px;
}
.lg-toc ol{
    column-count: 1;
}
.lg-toc a{
    font-size: 14px;
}
.lg-body{
    font-size: 15px;
    line-height: 1.8;
}
.lg-body .lg-sec{
    padding-bottom: 28px;
    scroll-margin-top: 76px;
}
.lg-body .lg-sec + .lg-sec{
    padding-top: 28px;
}
.lg-body h2{
    font-size: 19px;
    margin-bottom: 12px;
}
.lg-body h3{
    font-size: 17px;
    margin-top: 22px;
}
.lg-note{
    padding: 16px 18px;
    font-size: 14px;
}
.lg-contact{
    padding: 20px 20px;
    gap: 14px;
}
.lg-contact .lc-btn{
    width: 100%;
}
.ab-follow .pg-sec-head{
    margin-bottom: 32px;
}
/* 手机上页脚本来就只留 20px，别被上面那条 51px 盖掉 */
.ab-follow.is-last{
    padding-bottom: 8px;
}
.content.is-flush + .zs-footer{
    margin-top: 20px;
}
/* 手机上一行 5 个太挤，改一行 2 个（5 行） */
.ab-social{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ab-social li a{
    gap: 12px;
    padding: 20px 12px;
    border-radius: 14px;
}
.ab-social .abso-ico{
    width: 26px;
    height: 26px;
}
.ab-social .abso-name{
    font-size: 13.5px;
}
.ab-values,
.ct-grid,
.af-steps{
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
.ab-values li,
.ct-card,
.af-steps li{
    padding: 24px 20px;
}
.ab-values .av-ico,
.ct-card .cc-ico{
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
}
.ab-values .av-title,
.ct-card .cc-title{
    font-size: 18px;
}
.ct-formbox{
    padding: 24px 20px 26px 20px;
    border-radius: 16px;
}
.ct-form{
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.ct-form input,
.ct-form select{
    height: 46px;
}
.ct-form .cf-submit{
    width: 100%;
    height: 50px;
    padding: 0 20px;
}
.ct-aside .ca-block{
    padding: 20px 20px;
}
.pg-cta{
    margin-top: 17px;
    padding: 4px 0 20px 0;
}
.pg-cta .zs-wp{
    padding-top: 30px;
    padding-bottom: 32px;
    border-radius: 16px;
}
.pg-cta .pc-title{
    font-size: 21px;
}
.pg-cta .pc-desc{
    font-size: 14px;
}
.pg-cta .pc-btn{
    margin-top: 22px;
    gap: 10px;
}
.pg-cta .pc-btn a{
    width: 100%;
    height: 48px;
    padding: 0 20px;
}
}

/* --------------------------------------------------------------------------
   .ca-list 里的值可能是一句短句而不是一个词，右对齐让换行看起来是有意为之；
   值里的链接跟 .ca-text a 用同一套颜色，否则会继承 li 的灰色、看不出可点。
   -------------------------------------------------------------------------- */
.ct-aside .ca-list li span:last-child{
    flex: 1 1 auto;
    text-align: right;
}
.ct-aside .ca-list li span:last-child a{
    color: #6d28d9;
    font-weight: 500;
}
.ct-aside .ca-list li span:last-child a:hover{
    text-decoration: underline !important;
}