/* ==========================================================================
   访客首页（route #/home 的访客形态）· 产品官网版
   —— 作用域全部限制在 .promo-home 内，管理后台界面不受影响。

   设计约定：
     1) **只留亮色版**：本页不跟随亮 / 暗主题，任何情况下都按这里的亮色渲染
        （页面底 #eff8f3、卡面白色）。文末「亮色锁定」小节说明为什么需要它。
     2) 主色 = 森林绿 #2c4f40。绿色只承担「品牌块 / 按钮 / 重点数据」，
        其余交给白色卡面与灰绿文字，避免满屏绿。
     3) 首屏是一块森林绿圆角面板：左侧主张，右侧是「人物插画 + 工作台界面 +
        毛玻璃浮层」的三层叠放。人物用透明底 PNG/WEBP，底部被面板边缘裁掉，
        因此不需要额外做地面或阴影块。
     4) 人物插画（assets/img/promo-teacher.webp）是唯一的位图素材，
        换插画只要保持竖版、透明底即可，尺寸由 --pv-person-h 控制。
     5) 动效只用 transform / opacity，且有 prefers-reduced-motion 兜底。
   ========================================================================== */

.promo-home {
    /* ---- 森林绿与薄荷灰绿色板 ---- */
    --g-green: #2c4f40;         /* 品牌块 / 导航登录 / 主色实底 */
    --g-green-dark: #215e46;    /* hover、浅底上的绿色文字 */
    --g-green-ink: #173f30;     /* 强调底上的深色文字 */
    --g-green-mid: #3f7d5e;
    --g-heading: #1f4736;       /* 标题 */
    --g-ink: #294f40;
    --g-muted: #5f8272;         /* 次要文字 */
    --g-soft: #d9ebdf;          /* 标签 / 图标底 */
    --g-soft-2: #e9f5ee;
    --g-tint: #f3faf6;          /* 卡内浅底 */
    --g-line: rgba(33, 94, 70, .13);
    --g-line-strong: rgba(33, 94, 70, .22);
    --g-paper: #eff8f3;         /* 页面底 */
    --g-surface: #ffffff;
    --g-amber: #a8670b;
    --g-amber-bg: #fdf4e6;
    --g-shadow-sm: 0 1px 2px rgba(21, 75, 53, .04), 0 10px 26px -22px rgba(21, 75, 53, .38);
    --g-shadow: 0 2px 4px rgba(21, 75, 53, .04), 0 24px 48px -34px rgba(21, 75, 53, .48);

    /* ---- hero 色阶 ---- */
    --g-hero-1: #3a6350;
    --g-hero-2: #2c4f40;
    --g-hero-3: #23432f;
    --g-cta: #c2e4cf;
    --pv-person-h: 540px;       /* 桌面人物高度：改这里即可整体缩放 */

    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 8px;
    color: var(--g-ink);
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

html,
body {
    overflow-x: clip;
}

/* 只留亮色版：页面底固定灰绿，不管用户把系统 / 后台切成哪个主题。
   注意 html / body / .public-shell 都是 .promo-home 的**祖先**，
   自定义属性不会向上继承，所以这里写死颜色，不能用 var(--g-paper)。 */
html:has(.promo-home),
body:has(.promo-home),
.public-shell:has(.promo-home) {
    background: #eff8f3;
    color-scheme: light;
}

/* index.html 的首屏脚本会把 color-scheme 内联写在 <html> 上（暗色时是 dark），
   内联样式优先级高于样式表，所以这里必须 !important 才能把滚动条 / 原生控件
   一起锁在亮色 —— 否则会出现「页面是亮的、滚动条是黑的」。 */
html:has(.promo-home) {
    color-scheme: light !important;
}

.public-shell:has(.promo-home) {
    overflow-x: clip;
}

.promo-home h1,
.promo-home h2,
.promo-home h3,
.promo-home p,
.promo-home li {
    overflow-wrap: anywhere;
    min-width: 0;
}

.promo-home h1,
.promo-home h2,
.promo-home h3,
.promo-home p {
    margin: 0;
}

/* ---------------------------------------------------------------- 顶部导航 */
.promo-home .promo-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 10px 2px;
}

.promo-home .promo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.promo-home .promo-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--g-green);
    color: #fff;
    box-shadow: 0 12px 20px -14px rgba(63, 125, 94, .85);
}

.promo-home .promo-brand > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 系统资料（运营端「系统设置 → 系统资料」）里上传了自定义 SVG 图标时，
   公开首页顶部品牌位显示该图标；未上传则保持上面的内置图标样式 */
.promo-home .promo-brand-mark.has-img {
    background: #e4f3ed00;
    box-shadow: none;
}

.promo-home .promo-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.promo-home .promo-brand strong {
    color: var(--g-heading);
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.25;
}

.promo-home .promo-brand small {
    margin-top: 2px;
    color: var(--g-muted);
    font-size: 11.5px;
}

/* 锚点导航：桌面显示，手机上收起来（手机靠 hero 里的次按钮与页面滚动） */
.promo-home .promo-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
}

.promo-home .promo-links button {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--g-muted);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.promo-home .promo-links button:hover {
    background: rgba(44, 79, 64, .07);
    color: var(--g-green-dark);
}

.promo-home .promo-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.promo-home .promo-register,
.promo-home .promo-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.promo-home .promo-register {
    border: 1px solid var(--g-line-strong);
    background: rgba(255, 255, 255, .7);
    color: var(--g-green-dark);
}

.promo-home .promo-register:hover {
    background: #fff;
    border-color: rgba(33, 94, 70, .34);
}

.promo-home .promo-login {
    border: 1px solid transparent;
    background: var(--g-green);
    color: #fff;
    box-shadow: 0 14px 26px -18px rgba(28, 74, 53, .9);
}

.promo-home .promo-login:hover {
    background: #264638;
}

/* -------------------------------------------------------------------- Hero */
.promo-home .promo-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(18px, 2.6vw, 40px);
    min-height: 566px;
    padding: clamp(32px, 3.6vw, 54px);
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 34px 70px -54px rgba(12, 44, 30, .9), 0 1px 0 rgba(255, 255, 255, .08) inset;
}

/* 背景层单独放，便于用 overflow 裁掉装饰而不影响内容 */
.promo-home .promo-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(120% 120% at 8% -10%, #46705c 0%, transparent 58%),
        linear-gradient(140deg, var(--g-hero-1) 0%, var(--g-hero-2) 48%, var(--g-hero-3) 100%);
}

