@charset "UTF-8";
/* ==========================================================================
   微信数字员工 · 08 待办中心版
   学习对象：秒哒「智能待办中心」app-e32e17u7wr29（纸质杂志风日程应用）
   量化出的原始色板（截图像素聚类，不是估的）：
     纸底 #F4F0E8 · 字 #1E211E · 珊瑚橙 #ED6A43 · 便签黄 #FEE88B

   ⚠️ 刻意不改的地方：纸底与橙被 03 薄暮回声占了（#F5F1EA 宣纸 + #D4622A 橙），
      两站并排会像亲兄弟。所以**手法全学、色系换掉**：
      纸底改中性灰 #F2F0EB（去黄）、跳色换站群没用过的玫红 #D8326F。
      手法 = 超粗无衬线大标题 + 句末句号 + 第二行跳色 / 跳色短横线眉标 /
      实心数据条 / 纯 CSS 便签堆 / 白卡配跳色描边圆图标 / 日·周·月三段式。
   ========================================================================== */

:root {
  --paper: #f2f0eb;
  --paper-2: #ebe8e1;
  --card: #fbfaf7;
  --ink: #191917;
  --ink-2: #4c4c46;
  --ink-3: #7d7d74;
  --ink-4: #a4a49a;
  --main: #d8326f;
  --main-d: #b42359;
  --main-l: #fbe8f0;
  --note: #f7e39b;
  --note-2: #f3d8e3;
  --line: #ddd9d0;
  --line-2: #e7e4dc;
  --sh: 0 1px 2px rgba(25, 25, 23, .04), 0 18px 40px -30px rgba(25, 25, 23, .45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.sprite { display: none; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 26px; }

/* ---------- 通用：跳色短横线眉标（模版全站 5 处统一用这个） ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ink-3);
}
.eyebrow i {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--main);
  flex: none;
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { flex: none; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--main); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink); }

/* ==========================================================================
   顶部：居中细导航（学模版 —— 不是通栏、没有 logo，只有中间三行字）
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 240, 235, .84);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.topbar.is-stuck {
  border-bottom-color: var(--line-2);
  background: rgba(242, 240, 235, .95);
}
.tb-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
}
.tb-nav { display: flex; align-items: center; gap: 34px; }
.tb-nav a {
  position: relative;
  font-size: 14.5px;
  color: var(--ink-2);
  padding: 4px 0;
  transition: color .18s ease;
}
.tb-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.tb-nav a:hover, .tb-nav a.active { color: var(--ink); }
.tb-nav a:hover::after, .tb-nav a.active::after { transform: scaleX(1); }

.tb-cta {
  position: absolute;
  right: 26px;
  top: 50%;
  translate: 0 -50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--main);
  border-bottom: 1.5px solid rgba(216, 50, 111, .35);
  padding-bottom: 2px;
}
.tb-cta:hover { border-bottom-color: var(--main); }

/* ==========================================================================
   首屏：左文右便签（模版是左右两栏，不是居中）
   ========================================================================== */
.hero { padding: 62px 0 72px; }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 46px;
  align-items: center;
}

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(36px, 6.1vw, 70px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: -.01em;
}
.hero h1 .hi { color: var(--main); }

.hero-sub {
  max-width: 30em;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
}

.hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- 便签堆（纯 CSS，模版最有辨识度的东西） ---------- */
.note-stack {
  position: relative;
  height: 340px;
}
.nt {
  position: absolute;
  display: block;
  padding: 22px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 12px 26px -16px rgba(25, 25, 23, .5);
}
.nt b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.01em; margin-bottom: 6px; }

.nt-1 {
  left: 6%; top: 4%;
  width: 74%;
  height: 46%;
  background: #fdfcf9;
  rotate: -7deg;
  font-size: 13px;
  color: var(--ink-4);
  font-weight: 500;
}
.nt-2 {
  right: 2%; top: 22%;
  width: 70%;
  height: 44%;
  background: var(--note-2);
  rotate: 4.5deg;
  font-size: 13.5px;
  color: #8b6472;
  font-weight: 500;
}
.nt-3 {
  left: 8%; top: 33%;
  width: 82%;
  height: auto;
  min-height: 52%;
  background: var(--note);
  rotate: -1.6deg;
  box-shadow: 0 22px 38px -20px rgba(25, 25, 23, .55);
}
.nt-3 b { font-size: 26px; }
.nt-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(25, 25, 23, .55);
  background: rgba(25, 25, 23, .07);
  border-radius: 2px;
}
.nt-3 u { display: block; text-decoration: none; font-size: 19px; font-weight: 800; margin-bottom: 5px; }
.nt-3 em { display: block; font-style: normal; font-size: 12.5px; font-weight: 500; color: rgba(25, 25, 23, .55); line-height: 1.6; }
.nt-3::after {
  content: "";
  position: absolute;
  right: 20px; top: 18px;
  width: 34px; height: 34px;
  border: 2px solid rgba(25, 25, 23, .22);
  border-radius: 50%;
}

