@charset "utf-8";
/* ==========================================================================
   版式 v3 · 内容排版层（rich-v3）—— 内容型单页专用的图文排版块
   （2026-10-02 新增：给「网站建设 / 手机网站 / 联系我们」这类需要图文混排的单页用）

   ★ 为什么单独开一个文件，而不是写进 inner-v3.css？
     前者是「内页框架」（页头带、面包屑、列表、翻页），每个内页都要；
     这里是一组「内容积木」（卡片、流程、数据、对比表、联系卡），
     只有内容型单页会用。分开后 inner-v3.css 不被撑大，职责也清楚。

   ★★ 全部颜色走 --lv-* 变量，一个色值都不硬编码 ——
      于是后台切到「公安蓝」皮肤时，这一整层内容会**自动变蓝**，
      不需要为每个皮肤各写一份。这是它必须挂在变量上、而不是写死颜色的唯一原因。

   ★ 命名的两条纪律（与 inner-v3.css 一致）：
     1) 一律 lv-rich- 前缀，绝不与原站老 class 撞名；
        老样式表里有 .content / .main / .card 这类常见名，撞上就会互相污染。
     2) 与老规则可能冲突的地方（a / table / ul / h2…），选择器前面挂 body.lv-v3，
        把权重提到 (0,2,x)，压过 ny.css 的 `a:link{color:#333}` (0,1,1)；
        不冲突的地方保持裸类名，免得选择器普遍过长、以后难覆盖。

   ★ 排版重置：ny.css 第 2 行有全站性的 `*{margin:0;padding:0}`，
     所以这里每一处间距都显式声明，不存在"浏览器默认值帮忙"这回事。

   ★ 加载顺序：home-v3.css → inner-v3.css → rich-v3.css → responsive.css → skin-*.css
     （见 src/front/index.js 的 INNER_CSS；皮肤永远最后，只覆盖变量）
   ========================================================================== */

/* ==========================================================================
   1) 根容器与分节
   ========================================================================== */
.lv-rich {
    width: var(--lv-w);
    max-width: calc(100% - 40px);
    margin: 0 auto;
}
/* 每一节：给足垂直间距，让长页面有呼吸感 */
.lv-rich-sec { margin: 0 0 48px; }
.lv-rich-sec:last-child { margin-bottom: 8px; }

/* 白底内容卡：把散落的内容收进一张卡片，与页面灰底区分开 */
.lv-rich-card-box {
    background: var(--lv-paper);
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 34px 34px 30px;
    box-shadow: var(--lv-shadow);
}

/* ==========================================================================
   2) 标题体系
   ========================================================================== */
/* 节标题：左侧一道主色竖条 + 标题 + 可选的小标签
   竖条用 :before 画，不占 DOM —— 后台编辑器里改内容时不会碰到它 */
.lv-rich-h2 {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 0 16px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.45;
    color: var(--lv-t1);
    letter-spacing: -.3px;
}
.lv-rich-h2:before {
    content: "";
    position: absolute;
    left: 0; top: .32em;
    width: 4px; height: 1.05em;
    border-radius: 2px;
    background: var(--lv-red);
}
/* 标题右侧的补充说明（灰字，跟在标题同一行） */
.lv-rich-h2 span {
    margin-left: 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--lv-t3);
    letter-spacing: 0;
}

/* 小节标题（比 h2 低一档，不带竖条） */
.lv-rich-h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lv-t1);
}

/* 节导语：紧跟在 h2 下面的一句话说明 */
.lv-rich-sub {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--lv-t2);
}

/* ==========================================================================
   3) 正文段落与文本
   ========================================================================== */
body.lv-v3 .lv-rich p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.95;
    color: var(--lv-t2);
}
body.lv-v3 .lv-rich p:last-child { margin-bottom: 0; }

/* 开场导语：字号大一档、颜色深一档，第一眼就要读到 */
body.lv-v3 .lv-rich-lead {
    font-size: 16.5px !important;
    line-height: 2 !important;
    color: var(--lv-t1) !important;
}
.lv-rich-lead b, .lv-rich-strong { color: var(--lv-t1); font-weight: 700; }

/* 主色强调（不改变粗细，只改颜色） */
.lv-rich-em { color: var(--lv-red); font-weight: 600; }
.lv-rich-em i { font-style: normal; }

/* 正文里的链接 */
body.lv-v3 .lv-rich a { color: var(--lv-red); text-decoration: none; transition: opacity .2s ease; }
body.lv-v3 .lv-rich a:hover { opacity: .78; text-decoration: underline; }

