@charset "UTF-8";
/* ============================================================================
 * R51 官网首页样式（唯一实现）
 * 作用域：本文件只服务 index/index/landing.html（首页）与 index/index/price.html（价格页）。
 * 约束：
 *   1) 零第三方依赖、零外链字体（规避国内网络与 CLS）；
 *   2) 全部选择器以 lp- 前缀，避免与入口产物 ai_service.css(.ymwl-*) / layui 冲突；
 *   3) 断点固定六档：480 / 768 / 1024 / 1440（守卫 #201 断言存在）；
 *   4) 合规声明条 .lp-notice 必须非 fixed 且为浅底（守卫 #201 负向锁）。
 *   5) 令牌与 public/static/akf/akf.css 权威值对齐（守卫 #202 正向锁）。
 * 深色例外（口径③ 的全部例外，仅此两处）：
 *   a) .lp-hero  —— 首屏主视觉，深色渐变底；
 *   b) .lp-code  —— 代码框，深底是 Web 惯例（浅色化会显著降低可读性）。
 *   其余区块一律浅色；不允许再出现第三处深色区块底色。
 * ==========================================================================*/

/* ── 1. 设计 tokens ─────────────────────────────────────────────────────── */
:root{
    /* 品牌 / 语义 */
    --lp-primary:#2F6BFF; --lp-primary-hover:#1E56E8; --lp-primary-active:#174AC4; --lp-primary-bg:#EBF1FF;
    --lp-success:#22B07D; --lp-success-bg:#E8F7F1;
    --lp-warning:#FF9F1C; --lp-warning-bg:#FFF4E5;
    --lp-danger:#F54A45;  --lp-danger-bg:#FDEBEB;
    --lp-grad-brand:linear-gradient(120deg,#2F6BFF 0%,#1E56E8 100%);
    /* 文字 */
    --lp-text:#1F2329; --lp-text-2:#646A73; --lp-text-3:#8F959E; --lp-text-4:#BBBFC4;
    --lp-text-inv:#FFFFFF; --lp-text-inv-2:rgba(255,255,255,.72); --lp-text-inv-3:rgba(255,255,255,.56);
    --lp-hero-accent:#8AB4FF;              /* Hero 深底上唯一强调色（替代原 AI 青） */
    --lp-on-primary-line:rgba(255,255,255,.22);
    /* 边框 / 背景 */
    --lp-border:#E5E7EB; --lp-border-2:#EEF0F3; --lp-border-3:#D8DADE;
    --lp-bg:#F5F6F8; --lp-bg-2:#F2F3F5; --lp-surface:#FFFFFF;
    /* 深色（仅 Hero 与代码框） */
    --lp-ink:#0E1626; --lp-ink-2:#1A2745;
    --lp-grad-hero:radial-gradient(120% 120% at 78% 22%, rgba(47,107,255,.34) 0%, rgba(47,107,255,0) 56%),
                   linear-gradient(158deg,#0E1626 0%,#141E33 52%,#1A2745 100%);
    /* 底部 CTA 浅底强调块 */
    --lp-cta-bg:var(--lp-primary-bg);
    --lp-cta-glow:radial-gradient(80% 140% at 88% 50%, rgba(47,107,255,.16) 0%, rgba(47,107,255,0) 62%);
    /* 圆角（＝ akf.css 权威 10/8/6/4 + pill） */
    --lp-r-lg:10px; --lp-r-md:8px; --lp-r-sm:6px; --lp-r-xs:4px; --lp-r-pill:999px;
    /* 阴影（＝ akf.css 权威） */
    --lp-sh-sm:0 1px 2px rgba(31,35,41,.05); --lp-sh:0 2px 8px rgba(31,35,41,.08);
    --lp-sh-lg:0 8px 24px rgba(31,35,41,.12); --lp-sh-primary:0 4px 12px rgba(47,107,255,.28);
    /* 字号阶梯（6 档） */
    --lp-fs-h1:clamp(28px,4.6vw,52px); --lp-fs-h2:clamp(22px,2.6vw,32px); --lp-fs-h3:18px;
    --lp-fs-lg:16px; --lp-fs:14px; --lp-fs-sm:13px; --lp-fs-xs:12px;
    --lp-lh-tight:1.25; --lp-lh:1.6;
    /* 间距（8px 基网格）+ 节奏 */
    --lp-sp-1:4px; --lp-sp-2:8px; --lp-sp-3:12px; --lp-sp-4:16px;
    --lp-sp-5:24px; --lp-sp-6:32px; --lp-sp-7:48px; --lp-sp-8:64px;
    --lp-sec-y:clamp(48px,6vw,88px); --lp-sec-y-tight:clamp(32px,4vw,56px);
    --lp-gutter:clamp(16px,4vw,32px); --lp-wrap:1200px; --lp-hdr-h:64px;
    /* 入口浮层安全区已于 R53 批⑦（用户拍板 2026-10-13）整体移除：页面不再为右下角
       悬浮竖条（#ymwl-kefu）让位，允许其与正文右下角重叠 —— 原方案（--lp-entry-w
       横向预留）把 375 视口正文压窄 70px，整页不协调。曾试过的 body 纵向预留
       （--lp-entry-h）会把页脚顶出视口，随本决策一并废除，两个 token 均不再存在。
       关键交互的可达性改由探针 D 判据兜底（导航 / 主 CTA / 页脚链接**中心点**
       不得被入口子树命中——它们的中心点天然远离右下角，实测全绿）。 */
    /* 过渡 / 字体 */
    --lp-ease:cubic-bezier(.22,.61,.36,1); --lp-t-fast:160ms; --lp-t-base:240ms;
    --lp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --lp-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
    /* 代码框前景（深底专用） */
    --lp-code-fg:#C8D6F0;
}

/* ── 2. 基础 ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--lp-hdr-h) + 16px)}
body{
    margin:0;
    font-family:var(--lp-font);
    font-size:var(--lp-fs-lg);
    line-height:var(--lp-lh);
    color:var(--lp-text);
    background:var(--lp-surface);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--lp-primary);outline-offset:2px;border-radius:var(--lp-r-xs)}

.lp-skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    padding:10px 16px;background:var(--lp-primary);color:var(--lp-text-inv);border-radius:0 0 var(--lp-r-lg) 0;
}
.lp-skip:focus{left:0}

/* R53 批⑦：页面不再为右下角入口浮层预留安全区（用户拍板允许重叠，
   原 --lp-entry-w 横向让位已整体移除，见 :root token 注释） */
.lp-wrap{width:100%;max-width:var(--lp-wrap);margin-inline:auto;padding-left:var(--lp-gutter);padding-right:var(--lp-gutter)}
.lp-sec{padding-block:var(--lp-sec-y)}
.lp-sec--tight{padding-block:var(--lp-sec-y-tight)}
.lp-bg-soft{background:var(--lp-bg)}

/* ── 2.5 原语（R53 批①）：容器 / 条目 / 节奏 ─────────────────────────────
 * 目的：消除 .lp-card / .lp-mod / .lp-step / .lp-tier / .lp-form-mock 各自
 *   重复书写的「白底 + 1px 边框 + 10px 圆角」三行 —— 由 .lp-panel 统一承载，
 *   各卡片类只保留**差异**声明（内距 / 排布 / 过渡）。
 * ⚠️ 本节必须位于所有消费类**之前**：同为单类选择器，靠书写顺序决胜，
 *   消费类（如 .lp-form-mock 的 background）需要能覆盖 .lp-panel 的默认值。
 * ⚠️ 死代码纪律：不定义暂无消费方的变体。
 * ------------------------------------------------------------------------ */
.lp-panel{background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:var(--lp-r-lg)}

/* 条目原语：图标 + 标题 + 说明（Bento 各项 / 模块带共用同一语法） */
.lp-feature{display:flex;gap:var(--lp-sp-4);align-items:flex-start}
.lp-feature__ico{
    width:40px;height:40px;flex:none;border-radius:var(--lp-r-md);
    display:flex;align-items:center;justify-content:center;
    background:var(--lp-primary-bg);color:var(--lp-primary);
}
.lp-feature__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lp-feature__t{font-size:var(--lp-fs-lg);font-weight:700;line-height:var(--lp-lh-tight)}
.lp-feature__d{margin-top:var(--lp-sp-2);font-size:var(--lp-fs);color:var(--lp-text-2)}

/* 节奏原语：垂直块间距统一入口，替代各处手写的 margin-top / margin-bottom */
.lp-flow{--lp-flow-gap:var(--lp-sp-5);display:flex;flex-direction:column;gap:var(--lp-flow-gap)}

.lp-eyebrow{
    display:inline-flex;align-items:center;gap:var(--lp-sp-2);
    font-size:var(--lp-fs-sm);font-weight:600;letter-spacing:.04em;
    color:var(--lp-primary);
    background:var(--lp-primary-bg);
    border:1px solid rgba(47,107,255,.22);
    padding:5px 12px;border-radius:var(--lp-r-pill);
}
/* 原 AI 青紫语义已收敛为品牌蓝（口径④）：--ai 修饰类保留以兼容模板类名 */
.lp-eyebrow--ai{color:var(--lp-primary);background:var(--lp-primary-bg);border-color:rgba(47,107,255,.22)}

.lp-h2{font-size:var(--lp-fs-h2);line-height:var(--lp-lh-tight);font-weight:700;letter-spacing:-.01em}
.lp-lead{margin-top:14px;font-size:var(--lp-fs-lg);color:var(--lp-text-2);max-width:62ch}
.lp-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.lp-head--center{margin-inline:auto;text-align:center}
.lp-head--center .lp-lead{margin-inline:auto}
.lp-head .lp-h2{margin-top:var(--lp-sp-4)}
/* 章节内小节标题（R53 批⑤ 取代原 `.lp-subhead`）：
   排印（字号/字重/行高）交给已存在的 `.lp-h2`，本修饰类只承担**与上文的间距**
   —— 原 `.lp-subhead` 把「排印」与「间距」打包在一个类里，导致消费者被迫连排印
   一起继承（价格页还额外用行内 style 覆盖字号）。拆开后：排印归 `.lp-h2`、
   间距归本修饰类，不再有行内覆盖。唯一消费点＝价格页「三档共同包含」。 */
.lp-head--sub{margin-top:clamp(32px,4vw,56px)}

/* ── 3. 按钮（3 档高度：44 / 36 / 30） ─────────────────────────────────── */
.lp-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--lp-sp-2);
    height:44px;padding:0 22px;border-radius:var(--lp-r-lg);
    font-size:var(--lp-fs-lg);font-weight:600;white-space:nowrap;
    transition:transform var(--lp-t-fast) var(--lp-ease),box-shadow var(--lp-t-fast) var(--lp-ease),background-color var(--lp-t-fast) var(--lp-ease);
}
.lp-btn--primary{background:var(--lp-primary);color:var(--lp-text-inv);box-shadow:var(--lp-sh-primary)}
.lp-btn--primary:hover{background:var(--lp-primary-hover);transform:translateY(-1px);box-shadow:0 10px 24px rgba(47,107,255,.34)}
.lp-btn--ghost{color:var(--lp-text);border:1px solid var(--lp-border-3);background:var(--lp-surface)}
.lp-btn--ghost:hover{border-color:var(--lp-primary);color:var(--lp-primary)}
/* 仅用于深色 Hero 作用域（口径③ 例外 a） */
.lp-btn--on-dark{color:var(--lp-text-inv);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.lp-btn--on-dark:hover{background:rgba(255,255,255,.14)}
.lp-btn--sm{height:36px;padding:0 16px;font-size:var(--lp-fs)}
.lp-btn--block{width:100%}

/* ── 4. 合规声明条（非 fixed；浅底强调；关闭记忆 localStorage） ─────────── */
.lp-notice{
    position:relative;
    background:var(--lp-primary-bg);
    color:var(--lp-text-2);
    border-bottom:1px solid var(--lp-border);
    font-size:var(--lp-fs-sm);line-height:var(--lp-lh);
    padding:10px 0;
}
/* ⚠️ 必须 column：原 flex 横排 + p{flex:1} 会把「两句合规声明」并成左右两列窄文本
   （375 视口每行仅 6~8 字，是肉眼可见的破碎排版）。右侧预留 40px 供绝对定位的关闭钮 */
.lp-notice__in{display:flex;flex-direction:column;align-items:flex-start;gap:var(--lp-sp-2);padding-right:40px}
.lp-notice__ico{width:16px;height:16px;flex:none;stroke:var(--lp-warning)}
.lp-notice p{width:100%}
.lp-notice p + p{margin-top:2px}
.lp-notice__close{
    position:absolute;right:var(--lp-gutter);top:12px;z-index:2;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    color:var(--lp-text-2);border-radius:var(--lp-r-md);
}
.lp-notice__close:hover{color:var(--lp-primary);background:rgba(47,107,255,.1)}
.lp-notice__close svg{width:14px;height:14px}
.lp-notice[hidden]{display:none}

/* ── 5. 页头 / 导航 / 抽屉 ──────────────────────────────────────────────── */
.lp-header{
    position:sticky;top:0;z-index:60;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid transparent;
    transition:box-shadow var(--lp-t-base) var(--lp-ease),border-color var(--lp-t-base) var(--lp-ease);
}
.lp-header.is-stuck{box-shadow:var(--lp-sh);border-bottom-color:var(--lp-border)}
.lp-header__in{display:flex;align-items:center;gap:var(--lp-sp-5);min-height:var(--lp-hdr-h)}
.lp-brand{display:flex;align-items:center;gap:10px;flex:none;font-weight:700;font-size:17px;letter-spacing:-.01em}
.lp-brand img{max-height:32px;width:auto}
.lp-brand__mark{
    width:30px;height:30px;border-radius:var(--lp-r-md);flex:none;
    background:var(--lp-grad-brand);
    display:flex;align-items:center;justify-content:center;
    color:var(--lp-text-inv);font-size:var(--lp-fs-sm);font-weight:800;letter-spacing:0;
}
.lp-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.lp-nav a{
    padding:8px 12px;border-radius:var(--lp-r-md);font-size:var(--lp-fs);color:var(--lp-text-2);
    transition:color var(--lp-t-fast) var(--lp-ease),background-color var(--lp-t-fast) var(--lp-ease);
}
.lp-nav a:hover{color:var(--lp-text);background:var(--lp-bg)}
.lp-nav a.is-active{color:var(--lp-primary);background:var(--lp-primary-bg)}
.lp-header__cta{display:flex;align-items:center;gap:10px;flex:none}
/* ⚠️ 抽屉内的 CTA 副本：必须默认隐藏，只在 <1024 由断点区打开。
   漏了这条默认值 ⇒ ≥1024 时它与 .lp-header__cta 同时渲染，页头出现两组登录/试用按钮
   （R50-C 真机截图实测；守卫 #201 长期锁定该基础值）。 */
.lp-header__cta--drawer{display:none}
.lp-burger{
    display:none;width:44px;height:44px;margin-left:auto;
    align-items:center;justify-content:center;border-radius:var(--lp-r-md);
}
.lp-burger:hover{background:var(--lp-bg)}
.lp-burger svg{width:22px;height:22px;stroke:var(--lp-text)}

/* ── 6. Hero（口径③ 例外 a：唯一深色区块） ────────────────────────────── */
.lp-hero{
    position:relative;overflow:hidden;
    background:var(--lp-grad-hero);
    color:var(--lp-text-inv);
    padding-block:clamp(40px,9vw,60px) clamp(46px,10vw,60px);
}
/* ⚠️ z-index 必须显式分层：两枚模糊圆是 absolute 定位元素，若不给 z-index，
   ::after（DOM 顺序最后）会绘制在 .lp-hero__in 之上 ⇒ 蓝雾糊住 Hero 文案与示意件 */
.lp-hero::before,.lp-hero::after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(80px);pointer-events:none}
.lp-hero::before{width:520px;height:520px;left:-140px;top:-180px;background:rgba(47,107,255,.34)}
.lp-hero::after{width:460px;height:460px;right:-160px;top:40px;background:rgba(47,107,255,.22)}
.lp-hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,64px);align-items:center}
.lp-hero h1{
    margin-top:var(--lp-sp-5);
    font-size:var(--lp-fs-h1);
    line-height:1.16;font-weight:800;letter-spacing:-.02em;
}
/* ⚠️ 渐变文字必须有**真实**回落：background-clip:text 不受支持时
   color:transparent 会让强调词彻底消失（用户可见的「文字不见了」）。
   故基础态给可读实色，仅在支持时才切透明 + 渐变裁剪。 */