/* 极淡的科技方格：只在右上区域透出来，避免整块背景发花 */
.promo-home .promo-hero-bg .hb-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(110% 88% at 82% 8%, #000 8%, rgba(0, 0, 0, .5) 46%, transparent 78%);
    mask-image: radial-gradient(110% 88% at 82% 8%, #000 8%, rgba(0, 0, 0, .5) 46%, transparent 78%);
}

/* 柔光：左上偏冷绿，右下更暗，让人物与界面卡有层次 */
.promo-home .promo-hero-bg .hb-glow {
    position: absolute;
    inset: -20% -10% auto auto;
    width: 62%;
    height: 130%;
    background: radial-gradient(closest-side, rgba(178, 226, 200, .3), rgba(178, 226, 200, 0) 72%);
    pointer-events: none;
}

.promo-home .promo-hero-bg .hb-ring {
    position: absolute;
    right: -120px;
    bottom: -190px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(255, 255, 255, .03);
}

.promo-home .promo-hero-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    max-width: 520px;
}

.promo-home .promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px 6px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .92);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
}

.promo-home .promo-kicker .ico {
    color: #d7efdf;
}

.promo-home .promo-hero h1 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    font-size: clamp(40px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
}

.promo-home .promo-hero h1 em {
    font-style: normal;
    color: #b9dfc8;
    font-size: .54em;
    font-weight: 700;
    letter-spacing: .01em;
}

.promo-home .promo-hero h2 {
    color: #fff;
    font-size: clamp(19px, 1.9vw, 23px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.promo-home .promo-hero p {
    max-width: 34em;
    color: rgba(255, 255, 255, .74);
    font-size: 14.5px;
    line-height: 1.85;
}

.promo-home .promo-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 2px 0 4px;
}

.promo-home .promo-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 600;
}

.promo-home .promo-hero-points .ico {
    color: #a9ddbe;
}

.promo-home .promo-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.promo-home .promo-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--g-cta);
    color: #173f30;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .8);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.promo-home .promo-primary:hover {
    background: #d3efdd;
    transform: translateY(-1px);
    box-shadow: 0 20px 34px -20px rgba(0, 0, 0, .85);
}

.promo-home .promo-primary.dark {
    background: #173f30;
    color: #fff;
}

.promo-home .promo-primary.dark:hover {
    background: #0f3123;
}

.promo-home .promo-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 50px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color .18s ease;
}

.promo-home .promo-ghost:hover {
    color: #fff;
}

/* ---- Hero 右侧：人物 + 工作台界面 + 毛玻璃浮层 ---- */
.promo-home .promo-hero-visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    height: 100%;
    min-height: 420px;
}

.promo-home .promo-hero-visual::before {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -30px;
    width: 360px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(198, 237, 214, .24), rgba(198, 237, 214, 0) 72%);
    pointer-events: none;
}

.promo-home .pv-person {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -86px;
    width: auto;
    height: var(--pv-person-h);
    max-width: 58%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 26px 30px rgba(6, 28, 18, .34));
}

/* 工作台界面：桌面是「产品真实长什么样」的证据 */
.promo-home .pv-window {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 78px;
    width: min(282px, 62%);
    border-radius: 16px;
    background: #fff;
    color: var(--g-ink);
    box-shadow: 0 30px 54px -34px rgba(4, 26, 16, .7), 0 0 0 1px rgba(255, 255, 255, .18);
    overflow: hidden;
}

.promo-home .pv-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(33, 94, 70, .08);
    background: #f7fbf9;
}

.promo-home .pv-dots {
    display: inline-flex;
    gap: 4px;
}

.promo-home .pv-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d3e3da;
}

.promo-home .pv-title {
    color: #3c6152;
    font-size: 10.5px;
    font-weight: 700;
}

.promo-home .pv-date {
    margin-left: auto;
    color: #90a89b;
    font-size: 9.5px;
}

.promo-home .pv-body {
    padding: 11px 12px 12px;
}

.promo-home .pv-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(33, 94, 70, .07);
}

.promo-home .pv-stats div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 9px;
    background: var(--g-tint);
}

.promo-home .pv-stats b {
    color: var(--g-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.promo-home .pv-stats small {
    color: #7d968a;
    font-size: 9.5px;
}

.promo-home .pv-stats .is-warn {
    background: var(--g-amber-bg);
}

.promo-home .pv-stats .is-warn b {
    color: var(--g-amber);
}

.promo-home .pv-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 7px;
    color: #3c6152;
    font-size: 10.5px;
    font-weight: 700;
}

.promo-home .pv-sec em {
    color: #90a89b;
    font-style: normal;
    font-weight: 500;
}

.promo-home .pv-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-home .pv-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 9px;
    background: #f8fbf9;
}

.promo-home .pv-list li.is-todo {
    background: #fff8ec;
    box-shadow: inset 2px 0 0 #d9a03f;
}

.promo-home .pv-time {
    color: #6c8a7b;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.promo-home .pv-cls {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.promo-home .pv-cls b {
    overflow: hidden;
    color: #2a4f3f;
    font-size: 10.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-home .pv-cls small {
    color: #8ba396;
    font-size: 9px;
}

.promo-home .pv-btn {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--g-green);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.promo-home .pv-btn.is-line {
    background: #fff;
    color: var(--g-green-dark);
    box-shadow: inset 0 0 0 1px rgba(33, 94, 70, .22);
}

.promo-home .pv-tag {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    background: #e6f6ed;
    color: #1e7a4b;
    font-size: 9px;
    font-weight: 700;
}

/* 毛玻璃小卡：核销成功的即时反馈 + 本月累计，制造「系统在跑」的动感 */
.promo-home .pv-float {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 22px 40px -26px rgba(4, 26, 16, .75);
}

.promo-home .pv-float-check {
    left: -10px;
    bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 9px;
    border-radius: 12px;
}

.promo-home .pv-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2f7a52;
    color: #fff;
}

.promo-home .pv-float-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.promo-home .pv-float-copy b {
    color: #24503b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.promo-home .pv-float-copy small {
    color: #6e8a7c;
    font-size: 9.5px;
}

.promo-home .pv-float-stat {
    top: 0;
    left: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 13px;
    border-radius: 12px;
}

.promo-home .pv-float-stat small {
    color: #6e8a7c;
    font-size: 9.5px;
}

.promo-home .pv-float-stat b {
    color: #24503b;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.promo-home .pv-float-stat em {
    margin-left: 3px;
    color: #6e8a7c;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 600;
}

/* ------------------------------------------------------- 一条线走完（流程） */
.promo-home .promo-flow {
    position: relative;
    z-index: 4;
    margin: -26px 22px 0;
    padding: 18px 22px 20px;
    border: 1px solid var(--g-line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--g-shadow-sm);
}

