/* ============================================================
   拾刻里 · 品牌官网 v3
   黑 / 白 / 红 三色 · 印刷品版式 · 零圆角 · 零阴影
   每个菜单 = 一个独立页面，全部共用这一份样式

   字号阶梯（正文层只留 4 级 + 1 级 UI）
     12  微（等宽编号、标签、页脚小字）
     14  次（说明、图注、旁注）
     15  UI（导航、按钮、上下切换）
     16  正文
     18  导语
     20  条目名 / 小标题
   ============================================================ */

:root{
  /* 三色 */
  --ink:#000000;
  --paper:#FFFFFF;
  --red:#E20B13;
  /* 深底专用红：白纸上的 #E20B13 放黑底只有 4.29:1，不到 4.5 的达标线。
     换成 #FF3B41 后 5.95:1 —— 白底那支保持不动。 */
  --red-lt:#FF3B41;

  /* 灰阶 */
  --sub:#6B6B6B;
  --line:#E0E0E0;
  --soft:#F7F7F7;
  --chip:#C9C9C9;

  /* 黑底上的线 / 文字 */
  --hair:rgba(255,255,255,.16);
  --dim:rgba(255,255,255,.64);

  /* 字体：正文走系统无衬线，编号与标签走等宽（印刷品的关键） */
  --sans:system-ui,-apple-system,"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono","Courier New",monospace;

  --pad:60px;
  --maxw:1280px;
  --navh:72px;
  /* 报头真实高度（由 site.js 量出来写进来），页内锚点导航靠它让位 */
  --hdrm:72px;
  /* 手机端底部 APP 栏高度（桌面端为 0，不占位） */
  --tabh:0px;

  /* 内容左边界到视口左缘的距离（满幅板块靠它对齐容器） */
  --gutter:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.dark{background:var(--ink);color:#fff}
.dark .lede,.dark .sub,.dark .note{color:var(--dim)}
.dark .sec-head{border-bottom-color:#fff}
.dark .kick{color:var(--red-lt)}
.dark a.u{border-bottom-color:var(--red-lt)}
a.u{border-bottom:1px solid currentColor;transition:color .18s ease}
.dark a.u:hover{color:#fff}

/* ---------- 报头（吸顶；底色跟着「它盖住的那块地方」走） ---------- */
/* ⚠️ 不是「一滚就变黑」—— 以白底为主：
   报头压在白底上是白底黑字，横跨黑白交界时仍是白底，只有基本压在整块黑底
   上（深色占 7 成以上）才转黑底白字。判据在 site.js 里，靠采点实测。 */
.hdr{
  position:sticky;top:0;z-index:70;
  /* ⭐ 2026-10-04 他定：白底那一态是「半透明白 + 轻微模糊」，不是一块纯白板。
     黑底那一态保持原来的纯黑（他明确说「后面几屏是对的」，别动它）。
     ⚠️ 只能在桌面端开 backdrop-filter —— 手机端 .hdr .menu 是 position:fixed 的底部 APP 栏，
       祖先一旦有 backdrop-filter 就成了它的包含块，底部栏会被拽进报头里。
       见文件末尾那条 @media 覆写。 */
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:background .24s ease,border-color .24s ease;
}
/* 报头底色只由「压在什么底上」决定，跟滚了多远无关 —— 所以这里没有「一滚就转黑」
   的规则；吸住与否只影响下面那 1px 细线，底色交给 .on-dark。 */
.hdr.on-dark{background:var(--ink);border-bottom-color:var(--hair)}
.hdr .bar{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:var(--navh);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
/* 报头品牌组合：图标 + 字标。
   ⭐ 图标用「方块版」（icon-tile-*），不用裸线版 —— 方块自带底色，
      底色永远跟报头反着来：报头白 → 黑方块，报头黑 → 白方块，
      所以报头怎么变，图标都是一整块看得清的形状。
   ⚠️ 方块图形占满整张画布（100%，四周无留白）→ 绝不能加负边距，加了就把方块切掉。
      （旧的裸线版只占 71%×38%，所以才要负边距；换成方块后必须去掉。） */
.hdr .logo{display:inline-flex;align-items:center;gap:11px}
.hdr .logo .hi{height:28px;width:auto}
.hdr .logo .hl{height:21px;width:auto}
.hdr .logo .dk{display:none}
.hdr.on-dark .logo .lt{display:none}
.hdr.on-dark .logo .dk{display:block}

.hdr .menu{display:flex;align-items:center;gap:30px}
.hdr .menu > li > a,
.hdr .menu .dd-t{
  position:relative;
  display:inline-flex;align-items:baseline;gap:7px;
  font-size:15px;font-weight:600;padding:5px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.hdr .menu i{
  font-style:normal;font-family:var(--mono);font-size:12px;font-weight:400;
  color:var(--red);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.hdr .menu > li > a:hover,
.hdr .menu .dd:hover .dd-t{border-bottom-color:var(--ink)}
/* 当前页高亮（2026-10-29：下拉菜单取消后，「模板」变成普通链接，
   原来只在 .dd .dd-t.on 里写的红下划线，现在要给 .menu > li > a.on 也来一条） */
.hdr .menu > li > a.on{border-bottom-color:var(--red)}
.hdr.on-dark .menu > li > a.on{border-bottom-color:var(--red-lt)}
.hdr .menu > li > a.on,
.hdr .menu .dd .dd-t.on{border-bottom-color:var(--red)}
/* 报头转黑时整条反白 */
.hdr.on-dark .menu > li > a,
.hdr.on-dark .menu .dd-t{color:#fff}
.hdr.on-dark .menu i{color:var(--red-lt)}
.hdr.on-dark .menu > li > a:hover,
.hdr.on-dark .menu .dd:hover .dd-t{border-bottom-color:#fff}
.hdr.on-dark .menu > li > a.on,
.hdr.on-dark .menu .dd .dd-t.on{border-bottom-color:var(--red-lt)}

/* ---------- 模板下拉 ---------- */
.dd{position:relative}
/* 兜底桥：面板离「模板」有 16px 空档，鼠标从词上往下走会掉出去。
   铺一块透明区把这段缝填上，而不是靠 visibility 延时硬撑。
   宽度跟着面板走（比面板左右各宽 26px），菜单加长也不会露缝 */
.dd::after{content:"";position:absolute;top:100%;left:-26px;right:-26px;height:18px}
.dd .caret{width:9px;height:6px;flex:none;align-self:center;margin-left:1px;
  transition:transform .22s ease}
.dd:hover .caret,.dd:focus-within .caret{transform:rotate(180deg)}
.dd-p{
  position:absolute;top:calc(100% + 16px);left:-26px;min-width:236px;
  background:var(--paper);border:1px solid var(--ink);border-top:4px solid var(--red);
  padding:9px 0;z-index:80;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:translateY(0)}
.dd-p a{
  position:relative;display:block;padding:11px 22px 11px 32px;
  font-size:14px;font-weight:600;
  transition:background .16s ease,color .16s ease;
}
.dd-p a::before{
  content:"";position:absolute;left:19px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  background:var(--red);
}
.dd-p a:hover{background:var(--ink);color:#fff}
.dd-p a:hover::before{background:var(--red-lt)}
.dd-p a.on::before{width:11px;margin-left:-3px}

/* ---------- 页头 ---------- */
.head{padding:80px 0 48px;border-bottom:4px solid var(--ink)}
.sec-head{padding:0 0 40px;border-bottom:4px solid var(--ink)}
.kick{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  color:var(--red);text-transform:uppercase;font-variant-numeric:tabular-nums;
}
/* 小标签下面紧跟的大标题，统一给 18px 间距（原来靠内联 style 一处一处写） */
.kick + .h2{margin-top:18px}
.h1{
  font-size:clamp(32px,5.2vw,78px);font-weight:800;
  line-height:1.08;letter-spacing:-.025em;margin-top:20px;
}
.h2{
  font-size:clamp(23px,2.8vw,38px);font-weight:800;
  line-height:1.18;letter-spacing:-.02em;
}
.h3{font-size:20px;font-weight:700;line-height:1.42;letter-spacing:-.015em}
.lede{margin-top:22px;font-size:18px;line-height:1.75;color:var(--sub);max-width:660px}
.lede.flush{margin-top:0;margin-bottom:8px}
.note{margin-top:20px;font-size:14px;line-height:1.75;color:var(--sub);max-width:660px}

/* ---------- 区块 ---------- */
.sec{padding:72px 0}
.sec.tight{padding:48px 0}

/* ---------- 点线符号 ---------- */
.glyph{color:currentColor;display:block}
.glyph svg{display:block;width:100%;height:100%}
/* 图形里那颗红点：用 class 而不是写死色值，换底色时才跟得上 */
.glyph .dot{fill:var(--red)}

/* ---------- 首屏（首页） ---------- */
/* 一条横线穿过左右两半，两边的小标签都从它下面同一高度起排 —— 这是「对撞」的基准线 */
/* 顶部这三处留白全部挂在 --navh 上：报头一改高，首屏内容自动跟着挪 */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100vh - var(--navh))}
.hero::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--navh) - 23px);height:1px;z-index:2;
  background:linear-gradient(90deg,
    rgba(255,255,255,.18) 0%,rgba(255,255,255,.18) 50%,
    var(--line) 50%,var(--line) 100%);
}
.hero .l{
  background:var(--ink);color:#fff;
  padding:calc(var(--navh) + 5px) 48px 72px var(--gutter);
  display:flex;flex-direction:column;
}
.hero .l .kick{color:var(--red-lt)}
.hero .lend{margin-top:auto;padding-top:56px}
.hero .r{
  padding:calc(var(--navh) + 5px) var(--gutter) 72px 56px;
  display:flex;flex-direction:column;
}
.hero .title{
  font-size:clamp(34px,4.9vw,72px);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;
}
.hero .what{
  margin-top:26px;font-size:18px;line-height:1.75;
  color:var(--dim);max-width:520px;
}
.hero .sub{
  font-size:clamp(18px,1.6vw,25px);font-weight:700;
  line-height:1.55;letter-spacing:-.015em;
}
.hero .note{margin-top:16px;font-size:15px;line-height:1.75;color:var(--sub)}
.hero .pledges{margin-top:34px;border-top:1px solid var(--line);padding-top:26px;
  display:flex;flex-direction:column;gap:18px}
.hero .pledges li{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600}
.hero .pledges .glyph{width:26px;height:26px;flex:none;color:var(--red)}
.hero .cta{margin-top:auto;padding-top:44px;display:flex;flex-wrap:wrap;gap:12px}
.hero .cta .btn{margin-top:0}

/* ---------- 两栏：左目录 + 右正文（常见问题页 / 两个法律页） ---------- */
.docgrid{display:grid;grid-template-columns:300px 1fr;gap:0 56px;align-items:start}
.docnav{position:sticky;top:calc(var(--hdrm) + 28px);
  border-top:4px solid var(--ink);padding-top:20px}
.docnav .kick{display:block;margin-bottom:14px}
.docnav li a{
  display:flex;align-items:baseline;gap:12px;padding:10px 0;
  font-size:14px;font-weight:600;color:var(--sub);
  border-bottom:1px solid var(--line);
  transition:color .18s ease,border-color .18s ease;
}
.docnav li a i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--red);
  font-variant-numeric:tabular-nums;flex:none;transition:color .18s ease}
.docnav li a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.docnav li:last-child a{border-bottom:0}
.docnav .side{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--sub);line-height:1.7}
.docnav .side a{border-bottom:1px solid currentColor;transition:color .18s ease}
.docnav .side a:hover{color:var(--red)}
.docmain{min-width:0}

/* 常见问题：分组 */

/* 法律页：分组 */
.doc{padding:56px 0 76px}
.docgroup + .docgroup{margin-top:48px}
.docgroup h2{font-size:20px;font-weight:800;letter-spacing:-.01em;
  padding-top:24px;border-top:4px solid var(--ink);margin-bottom:14px}
.doc p{font-size:15px;line-height:1.85;color:var(--sub)}
.doc p + p{margin-top:10px}
.doc ul{margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.doc li{font-size:15px;line-height:1.85;color:var(--sub);padding-left:22px;position:relative}
.doc li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;background:var(--red)}
.doc b{color:var(--ink);font-weight:700}
.doc .meta{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--sub);letter-spacing:.06em}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:15px 30px;
  border:2px solid var(--ink);font-size:15px;font-weight:700;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.dark .btn{border-color:#fff;color:#fff}
.dark .btn:hover{background:#fff;color:var(--ink)}
.dark .btn.solid{background:#fff;color:var(--ink)}
.dark .btn.solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btnrow{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btnrow .btn{margin:0}

/* ---------- 页脚 ---------- */
.ftr{background:var(--ink);color:#fff;padding:68px 0 40px;border-top:4px solid var(--red)}
.ftr .big{font-size:clamp(25px,2.9vw,42px);font-weight:800;line-height:1.2;letter-spacing:-.025em}
.ftr .big em{font-style:normal;color:var(--red-lt)}
/* 品牌组合：图标 + 字标（深色底 → 用 on-dark 两件） */
.brandmark{display:inline-flex;align-items:center;gap:18px;margin-top:38px}
.brandmark .bi{height:40px;width:auto;margin:0 -6px}
.brandmark .bv{width:1px;height:30px;background:var(--hair);display:block}
.brandmark .bl{height:23px;width:auto;opacity:.94;transition:opacity .18s ease}
.brandmark:hover .bl{opacity:1}
/* 页脚中段：logo + 导航同行（2026-10-13 页脚排版调整） */
.ftr-mid{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--hair)}
.ftr .brandmark{margin-top:0}
.ftr-nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--dim)}
.ftr-nav a{transition:color .18s ease}
.ftr-nav a:hover{color:#fff}
.ftr .row{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  font-size:14px;color:var(--dim);
}
.ftr .row a{transition:color .18s ease}
.ftr .row a:hover{color:#fff}
.ftr .row.legal{margin-top:20px;border-top:0;padding-top:14px;font-size:13px}
.ftr .row .sp{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px 22px}

/* ---------- 回到顶部（红底白箭头；hover 按所在底色反色） ---------- */
.totop{
  position:fixed;right:28px;bottom:28px;z-index:90;
  width:50px;height:50px;border:0;padding:0;cursor:pointer;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .18s ease,color .18s ease;
}
.totop.on{opacity:1;visibility:visible;transform:none}
/* 压在浅底上 → 黑底白箭头；压在深底上 → 白底黑箭头（.on-dark 由 site.js 判断后加上） */
.totop:hover{background:var(--ink);color:#fff}
.totop.on-dark:hover{background:#fff;color:var(--ink)}
.totop svg{width:20px;height:20px;display:block}

/* 有客服按钮的页面：回顶挪到客服上面 —— 否则两个按钮完全叠在一起，客服点不到 */
body:has(.cs-btn) .totop{bottom:92px}
@media(max-width:960px){
  body:has(.cs-btn) .totop{bottom:calc(78px + var(--tabh) + env(safe-area-inset-bottom))}
}

/* ---------- 锚点跳转的让位（法律页目录 / 常见问题分组） ---------- */
[id]{scroll-margin-top:calc(var(--hdrm) + 76px)}

/* ---------- 场景页：体验窗口（真能点的模板） ---------- */
.showcase{padding:44px 0 56px}
.showcap{margin:0 0 20px;font-size:14.5px;line-height:1.75;color:var(--sub);max-width:820px}
.showcap b{color:var(--ink);font-weight:700}
/* 窗口外框：无边框 + 圆角 + 投影（他 2026-10-18：窗口不要边框颜色，加圆角、加背景阴影）
   ⚠️ 细线改由阴影提供边界感，顶栏那条 4px 黑线保留（分节线语言） */
.frame{border:0;border-radius:14px;overflow:hidden;background:var(--paper);
  box-shadow:0 22px 50px rgba(20,18,14,.16),0 2px 6px rgba(20,18,14,.06)}
.frame-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 18px;border-bottom:4px solid var(--ink);
}
.frame-bar .addr{
  display:inline-flex;align-items:center;gap:11px;min-width:0;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--sub);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.frame-bar .addr::before{content:"";flex:none;width:9px;height:9px;background:var(--red)}
.frame-bar .open{flex:none;font-size:14px;font-weight:700;white-space:nowrap;
  border-bottom:2px solid var(--red);transition:color .18s ease}
.frame-bar .open:hover{color:var(--red)}
/* 窗口高度：整块（含顶栏）不超过「视口高 − 报头高」，一屏能看全，模板也不会被压扁 */
.frame iframe{display:block;width:100%;border:0;background:#fff;
  height:calc(100vh - var(--hdrm) - 78px);min-height:340px}
.frame .soon{background:var(--soft);
  height:calc(100vh - var(--hdrm) - 78px);min-height:340px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:0 24px;text-align:center}
.frame .soon .glyph{width:132px;height:71px;color:var(--ink);opacity:.26}
.frame .soon b{font-size:20px;font-weight:800;letter-spacing:-.015em}
.frame .soon span{font-size:14px;color:var(--sub)}

/* ---------- 场景页：四条好处 ---------- */
.pros{border-top:4px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.pros li{padding:34px 46px 38px 0;border-bottom:1px solid var(--line)}
.pros li:nth-child(2n){padding-left:46px;border-left:1px solid var(--line);padding-right:0}
.pros li:nth-last-child(-n+2){border-bottom:none}
.pros .n{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.08em;
  font-variant-numeric:tabular-nums}
.pros h3{margin-top:13px;font-size:20px;font-weight:700;line-height:1.42;letter-spacing:-.015em}
.pros p{margin-top:10px;font-size:15px;line-height:1.78;color:var(--sub)}

/* ---------- 窄屏 ---------- */
@media (max-width:1080px){
  :root{--navh:64px;--hdrm:64px;--pad:44px}
  .hdr .menu{gap:22px}
  .hdr .menu > li > a,.hdr .menu .dd-t{font-size:14px}
  .docgrid{grid-template-columns:248px 1fr;gap:0 44px}
}

@media (max-width:960px){
  :root{--pad:32px;--gutter:32px;--navh:56px;--hdrm:56px;--tabh:54px}

  /* ---- 报头：只留 logo；菜单下移，做成固定的底部 APP 栏 ---- */
  .hdr .bar{height:auto;padding-top:12px;padding-bottom:12px;gap:0}
  .hdr .logo{gap:9px}
  .hdr .logo .hi{height:24px}
  .hdr .logo .hl{height:19px}

  .hdr .menu{
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    background:var(--paper);border-top:1px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom);
  }
  /* 底部 APP 栏：底色跟随页面（他 10-18：和页眉一样，背景、文字、图标一起变）
     ⛔ 旧规则是「永远白底，别跟着变」—— 已按他的新口径推翻。 */
  .hdr .menu > li > a,
  .hdr .menu .dd-t{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 2px;border-bottom:0;
    font-size:12.5px;font-weight:600;color:var(--sub);
    transition:background .25s,color .25s;
  }
  .hdr .menu i{font-size:10px;letter-spacing:.08em;line-height:1.3}
  /* 当前页：编号与名称一起转红，顶上再压一条红杠（APP 底栏的常规语言） */
  .hdr .menu > li > a.on,
  .hdr .menu .dd .dd-t.on{color:var(--red)}
  /* 压到深色屏上：底变黑、字变白、编号用提亮红（同报头 on-dark 的那一套） */
  .hdr .menu.on-dark{background:var(--ink);border-top-color:rgba(255,255,255,.14)}
  .hdr .menu.on-dark > li > a,
  .hdr .menu.on-dark .dd-t{color:#C8C4BC}
  .hdr .menu.on-dark i{color:var(--red-lt)}
  .hdr .menu.on-dark > li > a.on,
  .hdr .menu.on-dark .dd .dd-t.on{color:var(--red-lt)}
  .hdr .menu > li > a.on::before,
  .hdr .menu .dd .dd-t.on::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;background:var(--red);
  }
  .dd::after{display:none}
  .dd .caret{display:none}
  .dd-p{display:none}

  /* ---- 首屏：压到 768px 以内，保证第一屏（含底部 APP 栏）就能看到两个按钮 ----
     目标不是"屏幕 844"，而是真机浏览器**可视区**（iPhone 上约 730），再扣掉底栏。
     所以按 620 上下留足余量，不做"刚好卡线"的紧排版。 */
  .hero{grid-template-columns:1fr;min-height:0}
  .hero::before{display:none}
  .hero .l,.hero .r{padding:24px var(--pad)}
  .hero .l{padding-bottom:20px}
  .hero .l .kick{font-size:11px;letter-spacing:.16em}
  .hero .lend{padding-top:0;margin-top:11px}
  .hero .title{font-size:clamp(30px,8.6vw,46px)}
  .hero .what{font-size:15px;line-height:1.66;margin-top:11px}
  .hero .r{padding-top:0;padding-bottom:22px}
  .hero .sub{font-size:18px;line-height:1.5}
  .hero .note{font-size:13px;line-height:1.63;margin-top:10px}
  .hero .pledges{margin-top:16px;padding-top:13px;gap:8px}
  .hero .pledges li{font-size:14.5px;gap:10px}
  .hero .pledges .glyph{width:20px;height:20px}
  .hero .cta{margin-top:15px;padding-top:0}
  .hero .cta .btn{padding:11px 18px;font-size:14px}

  .head{padding:44px 0 30px}
  .sec,.sec.tight{padding:48px 0}
  .lede{font-size:16px}
  .sec-head{padding-bottom:28px}
  .note{font-size:14px}

  .docgrid{grid-template-columns:1fr;gap:0}
  .docnav{position:static;margin-bottom:38px;padding-top:16px}
  .docnav .kick{margin-bottom:10px}
  .docnav ol{display:flex;flex-wrap:wrap;gap:0 20px}
  .docnav li a{border-bottom:0;padding:5px 0;font-size:13px;gap:8px}
  .docnav .side{display:none}
  .doc{padding:40px 0 56px}
  .doc p,.doc li{font-size:15px}
  .docgroup + .docgroup{margin-top:38px}
  .doc .meta{margin-top:36px}

  /* 页脚要给底部 APP 栏留位，不然它会盖住备案号那行 */
  .ftr{padding:48px 0 calc(32px + var(--tabh) + env(safe-area-inset-bottom))}
  .brandmark{gap:14px;margin-top:28px}
  .brandmark .bi{height:32px;margin:0 -5px}
  .brandmark .bv{height:24px}
  .brandmark .bl{height:19px}
  .ftr .row{font-size:14px;gap:9px 18px}
  .ftr .row.legal{font-size:13px}
  .ftr .row .sp{margin-left:0;width:100%}
  .ftr-mid{flex-direction:column;align-items:flex-start;gap:20px}

  /* 回顶按钮：抬到底部 APP 栏上方 */
  .totop{right:16px;width:46px;height:46px;
    bottom:calc(14px + var(--tabh) + env(safe-area-inset-bottom))}

  [id]{scroll-margin-top:24px}

  .pros{grid-template-columns:1fr}
  .pros li{padding:26px 0 30px}
  .pros li:nth-child(2n){padding-left:0;border-left:none}
  .pros li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .pros li:last-child{border-bottom:none}
  .pros h3{font-size:19px}
  .pros p{font-size:15px}

  .showcase{padding:30px 0 44px}
  .showcap{font-size:13.5px;margin-bottom:16px}
  .frame-bar{padding:11px 14px;gap:12px}
  .frame-bar .addr{font-size:11.5px;gap:9px}
  .frame-bar .open{font-size:13px}
  /* 手机端：报头薄、底下还有 APP 栏，窗口高度按剩下的空间算 */
  .frame iframe,.frame .soon{height:calc(100dvh - var(--hdrm) - var(--tabh) - 74px);
    min-height:320px}
  .frame .soon .glyph{width:104px;height:56px}
  .frame .soon b{font-size:18px}

  .btn{padding:13px 22px;font-size:14.5px}
  .btnrow{margin-top:30px;flex-direction:column;align-items:stretch}
  .btnrow .btn{text-align:center}
  .dark .btnrow{flex-direction:column}

}

@media (max-width:380px){
  :root{--pad:22px;--gutter:22px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .totop{transform:none}
}

/* ============================================================
   二级页 v2（2026-10-03 直出 · 服务页 2026-10-04 整页重做）
   四个菜单页各换一种「阅读单元」，场景子页换新页头 + 七套索引。
   ⚠️ 这一节自带窄屏断点，不往上面那份 @media 里塞。
   ⚠️ 它替代的这些类名已经删掉了，别照旧名去找：
      .steps .maint .own .dont .tpls .pick .fit .cnt .mail .stats .qr
      .subnav .backbar .qagroup .idx .flow .tplmini .three .intro
      .sv-head .sv-rail .sv-fit .sv-axis .sv-maint .sv-dont   ← 服务页旧版（换成 .sp-*）
   ============================================================ */

/* 满幅表：桌面端让格子跑到容器边缘（印刷品的出血感）；手机端收回正常留白 */
.wrap.flush{padding-left:0;padding-right:0}

/* ---------- 服务页 · 服务说明书（2026-10-04 按他给的结构整页重做） ----------
   他原话：「服务页面感觉很乱，我做了一个调整」+ 一份六区块结构。
   六个区块：① Hero +「归你」横幅 ② 服务全景（三阶段，占最大面积）
            ③ 你做 / 我做 ④ 长期承诺（黑底） ⑤ 服务边界（包含 / 不包含） ⑥ CTA
   ⛔ 结构是他定的，不要自创。他稿里的 emoji / 箭头一律换成站内符号（黑红白、零圆角）。
   ⛔ 旧那套 .sv-* （六步竖轴 / 适合谁 / 上线之后 / 四件不做）已随本次重做删除。 */

/* ① Hero */

/* 「归你」横幅：四个格子 + 上下两根粗线，像一张单据抬头 */

/* 区块标题（统一长相；深底那两块底线转白） */

/* ② 服务全景：三阶段并排，顶上一根 4px 粗线当时间轴 */

/* ⚠️ 内容块一律不再自带上边线 —— 上面 .sp-head 已经有一条 4px 分节线，
   再画一条就是「标题下面两道线」（2026-10-04 他指出的）。 */

/* 时间轴尾巴：以后 ———————————— ■长期，没有终点 */

/* ③ 你做 / 我做：一张真的对照表（印刷品的排线表格） */

/* ④ 长期承诺（黑底） */

/* ⑤ 服务边界：包含 / 不包含 两栏对照 */

/* ⑥ CTA */

/* ---------- 模板页 · 七条书脊（并排立起来，悬停抽出一块详情） ---------- */
.tp-head{padding:86px 0 56px}
.tp-head .h1{max-width:16em}
.shelf{border-top:4px solid var(--ink)}
.shelf ol{display:grid;grid-template-columns:repeat(7,1fr)}
.shelf li{position:relative;border-right:1px solid var(--line);overflow:hidden}
.shelf li:last-child{border-right:0}
.shelf a{display:flex;flex-direction:column;height:clamp(300px,44vh,420px);
  padding:22px 18px 20px;transition:background .28s,color .28s}
.shelf .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--red)}
.shelf .glyph{width:100%;max-width:96px;height:52px;margin:auto 0;opacity:.9}
.shelf .nm{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.shelf .em{display:block;margin-top:9px;font-size:12.5px;color:var(--sub);line-height:1.5}
.shelf a:hover{background:var(--ink);color:#fff}
.shelf a:hover .no{color:var(--red-lt)}
.shelf a:hover .em{color:var(--dim)}
.shelf a:hover .glyph{opacity:1}
.shelf .desc{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:#fff;
  padding:22px 18px;font-size:13.5px;line-height:1.68;transform:translateY(102%);
  transition:transform .4s cubic-bezier(.22,.8,.24,1);pointer-events:none}
.shelf li:hover .desc,.shelf li:focus-within .desc{transform:translateY(0)}

/* 怎么挑：三格 */
.tp-pick{display:grid;grid-template-columns:repeat(3,1fr);border-top:4px solid var(--ink)}
.tp-pick > div{padding:clamp(28px,3.4vh,40px) clamp(20px,2.4vw,38px);border-right:1px solid var(--line)}
.tp-pick > div:last-child{border-right:0}
.tp-pick b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.tp-pick p{margin-top:12px;font-size:14.5px;line-height:1.72;color:var(--sub)}

/* ---------- 常见问题 · 一问一答（去掉左目录，问题当主角） ---------- */
.fq-head{padding:86px 0 52px}
.fq-body{padding-bottom:clamp(56px,8vh,88px)}
.fq-grp{border-top:4px solid var(--ink);padding-top:clamp(30px,4vh,46px);margin-top:clamp(44px,6vh,72px)}
.fq-grp:first-child{margin-top:0}
.fq-gl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--red);
  display:flex;gap:14px;align-items:baseline;margin-bottom:clamp(26px,3.4vh,40px)}
.fq-gl em{font-style:normal;font-family:var(--sans);font-size:15px;font-weight:700;
  color:var(--ink);letter-spacing:0}
.fq-list li{display:grid;grid-template-columns:58px 1fr;column-gap:clamp(16px,2.4vw,34px);
  padding:clamp(26px,3.6vh,40px) 0;border-bottom:1px solid var(--line)}
.fq-list li:last-child{border-bottom:0}
.fq-list .qn{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--chip);padding-top:8px}
.fq-list h3{font-size:clamp(21px,2.05vw,29px);font-weight:800;letter-spacing:-.028em;line-height:1.36;max-width:24em}
.fq-list p{margin-top:15px;font-size:16px;line-height:1.8;color:var(--sub);max-width:62ch}

/* ---------- 联系我们 · 一屏（邮箱放到最大，不用滚） ---------- */
.ct-main{min-height:calc(100vh - var(--hdrm));display:flex;flex-direction:column;
  padding:clamp(48px,7vh,84px) 0 clamp(40px,6vh,64px)}
.ct-top{flex:1;display:flex;flex-direction:column;justify-content:center}
.ct-mail{display:block;margin-top:14px;
  /* 出血级：13 个字符撑到内容宽度上限（.55em/字符），1440 下约 158px */
  font-size:clamp(40px,11vw,160px);font-weight:800;letter-spacing:-.045em;line-height:1.02;
  word-break:break-all;border-bottom:4px solid var(--ink);padding-bottom:clamp(14px,2vh,26px)}
.ct-mail:hover{border-bottom-color:var(--red)}
.ct-note{margin-top:clamp(20px,3vh,32px);font-size:18px;line-height:1.75;color:var(--sub);max-width:640px}
.ct-ways{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:4px solid var(--ink);
  margin-top:clamp(36px,5vh,60px)}
.ct-ways > div{padding:clamp(24px,3.2vh,38px) clamp(18px,2.2vw,34px);border-right:1px solid var(--line)}
.ct-ways > div:last-child{border-right:0}
.ct-ways .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--red)}
.ct-ways b{display:block;margin-top:12px;font-size:clamp(18px,1.6vw,23px);font-weight:800;letter-spacing:-.02em}
.ct-ways p{margin-top:9px;font-size:14px;line-height:1.68;color:var(--sub)}
.ct-ways img{width:118px;height:118px;margin-top:14px;border:1px solid var(--line);background:#fff}
.ct-stats{display:flex;gap:clamp(30px,5vw,72px);margin-top:clamp(28px,4vh,44px);
  padding-top:clamp(22px,3vh,32px);border-top:1px solid var(--line)}
.ct-stats b{font-family:var(--mono);font-size:clamp(26px,2.6vw,38px);font-weight:700;letter-spacing:-.02em}
.ct-stats span{margin-left:12px;font-size:14px;color:var(--sub)}

/* ---------- 联系我们 2026-10-19 重做：三屏一屏一段 ----------
   ⛔ 旧的 .ct-main/.ct-ways/.ct-stats 已停用（二维码是占位图，拿掉了），样式留着不删。
   屏 2 只有一处 4px 线（邮箱下面那条）—— 所以这一屏不用 .sp-head，避免「一条屏两条粗线」。 */
.ct-box{margin-top:clamp(10px,2.2vh,26px)}
.ct-what{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,30px);margin-top:clamp(20px,3.4vh,44px)}
.ct-what li{list-style:none;border-top:1px solid var(--line);
  padding-top:clamp(10px,1.8vh,18px)}
.ct-what b{display:block;font-size:clamp(15px,1.5vw,20px);font-weight:800;letter-spacing:-.02em}
.ct-what span{display:block;margin-top:7px;font-size:clamp(13px,1.05vw,15px);
  line-height:1.72;color:var(--sub)}

/* ---------- 信箱选择面板（2026-10-19 他：点邮箱别再直接跳 Outlook） ----------
   桌面点邮箱 → 弹这个选平台；手机不弹（mailto 会让系统列出装了的邮件 App）。
   黑白印刷风：零圆角、2px 黑边、无阴影。 */
.ml{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(12,11,10,.74)}
.ml[hidden]{display:none!important}
.ml-box{position:relative;width:min(540px,100%);background:var(--paper);
  border:2px solid var(--ink);padding:clamp(24px,3.4vw,38px)}
.ml-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;
  background:transparent;color:var(--sub);font:inherit;font-size:15px;cursor:pointer;
  line-height:1}
.ml-x:hover{color:var(--ink)}
.ml-h{margin-top:4px;font-size:clamp(23px,2.6vw,32px);font-weight:800;letter-spacing:-.03em}
.ml-addr{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(16px,2.4vh,24px);padding:13px 15px;background:var(--soft)}
.ml-addr span{font-family:var(--mono);font-size:clamp(13px,1.15vw,15px);letter-spacing:.01em}
.ml-copy{flex:none;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;padding:8px 14px;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.ml-copy:hover{background:var(--ink);color:#fff}
.ml-copy.ok{background:var(--red);border-color:var(--red);color:#fff}
.ml-web{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ml-web li{list-style:none}
.ml-web a{display:block;padding:14px 16px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:background .18s,color .18s}
.ml-web a:hover{background:var(--ink);color:#fff}
.ml-web b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ml-web span{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;color:var(--sub)}
.ml-web a:hover span{color:rgba(255,255,255,.72)}
.ml-tip{margin-top:14px;font-size:12.5px;line-height:1.65;color:var(--sub)}
/* 「用手机上的邮件 App 打开」—— 只在手机显示（桌面上 mailto 就是他讨厌的 Outlook，不给入口） */
.ml-app{display:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;font-weight:700;color:var(--ink);text-decoration:none}
.ml-app:hover{color:var(--red)}
@media (max-width:960px){
  .ml{padding:14px}
  .ml-box{padding:22px 18px}
  .ml-web a{padding:12px 13px}
  .ml-app{display:block}
}

/* ---------- 场景子页 · 页头（符号 + 名称，七套一眼分得开） ---------- */
.sc-head{padding:74px 0 40px;border-bottom:4px solid var(--ink)}
.sc-top{display:grid;grid-template-columns:minmax(170px,232px) 1fr;
  gap:clamp(28px,4.4vw,72px);align-items:end}
.sc-id{display:flex;flex-direction:column;gap:20px}
.sc-glyph{width:100%;max-width:164px;height:88px;color:var(--ink)}
.sc-top .h1{margin-top:14px}
.sc-top .lede{max-width:600px}
/* 场景页 ·「什么时候你会想起它」那行小字（2026-10-29 补）
   规矩：红只做标点 —— 前面一根 2px 红竖线，不加大色块、不加底。 */
.sc-top .lede2{margin-top:16px;max-width:600px;padding-left:14px;border-left:2px solid var(--red);
  font-size:15px;line-height:1.72;color:var(--sub)}

/* ---------- 场景子页 · 底部七套索引（替代原来的「上一套 / 下一套」） ---------- */
.sc-nav-sec{padding:clamp(44px,6.4vh,68px) 0 clamp(52px,7.4vh,80px)}
.sc-nav{margin-top:22px;border-top:4px solid var(--ink);display:grid;
  grid-template-columns:repeat(7,1fr)}
.sc-nav li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-nav li:last-child{border-right:0}
.sc-nav a{display:block;height:100%;padding:20px 14px 22px;
  transition:background .2s,color .2s}
.sc-nav a:hover,.sc-nav a.on{background:var(--ink);color:#fff}
.sc-nav .no{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--red)}
.sc-nav a:hover .no,.sc-nav a.on .no{color:var(--red-lt)}
.sc-nav b{display:block;margin-top:9px;font-size:16px;font-weight:700;letter-spacing:-.015em}

@media(max-width:1080px){
  
  .shelf ol{grid-template-columns:repeat(4,1fr)}
  .shelf li:nth-child(4n){border-right:0}
  .shelf li:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .shelf a{height:clamp(240px,32vh,320px)}
  .sc-nav{grid-template-columns:repeat(4,1fr)}
  .sc-nav li:nth-child(4n){border-right:0}
  .sc-nav li:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .ct-mail{font-size:clamp(36px,9vw,110px)}
}

@media(max-width:960px){
  .wrap.flush{padding-left:var(--pad);padding-right:var(--pad)}

  
  /* 「归你」横幅：四格 → 2×2 */
  
  
  

  /* 服务全景：三列 → 单列，每段一条底线 */
  
  
  
  
  

  /* 对照表：三列 → 堆叠（表头藏起来，「你做 / 我做」用行内标签补回来） */
  
  
  
  
  
  
  
  
  
  

  /* 长期承诺：两列 → 单列 */
  
  
  

  /* 服务边界：两栏 → 上下 */
  
  
  

  .tp-head{padding-top:60px}
  .shelf ol{grid-template-columns:1fr}
  .shelf li{border-right:0;border-bottom:1px solid var(--line)}
  .shelf a{height:auto;flex-direction:row;align-items:center;gap:16px;padding:20px 0}
  .shelf .glyph{width:64px;height:36px;margin:0;order:2;flex:none}
  .shelf .no{order:1;flex:none}
  .shelf .nm{order:3;flex:1}
  .shelf .em{margin-top:4px}
  .shelf .desc{position:static;transform:none;background:transparent;color:var(--sub);
    padding:0 0 18px;font-size:13.5px;line-height:1.65}
  .tp-pick{grid-template-columns:1fr}
  .tp-pick > div{border-right:0;border-bottom:1px solid var(--line);
    padding-left:0;padding-right:0}
  .tp-pick > div:last-child{border-bottom:0}

  .fq-head{padding-top:60px}
  .fq-list li{grid-template-columns:1fr;row-gap:8px}
  .fq-list .qn{padding-top:0}
  .fq-list h3{font-size:clamp(20px,5.6vw,25px)}
  .fq-list p{font-size:15.5px}

  .ct-main{min-height:calc(100dvh - var(--hdrm) - var(--tabh))}
  .ct-mail{font-size:clamp(30px,11vw,56px);letter-spacing:-.03em}
  .ct-note{font-size:16px}
  /* 信箱屏内容只有半屏，手机端也居中（不然上面一堆、下面空 250） */
  .sp-main .sp-sec:has(.ct-mail) > .wrap{justify-content:center}
  .ct-what{grid-template-columns:1fr;gap:0;margin-top:18px}
  .ct-what li{display:flex;align-items:baseline;gap:12px;padding:11px 0}
  .ct-what b{flex:none;font-size:14px}
  .ct-what span{margin-top:0;font-size:13.5px}
  .ct-ways{grid-template-columns:1fr}
  .ct-ways > div{border-right:0;border-bottom:1px solid var(--line)}
  .ct-ways > div:last-child{border-bottom:0}
  .ct-stats{flex-wrap:wrap;gap:18px 34px}

  .sc-head{padding:56px 0 32px}
  .sc-top{grid-template-columns:1fr;gap:22px;align-items:start}
  .sc-glyph{max-width:118px;height:63px}
  .sc-top .h1{margin-top:10px}
  .sc-nav{grid-template-columns:repeat(2,1fr)}
  .sc-nav li:nth-child(2n){border-right:0}
  .sc-nav li:nth-child(-n+6){border-bottom:1px solid var(--line)}
}

@media(max-width:380px){
  
  
  
  .sc-nav{grid-template-columns:1fr}
  .sc-nav li{border-right:0}
}

/* ⚠️ 手机端必须关掉报头的 backdrop-filter（2026-10-04）——
   手机端 `.hdr .menu` 是 position:fixed 的底部 APP 栏；祖先一旦有 backdrop-filter
   就会成为它的包含块，底部栏会被吸进报头里而不是贴屏幕底。
   手机端报头本来就只留 logo，不做透明模糊，直接纯白。 */
@media(max-width:960px){
  .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
}

/* ============================================================
   服务页 v3 · 卡片阵列（2026-10-04，整节重写）
   ------------------------------------------------------------
   ⛔ **这一节是服务页样式的唯一出处**，别再往上叠覆盖块。
      2026-10-04 那一版就是因为「线条版」和「卡片版」两批规则叠在一起、
      伪类的优先级互相打架，导致**卡片缺边**（实测：第三章卡丢右边、
      第五张承诺卡丢右下、第二张边界卡丢右、手机端第一行行卡丢上边…）。
      → 处理办法是**把旧批次整个删掉重写**，不是在后面加补丁。
   📌 **两条硬规矩**：
      ① 卡片的边框**只在下面唯一一处定义**，四条边一次给齐；
         ⛔ 任何地方都不要再写 `border-right:0` / `border-bottom:0` 去抠某一条边 ——
            窄屏堆叠时它就会变成"缺一条边的框"。
      ② 卡片里**任何自带 color 的元素，悬停反白时必须跟着翻** ——
         `td`/`dd` 上直接写的 color 优先级高于父级的继承，漏一个就是
         "白底变黑底、字还是黑的"，看不见（他 2026-10-04 抓到的就是这个）。
   ============================================================ */

/* ---------- ① Hero + 四条「归你」卡 ---------- */
.sp-hero{padding:86px 0 0}
.sp-hero .wrap{padding-bottom:34px}
.sp-lock ul{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sp-lock li{border:1px solid var(--ink);padding:18px 22px 20px;
  transition:background .24s ease,color .24s ease}
.sp-lock b{font-size:clamp(15px,1.3vw,19px);font-weight:800;letter-spacing:-.02em}
.sp-lock b::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);
  margin-right:10px;vertical-align:middle;transition:background .24s ease}
.sp-lock li:hover{background:var(--ink);color:#fff}
.sp-lock li:hover b::before{background:var(--red-lt)}

/* ---------- 区块标题（深底那两块底线转白） ---------- */
.sp-head{border-bottom:4px solid var(--ink);padding-bottom:30px;
  margin-bottom:clamp(34px,4.6vh,52px)}
.dark .sp-head{border-bottom-color:#fff}
.sp-head .note{margin-top:20px;font-size:15px;line-height:1.75;color:var(--sub);max-width:660px}
.dark .sp-head .note{color:var(--dim)}

/* ---------- ② 服务全景：三张阶段竖卡 ---------- */
.sp-all{padding:clamp(56px,7.6vh,92px) 0 clamp(48px,6.4vh,76px)}
.sp-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp-stage{position:relative;border:1px solid var(--ink);
  padding:30px 26px 34px;transition:background .26s ease,color .26s ease}
.sp-stage .no{position:absolute;left:-1px;top:-1px;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;padding:7px 13px;
  transition:background .26s ease}
.sp-stage h3{margin-top:24px;font-size:clamp(24px,2.2vw,32px);font-weight:800;
  letter-spacing:-.03em;line-height:1.14}
.sp-stage .dur{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--sub);transition:color .26s ease}
.sp-stage dl{margin-top:clamp(20px,2.6vh,30px)}
.sp-stage dl > div{padding:14px 0;border-top:1px solid var(--line);
  transition:border-color .26s ease}
.sp-stage dl > div:first-child{border-top:0;padding-top:0}
.sp-stage dl > div:last-child{padding-bottom:0}
.sp-stage dt{font-size:16px;font-weight:700;letter-spacing:-.015em}
.sp-stage dd{margin-top:6px;font-size:14px;line-height:1.7;color:var(--sub);
  transition:color .26s ease}
/* 悬停整块反白 ⚠️ 卡里每个自带 color 的元素都要跟着翻 */
.sp-stage:hover{background:var(--ink);color:#fff}
.sp-stage:hover .no{background:var(--red)}
.sp-stage:hover .dur{color:var(--dim)}
.sp-stage:hover dt{color:#fff}
.sp-stage:hover dd{color:var(--dim)}
.sp-stage:hover dl > div{border-top-color:var(--hair)}

/* 时间轴的尾巴：以后 ———————————— ■长期，没有终点 */
.sp-tail{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,3.4vh,38px)}
.sp-tail .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--sub)}
.sp-tail .line{flex:1;height:0;border-top:4px solid var(--ink)}
.sp-tail .end{font-size:15px;font-weight:800;letter-spacing:-.02em}
.sp-tail .end::before{content:"";display:inline-block;width:7px;height:7px;background:var(--red);
  margin-right:9px;vertical-align:middle}

/* ---------- ③ 你做 / 我做：6 张横条卡 ---------- */
.sp-split{padding:0}
.sp-tb{display:block;width:100%;border:0}
.sp-tb thead{display:none}
.sp-tb tbody{display:grid;gap:12px}
.sp-tb tr{display:grid;grid-template-columns:200px 1fr 1fr;
  border:1px solid var(--ink);transition:background .24s ease,color .24s ease}
.sp-tb td{border:0;padding:18px 22px;font-size:15.5px;line-height:1.7}
.sp-tb td:first-child{display:flex;align-items:center;background:var(--soft);
  border-right:1px solid var(--ink);font-size:16px;font-weight:800;letter-spacing:-.02em;
  transition:background .24s ease,border-color .24s ease}
.sp-tb td:nth-child(2){color:var(--ink);transition:color .24s ease}
.sp-tb td:nth-child(3){color:var(--sub);transition:color .24s ease}
/* ⚠️ 反白时三个格子都要翻 —— 见本节头部规矩② */
.sp-tb tr:hover{background:var(--ink);color:#fff}
.sp-tb tr:hover td:first-child{background:transparent;border-right-color:var(--hair);color:#fff}
.sp-tb tr:hover td:nth-child(2){color:#fff}
.sp-tb tr:hover td:nth-child(3){color:var(--dim)}
.sp-foot{margin-top:clamp(20px,2.6vh,30px);font-size:13.5px;line-height:1.7;color:var(--sub)}

/* ---------- ④ 关于归属（黑底）：5 张黑卡 ---------- */
.sp-promise{padding:clamp(58px,8vh,96px) 0}
.sp-pledge{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sp-pledge li{display:flex;align-items:baseline;gap:11px;
  border:1px solid #fff;padding:22px 24px;
  font-size:clamp(16px,1.5vw,20px);font-weight:700;letter-spacing:-.02em;line-height:1.5}
.sp-pledge li::before{content:"";flex:none;width:7px;height:7px;background:#fff}
.sp-pledge li:last-child{grid-column:1/-1}
.sp-punch{margin-top:auto;padding-top:clamp(28px,4vh,44px);font-size:clamp(22px,2.55vw,36px);font-weight:800;
  letter-spacing:-.03em;color:var(--red-lt);line-height:1.28}

/* ---------- 归属屏：四条竖排、均分一屏 ----------
   ⛔ 2026-10-30 这块我改过四轮（三列 → 撑满居中 → 左右结构 → 拆两 section），越改越乱。
      定稿：**一个 section 一屏，四条竖排、每条均分高度**；年份卡另起一屏。
      桌面和手机走同一套，不再写两套 —— 之前就是分两套才互相打架。 */
.sp-own3{display:flex;flex-direction:column;
  margin-top:clamp(18px,2.8vh,32px);flex:1 1 auto;min-height:0}
.sp-own3 li{flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid rgba(255,255,255,.22);
  padding:clamp(6px,1.2vh,12px) 0}
.sp-own3 li:first-child{border-top:0;padding-top:0}
.sp-own3 .n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--red-lt);margin-bottom:clamp(6px,1vh,10px)}
.sp-own3 h3{font-size:clamp(17px,1.55vw,23px);font-weight:800;letter-spacing:-.025em;
  line-height:1.25;margin:0 0 clamp(5px,.9vh,9px)}
.sp-own3 p{font-size:clamp(13px,1.06vw,14.8px);line-height:1.66;color:var(--dim);margin:0}

.own-note{margin:clamp(12px,2vh,20px) 0 0;padding-top:clamp(10px,1.6vh,16px);
  border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(14px,1.25vw,17px);font-weight:800;color:var(--red-lt);line-height:1.42}

/* ---------- 服务页 · 十年之后（年份卡）· 2026-10-29 新增 ----------
   ⚠️ 一屏一段：卡片用 flex:1 吃掉剩余高度，不写死 aspect-ratio —— 写死的话窄屏一定撑破。
   ⚠️ 动效只做「换卡时内容淡一下」，不位移、不缩放，避免和页面滚动抢注意力。 */
.yr-wrap{margin-top:clamp(22px,3.2vh,38px);flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;align-items:center}
.yr-card{flex:1 1 auto;min-height:0;width:min(520px,100%);
  border:3px solid var(--ink);background:#fff;
  padding:clamp(20px,3.4vh,40px) clamp(20px,3.6vw,44px);
  display:flex;flex-direction:column;
  transition:opacity .22s ease}
.yr-card.swap{opacity:.25}
.yr-y{font-family:var(--mono);font-size:clamp(14px,1.4vw,19px);font-weight:700;
  color:var(--red);letter-spacing:.06em;margin-bottom:auto}
.yr-t{font-size:clamp(20px,2.35vw,32px);font-weight:800;line-height:1.38;letter-spacing:-.03em}
.yr-f{margin-top:auto;padding-top:clamp(14px,2.2vh,20px);border-top:1px solid var(--line);
  font-size:13px;color:var(--sub);line-height:1.6}
.yr-tabs{display:flex;gap:clamp(22px,4.2vw,56px);margin-top:clamp(16px,2.6vh,28px)}
.yr-tabs button{font-family:var(--mono);font-size:clamp(13px,1.15vw,15.5px);font-weight:700;
  color:var(--sub);background:none;border:0;border-bottom:3px solid transparent;
  padding:5px 2px 7px;cursor:pointer;letter-spacing:.02em;
  transition:color .2s ease,border-color .2s ease}
.yr-tabs button:hover{color:var(--ink)}
.yr-tabs button.on{color:var(--ink);border-bottom-color:var(--red)}

/* ---------- 归属屏下半 · 十年之后（横向宽卡）· 2026-10-30 合并进来 ----------
   深底上一张白卡 = 像贴了一张真截图；左边是纯 CSS 画的网页骨架，不加载图片。
   ⚠️ 卡片 flex:1 吃掉剩余高度 —— 这屏三列内容少，不撑的话中间又是一个洞。 */
.yr2{margin-top:clamp(16px,2.4vh,26px);flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column}
.yr2-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:clamp(8px,1.3vh,13px);flex:none}
.yr2-lab{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--red-lt)}
.yr2-tabs{display:flex;gap:clamp(12px,2vw,26px)}
.yr2-tabs button{font-family:var(--mono);font-size:clamp(11.5px,1vw,13.5px);font-weight:700;
  color:rgba(255,255,255,.42);background:none;border:0;border-bottom:2px solid transparent;
  padding:3px 1px 5px;cursor:pointer;transition:color .18s,border-color .18s}
.yr2-tabs button:hover{color:#fff}
.yr2-tabs button.on{color:#fff;border-bottom-color:var(--red-lt)}
.yr2-card{flex:1 1 auto;min-height:0;display:flex;background:#fff;color:var(--ink);
  transition:opacity .22s ease}
.yr2-card.swap{opacity:.3}
.yr2-shot{flex:0 0 40%;padding:clamp(10px,1.6vh,16px);display:flex;flex-direction:column;
  gap:clamp(6px,1vh,10px);border-right:1px solid #E7E4DC;min-width:0}
.sh-bar{display:flex;align-items:center;gap:5px}
.sh-bar i{width:6px;height:6px;background:#D9D5CC;display:block}
.sh-bar span{flex:1;height:7px;background:#EFEDE7;margin-left:8px}
.sh-body{flex:1;display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:clamp(5px,.9vh,9px);min-height:0}
.sh-ph{background:#EFEDE7;display:block}
.sh-ph.big{background:#E3DFD6}
/* 骨架跟着年份变：2016 只有一条记录，不该画满三张图；越往后越满 */
.sh-ph{transition:opacity .32s ease}
.yr2-shot.y0 .sh-ph:nth-child(2),
.yr2-shot.y0 .sh-ph:nth-child(3){opacity:.2}
.yr2-shot.y1 .sh-ph:nth-child(3){opacity:.42}
.sh-line{display:flex;align-items:center;gap:6px;flex:none}
.sh-line em{flex:1;height:2px;background:#E7E4DC}
.sh-line i{width:5px;height:5px;background:var(--red);display:block;flex:none}
.yr2-txt{flex:1;padding:clamp(12px,2vh,20px) clamp(14px,1.8vw,26px);min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.yr2-txt .yr-y{margin-bottom:6px;font-size:11px}
.yr2-txt .yr-t{font-size:clamp(18px,1.95vw,27px);line-height:1.35}
.yr2-txt .yr-f{margin-top:10px;padding-top:8px;font-size:12px}
@media(max-width:820px){
  /* 手机上卡片改成上下结构（他 10-30：横着分，骨架会被压成又窄又长的竖条）。
     骨架在上按 16:9 铺开、文字在下居中 —— 骨架才像一张真的网页截图。 */
  .yr2-card{flex-direction:column}
  .yr2-shot{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;
    border-right:0;border-bottom:1px solid #E7E4DC;padding:10px}
  .yr2-txt{padding:14px 16px}
  .yr2-bar{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 12px}
}
@media(max-width:820px){
  /* ⚠️ 手机上别让卡片 flex:1 撑满一屏 —— 内容就那么几行，撑满会中间空一大片。
     给个固定比例，卡片是方的，读起来是一张卡片而不是一块空地。 */
  .yr-card{width:100%;border-width:2px;flex:0 0 auto;aspect-ratio:1.12/1}
  .yr-tabs{gap:clamp(14px,5vw,30px)}
}

/* ---------- 模板页 · 阶段（会走很多年）· 2026-10-29 新增 ----------
   左边选人，右边横向看这个人会经过哪些段。
   ⚠️ 阶段条自己横滑，不撑破页面：容器 min-width:0 + 条上 overflow-x:auto 缺一不可。
   ⚠️ 右侧渐隐别开太大（97%~100% 就够），开大了最后一个字会被吃掉一半。 */
.stg{margin-top:clamp(22px,3.2vh,38px);flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:clamp(148px,15vw,196px) minmax(0,1fr);
  border:1px solid var(--line)}
.stg-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.stg-side button{font-family:inherit;text-align:left;background:none;border:0;cursor:pointer;
  padding:clamp(12px,1.8vh,18px) clamp(14px,1.5vw,20px);
  border-bottom:1px solid var(--line);border-left:3px solid transparent;
  transition:background .18s ease,border-color .18s ease}
.stg-side button:last-child{border-bottom:0}
.stg-side button b{display:block;font-size:clamp(15px,1.35vw,18px);font-weight:800;
  letter-spacing:-.02em;color:var(--sub)}
.stg-side button span{display:block;margin-top:4px;font-size:12px;color:var(--chip)}
.stg-side button:hover{background:var(--soft)}
.stg-side button.on{background:var(--soft);border-left-color:var(--red)}
.stg-side button.on b{color:var(--ink)}
.stg-body{padding:clamp(16px,2.4vh,28px) clamp(16px,2.2vw,32px);
  display:flex;flex-direction:column;min-width:0}
.stg-hd b{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:-.02em}
.stg-hd span{display:block;margin-top:5px;font-size:13.5px;color:var(--sub);line-height:1.6}
.stg-hint{margin-top:clamp(10px,1.6vh,16px);text-align:right;font-size:12px;color:var(--chip)}
.stg-hint b{color:var(--red);font-family:var(--mono)}
.stg-rail{display:flex;overflow-x:auto;margin-top:clamp(8px,1.2vh,14px);
  padding-bottom:10px;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 96%,rgba(0,0,0,.2) 100%);
  mask-image:linear-gradient(to right,#000 96%,rgba(0,0,0,.2) 100%)}
.stg-rail::-webkit-scrollbar{display:none}
.stg-p{flex:0 0 clamp(146px,13.6vw,182px);padding:0 clamp(12px,1.4vw,18px) 0;
  border-right:1px solid var(--line);margin-right:clamp(12px,1.4vw,18px)}
.stg-p:last-child{border-right:0}
.stg-p i{display:block;font-style:normal;font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--red);letter-spacing:.06em}
.stg-p b{display:block;margin-top:7px;font-size:clamp(14.5px,1.25vw,17px);
  font-weight:800;letter-spacing:-.02em;line-height:1.3}
.stg-p span{display:block;margin-top:6px;font-size:12.5px;color:var(--sub);line-height:1.6}
.stg-note{margin-top:auto;padding-top:clamp(12px,1.8vh,18px);border-top:1px dashed var(--line);
  display:flex;gap:11px;font-size:13px;color:var(--sub);line-height:1.65}
.stg-note .ic{flex:none;color:var(--red);font-size:15px;line-height:1.3}
.stg-note b{color:var(--ink)}
/* 合并后底部那行「另外两种」：把分类信息压成一句话，不另占一屏 */
.stg-alt{margin-top:clamp(12px,1.8vh,18px);padding-top:clamp(10px,1.6vh,15px);
  border-top:1px dashed var(--line);font-size:13px;color:var(--sub);line-height:1.7}
.stg-alt b{color:var(--ink);font-weight:800}
@media(max-width:820px){
  .stg{grid-template-columns:minmax(0,1fr)}
  .stg-side{flex-direction:row;overflow-x:auto;border-right:0;
    border-bottom:1px solid var(--line);scrollbar-width:none;-ms-overflow-style:none}
  .stg-side::-webkit-scrollbar{display:none}
  .stg-side button{flex:0 0 auto;white-space:nowrap;border-bottom:3px solid transparent;
    border-left:0;border-right:1px solid var(--line)}
  .stg-side button:last-child{border-right:0}
  .stg-side button.on{border-bottom-color:var(--red)}
  .stg-p{flex:0 0 128px}
}

/* ---------- 模板页 · 选人（两类七种 + 综合版）· 2026-10-29 ----------
   ⚠️ 一屏一段：综合版只留一行三句，域名树不进页面（展开必撑破）。
   ⚠️ 卡片是 <a>，点进去靠 hash 切上面那屏的版块，不跳独立场景页。 */
.pk2{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  margin-top:clamp(18px,2.6vh,30px);gap:clamp(12px,1.8vh,20px)}
.pk2-g{min-height:0}
.pk2-lab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:13px;font-weight:800;letter-spacing:.02em;margin:0 0 0;
  padding-bottom:7px;border-bottom:2px solid var(--ink)}
.pk2-lab em{font-style:normal;font-weight:400;font-size:12px;color:var(--sub);letter-spacing:0}
.pk2-row{display:grid;grid-template-columns:repeat(5,1fr);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.pk2-row.two{grid-template-columns:repeat(2,1fr)}
.pk2-c{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
  padding:clamp(11px,1.7vh,17px) clamp(11px,1.25vw,17px);
  border-right:1px solid var(--line);transition:background .18s ease}
.pk2-c:hover{background:var(--soft)}
.pk2-c b{font-size:clamp(14.5px,1.3vw,17.5px);font-weight:800;letter-spacing:-.02em}
.pk2-c i{display:block;margin-top:3px;font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;color:var(--red);font-weight:700}
.pk2-c span{display:block;margin-top:auto;padding-top:9px;font-size:12px;
  color:var(--sub);line-height:1.55}
.pk2-multi{border:1px solid var(--line);padding:clamp(11px,1.7vh,17px) clamp(13px,1.5vw,19px);
  display:grid;grid-template-columns:auto 1fr;gap:5px 16px;align-items:baseline}
.pk2-multi b{font-size:13.5px;font-weight:800}
.pk2-multi > span{font-size:12.5px;color:var(--sub)}
.pk2-multi ul{grid-column:1/-1;display:flex;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;
  margin:5px 0 0;padding:0;list-style:none}
.pk2-multi li{font-size:12.5px;color:var(--sub);position:relative;padding-left:12px}
.pk2-multi li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--red)}
@media(max-width:900px){
  .pk2-row{grid-template-columns:repeat(2,1fr)}
  .pk2-row .pk2-c:last-child{grid-column:1/-1}
  .pk2-multi{grid-template-columns:1fr}
  .pk2-c span{padding-top:6px}
}

/* ---------- ⑥ 常见问题：一问一答（问题当主角，答案压低变灰） ---------- */
/* ⭐ 不用「内容撑 + 底部留白」：三组各三条，长短不一，撑完屏底总空一块。
   桌面端让每条 li 用 flex:1 均分剩余高度、内容垂直居中 → 整屏是一块完整版面，
   而且换组、换字号都不用重新调数字。 */
.sp-qa{display:flex;flex-direction:column}
.sp-qa li{list-style:none;display:grid;align-content:center;
  grid-template-columns:clamp(44px,4.6vw,68px) 1fr;column-gap:clamp(14px,2.2vw,36px);
  padding:clamp(14px,2.6vh,30px) 0;border-bottom:1px solid var(--line)}
/* ⛔ 别写 var(--line2)：全站没定义这个变量，整条 border 声明会失效、线根本不出现 */
.sp-qa li:last-child{border-bottom:0}
.sp-qa .qn{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  color:var(--red);padding-top:7px}
.sp-qa h3{font-size:clamp(20px,2.15vw,30px);font-weight:800;letter-spacing:-.025em;
  line-height:1.32;max-width:26em}
.sp-qa p{margin-top:clamp(7px,1.2vh,13px);font-size:clamp(15px,1.14vw,17px);
  line-height:1.78;color:var(--sub);max-width:min(100%,46em)}

/* 矮屏（笔记本 1080×610，room≈545）：头部、行距、字号整体降一档才装得下。
   ⚠️ 不改就是每屏超 48px → fits() 全有或全无 → 整页一屏一段静默失效。 */
@media (min-width:961px) and (max-height:760px){
  .sp-main .sp-sec:has(.sp-qa) .sp-head{padding-bottom:10px;margin-bottom:12px}
  .sp-main .sp-sec:has(.sp-qa) .sp-head .note{margin-top:6px;font-size:14px;line-height:1.6}
  .sp-main .sp-sec:has(.sp-qa) .h2{font-size:clamp(26px,3vw,40px)}
  .sp-qa li{padding:clamp(8px,1.8vh,16px) 0}
  .sp-qa h3{font-size:clamp(18px,1.95vw,25px)}
  .sp-qa p{font-size:14.3px;line-height:1.7;margin-top:7px}
}

/* ---------- ⑤ 服务边界：两张卡 ---------- */
.sp-bound{padding:clamp(56px,7.6vh,92px) 0}
.sp-bound2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sp-bound2 > div{border:1px solid var(--ink);padding:26px 26px 30px}
.sp-bound2 > div:last-child{border-color:var(--line)}
.sp-bound2 h3{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;color:var(--ink)}
.sp-bound2 h3 .mk{width:9px;height:9px;flex:none}
.sp-bound2 .inc h3 .mk{background:var(--ink)}
.sp-bound2 .exc h3 .mk{border:1.5px solid var(--chip)}
.sp-bound2 ul{margin-top:20px}
.sp-bound2 li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.65}
.sp-bound2 li:first-child{border-top:0;padding-top:0}
.sp-bound2 .exc li{color:var(--sub)}

/* ---------- ⑥ CTA ---------- */
.sp-cta{padding:0}
.sp-cta .h2{max-width:18em}

/* ---------- 卡片滚到依次滑入（退路见 site.js 里那段注释） ---------- */
.anim-on .sp-lock li,.anim-on .sp-stage,.anim-on .sp-tb tr,
.anim-on .sp-pledge li,.anim-on .sp-bound2 > div{opacity:0;translate:0 22px}
.anim-on .sp-lock li.in,.anim-on .sp-stage.in,.anim-on .sp-tb tr.in,
.anim-on .sp-pledge li.in,.anim-on .sp-bound2 > div.in{
  animation:spCardIn .68s cubic-bezier(.22,.8,.24,1) both;
  animation-delay:calc(var(--i,0) * .07s)}
/* 关于归属 · 方案A（他 10-19 选 A）：未点亮时压到很淡，滚到就一条条亮起来 */
.anim-on .sp-pledge li{opacity:.16;translate:0 0}
.anim-on .sp-pledge li.in{animation-name:spLit}
@keyframes spLit{from{opacity:.16}to{opacity:1}}
@keyframes spCardIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
/* 归属三列 · 滚到一条条滑进来（2026-10-30 他嫌这屏「没动效、元素隔得太开」） */
.anim-on .sp-own3 li{opacity:0;translate:0 22px}
.anim-on .sp-own3 li.in{animation:spCardIn .62s cubic-bezier(.22,.8,.24,1) both;
  animation-delay:calc(var(--i,0) * .1s)}

/* ---------- 窄屏 ---------- */
@media(max-width:1080px){
  .sp-stage{padding-left:20px;padding-right:20px}
  .sp-tb tr{grid-template-columns:168px 1fr 1fr}
}
@media(max-width:960px){
  .sp-hero{padding-top:60px}
  .sp-lock ul{grid-template-columns:repeat(2,1fr);gap:10px}
  .sp-lock li{padding:14px 16px 16px}

  .sp-stages{grid-template-columns:1fr;gap:12px}
  .sp-stage{padding:26px 18px 28px}
  .sp-stage h3{margin-top:20px}
  .sp-tail{flex-wrap:wrap;gap:10px}
  .sp-tail .line{min-width:44px}

  /* 行卡：三列 → 上下堆叠（列头藏了，用行内小标签补回来） */
  .sp-tb tbody{gap:10px}
  .sp-tb tr{grid-template-columns:1fr}
  .sp-tb td{padding:14px 16px}
  .sp-tb td:first-child{border-right:0;border-bottom:1px solid var(--ink);padding:12px 16px}
  .sp-tb td:nth-child(2)::before{content:"你做 · ";font-family:var(--mono);font-size:10.5px;
    letter-spacing:.16em;color:var(--red);transition:color .24s ease}
  .sp-tb td:nth-child(3)::before{content:"我做 · ";font-family:var(--mono);font-size:10.5px;
    letter-spacing:.16em;color:var(--red);transition:color .24s ease}
  .sp-tb tr:hover td:first-child{border-bottom-color:var(--hair)}
  .sp-tb tr:hover td:nth-child(2)::before,.sp-tb tr:hover td:nth-child(3)::before{color:var(--red-lt)}

  .sp-pledge{grid-template-columns:1fr;gap:10px}
  .sp-pledge li{padding:18px}
  .sp-pledge li:last-child{grid-column:auto}

  /* 问答屏：序号换到问题上面一行，字号跟着屏高走（三条要塞进一屏） */
  .sp-qa li{grid-template-columns:1fr;row-gap:4px;padding:clamp(8px,1.5vh,18px) 0}
  .sp-qa .qn{padding-top:0}
  .sp-qa h3{font-size:clamp(17px,4.5vw,21px);line-height:1.34}
  .sp-qa p{margin-top:6px;font-size:clamp(13.8px,3.55vw,15px);line-height:1.7}

  .sp-bound2{grid-template-columns:1fr;gap:12px}
  .sp-bound2 > div{padding:22px 18px 24px}
}
@media(max-width:380px){
  .sp-lock ul{grid-template-columns:1fr}
  .sp-lock li{padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  .anim-on .sp-lock li,.anim-on .sp-stage,.anim-on .sp-tb tr,
  .anim-on .sp-pledge li,.anim-on .sp-bound2 > div{
    opacity:1!important;translate:none!important;animation:none!important}
}

/* ════════════════════════════════════════════════════════════
   服务页 · 一屏一段 + 动效（v4 · 2026-10-13 第四版）
   ⛔ 修复：tab 容器由 .sp-stage 改名 .sp-panewrap —— 旧类名撞上了基础段
      卡片的 .sp-stage:hover{background:var(--ink)} 规则，鼠标一悬停整块变黑（他截图抓到的 bug）
   ⛔ 修复：pane 由 absolute 叠放改流式切换 —— 叠放时内容超出 min-height 就溢出到黑块外面
   ⭐ 去框：三/四/五屏的黑框白框全部去掉改横线（他：从第三屏到第四屏很多黑框框，视觉疲劳）
   ⭐ 每屏都有动效：错峰滑入 / 逐条点亮 / hover 右移 / tab 轮播 / 打字机
   ⚠️ 防白屏：初始隐藏全写 .js 前缀（head 同步脚本加 .js；JS 没了内容直接显示）
   ════════════════════════════════════════════════════════════ */
/* 红字贴顶（向首页的 kick 看齐）+ 内容块在屏内均匀分布（他 10-19） */
.sp-main .sp-sec{padding:clamp(20px,2.6vh,30px) 0 clamp(18px,2.4vh,28px)}
/* ⛔ 红字要跟首页落在同一 X（他 10-18）：首页是「section 留白 + .rb-in 1280」
   ＝内容宽 1280；.wrap 默认 max-width 1280 却含 60 内边距 → 内容只有 1160、右移 60。
   这里把外层盒子放大 2×--pad，内容宽就回到 1280，左边缘与首页同一条竖线。 */
.sp-main .wrap{max-width:calc(1280px + var(--pad) * 2)}
.sp-main .sp-sec > .wrap{display:flex;flex-direction:column;
  justify-content:flex-start;flex:1}
/* ⛔ 不能用整页 space-between（他 10-19：「空间空的比较多」）——
   内容少的屏，余量会被摊到每一对相邻元素之间，中间撑出大洞。
   改成顶对齐，再按屏让「主内容块」自己吃掉余量。 */
@media (min-width:961px){
  .sp-main .sp-sec{min-height:calc(100dvh - var(--hdrm));box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:flex-start;overflow:clip;
    padding:clamp(20px,2.6vh,30px) 0 clamp(18px,2.4vh,28px)}
}
.sp-sec > .wrap{width:100%}
.sp-sec .sp-head{padding-bottom:clamp(12px,2vh,20px);margin-bottom:clamp(14px,2.8vh,34px)}
.sp-sec .sp-head .note{margin-top:10px;max-width:800px}

/* CTA 收口屏（最后一个 .sp-sec）：内容少，居中 + 大字撑满
   ⛔ 顶部对齐（justify-content:flex-start）对内容多的屏好，但收口屏就一句标题+俩按钮，
      会空到左上角（他 10-14 报「第六屏空洞、堆左上角」）。收口屏单独垂直居中。 */
.sp-main .sp-sec:last-child{justify-content:center}
/* 屏级配平：表格屏整块居中；边界屏文字上提并铺开；三阶段屏内容吃掉余量后居中。
   ⚠️ 用 :has() 认屏——不加新类名，生成脚本不用动；老浏览器不支持时退回顶对齐。 */
@media (min-width:961px){
  .sp-main .sp-sec:has(.sp-split) > .wrap{justify-content:center}
  /* 问答屏：三条按内容紧凑排、整块垂直居中。
     ⛔ 不要 li{flex:1} 均分 —— 每条被拉到 215px 高，内容只占一半，
        看着像三块孤立的字浮在空白里（他 10-19 反复说的「空得比较多」）。 */
  .sp-main .sp-sec:has(.sp-qa) > .wrap{justify-content:center}
  /* 联系页信箱屏：只有一个大邮箱 + 三行，整块居中（不然底下空 300+） */
  .sp-main .sp-sec:has(.ct-mail) > .wrap{justify-content:center}
  .sp-main .sp-sec:has(.sp-bound2) > .wrap{justify-content:flex-start}
  .sp-main .sp-sec:has(.sp-pledge) > .wrap{justify-content:center}
  .sp-main .sp-sec:has(.sp-bound2) .sp-bound2{flex:1}
  .sp-main .sp-sec:has(.sp-bound2) .sp-bound2 > div{display:flex;flex-direction:column}
  /* ⛔ 不要 space-between：两栏条数不同（8 / 5），各摊各的会让左右横线错位 */
  .sp-main .sp-sec:has(.sp-bound2) .sp-bound2 ul{margin-top:clamp(8px,1.6vh,16px)}
  .sp-main .sp-sec:has(.sp-panewrap):not(.tp7-sec) .sp-panewrap{flex:1;display:flex;
    flex-direction:column;justify-content:center}
  /* 三阶段屏：标题下沿到 tab 之间原来有 80 多 px 空气（他 10-19：「空的比较多」），收窄 */
  .sp-main .sp-sec:has(.sp-tabs) .sp-head{margin-bottom:clamp(14px,2vh,22px)}
  .sp-main .sp-sec:has(.sp-tabs) > .wrap > .sp-tabs{margin-top:clamp(4px,0.8vh,10px)}
}
.sp-main .sp-sec:last-child .wrap{text-align:center;justify-content:center;
  gap:clamp(26px,4vh,46px)}
.sp-main .sp-sec:last-child .kick,.sp-main .sp-sec:last-child .h2,
.sp-main .sp-sec:last-child .kick,.sp-main .sp-sec:last-child .h2,
.sp-main .sp-sec:last-child .note{margin:0}
/* ⛔ lede 不能写 margin:0 —— 那会把 .tp-cta .lede 的 auto 左右边距一起干掉，整块贴左不居中 */
.sp-main .sp-sec:last-child .lede{margin:0 auto}
/* 收口屏的小字按整句断行（他 10-19：末行只剩「案。」，排版错乱） */
.sp-main .sp-sec:last-child .lede,.sp-main .sp-sec:last-child .note{text-wrap:balance}
.sp-main .sp-sec:last-child .h2{font-size:clamp(32px,4.6vw,64px);line-height:1.15;max-width:none}
.sp-main .sp-sec:last-child .btnrow{justify-content:center;margin-top:0}

/* 错峰入场 */
.js .rise{opacity:0;translate:0 24px;
  transition:opacity .7s cubic-bezier(.22,.8,.24,1),translate .7s cubic-bezier(.22,.8,.24,1)}
.js .rise.on{opacity:1;translate:0 0}

/* 打字机 */
h1.type{min-height:2.35em}
.type .caret{display:inline-block;width:2px;height:.92em;background:var(--red);
  margin-left:4px;vertical-align:-.1em;animation:caret 1s steps(1) infinite}
.type .red{color:var(--red)}
@keyframes caret{50%{opacity:0}}

/* ① 首屏四格：逐个点亮 + hover 反黑 */
.sp-own{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(26px,4.4vh,52px);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.sp-own li{list-style:none;position:relative;padding:clamp(15px,2.4vh,28px) clamp(14px,1.8vw,26px);
  font-size:clamp(15px,1.5vw,21px);font-weight:700;letter-spacing:-.02em;
  transition:background .22s,color .22s}
.sp-own li+li{border-left:1px solid var(--line)}
/* ⛔ 红点原来绝对定位在 padding-left 上，正好压在「01」上面（他 10-19 抓到的）。
   现在：红点留在最左，编号右移 17px 让位 —— 变成「▪ 01」并排，文字另起一行。 */
.sp-own .dot{position:absolute;left:clamp(14px,1.8vw,26px);
  top:calc(clamp(15px,2.4vh,28px) + 3px);
  width:8px;height:8px;background:var(--red);opacity:0;scale:.4;transition:opacity .3s,scale .3s}
.sp-own li.on .dot{opacity:1;scale:1}
.sp-own li:hover{background:var(--ink);color:#fff}
.sp-own b{display:block;font-size:11px;letter-spacing:.2em;color:var(--mut);font-weight:400;
  margin-bottom:6px;margin-left:17px}
.sp-own li:hover b{color:#9C978E}

/* ② 三阶段 tab（容器已改名，别再用 .sp-stage） */
.sp-tabs{display:flex;border-bottom:2px solid var(--ink);margin-top:clamp(20px,3.2vh,36px)}
.sp-tabs button{flex:1;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
  font-size:clamp(15px,1.5vw,20px);font-weight:700;color:var(--mut);
  padding:clamp(11px,1.8vh,16px) clamp(12px,1.6vw,24px);position:relative;transition:color .25s}
.sp-tabs button .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--red);margin-right:8px}
/* ⛔ 选中态只用红字，不再压一条红横线（他 10-19：「横线比较多，选中的字变红就行」） */
.sp-tabs button.on{color:var(--red)}
.sp-tabs button:hover{background:var(--ink);color:#fff}
.sp-tabs button:hover .n{color:var(--red-lt)}
/* ⭐ 那条线就是「时间流走的线」（他 10-19）：红条正好压在 tabs 的 2px 底边上，
   3.6 秒从左走到右（走完换下一个版块），不再另起一条线。 */
.sp-progress{display:block;height:2px;margin-top:-2px;background:transparent;
  overflow:hidden;position:relative;z-index:2}
.sp-progress i{display:block;height:100%;background:var(--red);width:0}
.sp-progress.run i{animation:pg 3.6s linear forwards}
@keyframes pg{from{width:0}to{width:100%}}
.sp-panewrap{margin-top:clamp(16px,2.6vh,28px)}
.js .sp-pane{display:none}
.sp-pane.on{display:block;animation:paneIn .55s cubic-bezier(.22,.8,.24,1) both}
@keyframes paneIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.sp-pane h3{font-family:"Songti SC","STSong","SimSun",serif;font-weight:400;
  font-size:clamp(24px,3vw,40px);letter-spacing:.02em}
.sp-pane .dur{font-size:12.5px;letter-spacing:.24em;color:var(--mut);margin-top:6px}
.sp-pane ul{list-style:none;margin-top:14px}
.sp-sec .sp-pane li{padding:clamp(6px,1.55vh,19px) 0}
.sp-pane li{padding:8px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,26%) minmax(0,1fr);gap:16px}
.sp-pane li:first-child{border-top:0}
.sp-pane li b{font-size:16px;letter-spacing:-.01em}
.sp-pane li span{font-size:14.5px;color:#4A473F;line-height:1.65}

/* ③ 你做 / 我做：去框改横线，hover 反黑 + 整行右移 */
/* 顶线全去掉（他 10-19：一屏三条横线太多，只留标题下面那根） */
.sp-split{margin-top:clamp(14px,2.2vh,26px)}
.sp-split .row{display:grid;grid-template-columns:minmax(0,20%) 1fr 1fr;
  border-bottom:1px solid var(--line);
  transition:background .2s ease,color .2s ease,padding-left .25s cubic-bezier(.22,.8,.24,1)}
.sp-split .row>div{padding:clamp(8px,1.9vh,22px) clamp(12px,1.6vw,22px)}
.sp-split .row>div+div{border-left:1px solid var(--line2)}
.sp-split .row i{font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;color:var(--red);margin-right:12px}
.sp-split .row b{font-weight:700}
.sp-split .row span{color:var(--mut);font-size:13.5px;transition:color .2s}
.sp-split .row:hover{background:var(--ink);color:#fff;padding-left:clamp(20px,2.4vw,38px)}
.sp-split .row:hover span{color:#C8C4BC}
.sp-split .row:hover i{color:var(--red-lt)}
.sp-split .row:hover>div+div{border-left-color:var(--hair)}

/* ④ 关于归属：去白框改横线，逐条错峰滑入（li 自带 .rise） */
.sp-sec .sp-pledge{grid-template-columns:1fr;gap:0;margin-top:clamp(18px,3vh,34px)}
.sp-sec .sp-pledge li{border:0;border-bottom:1px solid var(--hair);
  padding:clamp(13px,2vh,22px) 0;font-size:clamp(16px,1.7vw,24px);font-weight:700;
  letter-spacing:-.015em;display:flex;align-items:baseline;gap:14px;
  transition:background .22s,color .22s,padding-left .25s cubic-bezier(.22,.8,.24,1)}
.sp-sec .sp-pledge li::before{content:"";flex:none;width:8px;height:8px;background:var(--red);
  transform:scale(.2);opacity:.3;
  transition:transform .45s cubic-bezier(.22,.8,.24,1),opacity .45s}
.sp-sec .sp-pledge li.in::before{transform:scale(1);opacity:1}
/* 悬停：整行反白（深底屏上白底黑字最跳） */
.sp-sec .sp-pledge li:hover{background:#fff;color:var(--ink);padding-left:14px}
.sp-sec .sp-pledge li:nth-child(2){transition-delay:.09s}
.sp-sec .sp-pledge li:nth-child(3){transition-delay:.18s}
.sp-sec .sp-pledge li:nth-child(4){transition-delay:.27s}
.sp-sec .sp-pledge li:nth-child(5){transition-delay:.36s}
.sp-sec .sp-punch{margin-top:clamp(22px,3.4vh,44px);font-size:clamp(21px,2.3vw,34px)}

/* ⑤ 服务边界：去框改横线（报纸式：标题上粗线，条目下细线） */
.sp-sec .sp-bound2{gap:clamp(22px,3.4vw,52px)}
/* ⛔ 两栏顶线去掉（他 10-19：「只保留一根横线」），靠栏间距和留白分栏 */
.sp-sec .sp-bound2 > div{border:0}
/* 桌面才收掉栏内留白（手机两栏叠成一列，靠 padding 分开，不能收） */
@media (min-width:961px){.sp-sec .sp-bound2 > div{padding:0}}
.sp-sec .sp-bound2 ul{margin-top:12px}
.sp-sec .sp-bound2 li{padding:clamp(4px,1.35vh,18px) 0;border-bottom:1px solid var(--line2);
  font-size:15.5px;line-height:1.5;transition:padding-left .2s,color .2s}
.sp-sec .sp-bound2 li:last-child{border-bottom:0}
.sp-sec .sp-bound2 li:hover{padding-left:10px;color:var(--red)}

@media (max-width:960px){
  /* 首屏：原来内容全挤在上半屏，下面空 300px（他 10-19）。
     整块垂直居中再往上抬一点 → 上面 120 左右、下面 200 左右，看着还是偏上。
     ⚠️ 服务页和模板页用同一套数值，四格才落在同一坐标。 */
  /* ⛔ 居中必须写在 .wrap 上：.sp-sec > .wrap 是 flex:1 会撑满整屏，
     在 section 上写 justify-content 完全没反应（他 10-19 报的「内容全挤在上半屏」就是这个） */
  .sp-main .sp-sec:first-child > .wrap{justify-content:space-between;width:100%;
    padding-top:clamp(44px,7vh,104px);padding-bottom:clamp(42px,8vh,120px)}
  .sp-own{margin-top:clamp(34px,6vh,56px)}
  /* 三阶段屏 4 行条目：手机端行距再收一档，4 行才装得进一屏 */
  .sp-sec .sp-pane li{padding:clamp(5px,1.32vh,14px) 0}
  /* 三阶段屏 4 行条目：手机端行距再收一档，4 行才装得进一屏 */
  .sp-sec .sp-pane li{padding:clamp(5px,1.32vh,14px) 0}
  .sp-own{grid-template-columns:repeat(2,1fr)}
  .sp-own li:nth-child(3){border-left:0;border-top:1px solid var(--line)}
  .sp-own li:nth-child(4){border-top:1px solid var(--line)}
  .sp-pane li{grid-template-columns:1fr;gap:3px}

  /* ⭐ 服务页手机端一屏一段（他 10-14：滑一下就是一页）
     桌面靠 JS 接管滚轮；手机没有滚轮 → 改用 CSS scroll-snap，触摸滑一下吸附一屏。
     scroll-margin-top=--hdrm：吸附后每屏顶对齐报头下缘（首屏吸附点=0=页顶）。
     ⛔ 2026-10-30 我一度把它改成 proximity + 去掉 min-height，结果把整个服务页的
        一屏一段全搞乱了（他：「越改越乱」）。已原样恢复 —— 这条是全站规则，别动。 */
  html:has(.sp-main){scroll-snap-type:y mandatory}
  .sp-main .sp-sec{scroll-snap-align:start;scroll-margin-top:var(--hdrm);
    min-height:calc(100dvh - var(--hdrm) - var(--tabh));box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:clamp(30px,6vh,42px) 0 clamp(20px,4vh,28px)}
  .sp-sec > .wrap{width:100%}
  html:has(.sp-main) .ftr{scroll-snap-align:end}

  /* 各屏：字号/间距放宽，内容填满一屏（他 10-14：前四屏下面空一大截，只用了上面） */
  .sp-main .sp-sec .sp-head{padding-bottom:18px;margin-bottom:22px}
  .sp-main .sp-sec .h2{font-size:clamp(22px,6.4vw,30px)}
  .sp-main .sp-sec .kick{font-size:11px}
  .sp-main .sp-sec .note{font-size:13.5px;margin-top:10px;line-height:1.6}
  /* CTA 收口屏 h2 单独大一号（居中大字，别跟其它屏一样缩） */
  .sp-main .sp-sec:last-child .h2{font-size:clamp(26px,7.4vw,38px)}
  /* 首屏（开场）也居中 —— 和收口屏一样是「标语型」，内容少，顶部对齐会空上半屏（他 10-14） */
  .sp-main .sp-sec:first-child{justify-content:center}
  .sp-main .sp-sec:first-child .wrap{text-align:center}
  .sp-main .sp-sec:first-child .sp-own{text-align:left}

  /* ① 首屏：主标题大字 + 四格放大（这屏原来最空） */
  .sp-main .sp-sec .h1{font-size:clamp(28px,9vw,42px);line-height:1.12}
  .sp-main .sp-sec .lede{font-size:14px;line-height:1.7;margin-top:14px}
  .sp-own{margin-top:26px}
  .sp-own li{padding:20px 14px;font-size:17px}
  .sp-own b{font-size:10px;margin-bottom:6px;margin-left:16px}
  /* 手机 li 的 padding-top 固定 20，红点跟着它走（别用桌面的 vh 表达式） */
  .sp-own .dot{left:14px;top:23px}

  /* ② 三阶段 tab + pane */
  .sp-tabs{margin-top:18px}
  .sp-tabs button{font-size:15px;padding:12px 10px}
  .sp-tabs button .n{font-size:10px;margin-right:6px}
  .sp-panewrap{margin-top:16px}
  .sp-pane h3{font-size:26px}
  .sp-pane .dur{font-size:11px;margin-top:5px}
  .sp-pane ul{margin-top:12px}
  .sp-pane li{padding:8px 0;gap:4px}
  .sp-pane li b{font-size:15px}
  .sp-pane li span{font-size:13.5px;line-height:1.6}

  /* ③ 你做/我做：横排三列（单列 6 行会堆两屏；纯文本节点必须显式设字号） */
  .sp-split{margin-top:16px}
  .sp-split .row{grid-template-columns:minmax(0,22%) 1fr 1fr}
  .sp-split .row>div{padding:clamp(8px,1.72vh,16px) 10px;font-size:13px;line-height:1.5}
  /* 模板页那张只有 3 行，得再松一档才不至于底下空一大片 */
  .sp-split.tp7 .row>div{padding:clamp(10px,2.6vh,22px) 10px}
  .sp-split .row>div+div{border-left:1px solid var(--line2);border-top:0}
  .sp-split .row b{font-size:14px}
  .sp-split .row i{font-size:9px;margin-right:6px}

  /* ④ 关于归属 */
  .sp-sec .sp-pledge{margin-top:18px}
  .sp-sec .sp-pledge li{padding:14px 0;font-size:17px;gap:12px}
  .sp-sec .sp-punch{margin-top:22px;font-size:21px}

  /* ⑤ 服务边界 */
  .sp-sec .sp-bound2{gap:15px}
  .sp-sec .sp-bound2 > div{padding:13px 0 0}
  .sp-sec .sp-bound2 ul{margin-top:8px}
  /* 13 条要在一屏内塞下：字号 13→14 看得清，空间从头部和高低留白里匀出来 */
  .sp-sec .sp-bound2 li{padding:clamp(3px,.56vh,5px) 0;font-size:clamp(13px,1.66vh,14px);line-height:1.34}
  .sp-sec .sp-bound2 h3{margin-bottom:0}
  .sp-sec .sp-bound2 > div{padding:6px 0 0}
  .sp-main .sp-sec:has(.sp-bound2) .sp-head{margin-bottom:16px}
  .sp-main .sp-sec:has(.sp-bound2){padding-top:36px}
}


/* ════════════════════════════════════════════════════════════
   模板页 · 第二屏「展厅」版式（2026-10-18 三轮 —— 他要求这一屏单独重构）
   字只占上下两条：上＝红字+说明+tab，下＝版块名+状态；中间整块留给两个窗口。
   ⛔ 窗口高度 = min(屏高反算, 宽度反算)：1440 宽并排时高度由宽度定（约 590），
      屏再高也不放大 —— 先定窗口，再把字塞进剩下的空当。
   ════════════════════════════════════════════════════════════ */

/* 这一屏专门放窗口，容器比别的屏宽一档（他 10-18：电脑窗口再大些） */
/* 这一屏跟正文同一栏 —— 红字才和别的屏同一条竖线 */

/* 上条 */
.tp7-top{display:flex;align-items:baseline;justify-content:space-between;gap:26px;
  border-bottom:2px solid var(--ink);padding-bottom:10px}
.tp7-note{font-size:13px;color:var(--mut);line-height:1.5;text-align:right}
.sp-tabs.tp7{margin-top:0;border-bottom-width:2px}

/* 左栏：版块名 + 状态 + 一句话（他 10-18：底部那行挪到两个窗口左边）
   竖窄列 → 字号收一档，四个字的版块名（我的家人/我的朋友）也能一行放下 */
.tp7-rail{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.tp7-rail b{font-family:"Songti SC","STSong","SimSun",serif;font-weight:700;
  font-size:clamp(21px,2.3vw,32px);line-height:1.15;letter-spacing:.01em;white-space:nowrap}
.tp7-rail span{font-size:11px;letter-spacing:.14em;color:var(--red)}
.tp7-rail em{font-style:normal;font-size:13px;line-height:1.6;color:var(--sub)}
.tp7-tag{position:absolute;left:0;right:0;bottom:-21px;text-align:center;
  font-size:11px;letter-spacing:.12em;color:var(--mut)}

/* 窗口中庭 —— 高度取「屏高反算」与「宽度反算」的较小值：
   ① 屏高：扣掉报头 + 上条/tab/内边距/标签等固定占用（实测约 179，留 240 保险）
   ② 宽度：扣掉 wrap 内边距 + 左栏 + 栏间距 + 窗口间距，再除以 1.9774
      （1.6 电脑宽高比 + 0.82×0.4602 手机宽高比）；
      左栏改成竖排后宽度收回来了，窗口能比之前大一圈 */
.tp7-stage{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(18px,2.4vw,34px);margin-top:clamp(12px,2.2vh,24px);margin-bottom:22px;
  height:min(calc(100dvh - var(--hdrm) - 240px),
             calc((min(1280px, 100vw - var(--pad) * 2) - var(--railw) - var(--railgap) - 50px) / 2.0602))}
.tp7-win[data-dev]{position:relative;cursor:pointer;
  transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.tp7-win[data-dev]:hover{transform:translateY(-4px)}
.tp7-win[data-dev]:focus-visible{outline:3px solid var(--red);outline-offset:4px}
/* 整卡可点 + 灰色遮罩：iframe 会吃掉点击（点进去是在演示页里），铺一层接住；
   悬停时这层同时变灰，把中间的两个按钮托出来 */
.tp7-win[data-dev]::before{content:"";position:absolute;inset:0;z-index:3;border-radius:14px;
  background:rgba(18,16,14,0);transition:background .22s ease}
.tp7-win[data-dev]:hover::before,.tp7-win[data-dev]:focus-within::before{
  background:rgba(18,16,14,.34)}
/* ⛔ 不能用 flex:1：会被拉成舞台的均分宽度，跟里面 iframe 的实际宽度差 4px（内容被切） */
.tp7-win.pc{height:100%;display:flex;flex:none}
.tp7-win.pc .frame{flex:1;display:flex;flex-direction:column}
.tp7-win.pc .vp{position:relative;flex:1;overflow:hidden;background:#fff}
.tp7-win.pc .vp iframe{position:absolute;left:0;top:0;width:1440px;height:900px;
  border:0;background:#fff;transform-origin:0 0}

/* 每个窗口自己的一对按钮：两个独立胶囊，贴窗口正中；窗口加灰色遮罩把按钮托出来
   （桌面：悬停/聚焦才出现，平时看窗；手机没有 hover，常驻） */
.tp7-acts{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:flex;flex-direction:column;gap:10px;opacity:0;pointer-events:none;
  transition:opacity .22s ease}
.tp7-win[data-dev]:hover .tp7-acts,.tp7-win[data-dev]:focus-within .tp7-acts{
  opacity:1;pointer-events:auto}
.tp7-act{display:block;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:#fff;border:0;border-radius:999px;padding:11px 20px;
  cursor:pointer;text-decoration:none;white-space:nowrap;text-align:center;
  box-shadow:0 10px 24px rgba(20,18,14,.22);transition:color .18s,transform .18s}
.tp7-act:hover{color:var(--red);transform:translateY(-1px)}
.tp7-win.ph .tp7-acts{padding:9px 12px;border-radius:12px}
.tp7-win.ph .tp7-act{font-size:11.5px;padding:4px 0}

/* 手机窗口：iPhone 外壳（深色边框 + 大圆角 + 灵动岛） */
.tp7-win.ph{height:100%;display:flex;flex:none}
.phone{position:relative;height:100%;display:flex;box-sizing:border-box;
  background:#141416;border-radius:clamp(20px,2.4vw,46px);padding:clamp(3px,.45vw,7px);
  box-shadow:0 22px 50px rgba(20,18,14,.2),0 2px 6px rgba(20,18,14,.08)}
.phone .pv{position:relative;flex:1;overflow:hidden;background:#fff;
  border-radius:clamp(14px,1.8vw,34px)}
.phone .pv iframe{position:absolute;left:0;top:0;width:440px;height:956px;
  border:0;background:#fff;transform-origin:0 0}
.phone .isl{position:absolute;top:calc(clamp(3px,.45vw,7px) + 9px);left:50%;
  transform:translateX(-50%);width:32%;height:2.2%;min-height:7px;
  background:#000;border-radius:999px;pointer-events:none}

/* 桌面：左栏（版块名/状态/一句话）+ 右边两个窗口
   ⛔⛔ 必须写成 `.tp7-sec .sp-pane.on`（(0,3,0)）——
      全局 `.sp-pane.on{display:block}` 是 (0,2,0)，单类 `.sp-pane` 的 grid 压不过它，
      左栏会一直占满整行、把两个窗口挤到下一行。不报错，只有量宽度才看得出。 */
.tp7-sec{--railw:clamp(132px,11vw,190px);--railgap:clamp(16px,2vw,34px)}
.tp7-sec .sp-pane.on{display:grid;grid-template-columns:var(--railw) minmax(0,1fr);
  column-gap:var(--railgap);align-items:end}
/* 左栏文字底边与窗口底边齐平（stage 有 22px 下边距留给标签） */
.tp7-sec .tp7-rail{padding-bottom:22px}
.tp7-stage{order:1}
.tp7-rail{order:0}

/* 下条：版块名 + 状态 + 一句话（一行） */
.tp7-cap{display:flex;align-items:baseline;gap:18px;
  margin-top:clamp(12px,2vh,20px);border-top:2px solid var(--ink);padding-top:11px}
.tp7-cap b{font-family:"Songti SC","STSong","SimSun",serif;font-weight:400;
  font-size:clamp(23px,2.5vw,32px);letter-spacing:.01em;white-space:nowrap}
.tp7-cap span{font-size:13px;color:var(--sub);line-height:1.6}
.tp7-cap em{font-style:normal;color:var(--mut)}

/* 筹备中：一个占位窗口，跟中庭同高 */
.frame.tp7-soon{display:flex;flex-direction:column;height:100%;width:100%}
.tp7-soon .soon{flex:1;height:auto}

/* 第三屏「怎么挑」：三行对照 + 一句收口（只放大桌面端） */
@media (min-width:961px){
  .sp-main .sp-sec .sp-split.tp7 .row>div{padding-top:clamp(16px,2.6vh,26px);
    padding-bottom:clamp(16px,2.6vh,26px)}
  .sp-main .sp-sec .sp-split.tp7 .row b{font-size:17px}
  .sp-main .sp-sec .sp-split.tp7 .row span{font-size:14.5px}
}
.tp7-punch{margin-top:clamp(24px,3.6vh,40px);font-size:clamp(19px,2vw,28px);
  font-weight:800;letter-spacing:-.015em}
.tp7-punch::before{content:"";display:inline-block;width:8px;height:8px;
  background:var(--red);margin-right:12px}

/* ⛔ 只修模板页 CTA 的 lede（服务页 CTA 没有 lede，用 .tp-cta 隔离，不动服务页） */
.tp-cta .lede{margin-left:auto;margin-right:auto}

@media (max-width:960px){
  /* 屏 A：上条 + tab + 电脑窗口（窗口靠下，上面的空当拉开文案距离 —— 他 10-18）
     屏 B：手机窗口（套 iPhone 外壳）独占一屏。
     ⛔ 用 display:contents 把中庭骨架拆掉，让两个窗口各自成为一个流内块 ——
        否则手机窗口会把 stage 撑高，电脑窗口就推不到屏 A 的底部（实测卡在顶部）。 */
  .tp7-sec .wrap{display:flex;flex-direction:column;max-width:none;
    min-height:calc(100dvh - var(--hdrm) - var(--tabh) - 50px)}
  .sp-panewrap{display:flex;flex-direction:column;flex:1}
  /* ⛔ 手机端也要带 .tp7-sec（桌面那条是 (0,3,0)，单靠 .sp-pane.on 压不回来） */
  /* ⛔⛔ 这里只能写 .on —— 写成 `.tp7-sec .sp-pane`（(0,3,0)）会盖掉全局
     `.js .sp-pane{display:none}`（(0,2,0)），7 套模板会全部摊在手机端（他 10-19 报的灾难） */
  .tp7-sec .sp-pane.on{display:flex;flex-direction:column;align-items:stretch;flex:1}
  .tp7-sec .tp7-rail{padding-bottom:0}
  .tp7-stage{display:contents}
  .tp7-note{display:none}
  .tp7-top{border-bottom:0;padding-bottom:0}
  .sp-tabs.tp7{margin-top:12px}
  /* 屏 A 顺序：说明（版块名+状态）→ 电脑窗口 → 屏 B 手机窗口
     （他 10-18：说明放上面，就在电脑窗口上面） */
  .sp-pane.on .tp7-rail{order:1;margin-top:0;gap:4px}
  .sp-pane.on .tp7-win.pc{order:2}
  .sp-pane.on .tp7-win.ph{order:3}
  /* 手机没有 hover：按钮常驻，但**从窗口正中挪到窗口下面** ——
     浮在中间会盖住演示内容（他 10-30 那两张图里，按钮正压在头像和森林图上）。
     桌面还是悬停中间那种，不动。 */
  .tp7-win[data-dev]::before{display:none}
  .tp7-acts{position:static;left:auto;top:auto;transform:none;
    flex-direction:row;justify-content:center;gap:8px;
    margin-top:10px;opacity:1;pointer-events:auto}
  .tp7-act{padding:7px 16px;font-size:11.5px;box-shadow:none;
    border:1px solid var(--line);background:#fff}
  .tp7-win.ph .tp7-acts{padding:0;border-radius:0}
  .tp7-win.pc{padding:0;height:auto;display:block}
  .tp7-win.pc .frame{display:block}
  /* 屏 A 要填满一整屏：原来电脑窗口 16:10 只有 233 高，底部空出 130 多，
     滑下来先撞一片空白再进屏 B，就是「不顺畅」的感觉。改成 4:3 把这段吃掉。 */
  .tp7-win.pc .vp{height:auto;aspect-ratio:4/3}
  .tp7-win.ph{min-height:calc(100dvh - var(--hdrm) - var(--tabh) - 10px);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    scroll-snap-align:start;scroll-margin-top:var(--hdrm);padding:16px 0;height:auto}
  .phone{height:calc(100dvh - var(--hdrm) - var(--tabh) - 130px);width:auto}
  .tp7-rail b{font-size:22px}
  .tp7-rail em{font-size:12px}
  .tp7-tag{position:static;font-size:11px;margin:10px 0 0;display:block;
    width:100%;text-align:center;left:auto;right:auto;bottom:auto}
  .frame.tp7-soon{height:calc(100dvh - var(--hdrm) - var(--tabh) - 300px);width:100%}
  /* 七个 tab 装不下七个名字 → 只留编号，名字在下条 */
  .sp-tabs.tp7 button{text-align:center;padding:12px 4px}
  .sp-tabs.tp7 button .n{margin-right:0}
  .sp-tabs.tp7 button .t{display:none}
  .tp7-punch{font-size:18px;margin-top:24px}
}

/* ── 手机端小屏兜底（375×812 / 360×780 这类，内容天然更长）——
   按屏高再收两档行距，保证每屏还是装得进一屏（不然一屏一段会露出半截） */
@media (max-width:960px) and (max-height:820px){
  .sp-sec .sp-pane li{padding:6px 0}
  .sp-sec .sp-split .row>div{padding:8px 10px}
  .sp-main .sp-sec .sp-head{margin-bottom:12px}
  .sp-sec .sp-bound2 li{padding:4px 0}
}
@media (max-width:960px) and (max-height:800px){
  .sp-sec .sp-pane li{padding:4px 0}
  .sp-sec .sp-split .row>div{padding:6px 10px}
  .sp-sec .sp-bound2 li{padding:3px 0}
}

/* 手机矮屏（375×812 / 360×780）：问答三组各超 8~10px，行距再收一档 */
@media (max-width:960px) and (max-height:820px){
  .sp-qa li{padding:8px 0}
  .sp-qa h3{font-size:16.5px}
  .sp-qa p{font-size:13.5px;line-height:1.66}
}


/* ════════════════════════════════════════════════════════════
   首屏位置（2026-10-18 他：格子往下一点、上下平衡；服务页与模板页的格子同一坐标）
   ① 桌面端首屏内容整体垂直居中（原来顶对齐 → 上面重下面空）
   ② lede 钉成两行高 —— 两页首屏内容总高相等，居中后四格落在同一 Y
      （服务页 lede 只有一行，不钉高的话两页格子会差一行）
   ⛔ 手机端首屏本来就是居中的，这条只是把 lede 一起钉高，让两页格子也对齐
   ════════════════════════════════════════════════════════════ */
@media (min-width:961px){
  /* 上下留白 4:6（他 10-18：整体往上抬，上面留白少一点）——
     用 grid 三行 4fr/auto/6fr 精确分比例，比调 padding 猜稳 */
  .sp-main .sp-sec:first-child{display:grid;grid-template-rows:4fr auto 6fr;
    justify-content:initial;align-content:stretch;padding-top:0;padding-bottom:0}
  .sp-main .sp-sec:first-child::before,.sp-main .sp-sec:first-child::after{
    content:"";display:block;grid-column:1}
  .sp-main .sp-sec:first-child .wrap{grid-row:2}
}
.sp-main .sp-sec:first-child .lede{min-height:3.5em}

/* ════════════════════════════════════════════════════════════
   模板页 · 预览弹窗（2026-10-18 他：点窗口 → 80% 屏幕的弹窗，沉浸看模板）
   电脑版：iframe 按弹窗真实宽度渲染（不缩放，能真滚真点）
   手机版：手机壳居中，iframe 按壳高反算 scale
   ════════════════════════════════════════════════════════════ */
.tp7-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:rgba(12,11,10,.74)}
.tp7-modal[hidden]{display:none}
.m-box{width:95vw;height:95vh;background:#fff;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 40px 120px rgba(0,0,0,.45)}
.m-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;border-bottom:2px solid var(--ink);flex:none}
.m-bar b{font-size:13px;letter-spacing:.06em}
.m-act{display:flex;align-items:center;gap:16px}
.m-open{font-size:13px;font-weight:700;border-bottom:2px solid var(--red);text-decoration:none}
.m-close{background:none;border:0;font:inherit;font-size:13px;cursor:pointer;
  letter-spacing:.06em;color:var(--ink)}
.m-close:hover{color:var(--red)}
.m-body{flex:1;position:relative;overflow:hidden;background:#fff}
.m-body iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.m-body.ph{display:flex;align-items:center;justify-content:center;background:var(--soft)}
.m-body.ph .phone{height:calc(100% - 40px);width:auto}
.m-body.ph .pv iframe{position:absolute;left:0;top:0;width:440px;height:956px;
  border:0;background:#fff;transform-origin:0 0}
@media (max-width:960px){
  .m-box{width:96vw;height:93vh;border-radius:14px}
  .m-bar{padding:11px 13px}
  .m-body.ph .phone{height:calc(100% - 24px)}
}

/* ============================================================
   ========== 客服 ==========
   全站右下角客服面板。2026-10-29 从首页内联搬到这里 ——
   因为服务页、模板页、场景页都要挂同一份，写在首页里没法复用。
   ⚠️ 页面加载绝不自动弹出：默认 opacity:0 + pointer-events:none，只有点「问」才加 .on。
   ⚠️ .on-dark 由 site.js 的 tone() 加，跟页眉同一套判据（压在深底上就白底黑字）。
   ============================================================ */
/* ===== 客服 · 只在你点的时候出现，页面加载绝不自动弹 ===== */
.cs-btn{position:fixed;right:24px;bottom:calc(24px + var(--tabh, 0px) + env(safe-area-inset-bottom));width:52px;height:52px;background:var(--ink);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;transition:background .18s,transform .18s;padding:0}
.cs-btn:hover{background:var(--red);transform:translateY(-2px)}
.cs-btn.on{background:var(--red)}
/* 压在深底上 → 白底黑字，跟页眉同一套判据（.on-dark 由 site.js 加） */
.cs-btn.on-dark{background:#fff;color:var(--ink)}
.cs-btn.on-dark:hover{background:var(--red);color:#fff}
/* 页面里的「直接说一句」引导（.js-open-cs）—— 点了开面板，不用自己去找右下角。
   ⚠️ 深底屏要单独一套颜色，否则 var(--ink) 在黑底上等于没有。 */
.cs-hint{margin-top:clamp(14px,2vh,20px);font-size:13.5px;line-height:1.75;color:var(--sub)}
.dark .cs-hint{color:var(--dim)}
.cs-hint a{color:var(--ink);text-decoration:none;cursor:pointer;
  border-bottom:2px solid var(--red);padding-bottom:1px;transition:color .16s}
.dark .cs-hint a{color:#fff}
.cs-hint a:hover{color:var(--red)}

/* 问卷弹窗（联系页「答九题」用）：iframe 装 start.html，不跳走、不丢当前页 */
.qmodal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.74);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vh,40px);opacity:0;transition:opacity .22s ease}
.qmodal[hidden]{display:none}
.qmodal.on{opacity:1}
.qm-box{position:relative;width:min(720px,100%);height:100%;
  background:#fff;display:flex;flex-direction:column}
.qm-box iframe{flex:1 1 auto;width:100%;border:0;display:block}
.qm-x{position:absolute;right:0;top:-42px;width:34px;height:34px;
  background:#fff;border:0;color:var(--ink);font-family:inherit;font-size:15px;
  cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .16s,color .16s}
.qm-x:hover{background:var(--red);color:#fff}
@media(max-width:700px){
  .qmodal{padding:0}
  .qm-box{width:100%;height:100%}
  .qm-x{right:8px;top:8px;z-index:3;background:var(--ink);color:#fff}
}
.cs-panel{position:fixed;right:24px;bottom:calc(88px + var(--tabh, 0px) + env(safe-area-inset-bottom));width:348px;max-height:min(520px,calc(100vh - 190px));background:#fff;border:2px solid var(--ink);z-index:110;display:flex;flex-direction:column;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s cubic-bezier(.22,.61,.36,1),transform .22s cubic-bezier(.22,.61,.36,1)}
.cs-panel.on{opacity:1;transform:none;pointer-events:auto}
.cs-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.cs-hd .t{font-size:15px;font-weight:800;letter-spacing:-.2px}
.cs-x{font-family:inherit;font-size:15px;line-height:1;background:none;border:none;color:var(--sub);cursor:pointer;padding:4px 6px;transition:color .16s}
.cs-x:hover{color:var(--ink)}
.cs-bd{padding:16px;overflow-y:auto}
.cs-lead{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:12px}
.cs-bd textarea,.cs-bd input{width:100%;font-family:inherit;font-size:14.5px;border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:10px 12px;transition:border-color .16s;border-radius:0}
.cs-bd textarea:focus,.cs-bd input:focus{outline:none;border-color:var(--ink)}
.cs-bd textarea{min-height:88px;line-height:1.6;resize:vertical;margin-bottom:9px}
.cs-bd input{margin-bottom:12px}
.cs-send{width:100%;font-family:inherit;font-size:14.5px;font-weight:700;background:var(--ink);color:#fff;border:2px solid var(--ink);padding:11px 0;cursor:pointer;transition:background .18s,border-color .18s;letter-spacing:.02em}
.cs-send:hover{background:var(--red);border-color:var(--red)}
.cs-done{padding:40px 20px;text-align:center}
.cs-done b{display:block;font-size:19px;font-weight:800;margin-bottom:8px}
.cs-done span{font-size:13.5px;color:var(--sub);line-height:1.75}

.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;padding:11px 20px;letter-spacing:.03em;opacity:0;pointer-events:none;transition:opacity .24s,transform .24s;z-index:120}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:560px){
  .cs-btn{right:16px;width:48px;height:48px;font-size:14px}
  .cs-panel{right:0;left:0;bottom:0;width:auto;max-height:76vh;border-left:none;border-right:none;border-bottom:none}
}