.lp-hero h1 em{font-style:normal;color:var(--lp-hero-accent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
    .lp-hero h1 em{
        background:var(--lp-grad-brand);
        -webkit-background-clip:text;background-clip:text;
        color:transparent;
    }
}
.lp-hero__lead{margin-top:var(--lp-sp-5);font-size:clamp(15px,1.6vw,18px);color:var(--lp-text-inv-2);max-width:56ch}
.lp-hero__cta{display:flex;flex-wrap:wrap;gap:var(--lp-sp-3);margin-top:var(--lp-sp-6)}
.lp-hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--lp-sp-6)}
.lp-fact{display:inline-flex;align-items:center;gap:var(--lp-sp-2);font-size:var(--lp-fs);color:var(--lp-text-inv-2)}
.lp-fact svg{width:16px;height:16px;flex:none;stroke:var(--lp-hero-accent)}

/* Hero 视觉：纯 CSS/HTML 的「会话 + 知识库」示意（不依赖任何图片资产） */
.lp-mock{
    position:relative;
    border-radius:var(--lp-r-lg);
    padding:clamp(16px,2.4vw,24px);
    background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 30px 60px rgba(0,0,0,.32);
}
.lp-mock__bar{display:flex;align-items:center;gap:6px;margin-bottom:var(--lp-sp-4)}
.lp-mock__dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26)}
.lp-mock__title{margin-left:var(--lp-sp-2);font-size:12.5px;color:var(--lp-text-inv-2)}
.lp-mock__row{display:flex;gap:10px;margin-bottom:var(--lp-sp-3)}
.lp-mock__row--me{flex-direction:row-reverse}
.lp-avt{width:28px;height:28px;border-radius:50%;flex:none}
.lp-avt--ai{background:var(--lp-grad-brand)}
.lp-avt--me{background:rgba(255,255,255,.2)}
.lp-bub{
    max-width:78%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:var(--lp-lh);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:var(--lp-text-inv);
}
.lp-bub--me{background:rgba(47,107,255,.5);border-color:rgba(47,107,255,.6)}
.lp-bub__src{
    display:inline-flex;align-items:center;gap:6px;margin-top:var(--lp-sp-2);padding-top:var(--lp-sp-2);
    border-top:1px dashed rgba(255,255,255,.2);
    font-size:11.5px;color:var(--lp-hero-accent);
}
.lp-bub__src svg{width:12px;height:12px;stroke:var(--lp-hero-accent)}
.lp-mock__kb{
    margin-top:var(--lp-sp-4);padding:12px 14px;border-radius:14px;
    background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);
}
.lp-mock__kb-t{display:flex;align-items:center;gap:var(--lp-sp-2);font-size:var(--lp-fs-xs);color:var(--lp-text-inv-2);margin-bottom:10px}
.lp-mock__kb-t svg{width:13px;height:13px;stroke:var(--lp-hero-accent)}
.lp-mock__bars{display:flex;flex-direction:column;gap:var(--lp-sp-2)}
.lp-mock__bar-l{height:7px;border-radius:var(--lp-r-xs);background:rgba(255,255,255,.16)}
.lp-mock__bar-l--hit{background:var(--lp-grad-brand);width:64%}
.lp-mock__badge{
    position:absolute;right:-10px;bottom:18px;
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 12px;border-radius:var(--lp-r-pill);
    background:var(--lp-text-inv);color:var(--lp-text);font-size:12.5px;font-weight:600;
    box-shadow:var(--lp-sh-lg);
}
.lp-mock__badge svg{width:14px;height:14px;stroke:var(--lp-success)}

