/* ══════════════════════════════════════════════════════════════════════
   🔴🔴🔴 最小 reset ✗✗ 2026-10 补
   ══════════════════════════════════════════════════════════════════════
   ★ 站长：「问题是 1.0 没有这个窄边啊」「整个页面头部，左右都有」✓✓
   ⚠️ 我用 CSSOM 逐条列出「命中 body 的所有规则」——**结果是空的** ✓
      计算值 = **`margin: 8px`** ⇒ 那是**浏览器给 body 的默认边距** ✓✓
      实测：视口 882，`body` 的 `x=8  w=866` ⇒ **左右各露 8px** ✓

   🔴 根因 ✗ `body{margin:0}` 那条在 **`site.css`** 里 ✓
      **而落地页只引了 `landing.css`**（不引 site.css）✓
      ⇒ 这一页上**没有任何人**把浏览器的默认边距清掉 ✓✓
   ★ 这也解释了为什么**只有落地页明显** ✗
     别的公开页引了 site.css ⇒ 那道 8px 早被清掉了 ✓✓

   ⚠️ 为什么只清 margin/padding ✗ 不写 `*{box-sizing:border-box}` ✓
     那种全局重置会**改到别人的布局**（1.0 那边也没这么干 ✓）✓✓
   ====================================================================== */
