/* ============================================================
   首页（宣传 + 会员转化）样式 · 2026-10-08 落地
   ============================================================
   来源：`化妆品安全评估/设计稿/首页_宣传与转化_20261008.html`。

   两点说明：
     1. **只搬内容区**。设计稿的侧栏 / 顶栏 / CSS 变量 / 全局重置一律不要 ——
        那些由项目的 app.css 提供，否则会出现「两个 .sidebar 打架」。
     2. 设计稿用的变量名（--brand-*、--ink-*、--sp-*、--r-*、--fs-*）
        与项目 app.css 完全同名同义，所以这里可以直接引，不需要翻译。
        少数项目里没有的（--ink-75、--sh-md、--gold-*）在本文件顶部补齐。

   改动记录（与设计稿不同之处）：
     · .page 不再设 max-width（2026-10-05 定过「页面一律铺满、宽屏右侧不留白」）
     · 新增 .plans-hd（原来用行内 style，抽成类方便统一）
     · 新增 .hero__ghostbtn（第 3 屏的「先看功能全景」原来是行内 style）

   2026-10-09 老板一轮调整：
     · 01/02/03 主标题统一放大（.hero__t / .sld__t 同一量级）
     · 三屏两列一律等高：左列末尾区块 margin-top:auto 贴到右框底部
     · 02 屏的机构气泡整块换成 .srcs7 来源清单（三列台账，弃用气泡）
     · 03 屏右栏改「上二下二」，与 01 屏右框等高；左栏补 .klist 三条做法
     · 删掉「三条硬承诺」与「跟手工做报告比」两个区块及其样式
   ============================================================ */

/* 项目 app.css 里没有、但设计稿用到的几个令牌，就近补齐 */
.home {
  --gold-700:#6E4D18; --gold-600:#8A6224; --gold-500:#B0812F; --gold-300:#D8BC85; --gold-100:#F6EEDA;
  --brand-900:#0A2E27; --brand-800:#0E3B31; --brand-700:#0F4C3F; --brand-600:#15614F;
  --brand-500:#1C7A63; --brand-400:#3E9C82; --brand-100:#E3F0EB; --brand-50:#F1F8F5;
  --ink-75:#F2F5F3; --ok-700:#14713F; --ok-100:#E2F4EA; --warn-100:#FCF1DC; --info-100:#E6F0F9; --info-700:#1E4E7A;
  display: flex; flex-direction: column; gap: var(--sp-7);
  padding: var(--sp-6) 30px var(--sp-9);
}
/* 中间类按钮（首页专用的一档尺寸） */
.home .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-4);
  border-radius: var(--r-md); font-size: var(--fs-xs); border: var(--line); background: var(--white);
  color: var(--ink-700); transition: .12s; cursor: pointer; }
.home .btn:hover { border-color: var(--ink-300); color: var(--ink-900); }
.home .btn--pri { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 500; }
.home .btn--pri:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.home .btn--gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); border-color: var(--gold-500); color: #fff; font-weight: 600; }
.home .btn--gold:hover { filter: brightness(1.07); }
.home .ico-btn { height: 38px; padding: 0 var(--sp-6); font-size: var(--fs-sm); }
.home .panel { background: var(--white); border: var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.home .panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: var(--line-soft); }
.home .panel__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-900); margin: 0; }
.home .panel__title svg { color: var(--brand-500); }
.home .panel__sub { font-size: var(--fs-2xs); font-weight: 400; color: var(--ink-400); }
.home .panel__body { padding: var(--sp-5); }

/* 会员方案标题（原来写在行内） */
.plans-hd { text-align: center; margin-bottom: var(--sp-6); }
.plans-hd__t { font-size: var(--fs-xl); font-weight: 500; color: var(--ink-900); letter-spacing: -.3px; margin: 0; }
.plans-hd__d { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 6px; }
/* 第 3 屏的次级按钮（深色底上的幽灵按钮） */
.hero__ghostbtn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
.hero__ghostbtn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; }

/* ===== 0. 主视觉 第 1 屏：广告牌（2026-10-09 新增，同日按老板反馈重做） =====
   老板要求两条：① **整体是一个颜色**（原来"深绿底上浮一块浅金卡"＝两层皮）；
   ② 太简陋、要饱满、要高大上。
   做法：不再用独立的浅金卡片，改成**与 02/03 屏同一套语言** —— 深绿底 + 半透明白块
   + 金色细线与金色文字。整屏只有一个色系（深绿），金色只做点缀，不做色块。
   信息量也加厚：左边钩子与两个动作，右边"一张券能拿到什么"三行 + 价格锚点。 */
