/* ─────────────────────────────────────────────────────────────
   LanZ · 产业政策 Agent 产品页(/products/policy/)专属样式

   来源:外部设计交付(Lanzdata产业政策agent.zip)。
   与溯源页 / 招商页共用同一套色板与字体,但**动效语汇不重合** ——
   这一页的主题是「叠加与计数」。只被这一个页面引用。

   集成时做了六处改造, 都是本站硬约束逼出来的, 别改回去:

   1. **所有选择器收进 .policyx 作用域。** 设计稿用的是 .hero / .wrap /
      .btn / .cell 这些通用类名, 而 style.css 全站加载、同名类全都有。
      不隔离的话两边互相覆盖, 顶栏会散架, 页面也拿不到设计稿的样子。
      (:root 留在全局 —— 本文件只在这一页加载, 漏不出去。)

   2. **.hero → .pl-hero、.cell → .hcell。** 前者 style.css 里是首页首屏,
      后者是首页卡片(display:flex + padding), 作用域挡不住 —— 同名类会连
      display/padding 一起带过来。热力格子是空元素, 带上 padding 后
      aspect-ratio 算出来的格子大小会跟着变。

   3. **动画名加了 pl- 前缀。** 设计稿的 @keyframes breathe / sweep /
      rise 与 style.css 里的同名, 后加载的那份会整体覆盖前一份。
      ⚠ 溯源页是 cx-、招商页是 iv-, 三页各一套, 不要合并 ——
      合并就等于三页共用一份动效, 改一边会静默动到另外两边。

   4. **字体换成站里的系统字体栈。** 原稿引 Google Fonts, 本站 CSP 是
      default-src 'none' 起步, 外链字体会被浏览器直接拦掉, 而且不报错
      —— 只会静默回退。
      ⚠ 代价:原稿的 font-weight:900 在系统中文字体里没有对应字重,
      会回退到 700, 标题比设计稿略轻。

   5. **设计稿自带的胶囊顶栏与页脚样式整段删掉。** 那两块用站里统一的
      (build.sh 逐页比对, 不一致直接失败)。

   6. **[data-rise] 的隐藏态挂在 html.pl-rise 上, .srow 的整段删掉。**
      原稿直接写 [data-rise]{opacity:0}, JS 一挂各段标题就永远不显示;
      .srow{opacity:0} 更麻烦 —— reduce 模式下不加 .in, 六条政策会全部
      留在隐身状态。本站的规矩是「内容默认可见, JS 只负责隐藏」
      —— 见 style.css 的 .reveal。

   设计系统说明见交付附带的 README;色值是设计稿给的 hex,
   ⚠ 没有转成 OKLCH —— 与 tokens.css 的口径不一致, 是笔已知的账。
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#12112B;  /* 主文字 */
  --ink-2:#3A3752;  /* 正文 */
  --ink-3:#6B6884;  /* 弱文字 / 等宽标签 */
  --bg:#EEF0F7;
  --dark:#0B0A1E;
  --dark-2:#08071A;
  --purple:#7B4DEB;  /* 品牌紫 */
  --purple-d:#6D3FE0;  /* 浅底上的紫（文字可用） */
  --purple-l:#8B62F0;
  --purple-lt:#A98CFF;  /* 深底上的紫（文字可用） */
  --purple-pale:#B79EFF;
  --on-dark:#EDEBF7;
  --on-dark-2:#B4B1C9;
  --on-dark-3:#9E9BB8;
  --on-dark-4:#8A87A6;
  --warn:#E8734A;
  --warn-d:#B85423;  /* 浅底上的橙字（满足对比度） */
  --grid:rgba(160,150,255,.055);
  /* 只用于 h1 里「Agent」的渐变收尾, 本页没有别的用途 ——
     在供需页它是有语义的(青 = 供给侧), 这里纯装饰。 */
  --cyan:#3FD2E8;
  --maxw:1280px;
  --pad:40px;
}
body{ background:var(--bg); color:var(--ink) }
.policyx, .policyx *{ box-sizing:border-box }
.policyx a{ color:var(--purple-d); text-decoration:none }
.policyx a:hover{ color:var(--purple-l) }
.policyx .mono{ font-family:var(--font-mono) }
.policyx .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) }
.policyx .grid-tex{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ---------- 动效基座 ---------- */
@keyframes pl-slidein{ from{ opacity:0; transform:translateX(-26px) } to{ opacity:1; transform:none } }
@keyframes pl-ripple{ 0%,72%,100%{ transform:scale(1) } 18%{ transform:scale(1.13) } }
@keyframes pl-breathe{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }
@keyframes pl-sweep{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } }
@keyframes pl-rise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
@keyframes pl-crawl{ to{ transform:translateX(var(--span)) } }
@keyframes pl-glow{
  0%,100%{ box-shadow:0 0 24px rgba(139,98,240,.42),inset 0 1px 0 rgba(255,255,255,.28) }
  50%{ box-shadow:0 0 48px rgba(139,98,240,.78),inset 0 1px 0 rgba(255,255,255,.28) }
}
/* 隐藏态挂在 html.pl-rise 上:只有 JS 确认 IntersectionObserver 可用
   才加这个类。JS 挂了 = 内容照常显示, 不会白屏。 */