/* ==========================================================================
   4) 网格与卡片
   ========================================================================== */
.lv-rich-grid { display: grid; gap: 16px; }
.lv-rich-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-rich-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-rich-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 卡片：悬停时描边转主色 + 轻微上浮，给出可点的心理暗示（即使不可点也显得"活"） */
.lv-rich-card {
    background: var(--lv-paper);
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 22px 20px;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-rich-card:hover {
    border-color: var(--lv-a30);
    box-shadow: var(--lv-shadow);
    transform: translateY(-2px);
}
body.lv-v3 .lv-rich-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--lv-t1);
}
body.lv-v3 .lv-rich-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--lv-t2);
}

/* 图标块：浅主色底 + 主色字，一个类搞定，不需要引图片 */
.lv-rich-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: var(--lv-wash1);
    color: var(--lv-red);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
/* 图标里的内联 SVG 跟随文字色 */
.lv-rich-ico svg { width: 22px; height: 22px; fill: currentColor; }

/* 横向卡片（图标在左、文字在右）—— 用于条数多、文字短的清单 */
.lv-rich-card-row { display: flex; gap: 14px; align-items: flex-start; }
.lv-rich-card-row .lv-rich-ico { flex: 0 0 auto; margin: 0; }
.lv-rich-card-row > div { min-width: 0; flex: 1; }

/* ==========================================================================
   5) 流程步骤（横向，带序号与连接线）
   ── 替代原来那张 1000px 宽的 step.png 整图：文字可直接改、手机端自动竖排
   ========================================================================== */
.lv-rich-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    counter-reset: lvstep;
    margin: 6px 0 0;
}
.lv-rich-step {
    position: relative;
    padding: 54px 8px 0;
    text-align: center;
    counter-increment: lvstep;
}
/* 序号圆点 */
.lv-rich-step:before {
    content: counter(lvstep, decimal-leading-zero);
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lv-wash1);
    border: 1px solid var(--lv-washline);
    color: var(--lv-red);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.5px;
}
/* 连接线：从圆心往右连到下一个圆，首个到末个之间不断 */
.lv-rich-step:after {
    content: "";
    position: absolute;
    left: calc(50% + 26px); right: calc(-50% + 26px); top: 20px;
    height: 1px;
    background: var(--lv-washline);
}
.lv-rich-step:last-child:after { display: none; }
body.lv-v3 .lv-rich-step h4 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lv-t1);
}
body.lv-v3 .lv-rich-step p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--lv-t3);
}

/* ==========================================================================
   6) 数据条（深色底 + 金色大数字）
   ── 数据是最有说服力的内容；深色块也能打破长页面的白，形成节奏
   ========================================================================== */
.lv-rich-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border-radius: var(--lv-r);
    overflow: hidden;
    background: var(--lv-cta-grad);
}
.lv-rich-stat { padding: 28px 20px; text-align: center; }
body.lv-v3 .lv-rich-stat b {
    display: block;
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--lv-gold);
}
body.lv-v3 .lv-rich-stat b i { font-style: normal; font-size: 19px; font-weight: 700; }
body.lv-v3 .lv-rich-stat span {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--lv-dark-t2);
}

/* ==========================================================================
   7) 勾选清单（三列，打勾用主色）
   ── 用于"建站包含哪些项目"这类罗列；比无序列表整齐，也更像"交付清单"
   ========================================================================== */
body.lv-v3 ul.lv-rich-check {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.lv-v3 ul.lv-rich-check.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.lv-v3 ul.lv-rich-check li {
    position: relative;
    margin: 0;
    padding: 0 0 0 26px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--lv-t2);
    list-style: none;
}
body.lv-v3 ul.lv-rich-check li:before {
    content: "";
    position: absolute;
    left: 0; top: .42em;
    width: 15px; height: 9px;
    border-left: 2px solid var(--lv-red);
    border-bottom: 2px solid var(--lv-red);
    transform: rotate(-45deg) scale(.82);
    transform-origin: left center;
}
body.lv-v3 ul.lv-rich-check li b { color: var(--lv-t1); font-weight: 700; }

/* ==========================================================================
   8) 对比表格
   ── 老样式表里 th/td 有全局边框与底色，这里全部显式覆盖，不靠继承
   ========================================================================== */