/* ── 7. 能力矩阵 → Bento 异构矩阵（R53 批②） ──────────────────────────────
 * 取代原「6 张等高卡片」：用三档跨度做出主次层级，纵向高度约降 35%。
 *   ≥1024 12 栅格：7 + 5 / 4 + 4 + 4 / 12 ⇒ 3 行，无孤儿
 *   768~1023 2 栅格：lead/s5/wide 各跨 2 ⇒ [2] [1,1] [1,1] [2] ⇒ 4 行，无孤儿
 *   <768 1 栅格 ⇒ 6 行顺序排列（修饰类不写 grid-column 即 auto=1 列，无需复位）
 * ⚠️ 顺序锁：≥768 块**必须**写在 ≥1024 块之前。三个修饰类的 grid-column 在两档
 *   均有声明且同为单类权重，靠书写顺序决胜；顺序颠倒会让 ≥1024 的 --lead 被
 *   ≥768 的 span 2 反超（与 R51 踩过的 .lp-visual 反超同源）。守卫 #207 锁定。
 * ⚠️ Bento 项的模板顺序即落位顺序（lead=1 / s5=2 / wide=6），守卫 #207 亦锁序。
 * ------------------------------------------------------------------------ */
.lp-bento{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
.lp-bento__i{
    padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
    transition:transform var(--lp-t-base) var(--lp-ease),box-shadow var(--lp-t-base) var(--lp-ease),border-color var(--lp-t-base) var(--lp-ease);
}
.lp-bento__i:hover{transform:translateY(-3px);box-shadow:var(--lp-sh);border-color:rgba(47,107,255,.28)}
.lp-bento__i--lead{padding:clamp(24px,2.6vw,34px)}
/* 主卡层级＝跨列 + 图标放大 + 标题升档（不引入第二种卡片语法） */
.lp-bento__i--lead .lp-feature__ico{width:52px;height:52px}
.lp-bento__i--lead .lp-feature__ico svg{width:26px;height:26px}
.lp-bento__i--lead .lp-feature__t{font-size:var(--lp-fs-h3)}
/* 主卡底部标签：取代原 .lp-card__k 的 `border-top:1px dashed` 分界线
   （虚线分隔是模板化痕迹；改为留白 + 品牌色文字） */
.lp-bento__tag{
    margin-top:auto;padding-top:var(--lp-sp-5);
    display:flex;align-items:center;gap:6px;
    font-size:var(--lp-fs-sm);color:var(--lp-primary);
}
.lp-bento__tag svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
/* 通栏模块带（客服工作台）：横向布局，右侧锚点直达该区块 */
.lp-bento__i--wide{flex-direction:row;align-items:center;gap:var(--lp-sp-5);justify-content:space-between}
.lp-bento__i--wide .lp-feature{flex:1 1 auto}
.lp-bento__go{flex:none;font-size:var(--lp-fs);font-weight:600;color:var(--lp-primary);white-space:nowrap}
.lp-bento__go:hover{text-decoration:underline}

@media (min-width:768px){
    .lp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* ⚠️ 只有 lead 与 wide 跨 2：2 栅格下若再让 --s5 跨 2，则 span-1 项为
       「3 个（奇数）」⇒ 必产生半行空洞（真机实测 768 落位 [1,1,2,1,1]/5 行）。
       现值 ⇒ lead 满行 · s5+默认 满行 · 默认+默认 满行 · wide 满行 = 4 行无空洞。 */
    .lp-bento__i--lead,.lp-bento__i--wide{grid-column:span 2}
}
@media (min-width:1024px){
    .lp-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
    .lp-bento__i{grid-column:span 4}
    .lp-bento__i--lead{grid-column:span 7}
    .lp-bento__i--s5{grid-column:span 5}
    .lp-bento__i--wide{grid-column:span 12}
}

/* R53 批③：`.lp-grid` / `.lp-card*` 已随能力区与 AI 区改版全部下线
   （能力区 → `.lp-bento`，AI 专章 → `.lp-split` + `.lp-actions`），全站零消费。
   守卫 #207-9 以边界正则锁死零回潮。 */

/* ── 8. 上线面板与横向进度条（R53 批④） ────────────────────────────────── */
/* 取代原「3 张竖排 .lp-step 卡片」：三步本质是一条**有序流程**，横排进度条
   才能一眼看出先后；三张等价卡片既无方向感，也让本区与「AI 动作轨道」重复。
   面板底色用 --lp-bg-2（比 --lp-bg 略深）：首页本区在**白底** .lp-sec 上、
   价格页在 .lp-bg-soft 上 ⇒ 用「相对区块的对比色」而不是绝对白，才不会出现
   「白底面板在白底上只剩 1px 边框」的无层次观感。 */
.lp-launch{
    /* 与上方 AI 区的纵向间隔：原由 `.lp-head.lp-subhead`
       （margin-top:clamp(32px,4vw,56px)）承担；本批改为「属于块自身」的间距。 */
    margin-top:clamp(32px,4vw,56px);
    padding:clamp(20px,2.4vw,32px);
    background:var(--lp-bg-2);
    border:1px solid var(--lp-border);
    border-radius:var(--lp-r-lg);
    --lp-flow-gap:var(--lp-sp-6);
}
.lp-launch__h3{font-size:clamp(20px,2.4vw,28px);font-weight:700;line-height:var(--lp-lh-tight)}
.lp-steps{
    position:relative;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lp-sp-5);
    margin:0;padding:0;list-style:none;
}
/* 段间连线：从本条目圆点**右缘** → 下一条目圆点**中心**（右端被下一圆点遮住）。
   ★ 为什么不是「容器一条贯穿线」：容器贯穿线只能用列宽公式反推首末圆点中心
     （`left:100%/6` 之类），而该公式**只在圆点居中于列时成立**；本设计圆点贴
     列左缘、文字左对齐 ⇒ 固定内缩量会算错（实测线头超出末圆点中心 153px，
     线直接跑出圆点外，观感是「一根悬空短线」）。
   ★ 分段实现还与 `.lp-actions__i::after`（纵向动作轨道）**同构**：都是
     「每条目一段桥接 gap 的伪元素」，一条心智模型覆盖纵/横两种轨道。 */