html, body { margin: 0; padding: 0; }
body { background: #f8fafc; }

/* ══════════════════════════════════════════════════════════════════════
   前台落地页样式

   ★★ 来源 ✗ **1.0 原样搬过来的** ✓✓
   ══════════════════════════════════════════════════════════════════════
   1.0 那边这份样式**内联**在 `app/views/landing.php` 的
   `<style>` 段里（70~335 行 ✓ 共 265 行 ✓）
   站长要求「前台首页套 1.2 版式」⇒ 逐条搬过来 ✓ 数值一个没改 ✓

   ── 🔴 搬的时候**去掉**了什么 ✗ 只有三类 ✓ ─────────────────────────
     ① 全局重置那几条（`*{}` / `html,body{}` / `body{}` / `a{}` /
        `img{}` / `h1,h2,h3,h4{}` / `p{}` / `ul{}`）
        ⚠️ 2.0 的站点头尾（`site/_top` + `site/_bottom`）是**别的页面也在用**的 ✓
           在这儿再重置一遍 ⇒ 会把那几页带偏 ✓✓
        （★ 这条教训在 `findpwd.css` 那次已经吃过一遍了 ✓）
     ② `.hd` / `.nav` / `.brand` / `.burger` / `.mnav` —— **1.0 自己的页头**
        ⚠️ 我们 2.0 的页头是主题里那一份 ✓ 不重复做 ✓
     ③ `.ft` / `.ft-grid` / `.ft-bot` —— **1.0 自己的页脚**，同理 ✓

   ── ⚠️ 保留但改名的一条 ✗ `.wrap` ──────────────────────────────────
     `.wrap{max-width:1370px;margin:0 auto;padding:0 20px}`
     🔴 我们主题里可能有 `.yz-wrap`（登录页在用 ✓）⇒ 不冲突 ✓
        但 `.wrap` 这个名字太通用 ⇒ 万一以后撞上 ⇒ 加前缀 `lp-` ✓
     ★ 所以**全文的 `.wrap` 改成 `.lp-wrap`** ✓ 别的类名一律照原样 ✓✓

   ── ★ 1.0 那三条自适应硬规矩（照抄它的注释 ✗ 别丢 ✓）──────────────
     ① 宽度用 max-width + padding ✓ 不用固定 px 宽度 ✓
     ② 多列布局用 grid + auto-fit/minmax ✓ 让它自己决定几列 ✓
        不要写死 repeat(4,1fr) ✗ —— 手机上会挤成 4 个面条 ✓
     ③ 断点只设两个：900px（平板 ✓）640px（手机 ✓）
        断点越多越难维护 ✓ 两个够用 ✓
   ====================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   ★★ 1.0 那套变量名 ✗✗ **别名** ✓ 2026-10 补
   ══════════════════════════════════════════════════════════════════════
   🔴 站长：「和 1.0 的外观不一样（配色/间距/字体）」✓
   ⚠️ 查出来的**真正原因** ✗ 不是我的数值写错了 ✓
      而是**变量名对不上** ✓✓

     1.0 的 `:root`（在 `partials/site_header_css.php` ✓）：
       --pri --pri-d --pri-l --fg --fg2 --mut --bd --bg --r --shadow
     我这边的 `:root`：
       --lp-pri --lp-pri-d …（我当初为了防撞加了 `lp-` 前缀 ✓）

   🔴 后果 ✗ 我把 1.0 的规则照抄过来时，里面写的是 `var(--bd)` ✓
      而我这儿**没有 `--bd` 这个名字** ⇒ 取不到值 ⇒
      边框、底色、次级文字、阴影**全部落空** ✓✓
      ——「外观不一样」就是这么来的 ✓

   ★ 修法 ✗ 两个名字**都留** ✓ 别去改 1.0 那边的规则（那要改上百处 ✓）
      把 1.0 那套名字**指向同一组值** ⇒ 照抄就能用 ✓✓
   ⚠️ `--hl` 1.0 那边自己也**没在 `:root` 里定义**
      （它在高亮那块自己给 ✓ 见 `migration_077_product_highlight.php`）
      ⇒ 这里给一个**兜底值** ✗ 免得 `var(--hl)` 取空 ✓✓
   ====================================================================== */
:root {
	/* ── 1.0 的原名（照抄 1.0 的规则时用这套 ✓）── */
	--pri:      #2563eb;
	--pri-d:    #1d4ed8;
	--pri-l:    #eff6ff;
	--fg:       #0f172a;
	--fg2:      #334155;
	--mut:      #64748b;
	--bd:       #e2e8f0;
	--bg:       #f8fafc;
	--r:        0;
	--shadow:   0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	--hl:       #fff7ed;          /* ⚠️ 兜底：1.0 那边也没在 :root 定义 ✓ */
	--hl-bd:    #fed7aa;
	/* ── 我这边一直在用的 `lp-` 别名 ✗ 指向同一组 ✓ 别删 ✓── */
	--lp-pri:    var(--pri);
	--lp-pri-d:  var(--pri-d);
	--lp-pri-l:  var(--pri-l);
	--lp-fg:     var(--fg);
	--lp-fg2:    var(--fg2);
	--lp-mut:    var(--mut);
	--lp-bd:     var(--bd);
	--lp-bg:     var(--bg);
	--lp-shadow: var(--shadow);
}

/* ★ 只作用于**落地页自己那一段** ✗ 不碰站点头尾 ✓✓ */
.lp{color:var(--lp-fg);font-size:15px;line-height:1.7}
.lp a{color:inherit;text-decoration:none}
.lp img{max-width:100%;height:auto;display:block}
.lp h1,.lp h2,.lp h3,.lp h4{margin:0;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.lp p{margin:0}
.lp ul{margin:0;padding:0;list-style:none}

.lp-wrap{max-width:1370px;margin:0 auto;padding:0 20px}

/* ══════════════════════════════════════════════════════════════════════
 *  🔴🔴 和**站点头**的关系 ✗✗ 量了好几次才定下来 ✓
 * ══════════════════════════════════════════════════════════════════════
 *  ⚠️ 站点头是 `site/_top.html`（12.7KB ✓ 深色 + 四个带下拉的导航项 ✓）
 *     🔴 它**不是** fixed/sticky ✗ 是**普通流**里的一个块 ✓
 *        高 80px（量出来的：`.header-container` T0 B81 ✓）
 *     ★ 所以落地页**不需要**给它让位 ✗ 它自己占着那 80px ✓✓
 *        我一度加过 `margin-top:80px` ⇒ 白多 80px 空白 ✓ 已去掉 ✓
 *
 *  ⚠️ 真正的坑**不在层叠** ✗ 在**样式有没有引** ✓✓
 *     我第一版以为"换版式了 ⇒ 厂商那 4 份 CSS 用不到了" ⇒ 删掉
 *     ⇒ 站点头和页脚**当场变成裸列表** ✓✓
 *        （`产品`/`服务保障` 前面带圆点、页脚那几列成了 ul 默认样式 ✓）
 *     🔴 原因 ✗ `site/_top.html` / `_bottom.html` 的类名
 *        （head-nav / header-nav-li / foot-menu / show-icon-wrap …）
 *        **全在那 4 份里** ✓ 它们不是"厂商页面样式" ✗
 *        是**站点头尾自己的组件样式** ✓✓
 *     ★ 已引回（见模板 head 那 5 个 link ✓）
 *
 *  ⚠️ 顺序 ✗ 本文件在它们**之后**加载 ✓
 *     所以下面要覆盖页头时，特异性打平就能赢 ✓✓
 */

/* ── 通用按钮 ── */
.lp .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 24px;border-radius:0;font-size:14px;font-weight:600;
  background:var(--lp-pri);color:#fff;border:1px solid var(--lp-pri);cursor:pointer;
  white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}
.lp .btn:hover{background:var(--lp-pri-d);border-color:var(--lp-pri-d)}
.lp .btn:active{transform:translateY(1px)}
.lp .btn.ghost{background:#fff;color:var(--lp-fg);border-color:var(--lp-bd)}
.lp .btn.ghost:hover{background:var(--lp-bg);border-color:#cbd5e1}
.lp .btn.sm{padding:7px 16px;font-size:13px;border-radius:0}

/* ══════════ ① 顶部导航 ══════════
   ★★ 站长：「落地页首页没有吸顶」✓
   🔴🔴 吸顶这道**单独拿出来加 `!important`** ✗✗ 别和颜色混在一起 ✓
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 我先查了一遍，**没查出**是谁在抢 ✓
      量的结果是这样的（`document.styleSheets` 逐条列"命中 .hd 的规则" ✓）：
        position = sticky      ← 计算值就是 sticky ✓
        top      = 0px         ✓
        z-index  = 50          ✓
        祖先链   .lp / body / html 全是 `overflow:visible` ✓
        命中的规则只有两条：`[landing.css] .lp .hd` 和 partial 里那段内联 `.hd` ✓
      ⇒ 按理说它就是该吸顶的 ✓ 可我**量不到滚动后的位置** ✗
   🔴 而且发现一件更要紧的事 ✗✗
      **落地页在无头浏览器里本来就渲染不出来**（整页几乎全白 ✓）
      ⇒ 这一路上我那些"截图看着对/不对"的判断，
        对**落地页**这一页**全都不可信** ✓✓
      ★ 所以别在这上面继续绕 ✗ **把它做成"谁抢都抢不走"** ✓
   ======================================================================
   ⚠️ 为什么值得用 `!important` ✗
      `position:sticky` 这东西**太容易**被别的东西废掉：
        · 任何一个祖先有 `overflow: hidden/auto/scroll` ⇒ 立刻失效 ✓
        · 祖先有 `transform` / `filter` / `contain` ⇒ 换新的包含块 ✓
        · 别的样式表来一条 `.hd{position:relative}` 同权重后写 ⇒ 覆盖 ✓
      它**不是"报错"**，是**静默不生效** ✗ 最难查的那种 ✓
      ⇒ 页头吸不吸顶是**一眼就能看出来的体验问题** ✓
        用强一点换"绝不会坏" ✗ 值 ✓✓
   ⚠️ `z-index` 也要一起给 ✗ 不然吸住了会被下面的内容压过去（`quick` 那块
      有 `z-index:4`、`cat::after` 那些也在抢层 ✓）✓✓
   ====================================================================== */
.lp .hd,
.hd {
  position: -webkit-sticky !important;   /* ⚠️ 老 Safari 要前缀 ✓ */
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.lp .hd {
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #0f172a;
}

/* ① 顶部导航（颜色那部分）
   ======================================================================
   🔴🔴 2026-10 修 ✗ 这儿**原来缺了注释的开头那两个字符** ✗✗
      我插上面那段"吸顶"时，`edit` 的 old_string 把原来那行标题
      （就是带样式表注释起始标记的那一行）**一起换掉了** ✓
      而新内容的开头**没带起始标记** ⇒ 下面这一大段**裸在样式表里** ✓
      ⇒ 一直到五十多行之后那个结束标记才收 ⇒ 它成了**孤儿结束标记** ✓
      ⇒ 🔴 **整份样式表作废** ✗ 浏览器一遇到语法错就丢掉**整张表** ✓
         现象：页面变成**没有任何样式的裸 HTML**（连 8px 白边都会回来 ✓）✓✓

   ⚠️⚠️ 而且我**修这一段的时候又踩了同一个坑** ✗✗
      为了在注释里说明"这儿缺个起始标记"，
      我**在注释里原样写出了那两个字符** ✓
      ⇒ 注释被再一次撑破 ✓（同一个东西连踩两次 ✓）
   ★ 规矩 ✗ 样式表的注释里**永远不要出现** 注释的起始/结束字符 ✗
     要说明就写「注释起始标记」这种**文字** ✓✓
   ======================================================================
   ⚠️ 这一整段原来是**注释掉的**（我第一版以为"站点头尾主题里有 ⇒ 不用搬"✗）
      ⇒ 站长指出：**落地页要用 1.0 那份头尾** ✓
      ⇒ 逐条搬回来（数值一个没改 ✓ 只把 `.wrap` 统一成 `.lp-wrap` ✓✓）

   🔴🔴 页头背景是**半透明玻璃** ✗✗ 这是"两侧看着不一样"的根因 ✓
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 1.0 那份写的是 `background:rgba(255,255,255,.9)` + `backdrop-filter:blur` ✓
      · 背后是**深色 hero**（`#0b1220`）⇒ 10% 透出来 ⇒ 看着**深** ✓
      · 背后是**浅灰 body**（`#f8fafc`）⇒ 看着**白** ✓
      🔴 同一个半透明值，两个页面两种观感 ⇒ 站长一眼就看出来了 ✓✓

   ★ 修法 ✗ **换算成等价的实心深色** ✓ 不依赖背后是什么 ✓✓
     算式（在 1.0 的 hero 底色上解出来 ✓）：
       0.9 × 255 + 0.1 × 11  = 230.6   -> 230 = 0xE6
       0.9 × 255 + 0.1 × 18  = 231.3   -> 231 = 0xE7
       0.9 × 255 + 0.1 × 32  = 232.7   -> 233 = 0xE9
     ⚠️ 那是"白底压深色"的结果 ⇒ 看着是**浅色** ✓ 可站长要的是**深色** ✓
     ⇒ 所以不照那个算 ✗ 照 **1.0 的深色主色**（`--lp-fg:#0f172a`）取 ✓✓
        它就是站点的深色底（页脚 `#0b1220` 和它同一族 ✓）

   ⚠️ 文字一律转成浅色 ✗ 不然深底上黑字看不见 ✓
   ⚠️ `backdrop-filter` 留着无妨（实心底上它没效果 ✓）但不靠它 ✓✓
   ⚠️ hover 那个 `--lp-pri`（蓝）在深底上仍然清楚 ✓ 不动 ✓
   ====================================================================== */
/* ⚠️ 原来这儿有一条 `.lp .hd{position:sticky;…}` ✗ 已删 ✓
 *    吸顶那几条现在统一在上面（那条带 `!important` 的 ✓）
 *    留着两条一样的只会让人下次不知道该改哪条 ✓✓ */
.lp .hd-in{display:flex;align-items:center;gap:26px;height:64px}
.lp .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:22px;
  letter-spacing:-.02em;white-space:nowrap;color:#fff}
.lp .nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14px}
.lp .nav a{color:#cbd5e1;white-space:nowrap}
.lp .nav a:hover{color:#93c5fd}
.lp .nav a.on{color:#93c5fd;font-weight:600}
.lp .hd-act{display:flex;align-items:center;gap:10px;margin-left:6px}
/* ⚠️ 深底上的两个按钮 ✗ 照 1.0 落地页里 `.hero .btn.ghost` 那套改 ✓ */
.lp .hd-act .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.lp .hd-act .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.lp .hd-act .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.lp .hd-act .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.lp .burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid rgba(255,255,255,.3);
  border-radius:0;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:#fff}
.lp .mnav{display:none;border-top:1px solid rgba(255,255,255,.08);background:#0f172a}
.lp .mnav.on{display:block}
.lp .mnav a{display:block;padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:15px;color:#cbd5e1}
.lp .mnav a:hover{color:#93c5fd}
.lp .mnav .mact{display:flex;gap:10px;padding:14px 20px}
.lp .mnav .mact .btn{flex:1}
.lp .mnav .mact .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}



/* ══════════ ② Hero 轮播 ══════════ */
.lp .hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b1220 0%,#12213d 55%,#0b1220 100%)}

.lp .hero-slide{display:none;padding:78px 0 86px;color:#fff}
.lp .hero-slide.on{display:block}
.lp .hero-tag{display:inline-block;padding:5px 13px;border-radius:0;font-size:12.5px;
  font-weight:600;background:rgba(96,165,250,.18);color:#bfdbfe;
  border:1px solid rgba(96,165,250,.35);margin-bottom:20px}
.lp .hero h1{font-size:42px;font-weight:800;letter-spacing:-.02em;max-width:16em}
.lp .hero p{margin-top:16px;max-width:44em;font-size:16px;color:#cbd5e1;line-height:1.9}
.lp .hero-act{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.lp .hero .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.lp .hero .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
.lp .hero-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;gap:9px;z-index:3}
.lp .hero-dots button{width:9px;height:9px;padding:0;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.32);transition:width .2s,background .2s}
.lp .hero-dots button.on{width:26px;background:#60a5fa}

/* ══════════ ③ 快捷入口 ══════════ */
.lp .quick{margin-top:-42px;position:relative;z-index:4}
.lp .quick-grid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lp .qcard{background:#fff;border:1px solid var(--lp-bd);border-radius:0;
  padding:20px;box-shadow:var(--lp-shadow);display:flex;gap:14px;align-items:flex-start;
  transition:transform .15s,border-color .15s}
.lp .qcard:hover{transform:translateY(-3px);border-color:#bfdbfe}
.lp .qcard .ic{width:42px;height:42px;flex:none;border-radius:0;background:var(--lp-pri-l);
  display:flex;align-items:center;justify-content:center;font-size:20px}
.lp .qcard b{display:block;font-size:15px;margin-bottom:3px}
.lp .qcard span{font-size:12.5px;color:var(--lp-mut);line-height:1.6}

/* ══════════ 通用板块 ══════════ */
.lp .sec{padding:76px 0}
.lp .sec.alt{background:var(--lp-bg);border-top:1px solid var(--lp-bd);border-bottom:1px solid var(--lp-bd)}
.lp .sec-hd{text-align:center;max-width:660px;margin:0 auto 44px}
.lp .sec-kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--lp-pri);
  text-transform:uppercase;margin-bottom:12px}
.lp .sec-hd h2{font-size:30px}
.lp .sec-hd p{margin-top:14px;color:var(--lp-mut);font-size:14.5px;line-height:1.9}
.lp .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* 能力卡 */
.lp .pcard{background:#fff;border:1px solid var(--lp-bd);border-radius:0;padding:24px;
  transition:transform .15s,box-shadow .15s}
.lp .pcard:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow)}
.lp .pcard .ic{width:44px;height:44px;border-radius:0;background:var(--lp-pri-l);
  display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:15px}
.lp .pcard h3{font-size:16px;margin-bottom:9px}
.lp .pcard p{color:var(--lp-mut);font-size:13.5px;line-height:1.85}
.lp .pcard ul{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.lp .pcard ul li{font-size:12px;color:var(--lp-pri);background:var(--lp-pri-l);
  padding:3px 10px;border-radius:0;white-space:nowrap}

/* 业务线大卡 */
.lp .cats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:26px}
.lp .cat{position:relative;background:#fff;border:1px solid var(--lp-bd);border-radius:0;
  padding:26px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.lp .cat:hover{transform:translateY(-3px);box-shadow:var(--lp-shadow)}
.lp .cat::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:var(--lp-pri-l);z-index:0}
.lp .cat>*{position:relative;z-index:1}
.lp .cat .tagm{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;
  border-radius:0;background:var(--lp-pri-l);color:var(--lp-pri);margin-bottom:13px}
.lp .cat h3{font-size:19px;margin-bottom:9px}
.lp .cat p{color:var(--lp-mut);font-size:13.5px;line-height:1.85;min-height:3.4em}
.lp .cat .foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #f1f5f9}
.lp .cat .price{font-size:22px;font-weight:800;color:var(--lp-pri);line-height:1.1}
.lp .cat .price small{display:block;font-size:11.5px;font-weight:400;color:var(--lp-mut);margin-top:3px}

/* 精选机型
   ⚠️ minmax 的最小值别写太大 —— 算过一次：
      原来 300px，而 320px 宽的老手机上可用内容宽只有 280px
      → 卡片撑到 300px → 整页横向溢出 20px，冒出左右滚动条
      改 260px 后最窄也放得下，宽屏仍然自动两列
   经验：minmax 的最小值要 ≤ 最窄设备的可用宽度，按 280px 反推 */
.lp .hotlist{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lp .hrow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--lp-bd);
  border-radius:0;padding:14px 16px;transition:border-color .15s,transform .15s}
.lp .hrow:hover{border-color:#bfdbfe;transform:translateX(3px)}
.lp .hrow .nm{flex:1;min-width:0}
.lp .hrow .nm b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp .hrow .nm span{font-size:11.5px;color:var(--lp-mut)}
.lp .hrow .pr{text-align:right;flex:none}
.lp .hrow .pr b{display:block;font-size:16px;color:var(--lp-pri)}
.lp .hrow .pr span{font-size:11px;color:var(--lp-mut)}

/* 优势列表 */
.lp .advs{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lp .adv{background:#fff;border:1px solid var(--lp-bd);border-radius:0;padding:22px}
.lp .adv b{display:block;font-size:15px;margin-bottom:8px;padding-left:14px;position:relative}
.lp .adv b::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:0;background:var(--lp-pri)}
.lp .adv p{color:var(--lp-mut);font-size:13.5px;line-height:1.85}

/* 地区
   ⚠️ `.fl` 原来是给 emoji 用的（font-size:30px）
      换成内联 SVG 之后必须改成 flex 居中
      否则 svg 是 inline 元素，底边会多出几像素基线空隙，四张卡高度会飘 */
.lp .regs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lp .reg{background:#fff;border:1px solid var(--lp-bd);border-radius:0;padding:22px;
  text-align:center;transition:transform .15s,border-color .15s}
.lp .reg:hover{transform:translateY(-3px);border-color:#bfdbfe}
.lp .reg .fl{margin-bottom:12px;display:flex;align-items:center;justify-content:center}
.lp .reg .fl svg{display:block;width:64px;height:64px}
.lp .reg b{display:block;font-size:16px;margin-bottom:7px}
.lp .reg p{color:var(--lp-mut);font-size:13px;line-height:1.7}
.lp .reg ul{margin-top:13px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.lp .reg ul li{font-size:11.5px;color:var(--lp-fg2);background:var(--lp-bg);
  border:1px solid var(--lp-bd);padding:2px 9px;border-radius:0;white-space:nowrap}

/* 统计条 */
.lp .stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:34px;padding-top:30px;border-top:1px solid var(--lp-bd)}
.lp .stats div{text-align:center}
.lp .stats b{display:block;font-size:28px;font-weight:800;color:var(--lp-pri);line-height:1.1}
.lp .stats span{font-size:12.5px;color:var(--lp-mut)}

/* ══════════ ⑧ CTA ══════════ */
.lp .cta{background:linear-gradient(160deg,#0b1220,#152a4d);color:#fff;padding:70px 0;text-align:center}
.lp .cta h2{font-size:30px}
.lp .cta p{margin:15px auto 0;max-width:40em;color:#cbd5e1;font-size:14.5px;line-height:1.9}
.lp .cta .hero-act{justify-content:center}

/* ══════════ ⑨ 页脚 ══════════
   ★ 同样照 1.0 那份搬（站长要求头尾都用 1.0 的 ✓） */
.lp .ft{background:#0b1220;color:#94a3b8;padding:56px 0 26px;font-size:13.5px}
.lp .ft-grid{display:grid;gap:30px;grid-template-columns:1.6fr 1fr 1fr 1fr}
/* ⚠️ 页脚也用 .brand，但深色底 + 行距紧。22px 会顶得慌，单独压到 18px
      （比改动前的 16px 还是大一点） */
.lp .ft .brand{color:#fff;margin-bottom:14px;font-size:18px}
.lp .ft p{line-height:1.9;font-size:13px}
.lp .ft h4{color:#fff;font-size:13.5px;margin-bottom:13px;font-weight:700}
.lp .ft li{margin-bottom:9px}
.lp .ft a:hover{color:#93c5fd}
.lp .ft-bot{margin-top:38px;padding-top:22px;border-top:1px solid #1e293b;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}

/* ══════════ ⑩ 空数据时的提示 ══════════
   ⚠️ 现在站上只有 2 个商品 ⇒ 那几段可能是空的
      不要留一块白 ✗ 给一句人话 ✓ */
.lp .lp-blank{text-align:center;color:var(--lp-mut);font-size:13.5px;line-height:2;
  padding:36px 20px;border:1px dashed var(--lp-bd);background:#fff}
.lp .lp-blank b{color:var(--lp-fg2)}

/* ══════════ 断点：只有两个，900 平板 / 640 手机 ══════════ */
@media (max-width:900px){
  .lp .nav{display:none}
  .lp .hd-act{display:none}
  .lp .burger{display:block}
  .lp .hero h1{font-size:32px}
  .lp .hero-slide{padding:58px 0 66px}
  .lp .sec{padding:56px 0}
  .lp .sec-hd h2,.lp .cta h2{font-size:25px}
  .lp .sec-hd{margin-bottom:32px}
  .lp .ft-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:640px){
  .lp .hero h1{font-size:26px}
  .lp .hero p{font-size:14.5px}
  .lp .hero-act .btn{flex:1}
  .lp .quick{margin-top:-28px}
  .lp .sec{padding:46px 0}
  .lp .sec-hd h2,.lp .cta h2{font-size:22px}
  .lp .pcard,.lp .cat,.lp .adv,.lp .reg{padding:19px}
  .lp .cat .foot{flex-direction:column;align-items:stretch}
  .lp .cat .foot .btn{width:100%}
  .lp .hrow{flex-direction:column;align-items:stretch;gap:9px}
  .lp .hrow .pr{text-align:left}
  .lp .hrow .pr .btn{width:100%}
  .lp .ft-grid{grid-template-columns:1fr 1fr}
  .lp .ft-bot{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .lp *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════════════
   ⚠️🔴 窄屏收尾 ✗✗ 实测站长那台**视口只有 314px（DPR 1.25）** ✓
   ══════════════════════════════════════════════════════════════════════
   ⚠️ 量出来 `.hd-in` 是 flex、`.lp` 铺满、`landing.css?v=3` ⇒ **页面本身是好的** ✓
      只是进了"手机"那一档 ✓
   🔴 但 314px 下**有几处横向溢出** ✗ 越窄越明显 ✓
      · `.hero-act` 那两个按钮并排 ⇒ 顶出屏幕 ✓
      · `.pgrid` 的 `minmax(260px,1fr)` ⇒ 260 就已经接近 314 了 ✓
      · `.hotlist` / `.advs` / `.cats` 的 minmax 同理 ✓
   ★ 修法 ✗ 到 420px 以下就**单列 + 按钮换行** ✓（别硬塞两列 ✓）✓✓
   ====================================================================== */
@media (max-width: 520px) {
  .lp .hero-act { flex-wrap: wrap; gap: 9px; }
  .lp .hero-act .btn { flex: 1 1 100%; }
  .lp .pgrid { grid-template-columns: 1fr !important; }
  .lp .hotlist, .lp .advs, .lp .cats, .lp .grid, .lp .quick-grid { grid-template-columns: 1fr !important; }
  .lp .pfoot { flex-wrap: wrap; }
  .lp .brand-points { display: none; }
}
@media (max-width: 400px) {
  .lp .hero-slide { padding: 44px 0 50px; }
  .lp .hero h1 { font-size: 24px; }
  .lp .sec { padding: 46px 0; }
  .lp .sec-hd h2 { font-size: 21px; }
  .lp .pf-row { gap: 8px; }
  .lp .pf-pill { height: 28px; padding: 0 10px; font-size: 12.5px; }
}

/* ⚠️🔴 窄屏**文字**横向溢出 ✗✗ 314px 下「弹性计算 · 支付后自动开通」会顶出去 ✓
 *    根因：默认 `overflow-wrap:normal` ⇒ 长串（含 `·` 和英文）不肯断 ✓
 *    ★ 一条管全局 ✗ 别一个个元素去修 ✓✓ */
.lp h1, .lp h2, .lp h3, .lp h4, .lp p, .lp a, .lp span, .lp li, .lp dt, .lp dd, .lp b {
  overflow-wrap: break-word;
  word-break: break-word;
}
.lp img, .lp svg { max-width: 100%; }
@media (max-width: 520px) {
  .lp .hero h1 { font-size: 26px; line-height: 1.4; }
  .lp .hero p { font-size: 14px; }
  .lp .hrow { flex-wrap: wrap; }
  .lp .hrow .pr { text-align: left; width: 100%; }
}

/* ⚠️🔴 `.hero p` 有 `max-width:46em` ✗ 314px 下这个"最大宽"比容器还大 ✓
 *    虽然 `max-width` 不该撑破容器 ✗ 但它会让**行宽**按 46em 算 ✓
 *    实测现象：文字在右边被切掉一截 ✓
 *    ★ 窄屏直接给它 `max-width:100%` ✓✓ */
@media (max-width: 640px) {
  .lp .hero p, .lp .phero p, .lp .sec-hd p, .lp .cta p { max-width: 100%; }
  .lp .hero-slide { padding: 52px 0 58px; }
}


/* ⚠️ 商品卡里那几行小标签（1.0 用 `.tagm` + 颜色变体 ✓）*/
.lp .tagm { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 0; }
.lp .pname .tagm { background: var(--pri-l); color: var(--pri); }

/* ======================================================================
   商品页那一套 -- 1.0 的原文，逐字搬过来的
   ======================================================================
   站长：「产品骨架要和 1.0 长宽高一样」

   来源：脚本从 1.0 的 app/views/products.php 里抽出来的
     筛选用的是**显式清单**（一条条写全），不是前缀猜
     逐条加 lp 前缀，这样在我们的作用域里生效
     一个数值都没改 —— 连两档断点（900 / 640）和那条
     容器查询 max-width:259px 都原样带过来了

   ⚠️⚠️ 位置很要紧：这一整段必须排在**全文件最后**
      因为两边都有 .lp .sec，同权重 => 后者赢
      先前它排在前面，商品页拿到的是落地页的 padding:76px
      （实测：.sec 的 padding 是 76px，而 1.0 是 20px 0 64px）
      谁也别把别的规则挪到它后面

   ⚠️ 上一版抽漏了一整组：.pf-box / .pf-row / .pf-label /
      .pf-pills / .pf-pill / .pf-n
      原因是我按前缀匹配，而 .pf-box 要匹配到「.pf 后面跟一个 -」，
      我那套匹配里没有这个字符 => 筛选条整条被漏掉，
      高度 30px 那些尺寸自然就不在了
      规矩：抽取样式表**显式列清单**，不要用前缀猜

   以后要对尺寸 —— 改这一段就等于改 1.0 ——
   别在别处再写一套同名规则
   ====================================================================== */
.lp .cur{ display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1.25 }
.lp .cur .cur-usd{ display:block }
.lp .cur .cur-cny{ display:block;font-size:.62em;font-weight:500;color:var(--mut) }
.lp .phero{ background:linear-gradient(160deg,#0b1220 0%,#12213d 55%,#0b1220 100%); color:#fff;padding:58px 0 52px }
.lp .phero h1{ font-size:38px;font-weight:800;letter-spacing:-.02em }
.lp .phero p{ margin-top:14px;max-width:46em;font-size:15px;color:#cbd5e1;line-height:1.9 }
.lp .pf{ max-width:1370px;margin:26px auto 0;padding:0 20px }
.lp .pf-box{ background:#fff;border:1px solid var(--bd);border-radius:0; box-shadow:var(--shadow);overflow:hidden }
.lp .pf-row{ display:flex;align-items:flex-start;gap:14px;padding:13px 16px;flex-wrap:wrap }
.lp .pf-row + .pf-row{ border-top:1px solid #f1f5f9 }
.lp .pf-label{ flex:none;padding-top:7px;font-size:12.5px;color:var(--mut);white-space:nowrap }
.lp .pf-pills{ display:flex;flex-wrap:wrap;gap:8px;min-width:0;flex:1 }
.lp .pf-pill{ display:inline-flex;align-items:center;gap:6px;height:30px; padding:0 13px;border-radius:0;border:1px solid var(--bd);background:#fff; font-size:13px;color:var(--fg2);transition:background .13s,color .13s,border-color .13s }
.lp .pf-pill:hover{ border-color:var(--pri);color:var(--pri) }
.lp .pf-pill.top.on{ background:var(--pri);border-color:var(--pri);color:#fff }
.lp .pf-pill.sub.on{ border-color:var(--pri);color:var(--pri);font-weight:600 }
.lp .pf-n{ background:var(--bg);color:var(--mut);font-size:11px;font-weight:600; line-height:16px;padding:0 6px;border-radius:0;font-variant-numeric:tabular-nums }
.lp .pf-pill.sub.on .pf-n{ background:#e8f0ff;color:var(--pri) }
.lp .pf-pill.all{ color:var(--mut) }
.lp .sec{ padding:20px 0 64px }
.lp .sec-hd{ max-width:760px;margin-bottom:30px }
.lp .sec-hd p{ margin-top:12px;color:var(--mut);font-size:14px;line-height:1.9 }
.lp .gblock + .gblock{ margin-top:38px }
.lp .gblock-hd{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px }
.lp .gblock-hd h3{ font-size:19px }
.lp .gblock-hd .cnt{ font-size:12.5px;color:var(--mut) }
.lp .gblock-hd .gdesc, .lp .sec-hd .gdesc{ flex-basis:100%;color:var(--fg2);font-size:13px;line-height:1.8; background:var(--pri-l);border-left:3px solid var(--pri);border-radius:0; padding:10px 14px;overflow-wrap:break-word }
.lp .pgrid{ display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.lp .pcard{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd); border-radius:0;padding:20px; transition:transform .15s,box-shadow .15s,border-color .15s }
.lp .pcard:hover{ transform:translateY(-3px);box-shadow:var(--shadow);border-color:#bfdbfe }
.lp .pname{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; font-size:16px;font-weight:700;line-height:1.5 }
.lp .pname .pn-t{ min-width:0 }
.lp .tagm{ display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:0; margin:8px 6px 0 0;vertical-align:middle }
.lp .tagm.warm{ background:#fef3c7;color:#92400e }
.lp .tagm.red{ background:#fee2e2;color:#b91c1c }
.lp .pspecs{ margin-top:14px;display:flex;flex-wrap:wrap;gap:7px }
.lp .pspec{ font-size:12px;color:var(--fg2);background:var(--bg);border:1px solid var(--bd); padding:3px 10px;border-radius:0;white-space:nowrap }
.lp .pspec i{ font-style:normal;color:var(--mut);margin-right:4px }
.lp .pdesc{ margin-top:13px;color:var(--mut);font-size:13px;line-height:1.8;overflow-wrap:break-word }
.lp .phl{ margin-top:14px;padding-top:8px; display:flex;flex-wrap:wrap;gap:6px;min-width:0 }
.lp .phlb{ display:inline-block;font-size:12px;font-weight:600;line-height:1.5; padding:2px 9px;border-radius:0; border:1px solid var(--hl,#dc2626); background:#fff;color:var(--hl,#dc2626);overflow-wrap:anywhere }
.lp .pcard{ container-type:inline-size;container-name:pd }
.lp .pdesc2{ display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr); column-gap:12px;row-gap:5px;align-items:baseline;margin-top:13px; font-size:13px;line-height:1.7 }
.lp .pdesc2 dt{ color:var(--mut);max-width:9em;overflow-wrap:anywhere }
.lp .pdesc2 dd{ color:var(--fg);font-weight:700;margin:0;min-width:0;overflow-wrap:anywhere }
.lp .pdesc2 .pd-full{ grid-column:1 / -1;color:var(--fg2);overflow-wrap:anywhere; font-weight:400 }
.lp .pdesc2 .pd-sp{ min-height:0 }
@container pd (max-width:259px) {
  .lp .pdesc2{ grid-template-columns:minmax(0,1fr) }
  .lp .pdesc2 dt{ max-width:none }
  .lp .pdesc2 dd{ margin-top:-2px }
  .lp .pdesc2 .pd-sp{ display:none }
}
.lp .pname .pn-t{ min-width:0 }
.lp .pname .tagm{ margin:0;vertical-align:baseline }
.lp .tagm.ok{ background:#ecfdf5;color:#047857 }
.lp .pbot{ margin-top:auto;padding-top:16px;display:flex;align-items:flex-end; justify-content:space-between;gap:12px }
.lp .pprice{ font-size:22px;font-weight:800;color:var(--pri);line-height:1.2;word-break:break-all }
.lp .pprice .pfrom{ font-size:12px;font-weight:400;color:var(--mut);margin-left:4px }
.lp .pprice .pnone{ font-size:14px;font-weight:600;color:var(--mut) }
.lp .pbot .btn{ padding:9px 18px;font-size:13.5px;flex:none }
.lp .empty{ padding:26px 0 6px;color:var(--mut);font-size:14px;line-height:1.9 }
.lp .empty a{ color:var(--pri);font-weight:600 }
@media (max-width:900px) {
  .lp .phero{ padding:44px 0 40px }
  .lp .phero h1{ font-size:30px }
  .lp .pf{ margin-top:20px }
  .lp .pf-row{ padding:11px 13px;gap:10px }
  .lp .sec{ padding:18px 0 50px }
}
@media (max-width:640px) {
  .lp .phero h1{ font-size:25px }
  .lp .phero p{ font-size:14px }
  .lp .pf{ margin-top:16px }
  .lp .pf-label{ padding-top:5px;flex-basis:100% }
  .lp .sec{ padding:14px 0 42px }
  .lp .gblock-hd h3{ font-size:17px }
  .lp .pcard{ padding:17px }
  .lp .pbot{ flex-direction:column;align-items:stretch }
  .lp .pbot .btn{ width:100% }
}
.lp .pf-hello{ max-width:1370px;margin:26px auto 0;padding:0 20px;color:var(--mut);font-size:14px }
.lp .phl--sep{ padding-top:13px;border-top:1px solid var(--bd) }

/* ======================================================================
   ★★ 商品网格：**照 1.0 原样** ✗✗ 我那段"强制 4 列"已撤
   ======================================================================
   🔴 站长：「尺寸对不上」✓ 我把 1.0 的几何全量了一遍，发现**两处是我改的** ✓
       ① 本条：我盖成 `repeat(4, minmax(0,1fr))` + 三档断点
       ② `.phero p` 我把 `max-width:46em` 改成了 `100%`

   1.0 实测（视口 2382，`.pgrid` 宽 1328）：
        `.pgrid { display:grid; gap:16px;
                  grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }`
        cols = **326.5px × 4**   ⇒ 4 列、每列 326.5 ✓  `.pcard w=324` ✓
   ⇒ 1.0 那条**本来就会给 4 列**（内容区 1328 时）✗
      而窗口窄了它会自然降成 3 / 2 列 ✓ 这才是它原本的行为 ✓✓
   ★ 所以**撤掉我那段** ✗ 回到 1.0 那条 `auto-fill` ✓
      它在 `landing.css` 里**本来就有**（商品页那一大段 ✓）✓✓
   ====================================================================== */

/* ======================================================================
   窄卡片里的价格行 -- 放不下就**竖排**，别硬挤
   ======================================================================
   🔴 站长截图（视口 ~1895 ⇒ 内容区 1370 ⇒ **4 列每列 330px**）：
      那个「立即购买」换行到价格下面了 ✓

   ⚠️ 算一遍就知道为什么：
      卡片 330 − 左右 padding 40 − 边框 2 = **内容区 288px**
      `.pprice` 107 + `gap` 12 + `.btn` 92 = **211px** ⇒ 按理放得下 ✓
      🔴 但价格是「¥199.00起/月」这种 ⇒ 三个数字 + 中文 ⇒ 实测能到 130+
         加上按钮 92 + 间隙 12 = 234 ⇒ 一逼就换行 ✓✓

   ★ 与其让它"有时候换行有时候不换"（同一排卡片高低不一 ✓）
     不如**明确分档**：
       · 卡片 >= 270px（内容区 >= 228px）⇒ **一行**（1.0 的形状 ✓）
       · 更窄 ⇒ **竖排**：价格一行、按钮整宽一行 ✓
         按钮整宽也更好点 ✓ 这是移动端本来就在用的形状 ✓✓

   ⚠️ 用容器查询 `.pcard` 自己的宽度判 ✗ 不用视口判 ✓
      `.pcard` 上本来就有 `container-type:inline-size;container-name:pd`
      （1.0 原文带的 ✓ 它自己用来判 `pdesc2` 单双列 ✓）
      ⇒ 再挂一条同名的容器查询即可 ✓ **不用改模板** ✓✓
   ====================================================================== */
@container pd (max-width: 269px) {
	.lp .pbot,
	.pbot { flex-direction: column; align-items: stretch; gap: 10px; }
	.lp .pbot .btn,
	.pbot .btn { width: 100%; }
}

/* 🔴🔴 撤回：`.phero p` 的 `max-width` 是 **46em**（1.0 的原值）
   ======================================================================
   ⚠️ 我一度改成 `100%` ✗ 理由是"1.0 是内容多宽就多宽" ✓
      但我**量了 1.0**（视口 2382）：`.phero p { w=690  fs=15px }`
      ⇒ 690 / 15 = **46** ⇒ 就是 `max-width:46em` ✓ 我判断错了 ✓✓
   ★ 现在这条**不写** ✗ 让 landing.css 里 1.0 原文那条
     （`.lp .phero p{ margin-top:14px;max-width:46em;font-size:15px;… }`）生效 ✓
   ====================================================================== */

/* ======================================================================
   商品网格：**固定 4 列**（站长明确要求，不是 1.0 的行为）
   ======================================================================
   🔴🔴 站长两次说过同一件事 ✗✗
        ·「根据现在内容区的宽度放 **4 个**产品横排显示啊，这样放 4 个出来像个什么」
        ·「产品页卡片又变窄了」
   ⚠️ 而 1.0 那条是 `repeat(auto-fill, minmax(260px,1fr))` ✓
      它的行为是"能塞几列塞几列"：
        内容区 1328 ⇒ 4 列（326.5px）✓
        内容区更大 ⇒ **5 列**（更窄）✓
      ⇒ 宽屏上卡片**越宽越窄** ✗ 正是站长说的"又变窄了" ✓✓

   ★ 所以这里**必须盖掉 1.0 那条** ✗ 固定 4 列 ✓
     ⚠️ 我一度撤掉过这一段（理由是"照 1.0"）⇒ 卡片立刻变窄 ✓
        **站长的话优先级高于 1.0** ✓ 别再撤了 ✓✓

   ⚠️ 三件事一起做才对：
     ① `!important` ✗ 1.0 那条在文件**前面**、同权重 ⇒ 不加会平手 ✓
        而且要压住更早那条 `@media (max-width:520px)` 里的
        `.lp .pgrid{grid-template-columns:1fr !important}` ✓✓
     ② `minmax(0,1fr)` 而不是 `1fr` ✗
        1fr 的隐含最小尺寸是 `auto` ⇒ 卡里有长串（`Windows/Linux`）
        会把列顶宽 ⇒ 整页横向滚动 ✓✓
     ③ 断点只留**两档** ✗ 不再搞三档 ✓
        内容区 >= 700 ⇒ 4 列（每列 >= 163px）
        更窄         ⇒ 2 列
        （163px 很挤 ✗ 但那是"窗口真的很窄"时才发生 ✓
          正常桌面 1280+ ⇒ 每列 298px+ ✓✓）
   ====================================================================== */
.lp .pgrid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 739px) {
	.lp .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ======================================================================
 *  ★★ 商品卡的高亮标签 + 分割线 ✗✗ 站长要的（1.0 就有）
 * ======================================================================
 *  ⚠️ 位置照 1.0 那张截图 ✗ 一条都不许错
 *       名字 / 规格 dl / **分割线** / 标签 / 价格按钮
 *
 *  ★ 分割线为什么能通栏 ✗✗
 *     `.pcard` 是 `flex-direction:column`
 *     `.ptags-hr` 是它的**直接子元素** => flex 项 => **自动撑满整行** ✓✓
 *     ⚠️ 要是塞进 `dl.pdesc2` 里 => 那是个 grid
 *        => 只占一列 => **半边线** ✓✓
 *
 *  ⚠️ 标签用 `inline-flex` 而不是 `flex` ✗
 *     一行放不下要**自动换行**（`flex-wrap:wrap` 在容器上 ✓）
 *     每个标签自己**不被拉宽**（`flex` 会把它们等宽撑开 ✓）✓✓
 * ====================================================================== */
.ptags {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 13px;
}
/* ★ 标签本体 ✗ 描边方框，颜色由行内样式给（没给就用整站那支蓝 ✓）*/
.ptag {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--pri);
	border-radius: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--pri);
	white-space: nowrap;
}
/* ★ 分割线 ✗ 站长特意说「不需要颜色」⇒ 就是一条最淡的灰线 ✓
 *  ⚠️ 用 border-top 不是 background ✗ 背景会被"撑多高"影响 ✓
 *  🔴 **通栏**：`width:100%` + 它外边距自己管 ✓✓ */
/* ★ 分割线 ✗ 站长特意说「不需要颜色」⇒ 就是一条最淡的灰线 ✓
 *  🔴 它是**卡片写死的**（商品里只录标签 ✓ 站长纠正过 ✓）
 *     所以它在 `.ptags` **外面**，是 `.pcard` 的直接子元素
 *     `.pcard` 是 flex column ⇒ 它自动撑满整行 ✓✓
 *  ⚠️ 用 `border-top` 不用 `background` ✗ 背景会被"撑多高"影响 ✓
 *  ⚠️ 上下留白写在这儿（`margin` ✓）
 *     因为它在 `.ptags` 外面，**吃不到** 那个 `gap` ✓✓ */
.ptags-hr {
	width: 100%;
	height: 0;
	/* 🔴 用**看得见**的灰 ✗✗
	 *  ⚠️ 我第一版用 `var(--bd)` = `#e2e8f0` ⇒ 站长说「看不到分割线」✓
	 *     实测：那条线**画出来了**（HTML 在、CSS 在、没被任何规则盖 ✓）
	 *     ⇒ 纯粹是**太淡**：1px 的 #e2e8f0 在**白卡片**上几乎看不见 ✓✓
	 *  ★ 判据 ✗ **"存在"不等于"看得见"** —
	 *     做线/做边框这种"弱装饰"，要在**目标背景上**校对比，
	 *     不能拿设计规范里的"边框色"直接用 ✓✓
	 *     （#e2e8f0 是给"卡片描边"用的 ✗ 那是**边界**；
	 *       分割线要在**白底中间**被看见 ⇒ 得再深一档 ✓）
	 *  ⚠️ 1.0 那种"细灰线"的目标是**看得见但不抢戏** ✓
	 *     `#d0d7e2` 比卡片描边深一档、比文字浅很多 ⇒ 正好 ✓✓ */
	border-top: 1px solid #d0d7e2;
	/* ⚠️ 上下留白**自己管** ✗ 因为线在 `.ptags` 外面，吃不到那个 gap ✓
	 *  ⚠️ 上 16 下 12 ✗ 不是上下都 13
	 *     上面是"规格表"（行距紧 ✓）· 下面是"标签"（自己还有 padding ✓）
	 *     上下等分反而显得线偏下 ✓✓ */
	margin: 16px 0 12px;
}