.promo-home .promo-flow-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--g-line-strong);
}

.promo-home .promo-flow-head strong {
    color: var(--g-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
}

.promo-home .promo-flow-head span {
    color: var(--g-muted);
    font-size: 12px;
}

.promo-home .promo-flow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-home .promo-flow-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 12px 2px 0;
}

/* 步骤之间的虚线连接：只有前三个 li 需要 */
.promo-home .promo-flow-steps li + li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 24px;
    width: 10px;
    height: 1px;
    background: var(--g-line-strong);
}

.promo-home .promo-flow-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--g-soft-2);
    color: var(--g-green-mid);
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.promo-home .promo-flow-steps span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.promo-home .promo-flow-steps strong {
    color: var(--g-heading);
    font-size: 13px;
    font-weight: 700;
}

.promo-home .promo-flow-steps small {
    color: var(--g-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

/* ------------------------------------------------------------ 通用区块标题 */
.promo-home .promo-sec {
    padding-top: clamp(48px, 6vw, 84px);
    scroll-margin-top: 12px;
}

.promo-home .promo-head {
    max-width: 640px;
}

.promo-home .promo-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--g-green-mid);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
}

.promo-home .promo-label::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.promo-home .promo-head h2 {
    margin-top: 12px;
    color: var(--g-heading);
    font-size: clamp(26px, 3.1vw, 38px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.02em;
}

.promo-home .promo-head p {
    margin-top: 10px;
    color: var(--g-muted);
    font-size: 14px;
    line-height: 1.8;
}

/* ---------------------------------------------------------------- 核心能力 */
.promo-home .promo-bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.promo-home .promo-bento-card {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    padding: 20px;
    border: 1px solid var(--g-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--g-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.promo-home .promo-bento-card:hover {
    transform: translateY(-2px);
    border-color: rgba(33, 94, 70, .2);
    box-shadow: var(--g-shadow);
}

.promo-home .promo-bento-card.is-lg {
    grid-column: span 4;
}

.promo-home .promo-bento-card.is-half {
    grid-column: span 3;
}

.promo-home .pb-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.promo-home .pb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--g-soft-2);
    color: var(--g-green-mid);
}

.promo-home .pb-icon.is-warn {
    background: var(--g-amber-bg);
    color: var(--g-amber);
}

.promo-home .pb-head div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.promo-home .pb-head strong {
    color: var(--g-heading);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.3;
}

.promo-home .pb-head small {
    color: var(--g-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.promo-home .promo-bento-card > p {
    margin-top: 12px;
    color: #55766a;
    font-size: 13px;
    line-height: 1.8;
}

/* 卡内小界面统一：浅底 + 细边，和页面其它卡片的质感一致 */
.promo-home .pb-ui {
    margin-top: 16px;
}

/* 点名名单 */
.promo-home .pb-roll {
    border-radius: 13px;
    background: var(--g-tint);
    padding: 11px 12px 12px;
}

.promo-home .pb-roll-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 7px;
    color: #4a6f5e;
    font-size: 10.5px;
    font-weight: 700;
}

.promo-home .pb-roll-head em {
    color: var(--g-amber);
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
}

.promo-home .pb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed var(--g-line);
}

.promo-home .pb-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #e4f2ea;
    color: #3f7d5e;
    font-size: 10.5px;
    font-weight: 700;
}

.promo-home .pb-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    color: #2f5745;
    font-size: 11.5px;
    font-weight: 600;
}

.promo-home .pb-name small {
    color: #8aa295;
    font-size: 10px;
    font-weight: 500;
}

.promo-home .pb-tag {
    flex: 0 0 auto;
    padding: 2.5px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 700;
}

.promo-home .pb-tag.is-ok {
    background: #e6f6ed;
    color: #1e7a4b;
}

.promo-home .pb-tag.is-warn {
    background: var(--g-amber-bg);
    color: var(--g-amber);
}

.promo-home .pb-tag.is-off {
    background: #f1f4f2;
    color: #83988e;
}

.promo-home .pb-submit {
    display: block;
    margin-top: 8px;
    padding: 7px;
    border-radius: 8px;
    background: var(--g-green);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

/* 未核销提醒 */
.promo-home .pb-alerts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.promo-home .pb-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid #f2e2c6;
    border-radius: 12px;
    background: #fdf7ec;
}

.promo-home .pb-alert i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9a03f;
    box-shadow: 0 0 0 3px rgba(217, 160, 63, .16);
}

.promo-home .pb-alert span {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.promo-home .pb-alert b {
    overflow: hidden;
    color: #6d501f;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-home .pb-alert small {
    color: #a08b63;
    font-size: 10px;
}

.promo-home .pb-alert em {
    flex: 0 0 auto;
    color: var(--g-amber);
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
}

/* 家长扫码 */
.promo-home .pb-parent {
    padding: 11px;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    background: var(--g-tint);
}

.promo-home .pb-parent-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-home .pb-parent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--g-line);
    color: #55766a;
    font-size: 10px;
}

.promo-home .pb-parent-row em {
    color: var(--g-green-dark);
    font-style: normal;
    font-weight: 700;
}

.promo-home .pb-qr-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border: 1px solid var(--g-line);
    border-radius: 10px;
    background: #fff;
    color: var(--g-green);
}

.promo-home .pb-qr-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.promo-home .pb-qr-copy b {
    color: #2f5745;
    font-size: 11.5px;
    font-weight: 700;
}

.promo-home .pb-qr-copy small {
    color: #8aa295;
    font-size: 10px;
    line-height: 1.5;
}

/* 活动报名 */
.promo-home .pb-signup {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 9px;
}

.promo-home .pb-event {
    position: relative;
    padding: 11px 11px 10px;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    background: var(--g-tint);
}

.promo-home .pb-event-tag {
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #e6f6ed;
    color: #1e7a4b;
    font-size: 9px;
    font-weight: 700;
}

.promo-home .pb-event b {
    display: block;
    color: #2f5745;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}

.promo-home .pb-event small {
    display: block;
    margin-top: 2px;
    color: #8aa295;
    font-size: 9.5px;
}

.promo-home .pb-bar {
    display: block;
    height: 5px;
    margin-top: 9px;
    border-radius: 999px;
    background: #dfeee6;
    overflow: hidden;
}

.promo-home .pb-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f8f6d, #6fb68d);
}

.promo-home .pb-event em {
    display: block;
    margin-top: 5px;
    color: #7d968a;
    font-style: normal;
    font-size: 9.5px;
}