.lv-rich-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; }
body.lv-v3 table.lv-rich-table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    overflow: hidden;
    font-size: 14px;
    background: var(--lv-paper);
}
body.lv-v3 table.lv-rich-table th,
body.lv-v3 table.lv-rich-table td {
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid var(--lv-line);
    text-align: left;
    line-height: 1.75;
    color: var(--lv-t2);
    vertical-align: top;
}
body.lv-v3 table.lv-rich-table thead th {
    background: var(--lv-tint);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lv-t1);
    white-space: nowrap;
}
body.lv-v3 table.lv-rich-table tbody tr:last-child td { border-bottom: 0; }
body.lv-v3 table.lv-rich-table tbody tr:hover td { background: var(--lv-tint); }
/* 首列作为"行标题"：加深加粗，方便横向扫读 */
body.lv-v3 table.lv-rich-table td:first-child { font-weight: 700; color: var(--lv-t1); white-space: nowrap; }
/* 推荐列：浅主色底 + 主色字 */
body.lv-v3 table.lv-rich-table .lv-rich-best {
    background: var(--lv-wash1);
    color: var(--lv-red);
    font-weight: 700;
}

/* ==========================================================================
   9) 提示块 / 重点块
   ========================================================================== */
.lv-rich-note {
    margin: 0;
    padding: 16px 20px;
    border-radius: 0 var(--lv-r) var(--lv-r) 0;
    border-left: 3px solid var(--lv-red);
    background: var(--lv-wash1);
}
body.lv-v3 .lv-rich-note p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--lv-t2); }
body.lv-v3 .lv-rich-note b { color: var(--lv-t1); }
.lv-rich-note.is-gold { border-left-color: var(--lv-gold); background: var(--lv-wash2); }

/* ==========================================================================
   10) 图片与图注
   ── 图片一律"宽度自适应 + 不超容器"，这是手机端不横向溢出的基本盘
   ========================================================================== */
.lv-rich-figure { margin: 0; }
body.lv-v3 .lv-rich-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lv-r);
    border: 1px solid var(--lv-line);
}
body.lv-v3 .lv-rich-cap {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    text-align: center;
    color: var(--lv-t3);
}

/* ==========================================================================
   11) 设备示意（纯 CSS 画的手机 / 平板 / 电脑外框）
   ── 手机站点页面用：不需要任何图片文件，缩放不失真，换肤自动跟随
      ★ 为什么不用截图或 AI 图：屏幕里"该显示什么"只有设计定得准；
        用 CSS 画，后台改文案时外框里的字也跟着变，不会图文对不上。
   ========================================================================== */
.lv-rich-devices {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 22px;
    padding: 10px 0 0;
}
.lv-rich-dev {
    position: relative;
    border: 2px solid var(--lv-ink2);
    border-radius: 12px;
    background: var(--lv-ink3);
    padding: 8px;
    box-shadow: var(--lv-shadow);
}
.lv-rich-dev i {
    display: block;
    border-radius: 7px;
    background: var(--lv-paper);
    overflow: hidden;
}
/* 屏幕里的"简版网站"：一条深色头 + 两条浅色内容条 */
.lv-rich-dev i b,
.lv-rich-dev i span {
    display: block;
    border-radius: 3px;
    background: var(--lv-tint);
}
.lv-rich-dev i b { height: 16px; margin: 7px 7px 5px; background: var(--lv-ink3); }
.lv-rich-dev i span { height: 7px; margin: 0 7px 5px; }
.lv-rich-dev i span:last-child { width: 58%; }

/* 电脑：宽扁 */
.lv-rich-dev.pc i { width: 246px; height: 150px; }
.lv-rich-dev.pc:after {
    content: "";
    display: block;
    width: 76px; height: 5px;
    margin: 7px auto 0;
    border-radius: 3px;
    background: var(--lv-ink2);
}
/* 平板：中等 */
.lv-rich-dev.pad i { width: 112px; height: 148px; }
/* 手机：窄高 */
.lv-rich-dev.ph i { width: 66px; height: 128px; }
.lv-rich-dev.ph { border-radius: 14px; }

/* ==========================================================================
   12) 联系方式卡（联系页专用）
   ========================================================================== */
.lv-rich-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.lv-rich-citem {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    background: var(--lv-paper);
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    transition: border-color .22s ease, box-shadow .22s ease;
}
.lv-rich-citem:hover { border-color: var(--lv-a30); box-shadow: var(--lv-shadow); }
body.lv-v3 .lv-rich-citem dt {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--lv-t3);
}
/* ★ 值用等宽数字，电话号码位数对齐、不会因字体跳动 */
body.lv-v3 .lv-rich-citem dd {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--lv-t1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
    word-break: break-all;
}
body.lv-v3 .lv-rich-citem dd a { color: var(--lv-t1); }
body.lv-v3 .lv-rich-citem dd a:hover { color: var(--lv-red); text-decoration: none; }
body.lv-v3 .lv-rich-citem dd.sm { font-size: 15px; font-weight: 700; font-variant-numeric: normal; }