html.pl-rise .policyx [data-rise]{ opacity:0 }
.policyx [data-rise="in"]{ animation:pl-rise .9s cubic-bezier(.16,.84,.34,1) both }
/* 首屏六条政策不挂隐藏态:行本身就是 policy.js 生成的, 没跑到这一步
   就一行都没有。animation 的 both 自带 from{opacity:0}, 够了 ——
   原稿那条 .srow{opacity:0} 在 reduce 模式下会把六条全部留在隐身状态。 */
.policyx .srow.in{ animation:pl-slidein .8s cubic-bezier(.16,.84,.34,1) both }
.policyx .flowrule{
  position:relative;
  height:2px;
  border-radius:2px;
  overflow:hidden;
  background:rgba(18,17,43,.1);
}
.policyx .flowrule i{
  position:absolute;
  top:0;
  bottom:0;
  width:28%;
  animation:pl-sweep 3.6s linear infinite;
  background:linear-gradient(90deg,rgba(109,63,224,0),var(--purple-d),rgba(109,63,224,0));
}
.policyx .flowrule.dk{ background:rgba(180,170,255,.14) }
.policyx .flowrule.dk i{ background:linear-gradient(90deg,rgba(169,140,255,0),var(--purple-lt),rgba(169,140,255,0)) }
.policyx .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--purple-l);
  animation:pl-breathe 2.4s ease-in-out infinite;
}

/* ---------- 压边卡:明暗切换靠组件压边, 不靠渐变 ----------
   每段的主视觉装进一张卡, 向下压过 152px 到下一段里, 让色块边界被
   卡片切断。改版式时**必须配套三件事**, 少一件就出问题:
     ① 承载压边卡的段落要 overflow:visible —— 写成 hidden 卡片直接被裁掉
        (水平溢出由 style.css 的 body{overflow-x:clip} 兜住);
     ② 下一段的 padding-top 要留出空间(现在 196px, CTA 是 206px);
     ③ 装饰光晕要缩到段内 —— 段落不再裁剪后, 光晕会溢出去串到隔壁段。
   窄屏(≤1080px)下 .down 的负边距归零, 压边自动取消。 */
