/* ============================================================
 * 秒碰营销 V2 样式（pengyipeng.html）
 * 设计稿：设计稿/画板/超级节点-秒碰营销@2x.png（1920×8121 @1x 基准）
 * 标注来源：蓝湖标注（2026-09 读取）+ 画板像素实测复核
 *   页面底色 #FFFFFF；模块标题用切图（48.5 高居中）；按钮 166×53 #416BF5 字 18 Bold；
 *   挑战卡 341×471 间隙 28（切图含四边 15px 透明边）；能力卡 333×193 间隙 17/15；
 *   优势卡 683×296 间隙 17；场景白卡 303×296（切图含透明边 45/41）间隙 30；
 *   收益卡 344×525 间隙 17；CTA 标题 40/56 #3D3D3D 副标题 22/31 #3D3D3D；
 *   FAQ 整卡 1427×669
 * 模块 y 坐标（画板含头部 100）：hero100-740 钮(242,570) / 挑战背景740-1746 标题873
 *   轮播1025-1496 箭头1612 / 价值标题1830 卡1981-2682 / 能力标题2855 网格2989-3598 /
 *   优势标题3782 网格3931-4540 / 场景标题4751 横幅4916-5212 卡5079-5375 /
 *   收益标题5559 卡5703-6228 说明行6264 / CTA6401-6770 / FAQ6855-7524 / 页脚7609
 * 规范：《重构规则.md》十一/十二/十三/十五/十六章节
 * ========================================================== */

/* ---------- 页面底色：蓝湖画板背景 #F5F5F7（第十五章第3条） ---------- */
body.pyp-page {
    background-color: #F5F5F7;
}

/* ---------- 卡片内层（第十三章：放大由外层 .card-zoom 负责，内图不放大零裁切） ---------- */
.pyp-zoom {
    overflow: hidden;
}
.pyp-zoom > img {
    width: 100%;
}

/* ---------- 本页按钮字重/字号（蓝湖 18 Bold） ---------- */
.pyp-page .btn-primary {
    font-size: 18px;
    font-weight: 700;
}

/* ============================================================
 * M1 Hero：1920×640 全宽整图（切图含标题/副标题/正文）+ 代码按钮
 *   2026-09-28 换图（组158589，3840×1280 同尺寸）：新图内文字块位置未变，
 *   按截图实测按钮顶相对 hero ≈472~488、左缘 ≈242，与下方现有值一致 → 仅换图不动坐标
 * ========================================================== */
.pyp-hero {
    position: relative;
}
.pyp-hero-bg {
    width: 100%;
    display: block;
}
.pyp-hero-btn {
    position: absolute;
    /* 下限 = @1200 值，与 body{min-width:1200} 冻结后的整图同基准（详见 guide.css .guide-hero-btn 注释） */
    left: max(151.2px, 12.604vw); /* 242px @1920，跟随整图比例 */
    top: max(293.7px, 24.479vw); /* (570-100)=470px @1920 */
}

/* ============================================================
 * M2 挑战：整幅背景（1920×1006）+ 标题切图 + 4 卡手动轮播（task 式箭头）
 * ========================================================== */
.pyp-ch {
    position: relative;
    padding: clamp(83px, 6.927vw, 133px) 0 clamp(57px, 4.74vw, 91px); /* 标题 y873-背景顶 740=133；背景底 1746-箭头底 1655=91 */
}
.pyp-ch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
.pyp-ch-inner {
    position: relative;
}
.pyp-ch-title {
    display: block;
    width: clamp(580px, 40.208vw, 772px); /* 蓝湖标题图 772×48.5 */
    margin: 0 auto;
}
.pyp-ch-viewport {
    margin-top: calc(clamp(78px, 5.391vw, 103.5px) - 12px); /* 轮播顶 y1025-标题底 921.5=103.5，-12 为 hover 放大缓冲补偿 */
    /* 苹果官网完整模式（2026-09-18 用户裁决）：viewport 左右均出血至屏幕边缘（1920 封顶）；padding-left = 内容区边距，默认首卡左缘仍对齐内容区左缘（与标题齐平）；滚动时整轨左移，卡片滑过左侧出血区、在屏幕左缘才被裁（可轮播到最左边，禁止在内容区左缘就裁没）；末端末卡右缘对齐内容区右缘 */
    margin-left: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    margin-right: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    /* hover 整卡放大缓冲：上下 12px；padding-left 为内容区边距（默认首卡定位用，JS 对包裹透明） */
    padding: 12px 0 12px calc(max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px);
    margin-bottom: -12px;
    overflow: hidden;
}
.pyp-ch-track {
    display: flex;
    gap: 28px; /* 画板卡 1 x246、卡 5 x1722 → 步长 369 = 卡 341 + 间隙 28 */
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}
.pyp-ch-track > .card-zoom {
    flex: 0 0 clamp(256px, 17.76vw, 341px); /* 蓝湖卡 341×471 */
    aspect-ratio: 341 / 471;
}
.pyp-ch-card {
    width: 100%;
    height: 100%;
}
.pyp-ch-card > img {
    width: 108.798%; /* 742/682：卡 1-4 切图四边 15px 透明边补偿 */
    margin: -4.399% 0 0 -4.399%; /* -15/341 */
    max-width: none;
}
/* 卡 5/6 为新版切图（682×942 / 690×950），四边无透明边：不做 8.8% 放大补偿，
   否则图被撑大、圆角被裁成直角、底部露出图边缘灰边 */