/* ==========================================================================
   13) 行动区（深色底 + 按钮）
   ========================================================================== */
.lv-rich-cta {
    position: relative;
    overflow: hidden;
    padding: 38px 34px;
    border-radius: var(--lv-r);
    background: var(--lv-cta-grad);
    text-align: center;
}
/* 右下角一团主色光 —— 与页头带的装饰同源 */
.lv-rich-cta:before {
    content: "";
    position: absolute;
    right: -90px; bottom: -120px;
    width: 330px; height: 330px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--lv-glow-a) 0%, transparent 68%);
}
.lv-rich-cta > * { position: relative; z-index: 2; }
body.lv-v3 .lv-rich-cta h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.45;
    color: #fff;
}
body.lv-v3 .lv-rich-cta p {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--lv-dark-t2);
}
.lv-rich-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* 按钮样式复用首页那套（home-v3.css 里的 .lv-btn），这里只补一个浅色变体 */
body.lv-v3 .lv-rich-cta .lv-btn-ink { background: #fff; border-color: #fff; color: var(--lv-t1); }
body.lv-v3 .lv-rich-cta .lv-btn-ink:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   14) FAQ（原生 details，不依赖 JS）
   ── 用 details/summary 的代价是样式受浏览器默认值干扰，所以逐项显式重置
   ========================================================================== */
.lv-rich-faq { margin: 0; }
body.lv-v3 .lv-rich-faq details {
    margin: 0 0 10px;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    background: var(--lv-paper);
    overflow: hidden;
}
body.lv-v3 .lv-rich-faq summary {
    position: relative;
    padding: 15px 46px 15px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--lv-t1);
    cursor: pointer;
    list-style: none;
}
body.lv-v3 .lv-rich-faq summary::-webkit-details-marker { display: none; }
/* 右侧 +/− 号：用两条线拼，展开时竖线收起变成减号 */
body.lv-v3 .lv-rich-faq summary:after {
    content: "";
    position: absolute;
    right: 20px; top: 50%;
    width: 12px; height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--lv-t3);
    transition: background .2s ease;
}
body.lv-v3 .lv-rich-faq summary:before {
    content: "";
    position: absolute;
    right: 25px; top: 50%;
    width: 2px; height: 12px;
    margin-top: -6px;
    border-radius: 2px;
    background: var(--lv-t3);
    transition: transform .22s ease, background .2s ease;
}
body.lv-v3 .lv-rich-faq details[open] summary:before { transform: rotate(90deg) scaleY(0); }
body.lv-v3 .lv-rich-faq details[open] summary:after,
body.lv-v3 .lv-rich-faq details[open] summary:before { background: var(--lv-red); }
body.lv-v3 .lv-rich-faq details[open] summary { color: var(--lv-red); }
body.lv-v3 .lv-rich-faq .lv-rich-faq-b {
    padding: 0 18px 16px;
    font-size: 14px;
    line-height: 1.95;
    color: var(--lv-t2);
    border-top: 1px solid var(--lv-line);
    padding-top: 14px;
}
body.lv-v3 .lv-rich-faq .lv-rich-faq-b p { margin: 0 0 10px; }
body.lv-v3 .lv-rich-faq .lv-rich-faq-b p:last-child { margin-bottom: 0; }

/* ==========================================================================
   15) 套餐卡（网站建设页）
   ── 替代原来那排"宽高不一、颜色各异"的老卡片；这里四张等宽等高，
      价格用主色，第一张标"入门"、第四张标"推荐"，让人一眼有对比
   ========================================================================== */
.lv-rich-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.lv-rich-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 22px;
    background: var(--lv-paper);
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.lv-rich-plan:hover { border-color: var(--lv-a30); box-shadow: var(--lv-shadow); transform: translateY(-2px); }
/* 推荐款：主色描边 + 顶部小角标 */
.lv-rich-plan.is-best { border-color: var(--lv-red); box-shadow: 0 10px 26px var(--lv-a16); }
body.lv-v3 .lv-rich-plan-tag {
    position: absolute;
    left: 50%; top: -11px;
    transform: translateX(-50%);
    margin: 0;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--lv-red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
body.lv-v3 .lv-rich-plan h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--lv-t1);
}
body.lv-v3 .lv-rich-plan-en {
    margin: 0 0 14px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--lv-t3);
}
body.lv-v3 .lv-rich-price {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px dashed var(--lv-line);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--lv-red);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}
body.lv-v3 .lv-rich-price s {
    margin-right: 2px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
body.lv-v3 .lv-rich-price em {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--lv-t3);
}
body.lv-v3 .lv-rich-plan ul {
    flex: 1;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
body.lv-v3 .lv-rich-plan li {
    position: relative;
    margin: 0 0 9px;
    padding: 0 0 0 18px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--lv-t2);
    list-style: none;
}
body.lv-v3 .lv-rich-plan li:before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--lv-a38);
}
body.lv-v3 .lv-rich-plan .lv-btn { width: 100%; }