.lp-steps__i{position:relative}
.lp-steps__i:not(:last-child)::after{
    content:"";position:absolute;left:34px;top:16px;
    /* 列宽 + 间隙 − 圆点半径 = 从圆点右缘到下一圆点中心的距离 */
    width:calc(100% + var(--lp-sp-5) - 17px);
    height:1px;background:var(--lp-border-3);
}
.lp-steps__dot{
    position:relative;z-index:1;
    width:34px;height:34px;border-radius:50%;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;
    background:var(--lp-primary-bg);color:var(--lp-primary);
    border:1px solid var(--lp-border);
    font-size:var(--lp-fs);font-weight:700;
}
.lp-steps__t{margin-top:var(--lp-sp-3);font-size:15.5px;font-weight:700}
.lp-steps__d{margin-top:4px;font-size:var(--lp-fs);color:var(--lp-text-2)}
/* ⚠️ .lp-subhead 本批**保留**：价格页 `price.html:198` 的「三档共同包含」标题
   仍在消费（其去留与 `.lp-mods` 一同在批⑤ 处理）。只删本页已不消费的用法。 */

/* ── 9. 代码框（口径③ 例外 b：深色保留） ──────────────────────────────── */
.lp-code{
    border:1px solid var(--lp-border);border-radius:var(--lp-r-lg);overflow:hidden;background:var(--lp-ink);
}
/* ⚠️ 头部必须允许换行 + 按钮不可收缩：`.lp-code` 现在嵌在上线面板内，
   375 视口可用宽度再减 40px（面板内距）⇒ 若按钮保持 `flex-shrink:1`，
   它会被压到内容宽度以下、「复制代码」被逐字竖排（真机截图实测）。 */
