/* ==========================================================================
   落地页升级层 v2（2026-11-04）
   作用范围：home / pricing / help / updates / install 五页
   加载位置：<head> 最后，压在 landing.css 和各页 <style> 之上

   改的是什么（对照 WorkBuddy 线上真值）：
     容器      1120 → 1200
     首屏标题  62px/700 → 76px/500（移动 34px/500）
     区块标题  40px/700 → 44px/400
     正文字重  400 → 300（长段落变轻，页面立刻"松"）
     按钮      54px 圆角 10 → 48px 全圆药丸
     页脚      浅灰细线 → 纯黑 + 巨型描边字标
     进场      只位移 → 位移 + blur 一起收

   为什么改这几项：见 design-kit/WorkBuddy拆解手册.html 第 1、3、4、10 节。
   ========================================================================== */

/* ==================== 1. 容器与导航 ==================== */

.wrap{ max-width: 1240px; }        /* 1200 内容 + 左右各 20，窄屏自动收 */

.nav{
  height: 68px;
  padding: 0 max(24px, calc((100vw - 1200px) / 2));
  background: rgba(255,255,255,.76);
  backdrop-filter: saturate(1.8) blur(15px);
  -webkit-backdrop-filter: saturate(1.8) blur(15px);
  border-bottom: 1px solid #f2f4f8;
}
.nav .logo{ font-size: 15px; font-weight: 600; }
.nav nav{ gap: 30px; }
.nav nav a{
  font-size: 14px;
  font-weight: 400;
  color: #646464;
  border-bottom: 0;
  position: relative;
  transition: color .2s var(--wb-ease);
}
.nav nav a:hover{ color: var(--accent); }

/* 当前页：2px 下划线从中间展开，不是常驻一条线 */
.nav nav a.on{ font-weight: 500; color: #1a1a1a; }
.nav nav a{ display: inline-block; padding: 6px 0; }
.nav nav a.on::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px; background: var(--accent);
}