.promo-home .pb-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.promo-home .pb-input {
    display: flex;
    align-items: center;
    height: 27px;
    padding: 0 8px;
    border: 1px dashed var(--g-line-strong);
    border-radius: 8px;
    background: #fff;
    color: #9bb0a5;
    font-size: 10px;
}

.promo-home .pb-form-btn {
    display: grid;
    place-items: center;
    height: 27px;
    border-radius: 8px;
    background: var(--g-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* 财务 / 多校区 */
.promo-home .pb-money {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.promo-home .pb-money div {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--g-tint);
}

.promo-home .pb-money small {
    display: block;
    color: #8aa295;
    font-size: 10px;
}

.promo-home .pb-money b {
    color: var(--g-heading);
    font-size: 16.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.promo-home .pb-money em {
    margin-left: 2px;
    color: #7d968a;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
}

.promo-home .pb-campus {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--g-tint);
}

.promo-home .pb-campus div {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
}

.promo-home .pb-campus span {
    color: #55766a;
    font-size: 10.5px;
}

.promo-home .pb-campus i {
    display: block;
    height: 5px;
    border-radius: 999px;
    background: #dfeee6;
    overflow: hidden;
}

.promo-home .pb-campus i b {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f8f6d, #6fb68d);
}

.promo-home .pb-campus em {
    color: #8aa295;
    font-style: normal;
    font-size: 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.promo-home .w72 { width: 72%; }
.promo-home .w82 { width: 82%; }
.promo-home .w64 { width: 64%; }
.promo-home .w47 { width: 47%; }

/* 能力兜底清单 */
.promo-home .promo-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--g-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
}

.promo-home .promo-extra-label {
    color: var(--g-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.promo-home .promo-extra-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.promo-home .promo-extra-list em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--g-line);
    border-radius: 999px;
    background: #fff;
    color: #4a6f5e;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
}

.promo-home .promo-extra-list .ico {
    color: #6b9a83;
}

/* ---------------------------------------------------------------- 角色视角 */
.promo-home .promo-role-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.promo-home .promo-role {
    padding: 20px;
    border: 1px solid var(--g-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--g-shadow-sm);
}

.promo-home .pr-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--g-soft-2);
    color: var(--g-green-mid);
}

.promo-home .promo-role strong {
    display: block;
    color: var(--g-heading);
    font-size: 15px;
    font-weight: 800;
}

.promo-home .promo-role small {
    display: block;
    margin-top: 3px;
    color: var(--g-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.promo-home .promo-role ul {
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--g-line-strong);
    list-style: none;
}

.promo-home .promo-role li {
    position: relative;
    padding-left: 12px;
    color: #4f7263;
    font-size: 12px;
    line-height: 1.95;
}

.promo-home .promo-role li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9ccbb2;
}

/* ---------------------------------------------------------------- 前后对比 */
.promo-home .promo-compare {
    max-width: 980px;
    margin-top: 24px;
    border: 1px solid var(--g-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--g-shadow-sm);
    overflow: hidden;
}

.promo-home .cmp-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--g-line);
    font-size: 13px;
}

.promo-home .cmp-head {
    border-top: 0;
    background: var(--g-tint);
    color: #7d968a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.promo-home .cmp-k {
    color: var(--g-heading);
    font-weight: 700;
}

.promo-home .cmp-before {
    padding-left: 18px;
    border-left: 1px solid var(--g-line);
    color: #92a49b;
    text-decoration: line-through;
    text-decoration-color: rgba(146, 164, 155, .5);
}

.promo-home .cmp-after {
    display: flex;
    padding-left: 18px;
    border-left: 1px solid var(--g-line);
    align-items: center;
    gap: 6px;
    color: var(--g-green-dark);
    font-weight: 600;
}

.promo-home .cmp-after .ico {
    flex: 0 0 auto;
    color: #4f9a72;
}

/* -------------------------------------------------------------------- 试用 */
.promo-home .promo-trial {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(22px, 3vw, 46px);
    margin-top: clamp(48px, 6vw, 84px);
    padding: clamp(28px, 3.4vw, 44px);
    border-radius: 26px;
    background:
        radial-gradient(110% 130% at 88% 0%, rgba(160, 214, 184, .22), transparent 60%),
        linear-gradient(135deg, #345c4a 0%, #264636 100%);
    color: #fff;
    box-shadow: 0 30px 60px -48px rgba(12, 44, 30, .9);
}

.promo-home .promo-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #d7efdf;
    font-size: 11.5px;
    font-weight: 700;
}

.promo-home .promo-trial h2 {
    margin-top: 14px;
    color: #fff;
    font-size: clamp(23px, 2.7vw, 32px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.promo-home .promo-trial p {
    margin-top: 10px;
    color: rgba(255, 255, 255, .74);
    font-size: 13.5px;
    line-height: 1.8;
}

.promo-home .promo-trial-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 20px;
    padding: 0;
    list-style: none;
}

.promo-home .promo-trial-tags li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .9);
    font-size: 11.5px;
    font-weight: 600;
}

.promo-home .promo-trial-tags .ico {
    color: #a9ddbe;
}

.promo-home .promo-trial-note {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, .48);
    font-size: 11px;
    line-height: 1.6;
}

.promo-home .promo-trial-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-home .promo-trial-steps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
}