.policyx .hang{ border-radius:16px; position:relative; z-index:3 }
.policyx .hang.dk{
  background:#131130;
  border:1px solid rgba(180,170,255,.18);
  box-shadow:0 46px 100px rgba(4,3,14,.62);
}
.policyx .hang.lt{ background:#fff; box-shadow:0 46px 100px rgba(11,10,30,.24) }
.policyx .down{ position:relative; z-index:3; margin-bottom:-152px }

/* ---------- 按钮 ---------- */
.policyx .btn{
  display:inline-block;
  white-space:nowrap;
  padding:19px 46px;
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  font-size:17px;
  font-weight:700;
  box-shadow:0 14px 44px rgba(123,77,235,.5);
}
.policyx .btn:hover{ background:var(--purple-l); color:#fff }

/* ---------- 通用排版 ---------- */
.policyx .eyebrow{ font-size:12px; letter-spacing:.24em }
.policyx .sect-h2{
  margin:0;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.025em;
}
.policyx .sect-p{
  margin:24px 0 0;
  font-size:17.5px;
  line-height:1.9;
  color:var(--ink-2);
  max-width:27em;
}
.policyx .stats{ display:flex; flex-wrap:wrap; gap:16px 52px }
.policyx .stats .k{ display:block; font-size:12.5px; color:var(--ink-3) }
.policyx .stats .v{
  display:block;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.03em;
  margin-top:3px;
  color:var(--ink);
}
.policyx .stats .v.hi{ color:var(--purple-d) }

/* ---------- 首屏：四级叠加 ---------- */
/* ⚠ 原稿是 margin-top:-88px —— 那是为了钻到它自带的 sticky 胶囊导航
   下面。本站顶栏是 position:fixed, 不占文档流, 首屏本来就从页面顶端
   开始, 再拉 -88px 会把大标题整个顶出屏幕。改成 0, 上边距交给 padding。

   ⚠ 首屏**不用压边卡**(其余三段还是), 也**不做底边雾化**。原稿这里是一张
   .hang.dk.down 深卡压进下一段去切断色块边界; 现在右侧是一组悬浮的发光条,
   没有卡可压, 深色直接硬切到下一段的浅紫 —— 这是要的效果, 别再加回
   ::after 渐变。配套的一件事: .stairs 的 padding-top 不再需要给压边卡
   让位, 已从 196px 收到 104px。 */
.policyx .pl-hero{
  position:relative;
  padding:186px 0 178px;
  /* 首屏占满一屏。min-height 不是 height —— 窄屏上内容会比 100vh 高,
     写死 height 会让它溢出到下一屏并被 overflow:hidden 切掉。 */
  min-height:100vh;
  display:flex;
  align-items:center;
  background:linear-gradient(152deg,#0B0A1E 0%,#171041 52%,#251A55 100%);
  color:var(--on-dark);
  overflow:hidden;
}
.policyx .pl-hero > .wrap{ width:100% }
.policyx .pl-hero .glow{
  position:absolute;
  top:-170px;
  left:2%;
  width:860px;
  height:640px;
  filter:blur(10px);
  background:radial-gradient(ellipse at center,rgba(123,77,235,.36),rgba(11,10,30,0) 68%);
}
.policyx .pl-hero .glow2{
  position:absolute;
  bottom:-30px;
  right:-150px;
  width:540px;
  height:540px;
  background:radial-gradient(circle at center,rgba(64,196,255,.1),rgba(11,10,30,0) 70%);
}
.policyx .hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:66px;
  align-items:center;
}
.policyx .pl-hero h1{
  margin:0;
  font-size:clamp(40px,4.2vw,62px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
}
/* 「Agent」那一段的渐变字。⚠ 与另外四个 Agent 页逐字相同, 改一处要五处
   一起改 —— 五页的标题摆在一起看, 渐变角度或色标差一点就很显眼。
   ⚠ color:transparent 收在 @supports 里:万一 background-clip:text 不生效,
   落回实色标题, 而不是一个看不见的大标题。 */
.policyx .pl-hero h1 em{ font-style:normal }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .policyx .pl-hero h1 em{
    background:linear-gradient(96deg,#fff 18%,var(--purple-lt) 62%,var(--cyan) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.policyx .pl-hero p{
  margin:30px 0 0;
  font-size:18.5px;
  line-height:1.85;
  color:var(--on-dark-2);
  max-width:26em;
}
.policyx .pl-hero .btn{ margin-top:44px }

.policyx .stackhead{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(180,170,255,.18);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--on-dark-4);
}
/* 条组背后自己带一团光晕 —— 卡片的暗底没了, 条形需要一层衬底才不会
   像散落在渐变上的碎片。挂在 ::before 上, 内容统一提到 z-index:1。 */
.policyx .stackwrap{ position:relative; min-width:0 }
.policyx .stackwrap::before{
  content:"";
  position:absolute;
  left:-10%;
  top:-14%;
  width:120%;
  height:128%;
  pointer-events:none;
  background:radial-gradient(ellipse at 44% 50%,rgba(123,77,235,.34),rgba(11,10,30,0) 68%);
  animation:pl-breathe 7s ease-in-out infinite;
}
.policyx .stackhead,
.policyx .stack,
.policyx .total{ position:relative; z-index:1 }

/* 标题行已去掉 —— 留白跟着归零。加回 .stackhead 时改回 22px */
.policyx .stack{ display:flex; flex-direction:column; gap:10px; margin-top:0 }
.policyx .srow{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:center }
.policyx .srow .tier{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--purple-pale);
  text-align:right;
}
/* ⚠ 条宽 = 金额占比, 由 policy.js 写进 --w(见那边的 BAR_MIN_W)。
   等宽的话「四级叠加」只剩文字在说, 定宽之后金额差一眼就看得出来。
   下限不能再低 —— 最短那条要装得下名称加金额。 */
.policyx .sbar{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:var(--w,100%);
  height:46px;
  border-radius:10px;
  padding:0 16px;
  background:linear-gradient(90deg,rgba(123,77,235,.40),rgba(123,77,235,.10));
  border:1px solid rgba(171,140,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  transition:width .6s cubic-bezier(.16,.84,.34,1);
}
/* 右端收口的一道亮边, 让条形看着是「量到这里为止」而不是被裁断 */
.policyx .sbar::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,rgba(207,196,255,0),#CFC4FF,rgba(207,196,255,0));
}
.policyx .sbar .nm{ font-size:14.5px; color:#EDEBF7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.policyx .sbar .amt{ margin-left:auto; font-family:var(--font-mono); font-size:13.5px; color:#fff; white-space:nowrap }
.policyx .sbar.top{
  background:linear-gradient(90deg,#7B4DEB 0%,#9C6BFF 62%,#B79EFF 100%);
  border-color:#CFC4FF;
  animation:pl-glow 3.6s ease-in-out infinite;
}
.policyx .sbar.top .nm{ font-weight:700; color:#fff }

.policyx .total{
  display:flex;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid rgba(180,170,255,.18);
}
.policyx .total .n{
  font-size:clamp(44px,5.2vw,64px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
  background:linear-gradient(120deg,#fff 12%,#A98CFF 66%,#7B4DEB 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.policyx .total .u{ font-size:15px; color:var(--on-dark-3); padding-bottom:5px }
.policyx .total .side{ margin-left:auto; text-align:right }
.policyx .total .side b{ display:block; font-family:var(--font-mono); font-size:20px; color:#fff; font-weight:500 }
.policyx .total .side s{
  display:block;
  text-decoration:none;
  font-size:12.5px;
  color:var(--on-dark-4);
  margin-top:5px;
}

/* ---------- 阶梯 ---------- */
.policyx .stairs{
  position:relative;
  padding:104px 0 116px;
  overflow:visible;
  background:linear-gradient(180deg,#E6E1F6 0%,#EDEAF8 50%,#E9E4F6 100%);
}
.policyx .stairs::before{
  content:"";
  position:absolute;
  top:20px;
  right:-8%;
  width:720px;
  height:540px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(123,77,235,.16),rgba(233,228,246,0) 68%);
}
.policyx .stairs .wrap{ position:relative }
.policyx .stairs .eyebrow{ color:var(--purple-d) }
.policyx .st-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:60px;
  align-items:center;
  margin-top:52px;
}
.policyx .steps5{ display:flex; align-items:flex-end; gap:12px; height:290px }
.policyx .stp{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:11px 11px 0 0;
  background:#D8D2ED;
  transition:background .55s,transform .55s;
  transform-origin:bottom;
}
.policyx .stp:nth-child(1){ height:38% }
.policyx .stp:nth-child(2){ height:53% }
.policyx .stp:nth-child(3){ height:70% }
.policyx .stp:nth-child(4){ height:86% }
.policyx .stp:nth-child(5){ height:100% }
.policyx .stp .lb{
  position:absolute;
  left:0;
  right:0;
  bottom:-30px;
  text-align:center;
  font-size:13.5px;
  color:var(--ink-3);
  transition:color .45s,font-weight .45s;
}
.policyx .stp .cap{
  padding:14px 10px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:transparent;
  transition:color .45s;
}
.policyx .stp.on{ background:linear-gradient(180deg,var(--purple-lt),var(--purple-d)); animation:pl-ripple 2.2s ease-out }
.policyx .stp.on .lb{ color:var(--purple-d); font-weight:700 }
.policyx .stp.on .cap{ color:#fff }
.policyx .stp.pass{ background:#BEB5E2 }
.policyx .pockets{ min-width:0 }
.policyx .pkt-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.policyx .pkt-head .nm{ font-size:26px; font-weight:900; letter-spacing:-.02em }
.policyx .pkt-head .cf{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--purple-d);
  padding:5px 12px;
  border-radius:999px;
  background:rgba(123,77,235,.12);
}
.policyx .pkt-nums{
  display:flex;
  flex-wrap:wrap;
  gap:16px 48px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid rgba(18,17,43,.12);
}
.policyx .pkt-nums .k{ display:block; font-size:12.5px; color:var(--ink-3) }
.policyx .pkt-nums .v{ display:block; font-size:30px; font-weight:900; letter-spacing:-.03em; margin-top:3px }
.policyx .pkt-nums .v.hi{ color:var(--purple-d) }
.policyx .pkt-list{ margin-top:28px }
.policyx .pkt-cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--ink-3);
  margin-bottom:14px;
}
.policyx .pkt{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(18,17,43,.08);
}
.policyx .pkt .nm{ font-size:15.5px; font-weight:700; color:var(--ink) }
.policyx .pkt .lv{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-top:4px }
.policyx .pkt .am{ font-family:var(--font-mono); font-size:15px; color:var(--purple-d) }

/* ---------- 矩阵 ---------- */
.policyx .mx{
  position:relative;
  color:var(--on-dark);
  padding:196px 0 120px;
  overflow:visible;
  background:linear-gradient(168deg,#1D1244 0%,#0E0B27 58%,#180F35 100%);
}
.policyx .mx .glow{
  position:absolute;
  top:50%;
  left:-8%;
  width:800px;
  height:580px;
  transform:translateY(-50%);
  background:radial-gradient(ellipse at center,rgba(123,77,235,.24),rgba(11,10,30,0) 66%);
  animation:pl-breathe 7s ease-in-out infinite;
}
.policyx .mx .wrap{ position:relative }
.policyx .mx .eyebrow{ color:var(--purple-lt) }
.policyx .mx h2{
  margin:0;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
}
.policyx .mx p{ margin:24px 0 0; font-size:17.5px; line-height:1.9; color:var(--on-dark-2); max-width:34em }
.policyx .mx-grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:60px;
  align-items:center;
  margin-top:56px;
}
/* 热力卡:收窄 + 靠右, 但**不出血** —— 右边线就是版心的右边线,
   与页面上其余内容对齐。早前那版带负边距顶到视口边上, 宽屏下离右边太近。
   max-width + margin-left:auto 把卡收到这个宽度并推到右边,
   剩下的空间让给左边的文案。 */
.policyx .mx-grid > .hang{
  /* ⚠ width:100% 不能省。只写 max-width + margin-left:auto 的话, 网格项
     不再被拉伸, 宽度退回 fit-content —— 而格子是空元素, 六列 1fr 的
     max-content 贡献接近 0, 整张卡会塌成三百来宽。实测过。 */
  width:100%;
  max-width:640px;
  margin-left:auto;
}
.policyx .mx-meta{ display:flex; flex-wrap:wrap; gap:18px 46px }
.policyx .mx-meta .v{ display:block; font-size:28px; font-weight:900; letter-spacing:-.03em; color:#fff }
.policyx .mx-meta .k{ display:block; font-size:12.5px; color:var(--on-dark-3); margin-top:4px }
.policyx .legend{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:34px;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--on-dark-4);
}
.policyx .legend .ramp{ display:flex; gap:3px }
.policyx .legend .ramp i{ width:20px; height:9px; border-radius:2px }
.policyx .heat{ display:grid; grid-template-columns:100px repeat(5,minmax(0,1fr)); gap:6px; min-width:0 }
.policyx .heat .ch{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--on-dark-4);
  text-align:center;
  padding-bottom:5px;
}
.policyx .heat .rh{
  font-size:12.5px;
  color:var(--on-dark-2);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:6px;
  text-align:right;
  line-height:1.4;
}
/* 原稿叫 .cell —— 与 style.css 首页卡片同名, 见文件头第 2 条 */
.policyx .hcell{
  position:relative;
  display:block;
  padding:0;
  aspect-ratio:1.7/1;
  border-radius:6px;
  transition:transform .5s,box-shadow .5s;
}
.policyx .hcell.w{ background:rgba(180,170,255,.07) }
.policyx .hcell.a{ background:rgba(123,77,235,.26) }
.policyx .hcell.b{ background:rgba(123,77,235,.52) }
.policyx .hcell.c{ background:#7B4DEB; box-shadow:0 0 0 1px rgba(207,196,255,.4) }
.policyx .hcell.lit{
  transform:scale(1.11);
  box-shadow:0 0 22px rgba(139,98,240,.5),0 0 0 1px rgba(207,196,255,.6);
}

/* ---------- 窗口时间线 ---------- */
/* ⚠ padding-top 104px 而不是 196px —— 上一段的热力卡已经不压边了,
   不用再给它让位。哪天把 .down 加回矩阵卡, 这里要同步改回 196px。 */
.policyx .win{
  position:relative;
  padding:104px 0 118px;
  overflow:visible;
  background:linear-gradient(180deg,#FAF8FE 0%,#FCFBFE 44%,#F0ECFA 100%);
}
.policyx .win::before{
  content:"";
  position:absolute;
  bottom:-10px;
  left:-6%;
  width:700px;
  height:500px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(123,77,235,.12),rgba(240,236,250,0) 68%);
}
.policyx .win .wrap{ position:relative }
.policyx .win .eyebrow{ color:var(--purple-d) }
.policyx .win-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:end }
/* ⚠ 原稿把这 52px 写在卡**内**的 .tl 上, 于是卡片顶边紧贴 .win-top ——
   卡有 z-index:3(压边卡的前提), 标题和引言的最后一行会被卡片盖住。
   间距必须在卡外, 卡内那份要归零, 否则卡片里会多出一截空白。 */
.policyx .win .hang.lt{ margin-top:52px }
.policyx .tl{ position:relative }
/* ⚠ 月份表头与每一行必须用同一套列模板(标签列宽 + 12 个等分月),
   两处对不齐, 色条就会落在错的月份上 —— 看着像数据错了。
   标签列宽在 policy.js 的「当前线」定位里也有一份(桌面 150 / 窄屏 112),
   改这里要一起改那边, 否则竖线会偏。 */
.policyx .tl-months{
  display:grid;
  grid-template-columns:150px repeat(12,minmax(0,1fr));
  gap:0;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--ink-3);
  padding-bottom:12px;
  border-bottom:1px solid rgba(18,17,43,.14);
}
.policyx .tl-months span{ text-align:center }
.policyx .tl-row{
  display:grid;
  grid-template-columns:150px repeat(12,minmax(0,1fr));
  align-items:center;
  border-bottom:1px solid rgba(18,17,43,.07);
  min-height:56px;
}
.policyx .tl-row .nm{ font-size:15px; font-weight:700; color:var(--ink); padding-right:14px }
.policyx .tl-row .nm s{
  display:block;
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:400;
  color:var(--ink-3);
  margin-top:4px;
}
.policyx .tl-bar{
  grid-column:var(--gc);
  height:22px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  background:#DDD7F4;
  display:flex;
  align-items:center;
  padding:0 10px;
}
.policyx .tl-bar.now{ background:var(--purple-d) }
.policyx .tl-bar.done{ background:#E4E0EC }
.policyx .tl-bar b{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  color:#3A3752;
}
.policyx .tl-bar.now b{ color:#fff }
.policyx .tl-bar.done b{ color:#8A87A6 }
.policyx .nowline{
  position:absolute;
  top:26px;
  bottom:24px;
  width:2px;
  background:var(--warn);
  pointer-events:none;
  --span:0px;
  animation:pl-crawl 12s linear infinite;
}
.policyx .nowline span{
  position:absolute;
  bottom:-22px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--warn-d);
  padding:0 6px;
}
.policyx .win-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
  margin-top:44px;
}

/* ---------- CTA ---------- */
.policyx .cta-s{
  position:relative;
  color:var(--on-dark);
  padding:206px 0 126px;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(180deg,#130E30 0%,#0A0820 58%,#08071A 100%);
}
.policyx .cta-s .glow{
  position:absolute;
  top:-150px;
  left:50%;
  width:920px;
  height:580px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(123,77,235,.34),rgba(11,10,30,0) 70%);
  animation:pl-breathe 7s ease-in-out infinite;
}
.policyx .cta-s .beam{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  overflow:hidden;
  background:rgba(180,170,255,.1);
}
.policyx .cta-s .beam i{
  position:absolute;
  top:0;
  bottom:0;
  width:22%;
  animation:pl-sweep 4.2s linear infinite;
  background:linear-gradient(90deg,rgba(169,140,255,0),#A98CFF,rgba(169,140,255,0));
}
.policyx .cta-s h2{
  margin:0;
  font-size:clamp(38px,4.4vw,54px);
  line-height:1.16;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
}
.policyx .cta-s p{
  margin:26px auto 0;
  font-size:18px;
  line-height:1.9;
  color:var(--on-dark-2);
  max-width:28em;
}

/* ---------- 响应式 ---------- */
/* 压边在窄屏整体取消:.down 负边距归零, 各段 padding-top 回落。
   两者必须一起改 —— 只归零负边距会留下 196px 的空档。 */
@media (max-width:1080px){
  .policyx .hero-grid,
  .policyx .st-grid,
  .policyx .mx-grid,
  .policyx .win-top,
  .policyx .win-foot{ grid-template-columns:minmax(0,1fr); gap:44px }
  .policyx .down{ margin-bottom:0 }
  .policyx .pl-hero{ padding:150px 0 132px }
  .policyx .sbar{ width:100% }
  .policyx .mx,
  .policyx .win{ padding-top:86px }
  .policyx .cta-s{ padding-top:96px }
  .policyx .steps5{ height:230px }
  .policyx .heat{ grid-template-columns:84px repeat(5,minmax(0,1fr)); gap:5px }
  .policyx .heat .rh{ font-size:11.5px }
  .policyx .tl-months,
  .policyx .tl-row{ grid-template-columns:112px repeat(12,minmax(0,1fr)) }
  .policyx .tl-row .nm{ font-size:13.5px }
  .policyx .nowline{ animation:none }
}
/* ⚠ 手机上一个月只有 10px 宽,色条里那句话装不下,会溢出去压到隔壁月份
   和「当前」竖线上 —— 实测 375px 下「剩 21 天」被切成「剩」。
   同一句话在左侧行名下面已经有一份(<s>剩 21 天</s>),这里直接藏掉,
   色条只承担「哪几个月」这一件事。 */
@media (max-width:700px){
  .policyx .tl-bar{ padding:0 }
  .policyx .tl-bar b{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .policyx .dot,
  .policyx .flowrule i,
  .policyx .nowline,
  .policyx .stp.on,
  .policyx .sbar.top,
  .policyx .stackwrap::before,
  .policyx .mx .glow,
  .policyx .cta-s .glow,
  .policyx .cta-s .beam i{ animation:none }
  .policyx [data-rise="in"]{ animation:none }
  .policyx .srow.in{ animation:none }
  html.pl-rise .policyx [data-rise]{ opacity:1 }
}