.lp-code__hd{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:10px 14px;background:rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.1);
}
.lp-code__t{font-size:12.5px;color:var(--lp-text-inv-2);min-width:0}
.lp-code__copy{
    margin-left:auto;flex:none;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 12px;border-radius:var(--lp-r-pill);
    border:1px solid rgba(255,255,255,.24);color:var(--lp-text-inv);font-size:12.5px;
    transition:background-color var(--lp-t-fast) var(--lp-ease);
}
.lp-code__copy:hover{background:rgba(255,255,255,.14)}
.lp-code__copy svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.lp-code__copy.is-done{background:rgba(34,176,125,.24);border-color:rgba(34,176,125,.5)}
.lp-code pre{
    margin:0;padding:var(--lp-sp-4);overflow-x:auto;
    font-family:var(--lp-font-mono);
    font-size:var(--lp-fs-sm);line-height:1.7;color:var(--lp-code-fg);
}
.lp-code code{white-space:pre}

/* ── 10. 工作台窗口 + 模块带（R53 批⑤） ────────────────────────────────── */
/* 取代原「工作台插画 + 6 张 .lp-mod 卡片」：本区此前叠中了前几个区块的
   全部问题 —— ① 插画与右侧卡片各说各话、高度与节奏互不相关（高度差由卡片内容
   决定，插画只能被动缩放）；② 六张卡片同构为「图标 + 标题 + 标签云」，没有信息
   优先级，扫读成本高；③ 标签合计 26 个，纵向被拉得很长。
   改为**纯 CSS 的工作台窗口**：不需要图片资产、不随语言与主题漂移、任意 DPI 都
   清晰，并且能真实表达「会话列表 | 对话区 | 输入框」三层结构（插画表达不了）。
   六个模块改为窗口下方的一条**模块带**（`.lp-modbar`），从「六张卡片」降为
   「一行可扫读的条目」。 */
.lp-wb{
    background:var(--lp-surface);
    border:1px solid var(--lp-border);
    border-radius:var(--lp-r-lg);
    overflow:hidden;
    box-shadow:var(--lp-sh-lg);
}
.lp-wb__bar{
    display:flex;align-items:center;gap:6px;
    padding:10px 14px;
    /* 标题栏用 --lp-bg（比窗口主体浅一档）⇒ 窗口与窗口内标题栏形成两级层次 */
    background:var(--lp-bg);
    border-bottom:1px solid var(--lp-border);
}
.lp-wb__dot{width:9px;height:9px;border-radius:50%;background:var(--lp-border-3)}
.lp-wb__title{margin-left:var(--lp-sp-2);font-size:12.5px;color:var(--lp-text-3)}
.lp-wb__body{
    display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
    min-height:clamp(240px,26vw,320px);
}
.lp-wb__list{
    display:flex;flex-direction:column;gap:2px;
    padding:var(--lp-sp-2);
    border-right:1px solid var(--lp-border-2);
}
.lp-wb__item{
    display:flex;align-items:center;gap:10px;
    padding:10px;border-radius:var(--lp-r-md);
    font-size:var(--lp-fs-sm);color:var(--lp-text-2);
}
.lp-wb__item.is-on{background:var(--lp-primary-bg);color:var(--lp-primary)}
.lp-wb__av{
    width:24px;height:24px;flex:none;border-radius:50%;
    background:var(--lp-bg-2);border:1px solid var(--lp-border);
}
.lp-wb__item.is-on .lp-wb__av{background:var(--lp-primary);border-color:var(--lp-primary)}
.lp-wb__nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-wb__unread{
    flex:none;min-width:18px;height:18px;padding:0 5px;
    border-radius:var(--lp-r-pill);
    background:var(--lp-danger);color:var(--lp-text-inv);
    font-size:11px;font-weight:600;line-height:18px;text-align:center;
}
.lp-wb__chat{
    display:flex;flex-direction:column;gap:10px;
    /* ⚠️ 必写 align-items:flex-start：flex 列默认 stretch，块级气泡会被拉成
       `max-width:78%` 的**通栏横条**（短消息「好的，谢谢」也占满 78% 宽），
       真机截图实测——那样完全不像聊天 UI。start 之后气泡宽度由内容决定。 */
    align-items:flex-start;
    padding:var(--lp-sp-4);
    /* 对话区比列表区深一档（--lp-bg-2 vs 白）⇒ 两栏无需描边即可分辨 */
    background:var(--lp-bg-2);
}
.lp-wb__msg{
    max-width:78%;padding:9px 13px;border-radius:14px;
    font-size:var(--lp-fs-sm);line-height:1.55;
    background:var(--lp-surface);border:1px solid var(--lp-border);color:var(--lp-text-2);
}
.lp-wb__msg--out{
    align-self:flex-end;
    background:var(--lp-primary);border-color:var(--lp-primary);color:var(--lp-text-inv);
}
.lp-wb__input{
    /* 输入框必须例外铺满整宽（气泡用 align-items:flex-start 定宽，输入框不能跟着窄） */
    align-self:stretch;
    margin-top:auto;                      /* 输入框恒贴对话区底部 */
    display:flex;align-items:center;gap:10px;
    padding:9px 9px 9px 13px;border-radius:var(--lp-r-md);
    background:var(--lp-surface);border:1px solid var(--lp-border);
}
.lp-wb__ph{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:var(--lp-fs-sm);color:var(--lp-text-4);
}
.lp-wb__send{
    flex:none;padding:5px 14px;border-radius:var(--lp-r-pill);
    background:var(--lp-primary);color:var(--lp-text-inv);font-size:var(--lp-fs-xs);
}
/* 模块带：六个模块压成一条可整行扫读的浅色带。
   `__d` 是**可选**细节行（价格页用它保留原 `.lp-chip` 承载的功能要点，
   首页只用 `__t`）⇒ 同一条带在两页承担不同密度，但形态一致。 */