/* ==========================================================================
   实心数据条（模版：跳色铺满一条，数字很大，中间星号分隔）
   ========================================================================== */
.strip {
  background: var(--main);
  color: #fff;
  padding: 26px 0;
}
.strip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.st {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  letter-spacing: .02em;
}
.st i, .st em { font-style: normal; opacity: .88; }
.st b { font-size: 32px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.st-star { width: 12px; height: 12px; flex: none; opacity: .5; }
.st-star::before {
  content: "✳";
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* ==========================================================================
   区块通用
   ========================================================================== */
.band { padding: 92px 0; }
.band-tint { background: var(--paper-2); }

.sec-head { margin-bottom: 46px; }
.sh-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 20px;
}
.sec-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: -.01em;
}
.sec-head h2 .hi { color: var(--main); }

.sec-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.sec-link:hover { color: var(--main); border-bottom-color: var(--main); }

/* ---------- 大数字（模版右侧那个百分比） ---------- */
.big-num { flex: none; margin: 0; text-align: right; }
.big-num b {
  display: block;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--main);
}
.big-num b small { font-size: .52em; }
.big-num i { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--ink-3); }

/* ==========================================================================
   一天的活：时间轴 + 侧栏提示
   ========================================================================== */
.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 34px;
  align-items: start;
}

.day-list {
  margin: 0;
  padding: 8px 0 8px 4px;
  list-style: none;
  border-left: 1px solid var(--line);
}
.day-list li {
  position: relative;
  display: grid;
  grid-template-columns: 74px 14px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 0 20px 18px;
  border-bottom: 1px solid var(--line-2);
}
.day-list li:last-child { border-bottom: 0; }
.dl-time {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--ink);
}
.dl-dot {
  width: 11px; height: 11px;
  margin-top: 7px;
  border-radius: 50%;
  flex: none;
}
.d1 { background: var(--main); }
.d2 { background: var(--ink); }
.d3 { background: #dcb648; }
.d4 { background: var(--main); opacity: .42; }
.dl-txt b { display: block; font-size: 16.5px; font-weight: 700; }
.dl-txt i { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: var(--ink-3); }

/* ---------- 侧栏提示卡（模版里的「AI 观察」） ---------- */
/* #how 区块：左侧是五步列表，右侧功能清单卡往下挪一格，跟第一条对齐 */
.day-grid .tip { margin-top: 32px; }

.tip {
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 4px;
}
.tip-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--main-d);
  background: var(--main-l);
  border-radius: 3px;
}
.tip h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; line-height: 1.35; }
.tip p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.tip p + p { margin-top: 12px; }
.tip .fn-tag { font-weight: 800; color: var(--ink); }
.tip-foot { margin-top: 14px !important; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px !important; color: var(--ink-3) !important; }

/* ==========================================================================
   一周的账：柱状图 + 侧栏
   ========================================================================== */
.week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 34px;
  align-items: start;
}

.wk-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  min-height: 264px;
  padding: 26px 24px 20px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 4px;
}
.wk {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
}
.wk::before {
  content: "";
  display: block;
  height: var(--h, 40%);
  min-height: 14px;
  background: rgba(216, 50, 111, .2);
  border-radius: 2px 2px 0 0;
  margin-bottom: 12px;
}
.wk.is-now::before { background: var(--main); box-shadow: 0 0 0 2px rgba(216, 50, 111, .18); }
.wk b { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wk i, .wk em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.wk.is-now i, .wk.is-now em { color: var(--ink-3); }

/* ==========================================================================
   三张总览卡（模版：跳色描边圆图标 + 标签行 + 大标题 + 灰说明）
   ========================================================================== */
.cards3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.c3 {
  padding: 30px 26px 32px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  transition: border-color .2s ease, translate .2s ease;
}
.c3:hover { border-color: rgba(216, 50, 111, .45); translate: 0 -3px; }
.c3-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(216, 50, 111, .55);
  border-radius: 50%;
  color: var(--main);
}
.c3-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
}
.c3-tag i { font-style: normal; color: var(--ink-3); letter-spacing: .04em; }
.c3-tag b { font-size: 14px; font-weight: 800; color: var(--main-d); }
.c3 h3 { margin: 16px 0 10px; font-size: 19px; font-weight: 800; line-height: 1.4; }
.c3 p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }

/* ==========================================================================
   收尾：一张贴起来的纸条（不做大色块面板）
   ========================================================================== */
.cta-paper {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 58px 44px 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--sh);
  text-align: center;
}
.tape {
  position: absolute;
  left: 50%;
  top: -13px;
  width: 108px;
  height: 26px;
  translate: -50% 0;
  rotate: -2deg;
  background: rgba(247, 227, 155, .78);
  box-shadow: 0 2px 6px -4px rgba(25, 25, 23, .5);
}
.cta-paper h2 {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.01em;
}
.cta-paper p { margin: 18px auto 0; max-width: 34em; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.cta-meta { margin: 22px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }

/* ==========================================================================
   页脚
   ========================================================================== */
.footer { padding: 46px 0 40px; background: var(--paper); border-top: 1px solid var(--line-2); }
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "brand note right"
    "legal legal legal"
    "copy copy copy";
  align-items: center;
  gap: 16px;
}
.ft-brand { grid-area: brand; display: flex; align-items: center; gap: 10px; }
.ft-brand img { border-radius: 8px; }
.ft-brand span { font-size: 15px; font-weight: 800; }
.ft-note { grid-area: note; margin: 0; font-size: 13px; color: var(--ink-3); }
.ft-right { grid-area: right; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.ft-right a { font-size: 13.5px; color: var(--ink-2); }
.ft-right a:hover { color: var(--main); }
.ft-qr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(216, 50, 111, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--main-d);
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.footer-legal {
  grid-area: legal;
  min-height: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.ft-copy { grid-area: copy; margin: 0; padding-top: 10px; text-align: center; font-size: 13.5px; font-weight: 400; color: var(--ink-3); }
/* 页脚备案：备案号外链 + 公安备案空槽（没号时不占位，避免整体偏左） */
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-legal .legal-pd:empty { display: none; }

/* ==========================================================================
   悬浮按钮 + 二维码弹窗
   ========================================================================== */
.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--main);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(216, 50, 111, .8);
}
.fab:hover { background: var(--main-d); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.modal.open { display: flex; }
.modal-mask { position: absolute; inset: 0; background: rgba(25, 25, 23, .55); }
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 330px;
  padding: 32px 26px 26px;
  background: var(--card);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 30px 60px -30px rgba(25, 25, 23, .7);
}
.modal-close {
  position: absolute;
  right: 10px; top: 10px;
  display: inline-flex;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.modal-title { margin: 0 0 16px; font-size: 17px; font-weight: 800; }
.modal-qr { display: block; width: 210px; height: 210px; margin: 0 auto; object-fit: contain; }
.modal-hint { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.modal-open { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ink-4); border-bottom: 1px solid var(--line); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .note-stack { height: 300px; max-width: 430px; }
  .day-grid, .week { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .day-grid .tip { margin-top: 0; }
  .cards3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .band { padding: 68px 0; }
  .hero { padding: 40px 0 52px; }
  .sh-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sh-row .sec-link { align-self: flex-start; }
  .big-num { text-align: left; }
  .strip-in { justify-content: center; gap: 14px 20px; }
  .st-star { display: none; }
  .cta-paper { padding: 48px 24px 34px; }
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "note" "right" "legal" "copy";
    gap: 14px;
    text-align: center;
  }
  .ft-brand, .ft-right { justify-content: center; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .tb-in { min-height: 58px; }
  .tb-nav { gap: 20px; }
  .tb-nav a { font-size: 13.5px; }
  .tb-cta { display: none; }
  .note-stack { height: 250px; }
  .nt { padding: 16px 18px; }
  .nt b { font-size: 18px; }
  .nt-3 b { font-size: 21px; }
  .day-list li { grid-template-columns: 60px 12px minmax(0, 1fr); gap: 12px; }
  .wk-bars { gap: 7px; padding: 20px 14px 16px; min-height: 218px; }
  .wk b { font-size: 11px; }
  .wk i, .wk em { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .c3 { transition: none; }
}

/* ==========================================================================
   首屏副标：桌面用 <br> 断成两行（避免末字孤行），窄屏放开自然折行
   ========================================================================== */
.hero-sub br, .cta-paper p br { display: block; }
@media (max-width: 640px) {
  .hero-sub br, .cta-paper p br { display: none; }
}

/* 小屏首屏按钮：下载占满一行，视频与联系微信并排（避免第三个孤零零换行） */
@media (max-width: 620px) {
  .hero-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-act .btn-solid { grid-column: 1 / -1; }
  .hero-act .btn { padding: 13px 16px; }
}
@media (max-width: 400px) {
  .hero-act { grid-template-columns: 1fr; }
}

/* ==========================================================================
   覆盖层 · 首屏补「这是什么软件、能干什么」（2026-09-21 加）
   原首屏只有一句立意主标，用户判「客户第一眼都抓不住，你讲功能呀」。
   照站群 13 站的正解：主标直面产品 + 眉标点形态 + 一条真实功能名清单，
   三处一起把产品钉在首屏。色号全取本站色板（玫红 / 便签黄），不动 :root。
   ========================================================================== */
.hero-tags {
  margin: 26px 0 0;
  padding: 15px 18px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--main);
  border-radius: 0 8px 8px 0;
  background: rgba(216, 50, 111, .055);
}

.ht-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 11px;
  margin: 0;
}
.ht-line + .ht-line { margin-top: 10px; }

.ht-k {
  flex: none;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}
.ht-k.base { background: rgba(216, 50, 111, .14); color: var(--main-d); }
.ht-k.ai   { background: rgba(247, 227, 155, .62); color: #8a6a10; }

.ht-v {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.ht-v i { font-style: normal; color: var(--ink-4); padding: 0 4px; }
/* 中文默认可任意断行，「定时执行」曾被折成「定时执 / 行」→ 每个功能名做成不可断词 */
.ht-v .hx { white-space: nowrap; }

.hero-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* H1 收短为「微信ai数字员工」（约 7 字宽）后，字号恢复大气档位；
   60px × 7 字 ≈ 420px，左栏最窄场景（约 600px）也稳稳一行 */
.hero h1 {
  font-size: clamp(34px, 5.2vw, 60px);
}

@media (max-width: 1040px) {
  .hero-tags { margin-top: 24px; }
}
@media (max-width: 760px) {
  .hero-tags { padding: 14px 15px 13px; }
  .ht-v { font-size: 13px; }
}
@media (max-width: 430px) {
  .hero h1 { font-size: 27px; }
  .hero-tags { padding: 13px 13px 12px; }
  .ht-line { gap: 5px 9px; }
  .ht-v { font-size: 12.5px; }
  .hero-note { margin-top: 15px; }
}

/* ==========================================================================
   覆盖层 · 产品内容骨架（2026-09-21 加）
   原骨架是「一天的活 / 一周的账 / 今天就跑」的时间轴叙事，用户判「看不懂、
   跟产品有什么关系，只有 5% 是产品 95% 不沾边」。整段换成按产品功能表写的：
   工作界面四页签 + 16 项基础服务 + 8 项 AI 分身 + 五步上手 + FAQ。
   视觉语言不变（纸灰底 + 玫红 + 卡签），只补新容器。
   ========================================================================== */

/* 工作界面 · 四个页签 */
.ui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-card {
  padding: 24px 24px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ui-k { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--main-d); }
.ui-card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ui-card p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }

/* 基础服务 · 16 格细线网格 */
.fn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.fn { padding: 18px 18px 17px; background: var(--card); }
.fn b { display: block; font-size: 15px; font-weight: 800; }
.fn p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }

/* AI 分身 · 八张描边卡（本站主词，跳色左描边） */
.ai-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ai-card {
  padding: 20px 20px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--main);
  border-radius: 0 10px 10px 0;
}
.ai-k { margin: 0 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--main-d); }
.ai-card h3 { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.35; }
.ai-card p { margin: 9px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }

/* 半自动 → 全自动 */
.stage-flow { margin-top: 34px; padding: 26px 28px 20px; background: var(--paper-2); border-radius: 10px; }
.sf-head { margin: 0; font-size: 15px; font-weight: 800; }
.sf-list { margin: 16px 0 0; padding: 0; list-style: none; }
.sf-list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.sf-list li:first-child { border-top: 0; padding-top: 4px; }
.sf-n { flex: none; padding-top: 2px; font-size: 13px; font-weight: 800; color: var(--main); }
.sf-t b { display: block; font-size: 15px; font-weight: 800; }
.sf-t i { display: block; margin-top: 6px; font-style: normal; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }

/* 常见问题 */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 18px 34px 18px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--main);
  border-bottom: 2px solid var(--main);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { max-width: 46em; margin: 0 0 20px; font-size: 14.5px; line-height: 1.9; color: var(--ink-2); }

@media (max-width: 1040px) {
  .fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ui-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ai-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stage-flow { padding: 20px 18px 14px; }
  .ui-card { padding: 20px 20px 18px; }
}
@media (max-width: 560px) {
  .fn-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 分项细说 · 八大类细项清单 */
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.spec { border-top: 2px solid var(--main); padding-top: 16px; }
.spec h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.spec ul { margin: 0; padding: 0; list-style: none; }
.spec li { position: relative; padding-left: 15px; margin-top: 9px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.spec li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--main); }
.spec li b { margin-right: 6px; font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}