.pyp-ch-card > img.pyp-ch-img-full {
    width: 100%;
    margin: 0;
}
/* 卡 6 右/下侧仍含约 4px@2x 透明边：微放大 0.9% 将其裁掉，避免底部透出灰边 */
.pyp-ch-card > img.pyp-ch-img-6 {
    width: 100.9%;
}
/* 轮播箭头：全站共用 task 页方案（img 切图 + 禁用态降透明度），按钮宽 48px */
.pyp-ch-arrows {
    margin-top: clamp(43.5px, 3.021vw, 58px); /* 原 clamp(87px, 6.042vw, 116px)（箭头顶 y1612-卡底 1496=116），用户裁决上移为原间距的 0.5 倍 */
    display: flex;
    justify-content: flex-end;
}
.pyp-ch-prev,
.pyp-ch-next {
    width: 48px; /* 原 40px，用户裁决放大 0.2 倍 */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.pyp-ch-prev + .pyp-ch-next {
    margin-left: 24px; /* 原 48px，用户裁决缩小两按钮间距 */
}
.pyp-ch-prev img,
.pyp-ch-next img {
    width: 100%;
    height: auto;
    display: block;
}
.pyp-ch-prev img {
    transform: scaleX(-1); /* 左箭头 = 右箭头镜像 */
}
.pyp-ch-prev:disabled,
.pyp-ch-next:disabled {
    opacity: .35; /* 禁用态 = 设计稿浅灰箭头 */
    cursor: default;
}

/* ============================================================
 * M3 产品价值：标题切图 + 统一灰底大卡（左文右图手风琴，左右等高），模块底色 #FFFFFF
 * 蓝湖标注（矩形 12622）：整卡 1397×703 @ x261 y1981（(1920-1397)/2=261.5 居中）、#F5F5F7、
 *   圆角 30；图区 897×703 贴齐卡上/右/下缘（切图 pyp-value-1~4 正好 897×703）；
 *   标题 40/56 PingFang SC-Bold #1B1B1B；标签 16/25.6 PingFang SC-Medium #19C167；
 *   小字 16/32.16 PingFang SC-Bold #3D3D3D；设计箭头：展开态 ∨、收起态 ∧
 * ========================================================== */
.pyp-value {
    background-color: #FFFFFF; /* 用户裁决：产品价值模块底色纯白 */
    padding-top: clamp(64px, 4.479vw, 86px); /* 标题 y1830-挑战背景底 1746=86 */
    padding-bottom: clamp(80px, 5.99vw, 115px);
    text-align: center;
}
.pyp-value-title {
    display: block;
    width: clamp(152px, 10.521vw, 202px); /* 蓝湖标题图 202×48.5 */
    margin: 0 auto;
}
/* ---------- 整卡：1397×703 统一灰底圆角 30，窄于 1428 容器直接 margin auto 居中；左文右图 flex 等高 ---------- */
.pyp-acc {
    width: clamp(873px, 72.76vw, 1397px); /* 1397/1920 */
    height: clamp(439px, 36.615vw, 703px); /* 703/1920，定高 → 左右恒等高 */
    margin: clamp(64px, 5.313vw, 102px) auto 0; /* 卡顶 y1981-标题底 1878.5≈102 */
    display: flex;
    align-items: stretch; /* 关键：左栏与右图高度一致 */
    background-color: #F5F5F7; /* 左文字区背景色与右图连成一整张卡 */
    border-radius: clamp(19px, 1.563vw, 30px); /* 蓝湖圆角 30 */
    overflow: hidden; /* 右图贴卡缘，由卡裁出右上/右下圆角 */
    text-align: left;
}
/* ---------- 左栏：文字区 flex 1，四项 space-evenly 从上到下均匀排列 ---------- */
.pyp-acc-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* 四项均匀分布，上下留白与间距均等 */
    height: 100%;
    padding-left: clamp(64px, 5.313vw, 102px); /* 画板实测文字左缘-卡左缘 102 */
    padding-right: clamp(25px, 2.083vw, 40px);
}
.pyp-acc-item {
    /* 无单独底色：四项直接落在整卡灰底上 */
}
.pyp-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 标题居左、箭头统一居列表右缘 */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.pyp-acc-name {
    font-size: clamp(25px, 2.083vw, 40px); /* 40/1920 */
    line-height: clamp(35px, 2.917vw, 56px); /* 56/1920 */
    font-weight: 700; /* PingFang SC-Bold */
    color: #1B1B1B; /* 蓝湖标注：展开/收起标题均为 #1B1B1B，不变绿 */
}
.pyp-acc-arrow {
    width: clamp(16px, 1.146vw, 22px);
    height: auto;
    flex: 0 0 auto;
    transition: transform .3s ease;
}
.pyp-acc-item.is-active .pyp-acc-arrow {
    transform: rotate(180deg); /* 蓝湖设计：收起态显示 ∧（up 图），展开态翻转为 ∨ */
}
/* ---------- 折叠内容：默认收起；固定高度过渡（非 max-height），展开 0→138 与收起 138→0 完全同步，
   两项总高恒定 → space-evenly 均布间隔不变，左栏不平移不跳动 ---------- */