.ad0 {
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-8);
  /* stretch 让右栏"券面块"跟着左栏高度撑满 —— 否则两块高低不齐，整屏看着就是空的 */
  align-items: stretch;
}
.ad0__l { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* 钩子胶囊：金色描边 + 极淡金底（不是实心黄块） */
.ad0__kicker {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px var(--sp-4); border-radius: var(--r-full);
  background: rgba(216, 188, 133, .12);
  border: 1px solid rgba(216, 188, 133, .45);
  color: var(--gold-300);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .2px;
}
.ad0__kicker em {
  font-style: normal; font-weight: 400; color: rgba(255, 255, 255, .5);
  margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .22);
}
.ad0__t {
  font-size: var(--fs-3xl); font-weight: 600; color: #fff;
  line-height: 1.32; letter-spacing: -.8px; margin: var(--sp-4) 0 var(--sp-3);
}
.ad0__t em { font-style: normal; color: var(--gold-300); }
.ad0__d { font-size: var(--fs-sm); color: rgba(255, 255, 255, .74); line-height: 1.85; max-width: 560px; }
.ad0__d b { color: var(--gold-300); font-weight: 600; }
.ad0__cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
/* 主按钮走金色（金色在整站就是"付费/权益"的语义色），次按钮是深色底上的幽灵按钮 */
.home .ad0__pri { background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); border-color: var(--gold-500); color: #fff; font-weight: 600; }
.home .ad0__pri:hover { filter: brightness(1.07); }
.home .ad0__ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; font-weight: 600; }
.home .ad0__ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }
.ad0__trust { display: flex; gap: var(--sp-5); margin-top: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-2xs); color: rgba(255, 255, 255, .6); }
.ad0__trust span { display: inline-flex; align-items: center; gap: 5px; }
.ad0__trust svg { color: var(--gold-300); flex: none; }

/* 右栏：**同色系**的券面块 —— 半透明白底 + 金色细线，和 02/03 屏的 .smini/.srcs7 是一家人 */
.ad0__r {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-3); min-width: 0;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(216, 188, 133, .28);
}

/* 底部通栏：数据来源（整行铺开，把这一屏的底边"压住"，不留一大片空绿） */
.ad0__src {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--fs-2xs);
}
.ad0__src__k { color: rgba(255, 255, 255, .42); margin-right: 2px; }
.ad0__src__i {
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-full); padding: 3px 10px;
}
.ad0__badge {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  padding-bottom: var(--sp-3); border-bottom: 1px dashed rgba(216, 188, 133, .32);
}
.ad0__badge__n { font-size: var(--fs-3xl); font-weight: 700; line-height: 1; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.ad0__badge__u { font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); }
.ad0__list { display: flex; flex-direction: column; gap: 9px; }
.ad0__li { display: flex; align-items: flex-start; gap: 8px; }
.ad0__li__i {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(216, 188, 133, .14); color: var(--gold-300);
}
.ad0__li__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad0__li__t b { font-size: var(--fs-xs); color: #fff; font-weight: 600; }
.ad0__li__t i { font-style: normal; font-size: var(--fs-2xs); color: rgba(255, 255, 255, .55); line-height: 1.5; }
.ad0__price {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid rgba(255, 255, 255, .12);
}
.ad0__price__k { font-size: var(--fs-2xs); color: rgba(255, 255, 255, .45); }
.ad0__price__v { font-size: var(--fs-sm); color: rgba(255, 255, 255, .48); text-decoration: line-through; font-family: var(--font-mono); }
.ad0__price__arrow { color: rgba(255, 255, 255, .3); display: inline-flex; }
.ad0__price__free { font-size: var(--fs-sm); font-weight: 600; color: var(--gold-300); }

/* ===== 1. 主视觉：宣传核心位 ===== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 46%,var(--brand-600) 100%);padding:var(--sp-8) var(--sp-9) var(--sp-5);color:#fff;box-shadow:var(--sh-lg);display:flex;flex-direction:column;justify-content:center;min-height:362px}
.hero::before{content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;background:rgba(216,188,133,.10)}
.hero::after{content:"";position:absolute;right:150px;bottom:-140px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.05)}
/* ★ 两列一律等高（老板 2026-10-09）：左列用 flex 撑满、末尾区块 margin-top:auto，
   这样 01 的「录配方/查风险/出报告」条、02 的出处说明、03 的覆盖品类
   都贴着右框底部落齐，三屏不各留各的空白。 */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--sp-9);position:relative;z-index:1;align-items:stretch}