/* ==========================================================================
   16) 响应式
   ── 断点与 inner-v3.css 保持一致：1000 / 640
   ========================================================================== */
@media (max-width: 1000px) {
    .lv-rich-sec { margin-bottom: 38px; }
    .lv-rich-card-box { padding: 26px 24px 22px; }
    .lv-rich-h2 { font-size: 20px; }
    .lv-rich-grid.c3, .lv-rich-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lv-rich-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.lv-v3 ul.lv-rich-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 流程：5 步挤成 5 列会窄到读不出字，改成 3 列换行 */
    .lv-rich-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
    .lv-rich-step:after { display: none; }
    .lv-rich-devices { gap: 16px; }
    .lv-rich-dev.pc i { width: 198px; height: 122px; }
    .lv-rich-cta { padding: 32px 24px; }
}

@media (max-width: 640px) {
    .lv-rich { max-width: calc(100% - 30px); }
    .lv-rich-sec { margin-bottom: 32px; }
    .lv-rich-card-box { padding: 20px 16px 18px; border-radius: 10px; }
    .lv-rich-h2 { font-size: 18px; padding-left: 13px; }
    .lv-rich-h2:before { width: 3px; }
    .lv-rich-h2 span { display: block; margin: 5px 0 0; font-size: 12.5px; }
    .lv-rich-h3 { font-size: 15.5px; }
    body.lv-v3 .lv-rich p { font-size: 14.5px; line-height: 1.9; }
    body.lv-v3 .lv-rich-lead { font-size: 15px !important; line-height: 1.95 !important; }

    /* 一律单列：窄屏两列会把卡片压成一条一条，反而更难读 */
    .lv-rich-grid.c2, .lv-rich-grid.c3, .lv-rich-grid.c4 { grid-template-columns: minmax(0, 1fr); }
    .lv-rich-plans { grid-template-columns: minmax(0, 1fr); }
    body.lv-v3 ul.lv-rich-check,
    body.lv-v3 ul.lv-rich-check.c2 { grid-template-columns: minmax(0, 1fr); }
    .lv-rich-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* 竖排流程：序号在左、文字在右，连接线改竖线 */
    .lv-rich-step { padding: 0 0 20px 52px; text-align: left; }
    .lv-rich-step:before { left: 0; top: 0; transform: none; }
    .lv-rich-step:after {
        display: block;
        left: 20px; right: auto; top: 46px; bottom: 2px;
        width: 1px; height: auto;
    }

    /* 数据条：三列并排时数字会被压到换行，改一列一行 */
    .lv-rich-stats { grid-template-columns: minmax(0, 1fr); }
    body.lv-v3 .lv-rich-stat b { font-size: 29px; }
    .lv-rich-stat { padding: 20px 16px; }

    .lv-rich-contact { grid-template-columns: minmax(0, 1fr); }
    body.lv-v3 .lv-rich-citem dd { font-size: 17px; }
    .lv-rich-citem { padding: 16px; }

    /* 设备示意：手机宽度放不下三台，只留中间的平板 + 手机，并整体缩小 */
    .lv-rich-dev.pc { display: none; }
    .lv-rich-devices { gap: 12px; }
    .lv-rich-dev.pad i { width: 92px; height: 122px; }
    .lv-rich-dev.ph i { width: 58px; height: 112px; }

    body.lv-v3 .lv-rich-cta h3 { font-size: 18px; }
    .lv-rich-cta { padding: 26px 18px; }
    .lv-rich-cta-btns { flex-direction: column; }
    body.lv-v3 .lv-rich-cta .lv-btn { width: 100%; }

    body.lv-v3 .lv-rich-faq summary { padding: 13px 42px 13px 15px; font-size: 14px; }
    body.lv-v3 .lv-rich-plan { padding: 20px 16px 18px; }
    body.lv-v3 .lv-rich-price { font-size: 26px; }
    /* 表格：窄屏保住最小宽度让它横滚，不硬挤 —— 挤出来的表格更难读 */
    body.lv-v3 table.lv-rich-table { min-width: 520px; }
    body.lv-v3 table.lv-rich-table th,
    body.lv-v3 table.lv-rich-table td { padding: 11px 12px; font-size: 13px; }
}