.promo-home .promo-trial-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.promo-home .promo-trial-steps span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.promo-home .promo-trial-steps strong {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.promo-home .promo-trial-steps small {
    color: rgba(255, 255, 255, .62);
    font-size: 11.5px;
    line-height: 1.6;
}

/* -------------------------------------------------------------------- 问答 */
.promo-home .promo-faq {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
}

.promo-home .promo-faq-list {
    border-top: 1px solid var(--g-line);
}

.promo-home .promo-faq-list details {
    border-bottom: 1px solid var(--g-line);
}

.promo-home .promo-faq-list summary {
    position: relative;
    padding: 16px 28px 16px 0;
    color: var(--g-heading);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.promo-home .promo-faq-list summary::-webkit-details-marker {
    display: none;
}

.promo-home .promo-faq-list summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b9a83;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.promo-home .promo-faq-list details[open] summary::after {
    content: "−";
}

.promo-home .promo-faq-list p {
    margin: -4px 0 16px;
    max-width: 46em;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.85;
}

/* -------------------------------------------------------------------- 页脚 */
.promo-home .promo-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: clamp(40px, 5vw, 64px);
    padding: 22px 2px 6px;
    border-top: 1px solid var(--g-line);
}

.promo-home .promo-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.promo-home .promo-footer-brand strong {
    color: var(--g-heading);
    font-size: 13.5px;
    font-weight: 800;
}

.promo-home .promo-footer-brand span {
    color: #8aa295;
    font-size: 11.5px;
}

.promo-home .promo-footer-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.promo-home .promo-footer-links button {
    border: 0;
    background: transparent;
    color: var(--g-muted);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color .18s ease;
}

.promo-home .promo-footer-links button:hover {
    color: var(--g-green-dark);
}

.promo-home .promo-footer-copy {
    width: 100%;
    color: #9bb0a5;
    font-size: 11px;
    font-weight: 500;
}

/* ------------------------------------------------------------- 响应式：1024 */
@media (max-width: 1024px) {
    .promo-home .promo-hero {
        min-height: 460px;
        padding: 32px;
        --pv-person-h: 396px;
    }

    .promo-home .promo-hero h1 {
        font-size: clamp(36px, 4.4vw, 46px);
    }

    /* 平板：两栏变窄后人物会压住界面窗的按钮，这一档把她放到窗后面 */
    .promo-home .pv-person {
        z-index: 2;
        right: -18px;
    }

    .promo-home .pv-window {
        width: min(268px, 64%);
        bottom: 64px;
    }

    .promo-home .pv-float-check {
        bottom: 24px;
    }

    .promo-home .promo-ghost {
        display: none;
    }

    .promo-home .promo-link,
    .promo-home .promo-links {
        display: none;
    }

    .promo-home .promo-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promo-home .promo-bento-card.is-lg {
        grid-column: span 6;
    }

    .promo-home .promo-bento-card.is-half {
        grid-column: span 3;
    }
}

/* -------------------------------------------------------------- 响应式：900 */
@media (max-width: 900px) {
    .promo-home .promo-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .promo-home .promo-trial {
        grid-template-columns: minmax(0, 1fr);
    }

    .promo-home .promo-flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
    }

    /* 两列排布后，横向虚线会落在列中间变成杂点，整组关掉 */
    .promo-home .promo-flow-steps li::before {
        display: none;
    }
}

/* -------------------------------------------------------------- 响应式：767
   手机版换成「人物在上、毛玻璃文案卡压在下沿」的形态：
   copy 在 DOM 里靠前，用 column-reverse 把它摆到视觉块下方。 */