.pyp-acc-body {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .35s ease, opacity .3s ease, margin-top .35s ease;
    margin-top: 0;
}
.pyp-acc-item.is-active .pyp-acc-body {
    /* 标签行高 25.6 + 标签-小字间距 16 + 小字 3 行×32.16 = 138.08，与内容精确等高 */
    height: calc(clamp(16px, 1.333vw, 25.6px) + clamp(10px, 0.833vw, 16px) + clamp(20px, 1.675vw, 32.16px) * 3);
    opacity: 1;
    margin-top: clamp(10px, 0.833vw, 16px); /* 标题-标签间距 16，同步过渡 */
}
.pyp-acc-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 0.417vw, 8px) clamp(12px, 0.938vw, 18px);
    padding: 0;
    margin: 0 0 clamp(10px, 0.833vw, 16px); /* 标签-小字间距 16 */
}
.pyp-acc-tags li {
    position: relative;
    padding-left: clamp(14px, 1.042vw, 20px);
    font-size: clamp(10px, 0.833vw, 16px); /* 16/1920 */
    line-height: clamp(16px, 1.333vw, 25.6px); /* 25.6/1920 */
    font-weight: 500; /* PingFang SC-Medium */
    color: #19C167; /* 蓝湖标注绿字 */
}
.pyp-acc-tags li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: clamp(8px, 0.677vw, 13px); /* 勾图标切图 26×26@2x → 13 */
    height: clamp(8px, 0.677vw, 13px);
    margin-top: calc(clamp(8px, 0.677vw, 13px) / -2);
    background: url('https://qnoss.supernode.pro/supernode/pc/static/images/v2/pengyipeng/pyp-check.png') no-repeat center / contain; /* 绿色对勾 */
}
.pyp-acc-desc {
    margin: 0;
    max-width: clamp(210px, 17.5vw, 336px); /* 蓝湖小字块宽 336，三行硬断 */
    font-size: clamp(10px, 0.833vw, 16px); /* 16/1920 */
    line-height: clamp(20px, 1.675vw, 32.16px); /* 32.16/1920 */
    font-weight: 700; /* PingFang SC-Bold */
    color: #3D3D3D;
}
/* ---------- 右图：897×703 图区贴齐卡上/右/下缘（切图正好 897×703），卡圆角裁切，4 图叠放 ---------- */
.pyp-acc-figure {
    position: relative;
    flex: 0 0 clamp(561px, 46.719vw, 897px); /* 897/1920 */
    height: 100%; /* 与左栏等高，贴齐卡上下缘 */
}
.pyp-acc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 铺满图区，与灰卡连成一体 */
    opacity: 0;
    transition: opacity .6s ease-in-out; /* 纯交叉淡入淡出，无位移动画，切换不抖动 */
}
.pyp-acc-img.is-active {
    opacity: 1;
}