/* ==========================================================================
   17) 文章正文里的用法（2026-10-02 新增）
   —— 资讯文章（栏目 type=1 的详情页）复用这一层积木时，正文容器是
      `.lv-main .lv-art-body`（inner-v3.css），它自带一套内页排版：
        · `.lv-main .lv-art-body p`  权重 (0,2,1)
        · `.lv-main .lv-art-body h2` 给标题加了 padding-left + 4px 左边框
      本文件里绝大多数规则已经挂了 `body.lv-v3`（权重 (0,2,2)）能压过去，
      唯独下面两处必须另外处理：

      ① 容器宽度 —— .lv-rich 是给"整页单页"用的 1200px 容器，
         文章已经在窄栏里，再撑 --lv-w 会直接顶穿。
      ② 真 h2 / h3 标签 —— 文章要用真标题标签（SEO），
         而内页排版给 h2 画了左边框，与 .lv-rich-h2:before 的主色竖条
         会叠成"两道"，所以这里把内页那道边框去掉。

   ★ 用真 h2/h3 而不是 div，是为了让 50 篇文章的标题层级对搜索引擎成立。
   ========================================================================== */
.lv-art-body .lv-rich {
    width: auto;
    max-width: none;
    margin: 0;
}
.lv-art-body .lv-rich .lv-rich-h2 {
    margin: 34px 0 16px;
    padding: 0 0 0 16px;
    border-left: 0;
    font-size: 20px;
    line-height: 1.5;
}
.lv-art-body .lv-rich .lv-rich-h2:first-child { margin-top: 0; }
.lv-art-body .lv-rich .lv-rich-h3 {
    margin: 24px 0 10px;
    font-size: 16.5px;
    line-height: 1.55;
}
/* 文章里的表格/清单紧跟段落，别被内页排版的大外边距顶开 */
.lv-art-body .lv-rich-sec > .lv-rich-tablewrap,
.lv-art-body .lv-rich-sec > .lv-rich-check,
.lv-art-body .lv-rich-sec > .lv-rich-stats,
.lv-art-body .lv-rich-sec > .lv-rich-flow,
.lv-art-body .lv-rich-sec > .lv-rich-faq { margin-top: 18px; }
/* 文章末尾的行动区给一点上间距，与正文分开 */
.lv-art-body .lv-rich-sec > .lv-rich-cta { margin-top: 30px; }