/* 按钮药丸化：原来 9px 圆角，现在全圆，高度对齐 WorkBuddy 的 40 */
.nav .dl{
  height: 40px; padding: 0 20px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  background: #1a1a1a;
  transition: transform .2s var(--wb-ease), background .2s var(--wb-ease),
              box-shadow .2s var(--wb-ease);
}
.nav .dl:hover{
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.nav .login{
  font-size: 13.5px; font-weight: 500; color: #1a1a1a;
  padding: 10px 20px; border-radius: 999px;
}
.nav .login:hover{ background: transparent; transform: translateY(-1px); }

/* ==================== 2. 首屏 ==================== */

.hero{
  padding: 132px 0 0;              /* 68 顶栏 + 64 呼吸 */
  position: relative;
  overflow: hidden;
}

/* 首屏光晕：demo.html 里那层青绿雾。
   没有它整页是冷的；有了它白底才有温度。位置和尺寸照 WorkBuddy 线上真值
   （1565×1219，垂直落在标题下方 268px），只是把 SVG 换成了双层径向渐变。 */
.hero::before{
  content: '';
  position: absolute;
  top: 120px; left: 50%;
  width: 1565px; height: 1219px;
  margin-left: -782.5px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(closest-side, rgba(0,194,154,.26), rgba(0,194,154,.09) 55%, transparent 78%),
    radial-gradient(closest-side at 32% 38%, rgba(15,125,87,.16), transparent 70%);
  filter: blur(24px);
  animation: lv-glow .85s var(--wb-ease) both;
}
.hero .wrap{ position: relative; z-index: 1; }

/* 光晕先淡入，再无限呼吸（5.5s，只放大 5%，幅度大了就廉价） */
@keyframes lv-glow{
  0%  { opacity: 0; transform: scale(.55); }
  100%{ opacity: .92; transform: scale(1); }
}

/* 标题：62px/700 → 76px/500。大而不重，这是最关键的一改 */
.hero h1{
  font-size: clamp(40px, 6.1vw, 84px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin-bottom: 26px;
}
/* 原来的品牌色重点词保留，但不再靠字重堆 */
.hero h1 span{ color: var(--accent); }

/* 副标题：16.5px/400 → 17px/300，行高放到 1.8 */
.hero .sub{
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  /* 700 而不是 620：原文案一句 30 多个字，620 宽会把它断在「一次做完」前面，
     留下「次做完。」单独一行。放宽到 700 正好两行。 */
  max-width: 700px;
  color: #646464;
  margin-bottom: 40px;
}

/* kicker：去掉边框，改成浅底药丸 */
.kicker{
  background: var(--accent-w);
  border: 0;
  font-weight: 500;
  font-size: 12.5px;
  padding: 7px 15px;
  margin-bottom: 28px;
}

/* 主按钮：54 → 48，圆角 10 → 全圆 */
.btn-main{
  height: 48px; padding: 0 28px;
  border-radius: 999px;
  font-size: 15.5px; font-weight: 500;
  transition: transform .2s var(--wb-ease), box-shadow .2s var(--wb-ease),
              background .2s var(--wb-ease);
}
.btn-main:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
/* 次按钮不是"描边按钮"，是一行带下划线的字 —— 描边按钮会让首屏出现两个"框"，
   抢主按钮的权重。WorkBuddy 首屏的第二个动作就是纯文字。 */
.btn-ghost{
  height: 48px; padding: 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  font-size: 15px; font-weight: 400;
  color: var(--accent);
  transition: opacity .2s var(--wb-ease);
}
.btn-ghost:hover{ opacity: .7; transform: none; }
.btn-ghost svg{ display: none; }

/* 产品截图：投影收一点，圆角对齐 16 */
.shot{
  border-radius: 16px;
  box-shadow: 0 40px 90px -48px rgba(16,18,22,.32), 0 0 0 1px rgba(16,18,22,.05);
}

/* ==================== 3. 区块 ==================== */

.sec{ padding: 112px 0 0; }        /* 原 104，再松一点点 */

/* 居中标题改成「左大标题 + 右一段说明，底对齐」。
   不拆 HTML —— 用 grid 把现有的 tag / h2 / p 三个兄弟重排：
     tag 跨两列在顶上，h2 在左，p 在右。 */
.sec-head{
  display: grid;
  grid-template-columns: minmax(0,1fr) 400px;
  grid-template-areas: "tag tag" "h2 p";
  align-items: end;
  gap: 16px 48px;
  text-align: left;
  margin-bottom: 56px;
}
.sec-head .sec-tag{ grid-area: tag; justify-self: start; margin: 0; }
.sec-head h2{ grid-area: h2; margin: 0; }
.sec-head p{ grid-area: p; margin: 0; max-width: 400px; }
.sec-head h2{
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 400;               /* 原来 700 */
  letter-spacing: -.025em;
  line-height: 1.2;
}
.sec-head p{
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.85;
  max-width: 580px;
  color: #646464;
}
.sec-tag{
  font-weight: 500;
  letter-spacing: .02em;
  border: 0;
  background: var(--accent-w);
}

/* 卡片网格：间距 16 → 24，圆角 12 → 16 */
.cards6{ gap: 24px; }
/* 只有 2 张卡时按 2 列排。3 列网格放 2 张会在右边空出一整格，
   看起来像"少做了一张"。 */
.cards6:has(> :nth-child(2):last-child){ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards6 > *{
  border-radius: 16px;
  transition: transform .24s var(--wb-ease), box-shadow .24s var(--wb-ease);
}
.cards6 > *:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -20px rgba(16,18,22,.24);
}

/* ==================== 4. 定价页 ==================== */

.pricing-panel{ border-radius: 24px; padding: 64px 40px; }
.plans{ gap: 20px; }
.plans .card, .pricing-panel .card{ border-radius: 20px; }
.pricing-panel .card:hover{ transform: translateY(-2px); }

/* 定价页的切换器：药丸化 */
.toggle{ border-radius: 999px; padding: 4px; }
.toggle button{ border-radius: 999px; }

/* ==================== 5. 帮助 / 更新日志 ==================== */

.help-hero h1, .upd-hero h1{
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.help-lead, .help-hero p, .upd-sub{
  font-weight: 300;
  line-height: 1.85;
  color: #646464;
}

/* 帮助页的问题卡：圆角 + hover 抬升 */
.help-item, .help-quick a{
  border-radius: 14px;
  transition: transform .2s var(--wb-ease), box-shadow .2s var(--wb-ease),
              border-color .2s var(--wb-ease);
}
.help-item:hover, .help-quick a:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(16,18,22,.22);
}

/* 更新日志的版本卡 */
.upd-rel{ border-radius: 16px; }

/* ==================== 6. 页脚：黑底 + 巨型描边字标 ==================== */

.site-foot{
  margin-top: 112px;
  padding: 56px 0 0;
  border-top: 0;
  background: #0a0a0a;
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  overflow: hidden;
}
.site-foot .in{
  max-width: 1200px;
  padding: 0 24px 34px;
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.site-foot a{ color: rgba(255,255,255,.55); }
.site-foot a:hover{ color: #fff; }
.site-foot .links{ margin-left: auto; }
.site-foot .links a{ transition: color .2s var(--wb-ease); }

/* 巨型描边字标：只在页脚出现一次，宽度铺满屏。
   line-height 必须 ≥1 —— 中文是满 em 框的字形，.8 会把字的上半截和下半截一起裁掉
   （第一版用 .8，实测只剩中间一条）。 */
.site-foot::after{
  content: '德派科技';
  display: block;
  padding: 8px 24px 36px;
  font-size: clamp(64px, 12.8vw, 168px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

/* ==================== 7. 进场：位移 + 模糊一起收 ==================== */

@keyframes lv-rise{
  0%  { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100%{ opacity: 1; transform: none;              filter: blur(0); }
}

.hero h1   { animation: lv-rise .85s var(--wb-ease) both; }
.hero .sub { animation: lv-rise .85s var(--wb-ease) .16s both; }
.hero .cta-row,
.hero .meta{ animation: lv-rise .85s var(--wb-ease) .26s both; }
.hero .shot,
.hero .shot-wrap{ animation: lv-rise 1.05s var(--wb-ease) .3s both; }

/* 区块标题：进入视口才播。用 CSS 撑住，不加 JS */
.sec-head,
.pricing-panel,
.help-head,
.upd-head{
  animation: lv-rise .8s var(--wb-ease) both;
  animation-timeline: view();
  animation-range: entry 8% cover 26%;
}

/* 不支持滚动驱动动画的浏览器：直接显示，不要留白等动画 */
@supports not (animation-timeline: view()){
  .sec-head, .pricing-panel, .help-head, .upd-head{
    animation: none; opacity: 1; transform: none; filter: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero h1, .hero .sub, .hero .cta-row, .hero .meta,
  .hero .shot, .hero .shot-wrap, .sec-head, .pricing-panel,
  .help-head, .upd-head{ animation: none !important; }
  .cards6 > *, .help-item, .btn-main, .btn-ghost{ transition: none !important; }
}

/* ==================== 8. 手机 ==================== */

@media (max-width: 760px){
  .nav{ height: 60px; }
  .hero{ padding: 104px 0 0; }
  .hero h1{ font-size: 34px; line-height: 1.18; letter-spacing: -.02em; }
  .hero .sub{ font-size: 14.5px; line-height: 1.75; }
  .sec{ padding: 72px 0 0; }
  .sec-head{ margin-bottom: 36px; }
  .sec-head h2{ font-size: 26px; }
  .cards6{ gap: 14px; }
  .btn-main, .btn-ghost{ width: 100%; justify-content: center; }
  .site-foot{ margin-top: 72px; }
  .site-foot::after{ font-size: 68px; }
  .help-hero h1, .upd-hero h1{ font-size: 30px; }
}

/* ==========================================================================
   首页新增板块（2026-11-04）：一条链 / 逐字稿
   这两块讲的是新功能，原来首页一个字没提。
   status 机制：.is-soon 会给块打上「即将上线」角标 ——
   功能没上线时只改一个 class，不用重做版面。
   ========================================================================== */

/* ---------- 一条链：六个节点横排 ---------- */

.chain-row{
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
}
.chain-node{
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 18px 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #ebebeb;
  text-align: center;
  transition: border-color .22s var(--wb-ease), transform .22s var(--wb-ease),
              box-shadow .22s var(--wb-ease);
}
.chain-node:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -20px rgba(16,18,22,.24);
}
.chain-node b{
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}
.chain-node span{
  display: block;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
  color: #8a8f99;
}
/* 节点之间的箭头：不占满，留白比箭头本身重要 */
.chain-row .arw{
  flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  color: #d4d7dc;
  font-style: normal;
  font-size: 15px;
  user-select: none;
}

/* ---------- 逐字稿：左讲解 + 右对照 ---------- */

.tp-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.tp-list{ list-style: none; margin: 0; padding: 0; }
.tp-list li{
  position: relative;
  padding: 0 0 18px 26px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #4a4e57;
}
.tp-list li::before{
  content: '';
  position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
.tp-list b{ color: #1a1a1a; font-weight: 500; }

/* 对照卡：左边别人的价，右边我们的 */
.tp-vs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tp-vs > div{
  padding: 20px 20px 18px;
  border-radius: 16px;
}
.tp-vs .bad{
  background: #fdf3f2;
  border: 1px solid #f6e2df;
}
.tp-vs .good{
  background: var(--accent-w);
  border: 1px solid #d8ece4;
}
.tp-vs em{
  display: block;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .06em;
  margin-bottom: 10px;
  opacity: .7;
}
.tp-vs .price{
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.tp-vs .bad .price{ color: #a3342c; }
.tp-vs .good .price{ color: var(--accent-h); }
.tp-vs p{
  margin: 0;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
  color: #7a8189;
}

/* ---------- 状态角标 ---------- */
.is-soon{ position: relative; }
.is-soon::after{
  content: '即将上线';
  position: absolute; top: 14px; right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdf6ec;
  color: #8a5210;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  z-index: 2;
}

@media (max-width: 900px){
  .chain-row{ flex-direction: column; gap: 0; }
  .chain-row .arw{ flex: 0 0 26px; transform: rotate(90deg); }
  .chain-node{ text-align: left; padding: 18px 20px; }
  .tp-grid{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px){
  .tp-vs{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   2026-11-05 · 手机端专项（390 宽实测）
   ========================================================================== */

@media (max-width: 600px){

  /* 1. 顶栏：landing.css 在手机断点里把 .nav nav 整个 display:none 了 ——
        结果手机上从首页去不了定价/帮助/更新，只能看到「免费安装」。
        改成两行：第一行品牌 + 登录 + 安装，第二行四个导航链接（可横滑）。 */
  /* 用 grid 而不是 flex-wrap。
     flex 多行时容器高度被撑到 205px（实测），第一行占了 154px，
     品牌被垂直居中到 top=75，导航掉到 top=166 —— 中间空出一大块。
     grid 的行高永远由内容决定，没有这个坑。 */
  .nav{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo . right"
      "nav  nav nav";
    align-items: center;
    height: auto;
    row-gap: 2px;
    padding: 10px 16px 8px;
  }
  .nav .logo{ grid-area: logo; font-size: 15px; }
  /* height 必须写死：作为 grid item 时 .right 被算成 153.6px（实测），
     把第一行撑到 154 —— 品牌被居中到 top=75，看着像顶栏里空了一大块。
     .dl 本身是 40，.login 约 39，容器给 40 就够。 */
  .nav .right{ grid-area: right; gap: 12px; height: 40px; align-self: center; }
  .nav nav{ grid-area: nav; }

  .nav nav{
    display: flex;
    gap: 20px;
    padding: 2px 0 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav nav::-webkit-scrollbar{ display: none; }
  .nav nav a{ font-size: 13.5px; white-space: nowrap; padding: 3px 0; }

  /* 登录入口原来也被藏了：手机上会员找不到从哪登录，只剩「免费安装」 */
  .nav .login{ display: inline-flex; align-items: center; font-size: 13.5px; }

  /* 顶栏从 68 长到约 100，首屏的 padding-top 要跟着加，否则标题贴到导航上 */
  .hero{ padding-top: 116px; }

  /* 2. 定价面板：桌面上是「浅色大板里排两列白卡」，手机上白卡单列堆叠后，
        那块浅色板就变成一个包着白卡的灰块 —— 看起来像卡里套卡。
        手机上把板去掉，卡片直接落在页面底色上。 */
  .pricing-panel{
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-top: 26px;
  }

  /* 3. 页脚底部留出空间：手机上底部有一排固定浮层（主题色切换），
        不留白会把版权行压在下面。 */
  body{ padding-bottom: 56px; }
}

/* ==========================================================================
   2026-11-05 · 手机排版返工（真机截图反馈）
   核心问题：区块标题被改成「左大标题 + 右说明，底对齐」的 grid 两列，
   右列写死 400px —— 390 宽的屏幕里容器只有 350，右列比容器还宽，
   左列被压成 0，于是 h2 变成「一 / 个 / 动 / 作」逐字竖排。
   教训：凡是桌面写死列宽的分栏，必须给手机断点改成单列。
   ========================================================================== */

@media (max-width: 900px){
  .sec-head{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tag" "h2" "p";
    gap: 10px 0;
    margin-bottom: 32px;
  }
  .sec-head h2{
    font-size: clamp(24px, 6.6vw, 32px);
    line-height: 1.28;
  }
  .sec-head p{
    max-width: none;
    font-size: 14.5px;
    line-height: 1.8;
  }
}

/* ==========================================================================
   2026-11-05 · 首页内容重构新增版式
   三个新组件：痛点行、替你盯着、功能全景网格
   ========================================================================== */

/* ---------- 痛点清单 ---------- */

.pains{
  margin-top: 4px;
  border-top: 1px solid #eeebe6;
}
.pain{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #eeebe6;
}
.pain__x{
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: #FBEAE9; color: #A3342C;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
}
.pain__b{ min-width: 0; }
.pain__t{
  font-size: 15.5px; font-weight: 500;
  color: #1a1a1a; line-height: 1.5;
}
.pain__s{
  margin-top: 4px;
  font-size: 13.5px; font-weight: 300;
  line-height: 1.7; color: #8a8f99;
}

/* ---------- 替你盯着：左文右卡 ---------- */

.watch{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 56px;
  align-items: center;
}
.watch__l{ min-width: 0; }
.watch__list{ list-style: none; margin: 0; padding: 0; }
.watch__list li{
  position: relative;
  padding: 0 0 18px 26px;
  font-size: 14px; font-weight: 300;
  line-height: 1.85; color: #4a4e57;
}
.watch__list li::before{
  content: '';
  position: absolute; left: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: .55;
}
.watch__list b{ font-weight: 500; color: #1a1a1a; }

/* 右侧「时间线」卡：晚上 → 早上 */
.watch__card{
  padding: 24px 24px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #F7FAF9, #FFFFFF);
  border: 1px solid #E3EDE9;
}
.watch__step{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
}
.watch__step + .watch__step{ border-top: 1px dashed #DCE7E2; }
.watch__dot{
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  margin-top: 6px; background: var(--accent); opacity: .35;
}
.watch__step--now .watch__dot{ opacity: 1; box-shadow: 0 0 0 4px rgba(15,125,87,.12); }
.watch__k{
  font-size: 11.5px; letter-spacing: .06em;
  color: #8a8f99; margin-bottom: 2px;
}
.watch__v{ font-size: 14px; font-weight: 400; color: #1a1a1a; line-height: 1.55; }
.watch__v small{ display: block; margin-top: 2px; font-size: 12.5px; font-weight: 300; color: #8a8f99; }

/* ---------- 功能全景：12 格 ---------- */

.caps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #ECE9E4;
  border: 1px solid #ECE9E4;
  border-radius: 18px;
  overflow: hidden;
}
.cap{
  padding: 20px 18px 19px;
  background: #fff;
  transition: background .2s var(--wb-ease);
}
.cap:hover{ background: #FBFAF8; }
.cap__i{
  width: 30px; height: 30px;
  margin-bottom: 11px;
  border-radius: 9px;
  background: var(--accent-w, #E7F4EE);
  color: var(--accent);
  display: grid; place-items: center;
}
.cap__t{
  font-size: 14.5px; font-weight: 500;
  color: #1a1a1a; line-height: 1.4;
}
.cap__s{
  margin-top: 5px;
  font-size: 12.5px; font-weight: 300;
  line-height: 1.65; color: #8a8f99;
}

@media (max-width: 900px){
  .watch{ grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .watch__card{ padding: 20px; }
  .caps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap{ padding: 16px 14px 15px; }
  .cap__i{ width: 26px; height: 26px; margin-bottom: 9px; }
  .cap__t{ font-size: 13.5px; }
  .cap__s{ font-size: 12px; }
}
@media (max-width: 420px){
  .caps{ grid-template-columns: minmax(0, 1fr); }
}

/* 一条链节点里加一行「省了什么」—— 用品牌色，语气是收益不是功能 */
.chain-node em{
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--accent);
}

/* 桌面：痛点四条分两列，单列太长、每行太薄 */
@media (min-width: 901px){
  .pains{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    border-top: 0;
  }
  .pain{ border-top: 1px solid #eeebe6; }
}
/* 一条链 6 个节点 + 5 个箭头在 1200 里偏挤，箭头收窄一点给节点让位 */
.chain-row .arw{ flex: 0 0 22px; font-size: 13px; }

/* ---------- 客服条：拿不准就聊两句 ---------- */

.askbar{
  margin-top: 90px;
  padding: 26px 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, #F7FAF9, #FFFFFF);
  border: 1px solid #E3EDE9;
  display: flex;
  align-items: center;
  gap: 24px;
}
.askbar__l{ min-width: 0; }
.askbar__t{ font-size: 17px; font-weight: 500; color: #1a1a1a; letter-spacing: -.01em; }
.askbar__s{ margin-top: 5px; font-size: 13.5px; font-weight: 300; line-height: 1.75; color: #7A8189; }
.askbar__btn{
  flex: none;
  margin-left: auto;
  height: 44px; padding: 0 22px;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: #1a1a1a; color: #fff;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background .2s var(--wb-ease), transform .2s var(--wb-ease);
}
.askbar__btn:hover{ background: #000; transform: translateY(-1px); }

@media (max-width: 720px){
  .askbar{
    margin-top: 48px;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .askbar__btn{ margin-left: 0; justify-content: center; }
}

/* ---------- 手机底部固定条 ---------- */

.mbar{ display: none; }

@media (max-width: 720px){
  .mbar{
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(1.8) blur(14px);
    backdrop-filter: saturate(1.8) blur(14px);
    border-top: 1px solid #ECE9E4;
  }
  .mbar__ask,
  .mbar__get{
    height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 500;
    text-decoration: none;
  }
  .mbar__ask{
    flex: 0 0 auto;
    padding: 0 18px;
    color: #1a1a1a;
    background: #F2F0EC;
  }
  .mbar__get{
    flex: 1 1 auto;
    color: #fff;
    background: #1a1a1a;
  }
  /* 底条占了 66px，页面底部要让出来，否则页脚最后一行被压住 */
  body{ padding-bottom: 78px; }

  /* 主题色切换器也在右下角固定，和底条抢位置。
     手机上先让它让位 —— 换主题是少数人的需求，装 App 是多数人的。 */
  body > div[style*="bottom:14px"]{ display: none !important; }
}

/* ==========================================================================
   2026-11-05 · 定价页补的三块
   1. .pickrow  一句话选档（原来四档价格摆在那，没有一句帮你决定）
   2. .soon     功能角标（抖音内测）
   3. 复用 .askbar 做客服出口
   ========================================================================== */

.pickrow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 1200px;
  margin: 34px auto 0;
  background: #ECE9E4;
  border: 1px solid #ECE9E4;
  border-radius: 16px;
  overflow: hidden;
}
.pick{
  padding: 20px 22px;
  background: #fff;
}
.pick__k{
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--accent);
}
.pick__t{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #1a1a1a;
}
.pick__s{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: #8a8f99;
}

/* 功能角标：抖音内测。不做成醒目的黄标 ——
   它只是「这一项目前什么状态」，不是促销信息。 */
.soon{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #F1EFEA;
  color: #7A756D;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .04em;
  vertical-align: 1px;
}

@media (max-width: 780px){
  .pickrow{ grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .pick{ padding: 16px 18px; }
}

/* ---------- 滚动进场（2026-11-05） ----------
 * 位移 + 模糊一起收。只做位移会「跳」，带 blur 是「化」出来 ——
 * 这一条是 WorkBuddy 首屏最核心的手法，现在铺到整页。
 * .fx 由 landing-fx.js 加，脚本没跑就什么都不影响。 */
.fx{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition:
    opacity .72s var(--wb-ease, cubic-bezier(.16,1,.3,1)),
    transform .72s var(--wb-ease, cubic-bezier(.16,1,.3,1)),
    filter .72s var(--wb-ease, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
.fx.is-in{
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}