/* ============================================================
 * 支付营销 V2 样式（pay.html）
 * 设计稿：设计稿/画板/超级节点-支付营销@2x.png（画板 1920×9075 @2x → 1x 基准 9075/2≈4537 高）
 * 取数：蓝湖详情页逐图层标注（2026-09，第十五章第 1/3/9 条：逐条算准一次写对，计算依据写进注释）
 * clamp 约定：设计值 D px@1920 → clamp(round(D*0.625)px, (D/19.2)vw, Dpx)，min 对应 1200 视口
 * ========================================================== */

/* ---------- 页面通底：蓝湖像素扫描 #F5F5F7（第十五章第3条：body 唯一默认底色） ---------- */
body.pay-page {
    background-color: #F5F5F7;
}

/* ---------- 章节大标题：全站统一 51.38/72 Heavy #1D1D1F 居中 ---------- */
.pay-title {
    margin: 0 auto;
    font-size: clamp(32px, 2.676vw, 51.38px);
    font-weight: 700;
    line-height: clamp(45px, 3.75vw, 72px);
    color: #1D1D1F;
    text-align: center;
}

/* ---------- 卡片内层：整卡烘焙图，外层 .card-zoom 负责 hover 放大（第十三章） ---------- */
.pay-zoom {
    overflow: hidden;
    border-radius: 16px;
}
.pay-zoom > img {
    width: 100%;
    display: block;
}

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

/* ============================================================
 * M1 Hero：浅紫蓝底 + 整幅切图（左 eyebrow/主标题/描述 + 右插画均烘焙图内）
 *           代码按钮定位（蓝湖 组158123 x247 y570，hero 顶 y100 → offset 470）
 * ========================================================== */
.pay-hero {
    position: relative;
    background-color: #F0EEFC; /* Hero 段底色，整图已含，兜底防边缘缝隙 */
    overflow: hidden;
}
.pay-hero-bg {
    width: 100%;
    display: block;
}
/* left = 247/1920 = 12.865vw；top = (570-100)/1920 = 24.479vw */
.pay-hero-btn {
    position: absolute;
    left: 12.865vw;
    top: 24.479vw;
}

/* ============================================================
 * M2 终端营销难题：通底 + 代码标题 + 错落叠卡整图（组158581 1427×853）
 * ========================================================== */
.pay-pain {
    padding-top: clamp(83px, 6.927vw, 133px);
}
.pay-pain .pay-title {
    margin-bottom: clamp(50px, 4.167vw, 80px);
}
.pay-pain-img {
    width: 100%;
    display: block;
}

/* ============================================================
 * M3 什么是MFA-支付营销：通底 + 代码标题/正文 + NFC 流程图整图（组158582 1427×771）
 * ========================================================== */
.pay-what {
    padding-top: clamp(123px, 10.208vw, 196px);
    text-align: center;
}
.pay-what .pay-title {
    margin-bottom: clamp(24px, 2vw, 38px);
}
/* 正文 18/27.7 Bold #6D6D6D；三行断点按蓝湖写死为 <br />（支付环节自 / 门店收银硬件，），末行居中
 * 【缩放基准一致性】max-width / font-size / line-height 三者必须同一套 clamp(1920 基准)：
 *   旧实现字号固定 18px + max-width 固定 1239px，而 .container 内容宽 = min(100vw,1476)-48，
 *   视口 <1287 时可用宽 < 行1 自然宽 1228.6 → 行1/行2 各自再折一行（实测 1152 宽时变 5 行，断点错乱）。
 *   三者同比例缩放后，任意视口下行1 自然宽恒 ≤ max-width，<br /> 断点与 1920 设计一致（蓝湖框宽 1239 → 64.531vw）*/
.pay-what-p {
    margin: 0 auto;
    max-width: clamp(774px, 64.531vw, 1239px);
    font-size: clamp(11.25px, 0.9375vw, 18px);
    font-weight: 700;
    line-height: clamp(17.31px, 1.443vw, 27.7px);
    color: #6D6D6D;
    text-align: center;
}
.pay-flow-img {
    margin-top: clamp(25px, 2.083vw, 40px);
    width: 100%;
    display: block;
}

/* ============================================================
 * M4 可以帮您解决什么：通底 + 代码标题 + 6 行整图横条（组158754~158759 各 1428×370，gap25）
 * ========================================================== */
.pay-solve {
    padding-top: clamp(128px, 10.677vw, 205px);
}
.pay-solve .pay-title {
    margin-bottom: clamp(51px, 4.219vw, 81px);
}
.pay-solve-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.pay-solve-row {
    width: 100%;
    display: block;
    border-radius: 16px;
}

/* ============================================================
 * M5 将获得的业务价值：通底 + 代码标题 + 5 深色卡
 *    组158760~158764：四角各 459×389，中间 158762 跨两行 459×803
 *    列宽 459×3 + gap24×2 = 1425 ≈ 1428 ✓
 * ========================================================== */
.pay-value {
    padding-top: clamp(127px, 10.573vw, 203px);
}
.pay-value .pay-title {
    margin-bottom: clamp(57px, 4.74vw, 91px);
}
.pay-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "tl mid tr"
        "bl mid br";
    column-gap: 24px;
    row-gap: 25px;
}
.pay-v-tl { grid-area: tl; }
.pay-v-mid { grid-area: mid; }
.pay-v-tr { grid-area: tr; }
.pay-v-bl { grid-area: bl; }
.pay-v-br { grid-area: br; }
/* 中间卡跨两行 → 撑满整格高度，图 aspect 自然（459×803） */
.pay-v-mid .pay-zoom {
    height: 100%;
}
.pay-v-mid .pay-zoom > img {
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * M6 业务应用场景：通底 + 代码标题 + 6 浅色卡（组158765~158771 各 459×315，3×2）
 * ========================================================== */
.pay-scene {
    padding-top: clamp(127px, 10.573vw, 203px);
}
.pay-scene .pay-title {
    margin-bottom: clamp(50px, 4.167vw, 80px);
}
.pay-scene-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    row-gap: 28px;
}

/* ============================================================
 * M7 CTA：白色通栏（蓝湖 矩形796 y8194 高369/2≈185）+ 代码标题/按钮（无副标题）
 * ========================================================== */
.pay-cta {
    margin-top: clamp(126px, 10.521vw, 202px);
    background-color: #FFFFFF;
    padding: clamp(70px, 5.833vw, 112px) 0 clamp(69px, 5.781vw, 111px);
    text-align: center;
}
.pay-cta-title {
    margin: 0 auto;
    font-size: clamp(25px, 2.083vw, 40px);
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #1D1D1F;
}
.pay-cta-btn {
    margin-top: clamp(24px, 2vw, 40px);
}
.pay-cta-btn .btn-primary {
    display: inline-flex;
}