/* ============================================================
 * M4 产品能力：标题切图 + 12 卡网格（333×193，间隙 17/15，网格 1383 居中）
 * ========================================================== */
.pyp-ability {
    padding-top: clamp(130px, 9.011vw, 173px); /* 标题 y2855-价值卡底 2682=173 */
    text-align: center;
}
.pyp-ability-title {
    display: block;
    width: clamp(149px, 10.339vw, 198.5px); /* 蓝湖标题图 198.5×48.5 */
    margin: 0 auto;
}
.pyp-ab-grid {
    width: clamp(1038px, 72.032vw, 1383px); /* 蓝湖网格 x269-1652 */
    margin: clamp(64px, 4.453vw, 85.5px) auto 0; /* 网格顶 y2989-标题底 2903.5=85.5 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 17px; /* 蓝湖行距 15 / 列距 17 */
}
/* 能力卡网格：尺寸由 grid 定，无需额外规则 */

/* ============================================================
 * M5 产品优势：白色通栏背景（2026-09-18 用户裁决，蓝湖该模块为 #FFFFFF 通栏）；标题切图 + 2×2 整卡（683×296，间隙 17）
 * 蓝湖坐标：能力网格底 3598 / 标题 3782 / 网格底 4540 / 场景标题 4751；白区顶 3696、底 4659（画板像素实测），标题与网格位置不变
 * ========================================================== */
.pyp-adv {
    margin-top: clamp(73px, 5.104vw, 98px); /* 灰间隙（画板实测）：能力网格底 3598 → 白区顶 3696=98 */
    padding: clamp(64px, 4.479vw, 86px) 0 clamp(89px, 6.198vw, 119px); /* 白内（画板实测）：上 3696→优势标题 3782=86；下 网格底 4540→白区底 4659=119（原 184=98+86 / 211=119+92 拆分，内容位置不变） */
    background-color: #FFFFFF;
    text-align: center;
}
.pyp-adv-title {
    display: block;
    width: clamp(152px, 10.547vw, 202.5px); /* 蓝湖标题图 202.5×48.5 */
    margin: 0 auto;
}
.pyp-adv-grid {
    width: clamp(1038px, 72.032vw, 1383px);
    margin: clamp(75px, 5.234vw, 100.5px) auto 0; /* 网格顶 y3931-标题底 3830.5=100.5 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px; /* 与能力网格同列体系：x269/x969 */
}

/* ============================================================
 * M6 业务应用场景：标题切图 + 绿横幅整条（1383×296）+ 4 白卡叠放
 * ========================================================== */
.pyp-scene {
    padding-top: clamp(69px, 4.792vw, 92px); /* 灰间隙（画板实测）：M5 白区底 4659 → 场景标题 y4751=92（原 211 = 119+92 拆分，标题位置不变） */
    padding-bottom: clamp(122px, 8.49vw, 163px); /* 2026-09-18 修正：场景白卡绝对定位，向下溢出横幅 163（卡底 5375 - 横幅底 5212）；预留该溢出使 section 底=卡底，否则下方 .pyp-benefit 白通栏（margin-top 104 以横幅底为基准）会整体上移 163 盖住卡片下半截 */
    text-align: center;
}
.pyp-sc-title {
    display: block;
    width: clamp(228px, 15.834vw, 304px); /* 蓝湖标题图 304×48.5 */
    margin: 0 auto;
}
.pyp-sc-wrap {
    position: relative;
    width: clamp(1038px, 72.032vw, 1383px);
    margin: clamp(87px, 6.068vw, 116.5px) auto 0; /* 横幅顶 y4916-标题底 4799.5=116.5 */
}
.pyp-sc-banner {
    width: 100%;
    display: block;
}
.pyp-sc-grid {
    position: absolute;
    top: 55.07%; /* 卡顶 y5079-横幅顶 4916=163 → 163/296 */
    left: 2.965%; /* 41/1383 */
    width: 94.07%; /* (1383-81)/1383：左右缩进 41/40 */
    display: flex;
    justify-content: space-between;
}
.pyp-sc-grid > .card-zoom {
    width: 23.29%; /* 303/1301 */
    aspect-ratio: 303 / 296; /* 蓝湖白卡 303×296 */
}
.pyp-sc-card {
    width: 100%;
    height: 100%;
}
.pyp-sc-card > img {
    width: 129.373%; /* 784/2/303：@2x 精确显示（四张切图实测 784/786×772） */
    margin: -13.531% 0 0 -14.851%; /* 白卡本体边界实测：上 82、左 90（@2x）→ 上 -41/303、左 -45/303，四边阴影晕带全部裁掉 */
    max-width: none;
}