/* ==========================================================================
   18) 资质证书墙（2026-10-03 新增 · 二次改版为「层叠卡组」+ 证书转正）
   ─────────────────────────────────────────────────────────────────────────
   公司简介页与资讯文章共用。用法：

     <div class="lv-rich-sec">
       <h2 class="lv-rich-h2">资质与荣誉 <span>QUALIFICATION &amp; HONORS</span></h2>
       <p class="lv-rich-lead">……</p>
       <div class="lv-rich-certs">
         <figure class="lv-rich-cert">
           <a href="大图" target="_blank" rel="noopener">
             <img src="小图" alt="……" width="…" height="…" loading="lazy" decoding="async" />
           </a>
           <figcaption><b>证书名称<em class="lv-rich-cert-tag">国家级</em></b>编号/发证/有效期……</figcaption>
         </figure>
         ……
       </div>
     </div>

   ★ 每张图**必须**写真实 width/height：不写就会先撑成 0 高再跳成上千像素，
     整页版式来回抖（这个坑在本项目其它配图节上踩过）。
   ★ 缩略图 (900px) 与大图 (1600px, 文件名带 @2x) 成对存在，点开看大图走原生链接，
     不引入任何 JS —— 证书要能"点开看清编号"才有说服力。
   ★ 加规则就要升 rich-v3.css 的版本号（theme.js 的 V3 表）。
   ★★ 本节的图现在是**横向**（1326×900 一类）。若替换图片，务必确认
      图片方向是横的、且同步改下面的 aspect-ratio。

   ★★ 2026-10-03 二次改版：证书转正 + 层叠卡组
   ─────────────────────────────────────────────────────────────
   用户反馈：「这三个证书可以叠加起来，看到主要的即可……总得来讲，
              摆放不能竖着倒放」。

   ★★ 找到了"竖着倒放"的**真正根因**（不是排版，是图片本身）：
     三张证书的**扫描件本身就是转了 90° 的** —— 证书是横向文件，
     却被竖着存成了 900×1326 这样的竖图，于是图上所有文字都竖直排列，
     在页面上一看就是"倒着放"。★ 光调 CSS 永远修不好，必须把**图片转正**。
     处理：用 PIL 把三张（含 @2x 大图）统一 `rotate(90)` 逆时针转正，
     原始文件另存 `.orig` 备份。转正后变为 1326×900 等**横向**图。
     （★ 试错记录：第一次转了 `rotate(-90)` 顺时针 → 出来是**倒的**，
      说明原图是"逆时针被转过"，要往回转 90°。这类旋转一定要看一眼成品。）

   图片转正之后，排版问题也一并解决了：
     横向证书天然适合"宽一点、矮一点"的卡，不再需要三列窄竖条。
     于是把版式改成**层叠卡组（stacked deck）**，纯 CSS、零 JS：
     · `.lv-rich-certs` 用 **grid 单格堆叠**（所有卡片 `grid-area: 1/1`），
       容器高度自动 = 最高那张卡的高度，**不用手算高度、不用绝对定位**。
     · 三张 `<figure>` 叠在同一格，用 `nth-child()` 做纯 CSS 的阶梯错位
       （第 2/3 张往右下各挪一点并缩小），像一叠牌露出的边缘。
     · **主证（第 1 张）默认在最上层、摆正**；后两张压在下面错开露出边，
       一眼看出"一共三张"。这就是用户说的"叠加起来，看到主要的即可"。
     · 鼠标移到任意一张 → 那张**浮到最上层并轻微放大**，说明文字也展开。
     · **默认只展开主证的说明文字**，另两张 hover/focus 才展开。
     · `figure:focus-within` 让键盘 Tab 也能触发展开（无障碍）。

   ★ 为什么是 grid 堆叠而不是 position:absolute：
     absolute 方案必须给容器写死高度（否则塌成 0），而卡片高度是
     随宽度变化的 → 每个断点都要重算，还会算错。grid 叠放让浏览器
     自己撑高度，跟着内容走，任何宽度都不会塌。
   ★ 为什么悬停目标是 `figure` 而不是里面的 `<a>`：
     说明文字 figcaption 在 `<a>` 之外，鼠标移到文字上时也要保持展开。
   ========================================================================== */

/* ---- 层叠舞台：单格 grid，三张卡片全部落在 1/1 上 ----
   ★ max-width 很关键：不限宽的话卡片会撑满正文栏（实测 818px），
     单张证书变成一幅巨画、另两张被完全盖住。限宽后错位边缘才露得出来。
   ★ 现在是横向证书（1326:900 ≈ 1.47），所以卡可以宽一些。 */
.lv-rich-certs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin: 24px auto 0;
    /* ★ 右侧/下方要留出"后两张探出去"的空间：最大错位 52px + 阴影余量 */
    padding: 0 64px 64px 0;
}
.lv-rich-certs > .lv-rich-cert { grid-area: 1 / 1; margin: 0; }
/* 正文里靠左摆放（居中更像独立展台） */
.lv-art-body .lv-rich-certs { margin-left: 0; margin-right: auto; }

/* ---- 卡片本体：横向证书，统一画幅 ---- */
.lv-rich-cert > a {
    display: block;
    position: relative;
    aspect-ratio: 1326 / 900;    /* ★ 横向画幅（证书已转正） */
    width: 100%;
    padding: 0;
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--lv-shadow);
    transition: box-shadow .3s ease, border-color .3s ease;
}
.lv-rich-cert img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
}
/* 缩略图上浮出"可点开放大"的提示（纯 CSS 伪元素，不引 JS） */
.lv-rich-cert > a::after {
    content: "点击放大";
    position: absolute;
    right: 10px; bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    color: #fff;
    background: rgba(22, 32, 46, .62);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.lv-rich-cert > a:hover::after { opacity: 1; transform: translateY(0); }

/* ---- 说明文字（figcaption）：做成卡片下方的一小块白底条 ---- */
.lv-rich-cert figcaption {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--lv-t2);
    background: #fff;
    border: 1px solid var(--lv-line);
    border-radius: var(--lv-r);
    padding: 10px 12px;
    margin-top: 8px;
    box-shadow: var(--lv-shadow);
    /* 默认藏起来：只留主证的（见下） */
    display: none;
}
.lv-rich-cert figcaption b { display: block; margin-bottom: 4px; font-size: 13.5px; font-weight: 800; color: var(--lv-t1); }
.lv-rich-cert figcaption em { font-style: normal; color: var(--lv-t3); }
.lv-rich-cert-tag {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; vertical-align: 1px;
    color: var(--lv-red); background: var(--lv-wash1); border: 1px solid rgba(0, 0, 0, .06);
}