@media (max-width: 767px) {
    .promo-home .promo-nav {
        min-height: 60px;
        padding: 8px 2px 6px;
    }

    .promo-home .promo-brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    .promo-home .promo-brand strong {
        font-size: 15px;
    }

    .promo-home .promo-brand small {
        font-size: 10.5px;
    }

    .promo-home .promo-register,
    .promo-home .promo-login {
        min-width: 0;
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

    .promo-home .promo-hero {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        padding: 0 0 12px;
        border-radius: 24px;
        --pv-person-h: 306px;
    }

    .promo-home .promo-hero-visual {
        min-height: 306px;
        height: 306px;
    }

    .promo-home .promo-hero-visual::before {
        right: -80px;
        bottom: -20px;
        width: 260px;
        height: 280px;
    }

    .promo-home .pv-person {
        right: -16px;
        bottom: -40px;
        height: 322px;
        max-width: none;
    }

    /* 手机上工作台界面收窄并简化，只留「三个数字 + 两条课」 */
    .promo-home .pv-window {
        left: 18px;
        bottom: 56px;
        width: 56%;
        max-width: 196px;
        border-radius: 12px;
    }

    /* 两个浮层在手机上会挤到人物与文案卡，直接收起来 */
    .promo-home .pv-float {
        display: none;
    }

    .promo-home .pv-titlebar {
        padding: 7px 9px;
    }

    .promo-home .pv-date,
    .promo-home .pv-list li:nth-child(3),
    .promo-home .pv-sec em {
        display: none;
    }

    .promo-home .pv-body {
        padding: 8px 9px 9px;
    }

    .promo-home .pv-stats {
        gap: 5px;
        padding-bottom: 8px;
    }

    .promo-home .pv-stats div {
        padding: 5px 6px;
    }

    .promo-home .pv-stats b {
        font-size: 13px;
    }

    .promo-home .pv-stats small {
        font-size: 8.5px;
    }

    .promo-home .pv-sec {
        margin: 7px 0 5px;
        font-size: 9.5px;
    }

    .promo-home .pv-list li {
        padding: 6px;
        gap: 6px;
    }

    .promo-home .pv-cls b {
        font-size: 9.5px;
    }

    .promo-home .pv-cls small {
        font-size: 8px;
    }

    .promo-home .pv-btn,
    .promo-home .pv-tag {
        padding: 2.5px 6px;
        font-size: 8px;
    }

    .promo-home .pv-float-stat {
        top: 6px;
        left: 12px;
        padding: 7px 10px;
        border-radius: 10px;
    }

    .promo-home .pv-float-stat b {
        font-size: 15px;
    }

    .promo-home .pv-float-check {
        left: auto;
        right: 12px;
        bottom: 18px;
        padding: 6px 10px 6px 7px;
        border-radius: 10px;
    }

    .promo-home .pv-check {
        width: 20px;
        height: 20px;
    }

    .promo-home .pv-float-copy b {
        font-size: 10px;
    }

    .promo-home .pv-float-copy small {
        font-size: 8.5px;
    }

    /* 文案卡：半透明白 + 背景模糊，压住人物与界面的下沿 */
    .promo-home .promo-hero-copy {
        position: relative;
        z-index: 5;
        max-width: none;
        margin: -44px 10px 0;
        padding: 18px 16px 14px;
        border: 1px solid rgba(255, 255, 255, .78);
        border-radius: 20px;
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
        box-shadow: 0 22px 40px -26px rgba(6, 34, 20, .55);
        gap: 10px;
    }

    .promo-home .promo-hero h1 {
        color: var(--g-heading);
        font-size: clamp(30px, 8.6vw, 38px);
    }

    .promo-home .promo-hero h1 em {
        color: var(--g-green-mid);
    }

    .promo-home .promo-hero h2 {
        color: var(--g-heading);
        font-size: 16.5px;
    }

    .promo-home .promo-hero p {
        color: #55766a;
        font-size: 13px;
        line-height: 1.75;
    }

    .promo-home .promo-kicker {
        padding: 5px 11px 5px 9px;
        border-color: rgba(33, 94, 70, .16);
        background: rgba(233, 245, 238, .9);
        color: var(--g-green-dark);
        font-size: 10.5px;
    }

    .promo-home .promo-kicker .ico {
        color: var(--g-green-mid);
    }

    .promo-home .promo-hero-points {
        margin: 0;
        gap: 6px;
    }

    .promo-home .promo-hero-points span {
        padding: 4px 8px;
        border-color: rgba(33, 94, 70, .14);
        background: rgba(233, 245, 238, .8);
        color: var(--g-green-dark);
        font-size: 10.5px;
    }

    .promo-home .promo-hero-points .ico {
        color: var(--g-green-mid);
    }

    .promo-home .promo-hero-cta {
        margin-top: 2px;
        gap: 8px;
        width: 100%;
    }

    .promo-home .promo-primary {
        flex: 1;
        min-height: 46px;
        padding: 0 14px;
        font-size: 14px;
    }

    .promo-home .promo-ghost {
        display: none;
    }

    /* 流程条：手机改成上移贴合，去掉负边距避免与卡片打架 */
    .promo-home .promo-flow {
        margin: 12px 0 0;
        padding: 14px 14px 6px;
        border-radius: 18px;
    }

    .promo-home .promo-flow-head {
        padding-bottom: 10px;
    }

    .promo-home .promo-flow-head span {
        font-size: 11px;
        line-height: 1.6;
    }

    .promo-home .promo-flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .promo-home .promo-flow-steps li {
        padding: 12px 8px 12px 0;
    }

    /* 手机上两列排布，横向虚线会落在中间变成杂点，整组关掉 */
    .promo-home .promo-flow-steps li::before {
        display: none;
    }

    .promo-home .promo-flow-steps b {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        font-size: 9.5px;
    }

    .promo-home .promo-flow-steps strong {
        font-size: 12.5px;
    }

    .promo-home .promo-flow-steps small {
        font-size: 10.5px;
    }

    .promo-home .promo-sec {
        padding-top: 40px;
    }

    .promo-home .promo-head h2 {
        margin-top: 9px;
        font-size: 24px;
    }

    .promo-home .promo-head p {
        font-size: 12.5px;
        line-height: 1.75;
    }

    .promo-home .promo-bento {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 18px;
    }

    .promo-home .promo-bento-card,
    .promo-home .promo-bento-card.is-lg,
    .promo-home .promo-bento-card.is-half {
        grid-column: span 1;
        padding: 16px;
        border-radius: 16px;
    }

    .promo-home .promo-bento-card > p {
        margin-top: 8px;
        font-size: 12.5px;
    }

    .promo-home .pb-ui {
        padding-top: 12px;
    }

    .promo-home .promo-extra {
        margin-top: 10px;
        padding: 12px;
        border-radius: 14px;
    }

    .promo-home .promo-role-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
    }

    .promo-home .promo-role {
        padding: 15px;
        border-radius: 16px;
    }

    .promo-home .promo-role li {
        font-size: 11.5px;
        line-height: 1.9;
    }

    .promo-home .promo-compare {
        margin-top: 18px;
        border-radius: 16px;
    }

    .promo-home .cmp-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 13px 15px;
        font-size: 12.5px;
    }

    .promo-home .cmp-head {
        display: none;
    }

    .promo-home .cmp-k {
        font-size: 12px;
        letter-spacing: .04em;
    }

    .promo-home .cmp-before,
    .promo-home .cmp-after {
        padding-left: 0;
    }

    /* 手机上「以前 / 现在」靠前缀区分，删除线会把前缀一起划掉，这里去掉 */
    .promo-home .cmp-before {
        text-decoration: none;
    }

    .promo-home .cmp-before::before {
        content: "以前：";
        color: #a8b7af;
    }

    .promo-home .cmp-after::before {
        content: "现在：";
        color: var(--g-green-mid);
        font-weight: 700;
    }

    .promo-home .promo-trial {
        margin-top: 40px;
        padding: 20px 16px;
        border-radius: 20px;
        gap: 18px;
    }

    .promo-home .promo-trial h2 {
        font-size: 22px;
    }

    .promo-home .promo-trial p {
        font-size: 12.5px;
    }

    .promo-home .promo-trial-tags {
        margin: 12px 0 16px;
        gap: 6px;
    }

    .promo-home .promo-trial-tags li {
        font-size: 10.5px;
    }

    .promo-home .promo-trial .promo-primary {
        width: 100%;
    }

    .promo-home .promo-trial-steps li {
        padding: 11px 12px;
    }

    .promo-home .promo-faq {
        padding-top: 40px;
    }

    .promo-home .promo-faq-list summary {
        padding: 14px 26px 14px 0;
        font-size: 13.5px;
    }

    .promo-home .promo-faq-list p {
        font-size: 12.5px;
    }

    .promo-home .promo-footer {
        margin-top: 36px;
        padding-top: 18px;
        gap: 10px;
    }
}

/* 极窄机型（iPhone SE 一代 / 320px）再收紧一档 */
@media (max-width: 370px) {
    /* 320 宽度下「品牌 + 注册 + 登录」挤不下：收起注册（首屏正文里有更大的注册按钮），
       品牌名过长时省略，避免折成两行把导航撑高 */
    .promo-home .promo-register {
        display: none;
    }

    .promo-home .promo-brand strong {
        max-width: 9em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .promo-home .promo-hero-visual {
        min-height: 278px;
        height: 278px;
    }

    .promo-home .pv-person {
        height: 296px;
    }

    .promo-home .pv-window {
        left: 10px;
        width: 58%;
        bottom: 50px;
    }

    .promo-home .promo-hero h1 {
        font-size: 29px;
    }

    .promo-home .promo-hero-points span {
        font-size: 10px;
        padding: 4px 7px;
    }

    .promo-home .promo-hero-points span:nth-child(3) {
        display: none;
    }
}

/* ------------------------------------------------- 亮色锁定（本页不做暗色版）
   官方首页只保留亮色：上面的调色板是**主题无关**的（全写在 .promo-home 上），
   所以只要把这里的暗色覆盖删掉，本页在暗色环境下就自然回到亮色。
   但 app.css 里为**旧版首页**留了 html[data-theme="romance"] .promo-* 的覆盖，
   优先级（0,2,1）高于本节上面的 .promo-home .xxx（0,2,0），
   在暗色环境下会重新生效，所以这里用同等选择器把亮色值再写一遍。 */
html[data-theme="romance"] .promo-home .promo-login {
    border-color: var(--g-green);
    background: var(--g-green);
    color: #fff;
}

html[data-theme="romance"] .promo-home .promo-primary {
    background: var(--g-cta);
    color: #173f30;
}

html[data-theme="romance"] .promo-home .promo-trial {
    background:
        radial-gradient(110% 130% at 88% 0%, rgba(160, 214, 184, .22), transparent 60%),
        linear-gradient(135deg, #345c4a 0%, #264636 100%);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .promo-home *,
    .promo-home *::before,
    .promo-home *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }

    .promo-home .promo-bento-card:hover,
    .promo-home .promo-primary:hover {
        transform: none !important;
    }
}

/* ==========================================================================\n+   聚焦版首页：用三件经营痛点组织全部信息。\n+   这组规则放在历史样式之后，保留管理后台和其他页面的既有外观。\n+   ========================================================================== */
.promo-home-focused {
    max-width: 1200px;
    padding: 0 20px 24px;
}

.promo-home-focused .promo-nav {
    min-height: 76px;
    padding: 12px 0;
}

.promo-home-focused .promo-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr);
    gap: 12px;
    min-height: 560px;
    padding: 54px 58px;
    border-radius: 24px;
    box-shadow: 0 28px 56px -42px rgba(20, 65, 46, .65);
}