/* ============================================================
 * M7 客户收益：标题切图 + 4 渐变卡（344×525，间隙 17）+ 底部说明行
 * ========================================================== */
.pyp-benefit {
    margin-top: clamp(78px, 5.417vw, 104px); /* 灰间隙（画板实测）：场景卡底 5375 → 白区顶 5479=104 */
    padding: clamp(60px, 4.167vw, 80px) 0 clamp(78px, 5.469vw, 105px); /* 白内（画板实测）：上 5479→收益标题 5559=80；下 说明行底 6296→白区底 6401=105（原 padding-top 184 = 104+80 拆分，标题位置不变） */
    background-color: #FFFFFF;
    text-align: center;
}
.pyp-benefit-title {
    display: block;
    width: clamp(152px, 10.521vw, 202px); /* 蓝湖标题图 202×48.5 */
    margin: 0 auto;
}
.pyp-bn-grid {
    margin-top: clamp(72px, 4.974vw, 95.5px); /* 卡顶 y5703-标题底 5607.5=95.5 */
    display: flex;
    justify-content: space-between;
}
.pyp-bn-grid > .card-zoom {
    width: calc((100% - 51px) / 4); /* 344 @1428，间隙 17 */
}
.pyp-bn-note {
    margin: clamp(27px, 1.875vw, 36px) auto 0; /* 说明行 y6264-卡底 6228=36 */
    font-size: clamp(15px, 1.042vw, 20px); /* 蓝湖 20 Bold #2A2A2A 居中 */
    font-weight: 700;
    line-height: clamp(24px, 1.667vw, 32px);
    color: #2A2A2A;
}

/* ============================================================
 * M8 CTA：浅蓝波浪背景整幅（1920×369）+ 代码文字 + 代码按钮
 * ========================================================== */
.pyp-cta {
    position: relative;
    margin-top: 0; /* 2026-09-18：M7 白区底 6401 与 CTA 顶 6401 齐平（画板实测），原 105 间隙并入 .pyp-benefit 白内下边距 */
    padding: clamp(65px, 4.479vw, 86px) 0 clamp(71px, 4.896vw, 94px); /* 标题 y6487-区顶=86；区底 6770-按钮底 6676=94 */
    text-align: center;
}
.pyp-cta-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pyp-cta-title {
    position: relative;
    font-size: clamp(25px, 2.083vw, 40px); /* 蓝湖 40/56 Heavy #3D3D3D */
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #3D3D3D;
}
.pyp-cta-sub {
    position: relative;
    margin-top: clamp(8px, 0.573vw, 11px); /* 副标题 y6554-标题底 6543=11 */
    font-size: clamp(14px, 1.146vw, 22px); /* 蓝湖 22/31 #3D3D3D */
    font-weight: 500;
    line-height: clamp(20px, 1.615vw, 31px);
    color: #3D3D3D;
}
.pyp-cta-btn {
    position: relative;
    margin-top: clamp(29px, 1.979vw, 38px); /* 按钮 y6623-副标题底 6585=38 */
}

/* ============================================================
 * M9 常见问题：白色通栏背景（2026-09-18 用户裁决，画板实测白区 6770→7609）；1427×669 整卡切图（含标题与三组问答）
 * 白区顶 6770=CTA 底（无灰间隙）、白区底 7609=页脚顶（无灰间隙）；整卡 6855-7524 → 上下白内各 85
 * ========================================================== */
.pyp-faq {
    padding: clamp(64px, 4.427vw, 85px) 0; /* 白内（画板实测）：上 CTA底 6770→整卡顶 6855=85；下 整卡底 7524→页脚顶 7609=85 */
    background-color: #FFFFFF;
}
.pyp-faq img {
    display: block;
    width: clamp(892px, 74.323vw, 1427px);
    margin: 0 auto;
}