/* ==========================================================================
   层叠几何：第 1 张 = 主证（最上、最正），第 2/3 张错位压在下面。
   ★ 用 nth-child 而不是 --i 内联变量 —— 内容里不用写任何额外属性。
   ★ z-index 递减：第 1 张最高（40），依次 30 / 20。
   ★ 错位方向：往右下错开并略微缩小 —— 露出的是**右侧和下侧的边**。
   ★★ 关键（第一版做错的地方）：三张卡同宽同高、原点都是左上角时，
     第 2/3 张无论怎么 translate 都**缩在第 1 张的范围内**（或者反过来盖住第 1 张），
     一眼看不出"叠了三张"。正确做法是：
       · 第 2/3 张**缩小**并把原点改到**右下角**（transform-origin: 100% 100%），
         再往右下平移 → 它们的右下边缘就会**探出主证之外**，形成可见的"牌边"。
       · 主证保持最大、最上，占据视觉中心。
   ========================================================================== */
.lv-rich-certs > .lv-rich-cert:nth-child(1) { z-index: 40; transform: none; }
.lv-rich-certs > .lv-rich-cert:nth-child(2) {
    z-index: 30;
    /* 原点放在右下，缩小后往右下挪 —— 右下角探出去露边 */
    transform-origin: 100% 100%;
    transform: translate(26px, 26px) scale(.93);
}
.lv-rich-certs > .lv-rich-cert:nth-child(3) {
    z-index: 20;
    transform-origin: 100% 100%;
    transform: translate(52px, 52px) scale(.86);
}

/* 主证的说明默认展开 */
.lv-rich-certs > .lv-rich-cert:nth-child(1) > figcaption { display: block; }
/* 后两张的说明默认不占位（藏起来），hover 才让它出现
   ★ 用 absolute + top:100% 的定位基准是**figure 自己**（grid 单元格尺寸），
     所以它不会把容器撑高。 */
.lv-rich-certs > .lv-rich-cert:nth-child(n+2) > figcaption {
    display: none;
    position: absolute;
    left: 0; top: calc(100% + 8px);
    width: 100%;
}

/* ---- 悬停 / 键盘聚焦：该张抽到最上层并微放大 ---- */
.lv-rich-certs > .lv-rich-cert:hover,
.lv-rich-certs > .lv-rich-cert:focus-within {
    z-index: 60;
    transform: translate(0, -6px) scale(1.03);
    transform-origin: 0 0;
}
.lv-rich-certs > .lv-rich-cert:hover > a,
.lv-rich-certs > .lv-rich-cert:focus-within > a {
    box-shadow: var(--lv-shadow-h);
    border-color: var(--lv-red);
}
/* hover/focus 时把该张的说明显示出来（选择器要压过后两张的隐藏规则） */
.lv-rich-certs > .lv-rich-cert:nth-child(n+2):hover > figcaption,
.lv-rich-certs > .lv-rich-cert:nth-child(n+2):focus-within > figcaption { display: block; }

/* 文章正文里的证书墙窄一些 */
.lv-art-body .lv-rich-certs { margin-top: 20px; }

/* ---- 窄屏：层叠在手机上既难点又易误触，退回「逐张平铺」 ---- */
@media (max-width: 1000px) {
    .lv-rich-certs {
        display: block;
        padding: 0;
    }
    .lv-rich-certs > .lv-rich-cert,
    .lv-rich-certs > .lv-rich-cert:nth-child(1),
    .lv-rich-certs > .lv-rich-cert:nth-child(2),
    .lv-rich-certs > .lv-rich-cert:nth-child(3) {
        width: 100%;
        transform: none;
        z-index: auto;
    }
    .lv-rich-certs > .lv-rich-cert + .lv-rich-cert { margin-top: 18px; }
    /* 窄屏全部展开说明（此时逐张平铺，不会互相压住） */
    .lv-rich-certs > .lv-rich-cert > figcaption,
    .lv-rich-certs > .lv-rich-cert:nth-child(n+2) > figcaption {
        display: block;
        position: static;
        width: auto;
    }
    .lv-rich-cert > a { aspect-ratio: auto; }
    .lv-rich-cert img { height: auto; object-fit: contain; }
}

/* 打印：内容型页面经常要打印出来给客户看，把折叠的 FAQ 展开 */
@media print {
    body.lv-v3 .lv-rich-faq details { break-inside: avoid; }
    body.lv-v3 .lv-rich-faq details > .lv-rich-faq-b { display: block !important; }
    body.lv-v3 .lv-rich-card-box { box-shadow: none; }
}