.promo-home-focused .promo-hero-bg {
    background:
        radial-gradient(78% 120% at 8% 3%, rgba(148, 209, 174, .23), transparent 68%),
        linear-gradient(132deg, #315e4c 0%, #254d3e 55%, #173c2e 100%);
}

.promo-home-focused .promo-hero-copy {
    gap: 16px;
    max-width: 560px;
}

.promo-home-focused .promo-hero h1 {
    display: block;
    font-size: clamp(38px, 4.1vw, 56px);
    line-height: 1.17;
    letter-spacing: 0;
}

.promo-home-focused .promo-hero h1 em {
    display: inline-block;
    margin-top: 5px;
    color: #c9edcf;
    font-size: .78em;
    letter-spacing: 0;
}

.promo-home-focused .promo-hero p {
    max-width: 33em;
    font-size: 15px;
    line-height: 1.85;
}

.promo-home-focused .promo-hero-visual {
    min-height: 450px;
    overflow: visible;
}

/* 手机端单独使用这句口号，直接落在人物区，不套任何信息卡。 */
.promo-home-focused .hero-slogan {
    display: none !important;
}

.promo-home-focused .promo-hero-visual::before {
    right: 2%;
    bottom: -36px;
    width: 390px;
    height: 390px;
    background: radial-gradient(closest-side, rgba(202, 237, 209, .2), transparent 70%);
}

/* 人物留在右半区的内侧，避免贴边；透明图以底部为基准，不会悬空。 */
.promo-home-focused .pv-person {
    z-index: 3;
    right: 7%;
    bottom: -58px;
    height: 526px;
    max-width: none;
    filter: drop-shadow(0 22px 22px rgba(4, 27, 17, .22));
}

.promo-home-focused .hero-glass-card {
    position: absolute;
    z-index: 4;
    left: 25%;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(340px, 72%);
    padding: 11px 16px 10px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 15px;
    background: rgba(249, 255, 251, .48);
    box-shadow: 0 20px 40px -30px rgba(9, 42, 27, .7);
    color: #1f4c39;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.promo-home-focused .hero-glass-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4c7664;
    font-size: 11px;
    font-weight: 700;
}

.promo-home-focused .hero-glass-label i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #50aa75;
    box-shadow: 0 0 0 4px rgba(80, 170, 117, .14);
}

.promo-home-focused .hero-glass-card strong {
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.3;
}

.promo-home-focused .hero-glass-card small {
    margin-top: 1px;
    color: #557665;
    font-size: 11px;
    line-height: 1.6;
}

.promo-home-focused .hero-glass-action {
    position: absolute;
    right: 16px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    color: #17633f;
    font-size: 11px;
    font-weight: 800;
}

.promo-home-focused .pain-section,
.promo-home-focused .outcome-section {
    margin-top: 96px;
}