.hero__col{display:flex;flex-direction:column;min-width:0}
.hero__kicker{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px var(--sp-3);border-radius:var(--r-full);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size: var(--fs-2xs);color:rgba(255,255,255,.9)}
/* ★ 三屏的主标题统一放大一档（老板 2026-10-09：「这两行字要放大」）：
   01 的 hero__t 与 02/03 的 sld__t 同一视觉量级，不再一屏大一号一屏小一号。 */
.hero__t{font-size: var(--fs-3xl);font-weight:600;line-height:1.34;margin:var(--sp-4) 0 var(--sp-3);letter-spacing:-.8px}
.hero__t em{font-style:normal;color:var(--gold-300)}
.hero__d{font-size: var(--fs-sm);color:rgba(255,255,255,.76);line-height:1.85;max-width:560px}
.hero__cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero__cta .btn--pri{background:#fff;border-color:#fff;color:var(--brand-700);font-weight:600}
.hero__cta .btn--pri:hover{background:rgba(255,255,255,.9)}
.hero__trust{display:flex;gap:var(--sp-5);margin-top:var(--sp-5);flex-wrap:wrap;font-size: var(--fs-2xs);color:rgba(255,255,255,.62)}
.hero__trust span{display:inline-flex;align-items:center;gap:5px}
.hero__trust svg{color:var(--gold-300);flex:none}
/* 第1 页：三步流程条 —— 贴着左列底部（与右框底齐） */
.flow{display:flex;gap:var(--sp-4);margin-top:auto;padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.12)}
.flow__i{display:flex;align-items:flex-start;gap:7px;flex:1;min-width:0}
.flow__n{width:19px;height:19px;border-radius:50%;background:rgba(216,188,133,.2);border:1px solid rgba(216,188,133,.5);
         color:var(--gold-300);font-size: var(--fs-2xs);font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.flow__tx{font-size: var(--fs-2xs);color:rgba(255,255,255,.55);line-height:1.6}
.flow__tx b{display:block;color:#fff;font-size: var(--fs-xs);font-weight:600;margin-bottom:1px}
.score__ft{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.1);
           font-size: var(--fs-2xs);color:rgba(255,255,255,.4)}

/* ===== 02 屏的官方来源清单（替代原「机构气泡」）=====
   老板 2026-10-09：气泡样式差劲，换成能看清「谁给的/多少/拿什么引用」的台账式三列。 */
.srcs7{display:flex;flex-direction:column;flex:1;background:rgba(255,255,255,.07);
        border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5) var(--sp-2);min-height:0}
.srcs7__hd,.srcs7__row{display:grid;grid-template-columns:minmax(0,1.55fr) 76px minmax(0,1fr);gap:var(--sp-4);align-items:center}
.srcs7__hd{padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12);
           font-size: var(--fs-2xs);color:rgba(255,255,255,.38);letter-spacing:1px}
.srcs7__row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.srcs7__row:last-child{border-bottom:none}
.srcs7__nm{display:flex;align-items:center;gap:9px;min-width:0}
.srcs7__b{width:26px;height:26px;border-radius:var(--r-sm);flex:none;display:flex;align-items:center;justify-content:center;
          font-size: var(--fs-2xs);font-weight:700;color:var(--brand-900);letter-spacing:-.2px}