.lp-modbar{
    margin:clamp(24px,3vw,36px) 0 0;
    padding:var(--lp-sp-4);
    list-style:none;
    display:flex;flex-wrap:wrap;
    gap:12px clamp(16px,2.4vw,28px);
    background:var(--lp-surface);border:1px solid var(--lp-border);border-radius:var(--lp-r-lg);
}
.lp-modbar__i{display:flex;gap:var(--lp-sp-2);align-items:flex-start;min-width:0}
.lp-modbar__i svg{
    width:16px;height:16px;flex:none;margin-top:3px;
    stroke:var(--lp-primary);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
.lp-modbar__t{font-size:var(--lp-fs);font-weight:600;color:var(--lp-text)}
.lp-modbar__d{display:block;margin-top:2px;font-size:var(--lp-fs-sm);font-weight:400;color:var(--lp-text-2)}

/* ── 11. 接入中心 Tabs ─────────────────────────────────────────────────── */
.lp-tabs{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:minmax(0,1fr)}
.lp-tablist{display:flex;gap:var(--lp-sp-2);flex-wrap:wrap}
.lp-tab{
    padding:10px 18px;border-radius:var(--lp-r-lg);
    border:1px solid var(--lp-border);background:var(--lp-surface);
    font-size:var(--lp-fs);color:var(--lp-text-2);
    transition:all var(--lp-t-fast) var(--lp-ease);
}
.lp-tab[aria-selected="true"]{background:var(--lp-primary);color:var(--lp-text-inv);border-color:var(--lp-primary)}
/* ⚠️ 类名为 .lp-tabpanel（原 .lp-panel）：`.lp-panel` 已由 §2.5 的原语占用，
   接入中心面板是 role="tabpanel" 语义，改名为 .lp-tabpanel 后两者互不干扰。 */
.lp-tabpanel{padding-top:var(--lp-sp-5)}
.lp-tabpanel[hidden]{display:none}
.lp-form-mock{
    /* background 与 .lp-panel 默认值不同（浅灰示意底），故保留覆盖声明 */
    background:var(--lp-bg);
    padding:22px;display:flex;gap:var(--lp-sp-6);flex-wrap:wrap;align-items:center;justify-content:center;
    min-height:190px;
}
.lp-bub-mock{
    width:60px;height:60px;border-radius:50%;background:var(--lp-primary);
    box-shadow:var(--lp-sh-primary);
    display:flex;align-items:center;justify-content:center;
}
.lp-bub-mock svg{width:26px;height:26px;stroke:var(--lp-text-inv);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-rail-mock{
    width:60px;border-radius:var(--lp-r-md);overflow:hidden;
    box-shadow:var(--lp-sh-lg);
}
.lp-rail-mock i{
    display:flex;align-items:center;justify-content:center;height:60px;
    background:var(--lp-primary);color:var(--lp-text-inv);
    border-bottom:1px solid var(--lp-on-primary-line);
    font-style:normal;
}
.lp-rail-mock i:last-child{border-bottom:0}
.lp-rail-mock svg{width:22px;height:22px;stroke:var(--lp-text-inv);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.lp-form-mock__note{flex:1 1 240px;font-size:var(--lp-fs);color:var(--lp-text-2);min-width:220px}
.lp-form-mock__note b{color:var(--lp-text)}

/* ── 12. 技术保障 手风琴（浅色基调；原深色变体随 B2 浅色化删除） ────────── */
.lp-acc{border-top:1px solid var(--lp-border)}
.lp-acc__item{border-bottom:1px solid var(--lp-border)}
.lp-acc__btn{
    width:100%;display:flex;align-items:center;gap:14px;
    padding:18px 0;text-align:left;font-size:var(--lp-fs-lg);font-weight:600;color:var(--lp-text);
}
.lp-acc__btn svg{width:18px;height:18px;flex:none;stroke:var(--lp-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-acc__caret{margin-left:auto;transition:transform var(--lp-t-base) var(--lp-ease)}
.lp-acc__item.is-open .lp-acc__caret{transform:rotate(180deg)}
.lp-acc__body{padding:0 0 22px 32px;font-size:var(--lp-fs);color:var(--lp-text-2);max-width:78ch}
.lp-acc__body[hidden]{display:none}
/* JS 失效兜底：未展开项的内容默认隐藏（与 initAccordion 双保险，守卫 #202 正向锁） */
.lp-acc__item:not(.is-open) .lp-acc__body{display:none}

/* ── 13. 价格 ──────────────────────────────────────────────────────────── */
.lp-tiers{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(258px,1fr));align-items:stretch}
.lp-tier{
    display:flex;flex-direction:column;
    padding:28px 24px;
}
.lp-tier--hot{border-color:var(--lp-primary);box-shadow:var(--lp-sh-lg);position:relative}
.lp-tier__flag{
    position:absolute;top:-13px;left:24px;
    padding:4px 12px;border-radius:var(--lp-r-pill);
    background:var(--lp-grad-brand);color:var(--lp-text-inv);font-size:var(--lp-fs-xs);font-weight:700;
}
.lp-tier__n{font-size:var(--lp-fs-lg);font-weight:700}
.lp-tier__p{margin-top:10px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.lp-tier__p span{font-size:var(--lp-fs);font-weight:500;color:var(--lp-text-2);margin-left:4px}
.lp-tier ul{margin:18px 0 var(--lp-sp-5);display:grid;gap:10px}
.lp-tier li{display:flex;gap:var(--lp-sp-2);font-size:var(--lp-fs);color:var(--lp-text-2)}
.lp-tier li svg{width:16px;height:16px;flex:none;margin-top:4px;stroke:var(--lp-success);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lp-tier .lp-btn{margin-top:auto}

/* ── 14. 底部 CTA（浅底强调块；不再使用深色插画背景） ──────────────────── */
.lp-cta{position:relative;overflow:hidden;background:var(--lp-cta-bg);color:var(--lp-text)}
.lp-cta::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:var(--lp-cta-glow);
}
.lp-cta__in{position:relative;z-index:1;display:grid;gap:var(--lp-sp-6);grid-template-columns:minmax(0,1fr);align-items:center}
.lp-cta h2{font-size:var(--lp-fs-h2);line-height:var(--lp-lh-tight);font-weight:700}
.lp-cta p{margin-top:10px;color:var(--lp-text-2);font-size:var(--lp-fs-lg);max-width:68ch}
.lp-cta__btns{display:flex;flex-wrap:wrap;gap:var(--lp-sp-3)}
.lp-cta .lp-btn--ghost{background:var(--lp-surface);border-color:var(--lp-border-3);color:var(--lp-text)}
.lp-cta .lp-btn--ghost:hover{background:var(--lp-primary-bg);border-color:var(--lp-primary);color:var(--lp-primary)}
.lp-contacts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px}
.lp-contact{display:inline-flex;align-items:center;gap:var(--lp-sp-2);font-size:var(--lp-fs);color:var(--lp-text-2)}
.lp-contact svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-contact:hover{color:var(--lp-primary);text-decoration:underline}

/* ── 15. 页脚（浅底） ──────────────────────────────────────────────────── */
/* R53 批⑥：页脚由「三列栅格 + 版权行」收敛为**紧凑三行**。
   原结构的三个问题：① `__top` 三列（品牌 + 42ch 说明 / 产品 / 支持与条款）在 <1023
   折成两列、<768 又折成单列 ⇒ 尾部堆到 5~6 行，长而松散（用户原话第 6 条）；
   ② 列标题 `__h`（产品 / 支持与条款）与站点标题 `.lp-brand` 同为 17px/700 两级同重，
   层级不成立；③ `.lp-footer__desc` 只有 42ch 正文却独占一整列宽（1.4fr）。
   新结构 = ① `__main`：品牌 + 两组 `__nav`（同一行，导航整体贴右）；
             ② `__note`：免责声明一行小字；
             ③ `__bar`：版权 / 公司 / 备案（分隔线上一行）。
   ⚠️ 窄屏 `margin-left` 复位写在 §16 既有 `<768` 块内，不新增游离断点块（P2-2）。 */
.lp-footer{background:var(--lp-bg);color:var(--lp-text-2);border-top:1px solid var(--lp-border);padding-block:clamp(36px,4.4vw,56px) 0}
.lp-footer__main{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,3vw,44px)}
.lp-footer__main .lp-brand{color:var(--lp-text)}
/* 导航贴右只在 **≥1320** 启用（基础值为 0，<1320 由下方块纵向堆叠）：
   页面已不为入口竖条预留安全区（批⑦），而「内容盒右缘落在竖条左侧」
   （竖条带 = innerW − rail 左缘，桌面实测 85px）仅在 innerW ≥ 1307 时成立；
   1024~1306 若贴右，末条导航链接中心必落进竖条带、被 z-max 的浮层盖住点不到
   （768 实测「登录系统」covered-by-entry）。1307 取整对齐断点 1320。 */
.lp-footer__main > .lp-footer__nav:first-of-type{margin-left:0}
@media (min-width:1320px){
    .lp-footer__main > .lp-footer__nav:first-of-type{margin-left:auto}
}
/* <1320：品牌与两组导航纵向堆叠、整组左对齐 —— 单行排布在该区间必然把末条
   链接顶到内容右缘（768 实测恰排满一行），与竖条带相撞；堆叠后每行只剩一组
   导航（≈350px），天然远离右缘，任何视口不再依赖竖条宽度猜测。 */
@media (max-width:1319px){
    .lp-footer__main{flex-direction:column;align-items:flex-start}
}
.lp-footer__nav{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2vw,26px);font-size:var(--lp-fs-sm)}
.lp-footer__nav a{color:var(--lp-text-2);transition:color var(--lp-t-fast) var(--lp-ease)}
.lp-footer__nav a:hover{color:var(--lp-primary)}
/* 免责声明与 `__bar` 同宽左对齐（不设 `max-width`）：实测 64ch（≈449px）会把
   ~40 字文案折成 **2 行**、页脚凭空多出 21px；放宽到与容器同宽后恒为 1 行。 */
.lp-footer__note{margin-top:14px;font-size:var(--lp-fs-sm);color:var(--lp-text-3)}
.lp-footer__bar{
    margin-top:clamp(20px,2.4vw,28px);
    padding:16px 0 clamp(20px,3vw,32px);
    border-top:1px solid var(--lp-border);
    font-size:var(--lp-fs-sm);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
}
.lp-footer__bar a:hover{color:var(--lp-primary);text-decoration:underline}

/* ── 16. 断点体系（守卫 #201 断言六档断点存在） ────────────────────────── */

/* ≥768：能力卡自然 2 列（auto-fit 已覆盖，此处补 AI/接入区栅格） */
@media (min-width:768px){
    .lp-cta__in{grid-template-columns:minmax(0,1.5fr) auto}
    .lp-tabs{grid-template-columns:minmax(0,1fr)}
    .lp-hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* ≥1024：桌面导航横向、Hero 左右分栏（已在上档生效，此处补页头） */
@media (min-width:1024px){
    :root{--lp-hdr-h:72px}
}

/* <1024：导航折叠为抽屉 */
@media (max-width:1023px){
    .lp-nav{
        position:fixed;left:0;right:0;top:calc(var(--lp-hdr-h) + var(--lp-notice-h,0px));
        z-index:59;margin:0;padding:12px var(--lp-gutter) 20px;
        flex-direction:column;align-items:stretch;gap:2px;
        background:var(--lp-surface);border-bottom:1px solid var(--lp-border);
        box-shadow:var(--lp-sh-lg);
        transform:translateY(-12px);opacity:0;visibility:hidden;
        transition:opacity var(--lp-t-base) var(--lp-ease),transform var(--lp-t-base) var(--lp-ease),visibility var(--lp-t-base);
        /* 外层用 vh 兜底（老浏览器无 dvh）；dvh 版本在下方 @supports 内覆盖。
           两者都必须减去声明条高度 --lp-notice-h（声明条滚走后由 JS 置 0，见 initNotice） */
        max-height:calc(100vh - var(--lp-hdr-h) - var(--lp-notice-h,0px));overflow-y:auto;
    }
    .lp-header__cta a{
        color: #e5e5e5;
    }
    .lp-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
    .lp-nav a{padding:13px 14px;font-size:var(--lp-fs-lg);border-radius:var(--lp-r-lg)}
    .lp-burger{display:flex}
    .lp-header__cta{display:none}
    .lp-header__cta--drawer{display:flex;margin-top:10px;padding-top:14px;border-top:1px solid var(--lp-border)}
    .lp-header__cta--drawer .lp-btn{flex:1}
    /* R53 批⑦：小屏隐藏 3 处装饰插画（AI 动作 / 接入中心 / 技术保障）——
       窄屏下它们独占一整屏宽的纵向空间（375 实测各 ~240-300px），且语义与
       相邻文字完全重复（信息零损失）；≥1024 恢复双列布局的图框不动。
       ⚠️ 选择器用 `.lp-visual__fig`（批③ 起 AI 图框挂双类 `.lp-split__fig` 也带它），
       不得写成 `.lp-split__fig`（会漏掉接入/技术两处）；价格页 `.lp-hero__fig` 不在内。 */
    .lp-visual__fig{display:none}
    /* （批⑥ 的「<1024 导航复位」已被批⑦ 的 <1320 堆叠 + 基础值 0 取代，
       页脚导航的断点逻辑集中在 §15，此处不再重复。）
       ★ 历史注：批⑥ 曾把复位点定在 <1024（768 视口两组导航已折行、贴右会
       一左一右参差）；批⑦ 因入口竖条不再让位，区间进一步上移到 <1320。 */
}
/* dvh 版本（移动端地址栏收起时才准确）；不支持 dvh 的浏览器用上面的 vh 兜底 */
@supports (height:100dvh){
    @media (max-width:1023px){
        .lp-nav{max-height:calc(100dvh - var(--lp-hdr-h) - var(--lp-notice-h,0px))}
    }
}

/* <768：单列 */
@media (max-width:767px){
    .lp-hero__cta .lp-btn{flex:1 1 100%}
    .lp-tiers{grid-template-columns:minmax(0,1fr)}
    /* （R53 批⑤ 的 `.lp-wb__body{1fr}` + `.lp-wb__list{display:none}` 已被批⑦
       「整窗 `.lp-wb{display:none}`」取代：窄屏不再保留半窗，演示件整个让位。） */
    /* R53 批④：横向进度条在窄屏回到竖排，段间连线随之为纵向失效 ⇒ 隐藏
       （竖排下再画横线会横穿文字）。断点归属集中在本块，§8 只留基础规则。 */
    .lp-steps{grid-template-columns:minmax(0,1fr);gap:var(--lp-sp-4)}
    .lp-steps__i::after{display:none}
    /* ⚠️ 通栏带必须回到竖排：横排在 375 视口会把「客服工作台」标题挤成每行 2 字、
       说明挤成 1~2 字宽（真机截图实测）。竖排后与其余 Bento 项同构。 */
    .lp-bento__i--wide{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--lp-sp-4)}
    .lp-bento__go{align-self:flex-start}
    .lp-cta__in{grid-template-columns:minmax(0,1fr)}
    .lp-mock__badge{right:6px;bottom:10px}
    /* R53 批⑦：小屏减密两件（信息零损失）：
       ① `.lp-wb` 工作台窗口 mock —— 纯演示件，与 hero 的 `.lp-mock` 聊天演示职责
          重复；下方 `.lp-modbar` 保留承载「6 大模块」信息。
       ② `.lp-code` 接入代码框 —— 移动端没有「贴到站点」的操作目标，复制无意义；
          三步上线的步骤文字保留。 */
    .lp-wb{display:none}
    .lp-code{display:none}
}

/* <480：小屏收敛（320×640 也要让首屏主 CTA 落在折叠线以上） */
@media (max-width:479px){
    .lp-notice{font-size:12.5px;padding:8px 0}
    .lp-hero{padding-block:28px 44px}
    .lp-hero h1{font-size:clamp(26px,7.6vw,34px);margin-top:var(--lp-sp-4)}
    .lp-hero__lead{margin-top:14px;font-size:var(--lp-fs)}
    .lp-hero__cta{margin-top:20px}
    .lp-hero__facts{margin-top:20px;gap:8px 14px;font-size:var(--lp-fs-sm)}
    .lp-bento__i,.lp-tier{padding:18px}
    .lp-form-mock{padding:16px;gap:18px}
}

/* ≥1440：宽屏容器居中、留白加大 */
@media (min-width:1440px){
    :root{--lp-wrap:1240px}
    .lp-hero{padding-block:60px 60px}
}

/* ── 17. H5 触控与安全区 ───────────────────────────────────────────────── */
@media (hover:none){
    .lp-bento__i:hover{transform:none;box-shadow:none}
    .lp-btn:hover{transform:none}
}
.lp-btn,.lp-tab,.lp-nav a,.lp-acc__btn,.lp-notice__close,.lp-code__copy{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.lp-footer__bar{padding-bottom:calc(clamp(20px,3vw,32px) + env(safe-area-inset-bottom,0px))}

/* ── 18. 插画位（内容 + 视觉双列） ──────────────────────────────────────── */
/* 唯一图框实现：首页 3 处区块视觉位共用（AI 专章 / 接入中心 / 技术保障）。
   ⚠️ 图框自带浅色底板：插画未产出 / 加载失败 / 离线时依旧成立（不出现白块/黑块）。
   ⚠️ <img> 必须带显式 width/height + loading/decoding，避免 CLS（守卫 #201 断言）。 */
/* 两种并存的双列容器（同结构、只差纵向对齐）：
   `.lp-visual`  align-items:center —— 视觉与内容**各自居中**（图比文字高时最自然）；
   `.lp-split`   align-items:stretch —— 左右**严格等高**（R53 批③ AI 专章专用：
                 3 条动作轨道必须铺满、与右侧插画总高一致，否则右图下方留白很突兀）。
   ⚠️ 两类的 ≥1024 双列规则都必须**紧跟各自基础规则之后**（同权重单类靠书写顺序决胜，
     写到 §16 断点区会被基础单列规则反超 ⇒ 永远单列；守卫 #201 / #207-2 锁定）。 */
.lp-visual{display:grid;gap:clamp(24px,3.4vw,48px);grid-template-columns:minmax(0,1fr);align-items:center}
.lp-split{display:grid;gap:clamp(24px,3.4vw,48px);grid-template-columns:minmax(0,1fr);align-items:stretch}
.lp-visual__fig{
    margin:0;border-radius:var(--lp-r-lg);overflow:hidden;
    border:1px solid var(--lp-border);
    background:var(--lp-bg);
    box-shadow:var(--lp-sh-lg);
}
.lp-visual__fig img{display:block;width:100%;height:auto}
/* AI 专章图框的**增量**：随左列等高拉伸，图在框内垂直居中。
   ⚠️ 只做增量（图框语义类 `.lp-visual__fig` 仍挂在同一元素上），
      计数口径：首页 `.lp-visual__fig` = 3（含本类）且 `.lp-split__fig` = 1。 */
.lp-split__fig{align-self:stretch;display:flex;align-items:center;justify-content:center}

/* ── 18.1 AI 动作轨道（R53 批③ 取代原「3 张 .lp-card--ai」） ───────────── */
/* ⚠️ 用 grid 等分行高（不是 flex + space-between）：space-between 会把剩余空间
   加进**间隙**，而连接线是固定长度的伪元素 ⇒ 线只覆盖一小段、中间断裂。
   等分后连接线用 `top:圆点高` → `bottom:-gap` 自适应每行高度，永不裂缝。 */
.lp-actions{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--lp-sp-4);
    margin:0;padding:0;list-style:none}
.lp-actions__i{display:flex;gap:var(--lp-sp-4);position:relative;align-items:flex-start}
.lp-actions__i > div{min-width:0}
.lp-actions__i:not(:last-child)::after{
    content:"";position:absolute;left:17px;top:36px;bottom:calc(-1 * var(--lp-sp-4));
    width:1px;background:var(--lp-border-3);
}
.lp-actions__n{
    width:36px;height:36px;flex:none;border-radius:50%;box-sizing:border-box;
    display:flex;align-items:center;justify-content:center;
    background:var(--lp-primary-bg);color:var(--lp-primary);
    font-size:var(--lp-fs-lg);font-weight:700;
}
/* ⚠️ 双列规则必须紧跟本段基础规则之后（见本节开头说明） */
@media (min-width:1024px){
    .lp-visual{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
    .lp-split{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}
/* R53 批⑤：`.lp-mods` 三列锁随模块带（`.lp-modbar`）取代而删除；
   工作台区已不再使用 `.lp-visual`，故该断点块整体移除（不留空块）。 */

/* ── 19. 价格页专用变体（同一设计系统，避免第二套样式表） ───────────────── */
.lp-hero--sm{padding-block:clamp(40px,6vw,76px)}
/* ⚠️ 必须写成两处类名（.lp-hero.lp-hero--sm）：单类选择器与 <480 断点里的 .lp-hero h1
   权重相同，靠书写顺序决胜，而本段位于 <480 之后 ⇒ 会把小屏字号反超回 26px
   （表现为价格页 h1 在手机上比首页还大）。小屏专用值见本段末尾的 <480 覆盖。 */
.lp-hero.lp-hero--sm h1{font-size:clamp(26px,3.8vw,42px);margin-top:var(--lp-sp-4)}
.lp-hero--sm .lp-hero__cta{margin-top:var(--lp-sp-5)}
.lp-hero__fig{
    margin:0;border-radius:var(--lp-r-lg);overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    box-shadow:0 30px 60px rgba(0,0,0,.32);
}
.lp-hero__fig img{display:block;width:100%;height:auto}

.lp-note{
    margin-top:var(--lp-sp-5);font-size:13.5px;color:var(--lp-text-2);
    display:flex;gap:var(--lp-sp-2);align-items:flex-start;
}
.lp-note svg{width:15px;height:15px;flex:none;margin-top:4px;stroke:var(--lp-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 价格页小屏收敛：与首页 <480 的 hero 节奏/字号一致（权重高于上面的 .lp-hero.lp-hero--sm h1） */
@media (max-width:479px){
    .lp-hero.lp-hero--sm{padding-block:28px 44px}
    .lp-hero.lp-hero--sm h1{font-size:clamp(24px,7vw,30px);margin-top:var(--lp-sp-4)}
}

/* ── 20. 无障碍：动效降级 / 打印 ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
    .lp-header,.lp-hero__cta,.lp-notice,.lp-code__copy{display:none}
    body{color:var(--lp-text);background:var(--lp-surface)}
}