.promo-home-focused .promo-head {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

.promo-home-focused .promo-label {
    display: inline-flex;
    border-radius: 999px;
    background: #e4f3e9;
    color: #267050;
    font-size: 12px;
    font-weight: 800;
}

.promo-home-focused .promo-head h2,
.promo-home-focused .outcome-copy h2 {
    color: #1d4736;
    letter-spacing: 0;
}

.promo-home-focused .promo-head h2 {
    margin-top: 14px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.28;
}

.promo-home-focused .promo-head p {
    margin: 12px auto 0;
    color: #648475;
    font-size: 14px;
    line-height: 1.8;
}

.promo-home-focused .pain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.promo-home-focused .pain-card {
    position: relative;
    min-height: 298px;
    padding: 26px 25px 22px;
    overflow: hidden;
    border: 1px solid rgba(34, 91, 64, .12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 32px -30px rgba(29, 74, 51, .5);
}

.promo-home-focused .pain-card::after {
    content: "";
    position: absolute;
    top: -55px;
    right: -48px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    opacity: .6;
}

.promo-home-focused .pain-card--account::after { background: #dcefe4; }
.promo-home-focused .pain-card--renew::after { background: #e4eef6; }
.promo-home-focused .pain-card--growth::after { background: #f7ead8; }

.promo-home-focused .pain-number {
    color: #a2b9ad;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.promo-home-focused .pain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #e5f3e9;
    color: #24754f;
}

.promo-home-focused .pain-card--renew .pain-icon { background: #e8f0f7; color: #357298; }
.promo-home-focused .pain-card--growth .pain-icon { background: #fbefdf; color: #aa6f24; }

.promo-home-focused .pain-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 44px;
    margin-top: 14px;
}

.promo-home-focused .pain-card h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #214b39;
    font-size: 24px;
    line-height: 1.3;
}

.promo-home-focused .pain-card p {
    min-height: 72px;
    color: #5e7b6d;
    font-size: 13px;
    line-height: 1.8;
}

.promo-home-focused .pain-result {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 13px;
    border-top: 1px solid rgba(34, 91, 64, .1);
}

.promo-home-focused .pain-result b { color: #287354; font-size: 13px; }
.promo-home-focused .pain-result span { color: #5e7b6d; font-size: 11.5px; }

.promo-home-focused .outcome-section {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(30px, 6vw, 90px);
    align-items: center;
    padding: 52px 56px;
    border-radius: 20px;
    background: #dcefe4;
}

.promo-home-focused .outcome-copy h2 {
    margin: 14px 0 12px;
    font-size: clamp(29px, 3.1vw, 39px);
    line-height: 1.28;
}

.promo-home-focused .outcome-copy p {
    max-width: 31em;
    margin-bottom: 22px;
    color: #547664;
    font-size: 14px;
    line-height: 1.85;
}

.promo-home-focused .outcome-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.promo-home-focused .outcome-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    border: 1px solid rgba(35, 92, 64, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
}

.promo-home-focused .outcome-steps b {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2c624a;
    color: #fff;
    font-size: 12px;
}

.promo-home-focused .outcome-steps span { display: flex; flex-direction: column; gap: 3px; }
.promo-home-focused .outcome-steps strong { color: #244b3b; font-size: 14px; }
.promo-home-focused .outcome-steps small { color: #668375; font-size: 12px; }

.promo-home-focused .promo-footer { margin-top: 56px; }

@media (max-width: 860px) {
    .promo-home-focused .promo-hero {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
        min-height: 500px;
        padding: 42px 36px;
    }

    .promo-home-focused .pv-person { right: 1%; height: 460px; }
    .promo-home-focused .hero-glass-card { left: -12px; }
    .promo-home-focused .outcome-section { padding: 40px; }
}

@media (max-width: 700px) {
    .promo-home-focused { padding: 0 6px 18px; }
    .promo-home-focused .promo-nav { min-height: 62px; padding: 8px 2px; }
    .promo-home-focused .promo-brand small { display: none; }
    .promo-home-focused .promo-links { display: none; }
    .promo-home-focused .promo-login { min-height: 36px; padding: 0 13px; }

    /* 移动端采用「人物在上、信息卡压在图片下缘」的单一焦点构图。 */
    .promo-home-focused .promo-hero {
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
        min-height: 0;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
    }

    /* 深色人物区和试用动作分开：试用按钮不再被包在大卡里。 */
    .promo-home-focused .promo-hero-bg {
        inset: 0 0 auto;
        height: 248px;
        border-radius: 20px;
        box-shadow: 0 22px 34px -28px rgba(12, 56, 36, .72);
    }

    .promo-home-focused .promo-hero-visual {
        min-height: 248px;
        height: 248px;
    }

    .promo-home-focused .promo-hero-visual::before {
        right: -22px;
        bottom: -80px;
        width: 320px;
        height: 320px;
    }

    .promo-home-focused .pv-person {
        right: 50%;
        bottom: 9px;
        height: 295px;
        transform: translateX(70%);
    }

    .promo-home-focused .promo-hero .hero-slogan {
        position: absolute;
        z-index: 5;
        top: 25px;
        left: 18px;
        display: block !important;
        max-width: none;
        margin: 0;
        color: #fff;
        font-size: 19px;
        font-weight: 800;
        line-height: 1.35;
        letter-spacing: 0;
        text-shadow: 0 2px 10px rgba(13, 57, 37, .24);
    }

    .promo-home-focused .promo-hero .hero-slogan em {
        display: block;
        color: #ccefd5;
        font-style: normal;
        font-size: 1em;
        font-weight: inherit;
        letter-spacing: 0;
    }

    .promo-home-focused .hero-glass-card {
        left: 14px;
        bottom: -20px;
        width: calc(100% - 28px);
        padding: 10px 14px 9px;
        border-color: rgba(255, 255, 255, .62);
        border-radius: 15px;
        background: rgba(251, 255, 252, .74);
    }

    .promo-home-focused .hero-glass-card strong { margin-top: 3px; font-size: 17px; }
    .promo-home-focused .hero-glass-card small { display: none; }
    .promo-home-focused .hero-glass-action { position: absolute; right: 15px; bottom: 13px; margin: 0; }

    .promo-home-focused .promo-hero-copy {
        z-index: 5;
        gap: 9px;
        margin: 0;
        padding: 42px 14px 0;
        border: 0;
        background: transparent;
        color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .promo-home-focused .promo-hero-copy > .promo-kicker,
    .promo-home-focused .promo-hero-copy > h1,
    .promo-home-focused .promo-hero-copy > p,
    .promo-home-focused .promo-hero-points { display: none; }
    .promo-home-focused .promo-hero-cta { width: 100%; margin-top: 0; }
    .promo-home-focused .promo-primary {
        flex: 1;
        min-height: 42px;
        padding: 0 16px;
        background: #174a33;
        color: #fff;
        box-shadow: 0 12px 22px -15px rgba(8, 39, 25, .8);
        font-size: 13px;
    }
    .promo-home-focused .promo-primary:hover { background: #103a28; }
    .promo-home-focused .promo-ghost { display: none; }

    .promo-home-focused .pain-section,
    .promo-home-focused .outcome-section { margin-top: 18px; }
    .promo-home-focused .promo-head { padding: 0 9px; }
    .promo-home-focused .promo-head h2 {
        margin-top: 10px;
        overflow-wrap: normal;
        white-space: nowrap;
        font-size: clamp(16px, 4.6vw, 18px);
        line-height: 1.35;
    }
    .promo-home-focused .promo-head p { font-size: 12.5px; }
    .promo-home-focused .pain-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
    .promo-home-focused .pain-card { min-height: 0; padding: 20px 18px 17px; }
    .promo-home-focused .pain-heading { gap: 11px; min-height: 39px; margin-top: 11px; }
    .promo-home-focused .pain-icon { width: 39px; height: 39px; border-radius: 11px; }
    .promo-home-focused .pain-card h3 { margin: 0; font-size: 22px; }
    .promo-home-focused .pain-card p { min-height: 0; margin: 11px 0 13px; font-size: 12.5px; }
    .promo-home-focused .outcome-section { grid-template-columns: 1fr; gap: 24px; padding: 27px 20px; border-radius: 16px; }
    .promo-home-focused .outcome-copy h2 { margin: 10px 0; font-size: 27px; }
    .promo-home-focused .outcome-copy p { margin-bottom: 17px; font-size: 12.5px; }
    .promo-home-focused .outcome-steps li { gap: 10px; padding: 12px; }
    .promo-home-focused .outcome-steps strong { font-size: 12.5px; }
    .promo-home-focused .outcome-steps small { font-size: 10.5px; line-height: 1.5; }
    .promo-home-focused .promo-footer { margin-top: 38px; }
}

/* ==========================================================================
   注册 / 试用领取（login.js、license.js 复用的小组件）
   ========================================================================== */
.register-card {
    width: min(100%, 560px);
}

.trial-claim-card {
    border-color: rgba(7, 168, 90, .24);
    background: var(--surface);
}

.trial-claim-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.trial-claim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e8f8ef;
    color: #05a854;
}

.trial-claim-copy strong {
    display: block;
    margin: 1px 0 5px;
    color: var(--text);
    font-size: 17px;
}

.trial-claim-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}