.srcs7__b--cn{background:linear-gradient(135deg,#D8BC85,#B0812F)}
.srcs7__b--eu{background:linear-gradient(135deg,#9CC8FF,#5B8FD6)}
.srcs7__b--us{background:linear-gradient(135deg,#FFB3A0,#E0705C)}
.srcs7__b--jp{background:linear-gradient(135deg,#FFAFC4,#E5698C)}
.srcs7__b--kr{background:linear-gradient(135deg,#B8D4FF,#6E96D9)}
.srcs7__b--tw{background:linear-gradient(135deg,#A8E0C0,#4EA97C)}
.srcs7__b--asean{background:linear-gradient(135deg,#FFC98F,#DD8B3C)}
.srcs7__t{font-size: var(--fs-xs);color:#fff;font-weight:500;min-width:0;line-height:1.4}
.srcs7__n{font-size: var(--fs-md);font-weight:600;color:var(--gold-300);font-variant-numeric:tabular-nums;
          text-align:right;white-space:nowrap;letter-spacing:-.3px}
.srcs7__n small{font-size: var(--fs-2xs);font-weight:400;color:rgba(255,255,255,.55);margin-left:2px}
.srcs7__ref{font-size: var(--fs-2xs);color:rgba(255,255,255,.46);line-height:1.5;text-wrap:pretty}
/* 02/03 右栏底部的出处脚注 */
.orbs__ft{display:flex;align-items:flex-start;gap:6px;margin-top:var(--sp-4);padding-top:var(--sp-4);
          border-top:1px solid rgba(255,255,255,.1);font-size: var(--fs-2xs);color:rgba(255,255,255,.4);line-height:1.6}
.orbs__ft svg{flex:none;margin-top:2px;color:var(--gold-300)}

/* 成绩单：数字全带出处 */
.score{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column}
.score__t{font-size: var(--fs-2xs);color:rgba(255,255,255,.62);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:6px;padding-bottom:var(--sp-3);border-bottom:1px solid rgba(255,255,255,.1)}
.score__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:9px 0}
.score__k{font-size: var(--fs-xs);color:rgba(255,255,255,.85);line-height:1.4}
.score__k em{font-style:normal;display:block;font-size: var(--fs-2xs);color:rgba(255,255,255,.42);margin-top:1px}
.score__v{font-size: var(--fs-lg);font-weight:600;color:var(--gold-300);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.3px}
.score__v small{font-size: var(--fs-2xs);font-weight:400;color:rgba(255,255,255,.6);margin-left:2px}
/* 数据同步说明沉到成绩单底部（01 右侧圆角框的高度基准） */
.score .score__ft{margin-top:auto}


/* ===== 1b. 主视觉三页轮播 ===== */
/* 三页同格叠加：容器高度自动取最高一页，任何一页都撑不高 */
.slides{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr)}
.slides>.slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(6px);z-index:0;
       transition:opacity .34s ease,transform .34s ease,visibility .34s}
.slides>.slide.is-on{opacity:1;visibility:visible;transform:none;z-index:1}
/* 内层只做垂直对齐，不改 slide 自身 display，避免破坏 grid 叠层 */
/* 三屏内容一律垂直居中：轮播容器高度由最高的第 1 屏决定，
   若第 2/3 屏顶对齐，矮屏底部会空出一大块（老板 2026-10-08 指出） */
.slides>.slide>.slide__in{width:100%;display:flex;flex-direction:column;justify-content:center;height:100%}
.slides>.slide>.slide__in>*{width:100%}
/* ★ 主标题：02/03 与 01 同一量级（老板 2026-10-09 要求 02/03 那两行字同步放大） */
.sld__t{font-size: var(--fs-3xl);font-weight:600;color:#fff;letter-spacing:-.7px;margin-bottom:var(--sp-3);line-height:1.34}
.sld__t em{font-style:normal;color:var(--gold-300)}
.sld__d{font-size: var(--fs-xs);color:rgba(255,255,255,.7);line-height:1.75}
.sld__2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:var(--sp-8);align-items:stretch}
.sld__3{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--sp-8);align-items:stretch}
/* 两列一律撑满：左列 justify-content:center，右列 flex 撑到底，
   保证三屏都是「标题起、末尾区块贴着右框底部」。 */
.slides>.slide>.slide__in>.sld__2,
.slides>.slide>.slide__in>.sld__3{flex:1}
.sld__2>div,.sld__3>div{min-width:0}
.sld__l{display:flex;flex-direction:column;justify-content:center;min-width:0}
.sld__r{display:flex;flex-direction:column;min-width:0}
/* 02：出处说明沉到左列底部 */
.sld__2 .prov{margin-top:auto;margin-bottom:0}
/* 03：覆盖品类沉到左列底部，按钮组居中后留白分给两端 */
.sld__3 .cover{margin-top:auto}
/* 03：左栏补充的三条做法（框变矮内容要补） */
.klist{display:flex;flex-direction:column;gap:7px;margin-top:var(--sp-5);
       padding:var(--sp-4) var(--sp-5);background:rgba(255,255,255,.06);
       border:1px solid rgba(255,255,255,.13);border-radius:var(--r-md)}
.klist__i{display:flex;align-items:flex-start;gap:7px;font-size: var(--fs-2xs);color:rgba(255,255,255,.72);line-height:1.6}
.klist__i svg{flex:none;margin-top:2px;color:var(--gold-300)}
/* 03：右栏改成「上二下二」两块 —— 两块 + 中间间距 = 01 成绩单高度，三屏等高 */
.sld__3 .smini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);flex:1;min-height:0}
.smini__i{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:11px var(--sp-4);display:flex;flex-direction:column;justify-content:center}
.smini__n{font-size: var(--fs-xs);color:#fff;font-weight:600;display:flex;align-items:center;gap:5px;margin-bottom:3px}
.smini__n svg{color:var(--gold-300);flex:none}
.smini__v{font-size: var(--fs-2xs);color:rgba(255,255,255,.55);line-height:1.65}
.smini__v b{color:var(--gold-300);font-weight:600;font-variant-numeric:tabular-nums}
.smini__y{font-size: var(--fs-2xs);color:rgba(255,255,255,.5);line-height:1.55;margin-top:6px;display:flex;align-items:flex-start;gap:4px}
.smini__y svg{flex:none;margin-top:2px;color:var(--brand-400)}
.smini__x{font-size: var(--fs-2xs);color:rgba(255,255,255,.42);line-height:1.55;margin-top:auto;padding-top:5px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:flex-start;gap:4px}
.smini__x svg{flex:none;margin-top:2px;color:var(--brand-400)}
/* 第3 页：覆盖产品类型 */
.cover{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:var(--sp-4);
       border-top:1px solid rgba(255,255,255,.12)}
.cover__t{font-size: var(--fs-2xs);color:rgba(255,255,255,.42);margin-right:2px}
.cover__i{font-size: var(--fs-2xs);color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);
          border:1px solid rgba(255,255,255,.14);border-radius:var(--r-full);padding:3px 10px}
/* 第2 页汇总条 */
.tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5);
     padding:var(--sp-4) 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.tot__i{display:flex;flex-direction:column;gap:2px}
.tot__v{font-size: var(--fs-lg);font-weight:600;color:var(--gold-300);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.tot__v small{font-size: var(--fs-2xs);font-weight:400;color:rgba(255,255,255,.6);margin-left:2px}
.tot__k{font-size: var(--fs-2xs);color:rgba(255,255,255,.55);line-height:1.5}
/* 第2 页：出处样式说明（横向三列，压高度） */
.prov{padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.1);
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.prov__t{display:none}
.prov__l{display:flex;flex-direction:column;gap:1px;font-size: var(--fs-2xs)}
.prov__k{color:#fff;font-weight:600;font-size: var(--fs-2xs)}
.prov__v{color:rgba(255,255,255,.5);line-height:1.5;position:relative;padding-left:9px}
.prov__v::before{content:"";position:absolute;left:0;top:5px;width:4px;height:4px;border-radius:50%;
                background:var(--gold-300)}
.hero__nav{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-3);
           border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:1}
.hero__idx{font-family:var(--font-mono);letter-spacing:2px;color:rgba(255,255,255,.5);
           display:inline-flex;align-items:baseline;gap:6px}
.hero__idx b{font-size: var(--fs-3xl);font-weight:600;color:var(--gold-300);line-height:.85;letter-spacing:0}
.hero__idx i{font-style:normal;font-size: var(--fs-lg);color:rgba(255,255,255,.45);font-weight:500}
.hero__dots{display:flex;gap:6px;flex:1}
.hdot{width:22px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);border:none;padding:0;cursor:pointer;transition:.2s}
.hdot:hover{background:rgba(255,255,255,.45)}
.hdot.is-on{background:var(--gold-300);width:34px}
.harrow{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
        color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.16s;padding:0;flex:none}
.harrow:hover{background:rgba(255,255,255,.22);border-color:rgba(216,188,133,.6)}

/* ===== 2.5 数据广度证据区 ===== */
.breadth{border:var(--border-soft);border-radius:var(--r-xl);background:var(--white);overflow:hidden;box-shadow:var(--sh-sm)}
.breadth__hd{padding:var(--sp-6) var(--sp-7) var(--sp-5);border-bottom:var(--border-soft)}
.breadth__t{font-size: var(--fs-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.3px;display:flex;align-items:center;gap:var(--sp-2)}
.breadth__t svg{color:var(--brand-500)}
.breadth__d{font-size: var(--fs-xs);color:var(--ink-500);margin-top:6px;line-height:1.75}
.srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.src{padding:var(--sp-5) var(--sp-7);border-bottom:var(--border-soft);border-right:var(--border-soft);display:flex;gap:var(--sp-4);align-items:flex-start}
.src:nth-child(2n){border-right:none}
.src__ico{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.src__ico--cn{background:var(--brand-50);color:var(--brand-600)}
.src__ico--intl{background:var(--gold-100);color:var(--gold-600)}
.src__ico--law{background:var(--info-100);color:var(--info-700)}
.src__ico--std{background:var(--ok-100);color:var(--ok-700)}
.src__m{flex:1;min-width:0}
.src__nm{font-size: var(--fs-sm);font-weight:600;color:var(--ink-900);margin-bottom:3px}
.src__by{font-size: var(--fs-2xs);color:var(--ink-400);margin-bottom:var(--sp-3);font-family:var(--font-mono)}
.src__li{display:flex;align-items:flex-start;gap:6px;font-size: var(--fs-2xs);color:var(--ink-600);padding:3px 0;line-height:1.6}
.src__li svg{flex:none;margin-top:3px;color:var(--brand-400)}
.src__li b{color:var(--ink-900);font-weight:600;font-variant-numeric:tabular-nums}
.breadth__ft{padding:var(--sp-4) var(--sp-7);background:var(--ink-50);display:flex;align-items:center;gap:var(--sp-3);font-size: var(--fs-2xs);color:var(--ink-500);flex-wrap:wrap}
.breadth__ft svg{color:var(--brand-400);flex:none}
.breadth__ft b{color:var(--ink-700);font-weight:600}

/* ===== 4. 会员方案 ===== */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:stretch}
.plan{display:flex;flex-direction:column;border:var(--border-soft);border-radius:var(--r-lg);background:var(--white);overflow:hidden;box-shadow:var(--sh-xs);transition:.16s}
.plan:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.plan.is-featured{border:1.5px solid var(--gold-500);box-shadow:var(--sh-md)}
.plan__flag{position:absolute;top:0;right:0;padding:4px var(--sp-4);background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:#fff;font-size: var(--fs-2xs);font-weight:600;letter-spacing:.5px;border-bottom-left-radius:var(--r-md)}
.plan__wrap{position:relative}
.plan__hd{padding:var(--sp-5);border-bottom:var(--border-soft)}
.plan__nm{font-size: var(--fs-base);font-weight:600;color:var(--ink-900)}
.plan__for{font-size: var(--fs-2xs);color:var(--ink-500);margin-top:3px}
.plan__price{display:flex;align-items:baseline;gap:2px;margin-top:var(--sp-4)}
.plan__cur{font-size: var(--fs-sm);color:var(--ink-600)}
.plan__num{font-size: var(--fs-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-1px;line-height:1}
.plan.is-featured .plan__num{color:var(--gold-600)}
.plan__unit{font-size: var(--fs-2xs);color:var(--ink-400)}
.plan__dev{margin-top:var(--sp-3);font-size: var(--fs-2xs);color:var(--ink-500);display:flex;align-items:center;gap:5px}
.plan__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:9px;flex:1}
.plan__li{display:flex;align-items:flex-start;gap:7px;font-size: var(--fs-xs);color:var(--ink-600);line-height:1.6}
.plan__li svg{flex:none;margin-top:3px;color:var(--brand-500)}
.plan__li--no{color:var(--ink-400)}
.plan__li--no svg{color:var(--ink-300)}
.plan__ft{margin-top:auto;padding:0 var(--sp-5) var(--sp-5)}
.plan__btn{width:100%;height:36px;border-radius:var(--r-md);font-size: var(--fs-xs);font-weight:600;border:var(--border);background:var(--white);color:var(--ink-700)}
.plan__btn:hover{border-color:var(--ink-300)}
.plan.is-featured .plan__btn{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));border-color:var(--gold-500);color:#fff;box-shadow:0 1px 4px rgba(110,77,24,.26)}
.pricing-note{font-size: var(--fs-2xs);color:var(--ink-500);text-align:center;margin-top:var(--sp-4);line-height:1.7}
.pricing-note b{color:var(--ink-700);font-weight:600}

/* ===== 5. 功能全景 ===== */
.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.cap{border:var(--border-soft);border-radius:var(--r-lg);background:var(--white);overflow:hidden;box-shadow:var(--sh-xs);transition:.14s}
.cap:hover{border-color:var(--brand-400);box-shadow:var(--sh-sm)}
.cap__hd{display:flex;align-items:center;gap:7px;padding:var(--sp-4);border-bottom:var(--border-soft);color:var(--brand-700)}
.cap__hd b{font-size: var(--fs-xs);font-weight:600}
.cap__hd em{margin-left:auto;font-style:normal;font-size: var(--fs-2xs);color:var(--ink-400)}
.cap__li{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-4);font-size: var(--fs-xs);color:var(--ink-700);border-bottom:var(--border-soft);cursor:pointer}
.cap__li:last-child{border-bottom:none}
.cap__li:hover{background:var(--ink-75);color:var(--brand-700)}
.cap__li svg{flex:none;color:var(--ink-300)}
.cap__li:hover svg{color:var(--brand-500)}

/* ===== 6. FAQ ===== */
.faq{display:flex;flex-direction:column}
.faq__i{border-bottom:var(--border-soft)}
.faq__i:last-child{border-bottom:none}
.faq__q{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;font-size: var(--fs-sm);font-weight:500;color:var(--ink-900);cursor:pointer}
.faq__q:hover{color:var(--brand-600)}
.faq__q span{flex:1}
.faq__q svg{flex:none;color:var(--ink-300);transition:transform .18s}
.faq__i.is-open .faq__q svg{transform:rotate(180deg)}
.faq__i.is-open .faq__q{color:var(--brand-700)}
.faq__a{display:none;padding:0 0 var(--sp-4) 0;font-size: var(--fs-xs);color:var(--ink-600);line-height:1.85}
.faq__i.is-open .faq__a{display:block}
.faq__a b{color:var(--ink-800);font-weight:600}

/* ===== 7. 最终转化条 ===== */
.final{position:relative;overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--brand-800) 0%,var(--brand-600) 100%);padding:var(--sp-8);color:#fff;text-align:center;box-shadow:var(--sh-lg)}
.final::before{content:"";position:absolute;left:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05)}
.final::after{content:"";position:absolute;right:-40px;bottom:-90px;width:200px;height:200px;border-radius:50%;background:rgba(216,188,133,.1)}
.final__t{font-size: var(--fs-xl);font-weight:600;margin-bottom:var(--sp-3);position:relative;z-index:1}
.final__d{font-size: var(--fs-sm);color:rgba(255,255,255,.76);line-height:1.85;margin-bottom:var(--sp-6);position:relative;z-index:1;max-width:620px;margin-left:auto;margin-right:auto}
.final__cta{display:flex;gap:var(--sp-3);justify-content:center;position:relative;z-index:1}
.final__cta .btn--pri{background:#fff;border-color:#fff;color:var(--brand-700);font-weight:600}
.final__foot{margin-top:var(--sp-5);font-size: var(--fs-2xs);color:rgba(255,255,255,.55);position:relative;z-index:1}
.mono{font-family:var(--font-mono)}


/* ---------- 首页页脚：协议入口 + 主体 + 备案号（2026-10-09 上线前加） ----------
   备案号必须在首页可⻅且可点（ICP 备案的硬要求）；协议入口同理 ——
   只在注册弹窗里给链接，访客根本看不到。 */
.final__legal {
  position: relative; z-index: 1;
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px var(--sp-2);
  font-size: var(--fs-2xs); color: rgba(255, 255, 255, .55);
}
.final__sep { color: rgba(255, 255, 255, .25); }
/* 用 <button> 而不是 <a>：走的是站内路由（data-route），不是外链跳转 */
.final__lg {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-2xs); color: rgba(255, 255, 255, .78);
  text-decoration: underline; text-underline-offset: 3px;
}
.final__lg:hover { color: #fff; }