/* 手鼓宝官网 · 共用样式（离线、无外部依赖） */
:root{
  --ink:#16302A; --ink-2:#0E221C; --gold:#C99635; --gold-2:#E9C476;
  --cream:#FBF6EA; --paper:#F6F4EF; --line:#E4E0D6; --text:#22262A; --dim:#6E6A62;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  font-size:16px; line-height:1.75;
}
a{color:var(--ink); text-decoration:none}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px}

/* 顶栏 */
/* 顶部公告条：2026-10-14 按奇总要求删除（"最上面那个黄条好丑"）。
   相关 HTML 也一并删掉；想恢复就把这条 CSS 与首页那段 div 一起加回来。
   更新公告的入口仍在：首屏小字「更新日志」/ 下载页版本行 / 页脚链接带。 */

header.site{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%); color:var(--cream)}
header.site .wrap{display:flex; align-items:center; gap:14px; height:68px}
header.site img{width:34px;height:34px}
header.site .brand{font-size:19px; font-weight:700; letter-spacing:.5px}
header.site nav{margin-left:auto; display:flex; gap:22px; font-size:14.5px}
header.site nav a{color:#E8E2D4; opacity:.86}
header.site nav a:hover{opacity:1; color:var(--gold-2)}
/* 导航里的「下载」做成常驻实心按钮（学剪映 / Xmind：右上角永远有一颗能点的下载） */
header.site nav a.dl{
  order:9; opacity:1; background:var(--gold); color:#241A07; font-weight:600;
  padding:6px 14px; border-radius:8px; line-height:1.5;
}
header.site nav a.dl:hover{background:var(--gold-2); color:#241A07}

/* 首屏 */
.hero{
  background:
    radial-gradient(900px 340px at 78% -10%, rgba(201,150,53,.22), transparent 62%),
    linear-gradient(180deg,var(--ink) 0%,#12261F 100%);
  color:var(--cream); padding:56px 0 62px;
}
.hero .wrap{display:grid; grid-template-columns:1fr; gap:30px; align-items:start}
/* 首屏文字居中（学 WorkBuddy：居中标题 + 一句说明 + 主按钮，下面压一张真界面大图） */
.hero .hero-copy{max-width:820px; margin:0 auto; text-align:center}
.hero .hero-copy .btns{justify-content:center}
.hero h1{font-family:"Songti SC","SimSun",serif; font-size:40px; line-height:1.25; margin:0 0 14px}
.hero h1 em{font-style:normal; color:var(--gold-2)}
.hero p.sub{margin:0 0 26px; color:#D9D2C2; font-size:16.5px}
.btns{display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-block; padding:12px 22px; border-radius:10px; font-weight:600; font-size:15.5px; border:1px solid transparent}
.btn.primary{background:var(--gold); color:#241A07}
.btn.primary:hover{background:var(--gold-2)}
.btn.ghost{border-color:rgba(251,246,234,.42); color:var(--cream)}
.btn.ghost:hover{border-color:var(--gold-2); color:var(--gold-2)}
/* 首屏主视觉 = **产品真界面截图**（学 WorkBuddy / 剪映：主视觉用真界面，不用插画）。
   截图是浅色 UI，压在深色首屏上，加圆角 + 描边 + 大阴影让它"浮"起来。 */
.hero .art{margin:0}
.hero .art img{
  display:block; width:100%; max-width:1040px; margin:0 auto;
  border-radius:14px; border:1px solid rgba(251,246,234,.20);
  box-shadow:0 26px 64px rgba(0,0,0,.52);
}
.hero .art .app-cap{text-align:center; font-size:13px; color:#9C9A8E; margin:12px 0 0}

/* 通用区块 */
/* ============================================================================
   2026-10-14 · 全站设计收敛（奇总：「每块都文字多、看不清主次、分不清区块、没有设计」）
   定下四条硬规矩，所有页面都按它走：
     ① **三个层次，别再插第四层**：区块头（小标签 → 大标题 → 一行副标题）→ 卡片 → 卡片内正文。
     ② **两种容器，一白一米**：`.box`/`.card` = 白底 + 阴影 = 主内容；
        `.panel` = 米底 + 无阴影 = 辅助说明。一眼就能分主次（原来全站都长一个样）。
     ③ **副标题最多一行**，写不完的挪进正文或折叠，不许在副标题里塞括号补充。
     ④ **区块之间要有呼吸**：section 上下留白加大 + 区块之间浅色分隔线。
   ============================================================================ */
section{padding:62px 0}
section + section{border-top:1px solid #EFEBE1}   /* 区块分隔：细到几乎看不见，但眼睛能分层 */
h2.sec{font-size:25px; margin:0 0 10px; font-family:"Songti SC","SimSun",serif; letter-spacing:.3px}
p.sec-sub{margin:0 0 26px; color:var(--dim); font-size:14.8px; line-height:1.75; max-width:780px}

/* 辅助说明区：米底、无阴影 —— 与白底主内容区分开 */
.panel{background:#F7F4EC; border:1px solid #EDE7DA; border-radius:14px; padding:20px 22px}
.panel + .panel{margin-top:14px}
.panel h3{margin:0 0 8px; font-size:15.6px}
.panel p{margin:0; font-size:13.8px; color:#4A4F55}

/* 区块小标签（学 WorkBuddy / 飞书：每个区块标题上方一行竖排小字，给页面一个统一节奏）
   —— 是"高级感"里最便宜的一招：只加一行字，不改任何布局。 */
p.eyebrow{
  margin:0 0 8px; font-size:12.5px; letter-spacing:2.2px; font-weight:600;
  color:var(--gold); text-transform:none;
}
p.eyebrow span{color:#B9B2A2; font-weight:400; letter-spacing:1.6px}

/* 信任条（学 WorkBuddy 的"生态墙"位置）：不编客户数，只列**真实**的兼容与运行条件 */
.trustbar{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0}
.trustbar .wrap{display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; justify-content:center}
.trustbar .items{display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; justify-content:center}
.trustbar b{font-weight:600; color:var(--ink)}
.trustbar span{font-size:14.2px; color:var(--dim)}
.trustbar .dot{color:#CFC8B8}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 6px 18px rgba(22,48,42,.05)}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,48,42,.10); border-color:#D8D3C6}
.card h3{margin:0 0 8px; font-size:17.4px; line-height:1.4}
.card h3 span{color:var(--gold); margin-right:8px}
/* 卡片正文降一档、降一点黑度 ⇒ 标题自然跳出来（原来标题和正文都是 14.6～17，主次靠猜） */
.card p{margin:0; color:#4A4F55; font-size:14.4px; line-height:1.72}

/* 下载页 */
.box{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px;
  box-shadow:0 8px 26px rgba(22,48,42,.05)}
.box + .box{margin-top:18px}

/* 「一张纸」的呈现（样张/导出的谱）：白纸 + 投影，比裸图更像真实输出（学剪映的卡片质感） */
.paper{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px;
  box-shadow:0 18px 44px rgba(22,48,42,.14)}
.paper img{display:block; width:100%; border-radius:6px}
.box + .box{margin-top:18px}
.kvs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; font-size:15px}
.kvs div{display:flex; gap:10px}
.kvs b{color:var(--dim); font-weight:400; min-width:76px}
.steps{counter-reset:s; padding:0; margin:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:0 0 16px 44px; font-size:15.4px}
.steps li:before{
  content:counter(s); position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--gold-2); font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.note{background:#FFF9EC; border:1px solid #F0DFB8; border-radius:12px; padding:14px 18px; font-size:14.6px; color:#5B4A22}

/* 教程页 */
.kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 26px}
.kv div{display:flex; gap:10px; font-size:15px}
.kv b{min-width:96px; color:var(--dim); font-weight:400}
code{background:#EFEAE0; border-radius:6px; padding:2px 7px; font-size:14.5px}

/* 视频/演示位（占位） */
.video-ph{
  border:1px dashed #CFC8B8; border-radius:12px; background:
    linear-gradient(180deg,#FCFBF8,#F4F1E9);
  color:#8A8375; font-size:14px; padding:26px 18px; text-align:center;
}
.video-ph:before{
  content:"▶"; display:block; font-size:22px; color:var(--gold); margin-bottom:6px;
}

/* 视频/演示位（已接入真录屏：封面 + 点击播放，preload=none 不占首屏流量） */
.demo{margin-top:16px}
.demo video{
  display:block; width:100%; border:1px solid var(--line); border-radius:12px;
  background:#0B0D0C; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.demo .cap{font-size:13.4px; color:var(--dim); margin-top:9px; display:flex; gap:8px; align-items:baseline}
.demo .cap b{color:var(--text); font-weight:600}
.demo .cap .play{color:var(--gold); font-weight:600}
.demo .bar{display:flex; align-items:center; gap:10px; margin-top:9px; font-size:13.4px; color:var(--dim); flex-wrap:wrap}
.demo .bar b{color:var(--text); font-weight:600}
.demo .bar .play{color:var(--gold); font-weight:600}

/* 更新公告（changelog.html） */
.rel-list{display:flex; flex-direction:column; gap:16px}
.rel{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.rel-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.rel-v{font-size:18px; color:var(--ink); font-family:"Songti SC","SimSun",serif}
.rel-date{font-size:13.4px; color:var(--dim)}
.rel-items{margin:12px 0 0; padding-left:22px}
.rel-items li{font-size:15px; color:#3A3F45; margin-bottom:7px}
.rel-items li:last-child{margin-bottom:0}

/* 能力网格 + 状态标签（features.html）
   ⚠ 标签是"防投诉"用的：写着"已有"的必须真能用，没写的必须标"开发中"。 */
.caps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
/* ⚠ 类名一律带前缀作用域：这里原来写成全局 `.cap`，把首屏那句说明也套成了白卡片（已修）。 */
.caps > .cap{background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px 16px 14px}
.caps > .cap h4{margin:0 0 7px; font-size:15.4px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.caps > .cap p{margin:0; font-size:13.5px; color:#3A3F45; line-height:1.62}
.tag{font-size:11.5px; font-weight:600; border-radius:999px; padding:2px 8px; white-space:nowrap; flex:0 0 auto}
.tag.has{background:#E8F3EC; color:#1F6F52; border:1px solid #CBE3D6}
.tag.mix{background:#EEF1F7; color:#3B5480; border:1px solid #D6DEEE}
.tag.soon{background:#FFF3E0; color:#8A5A16; border:1px solid #F0DDBB}
.panel-shot{width:100%; display:block; border-radius:10px; border:1px solid var(--line);
  object-fit:cover; object-position:top; box-shadow:0 12px 30px rgba(22,48,42,.08)}

/* 购买区（pricing.html「怎么购买」）：左边收款码、右边三步 —— 别再堆 bullet（奇总 2026-10-14） */
.buy-row{display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start}
.buy-codes{display:flex; gap:12px; flex-wrap:wrap}
.code-ph{width:120px; height:120px; border:2px dashed var(--line); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--dim); font-size:13px; line-height:1.7; text-align:center}
.code-ph span{font-size:11.5px; color:#A9A39A}
.code-img{width:120px; border-radius:12px; display:block}

/* 下载页：两平台主次分明的实色按钮（原来 macOS 是 ghost 描边，空 url 时再压 60% 透明 ⇒ 灰得看不清） */
/* 折叠块：用来把"注意事项/细节"收起来 —— 页面正文只留主句（奇总：文字多） */
.fold{margin:8px 0 0;border:1px solid var(--line);border-radius:10px;background:#FBFAF6}
.fold>summary{cursor:pointer;padding:8px 13px;font-size:13.2px;color:var(--dim);list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:before{content:"▸ ";color:var(--gold);font-weight:700}
.fold[open]>summary:before{content:"▾ "}
.fold .fold-body{border-top:1px solid var(--line);padding:10px 14px 12px;font-size:13.4px;color:#4A4F55;line-height:1.85}
.btn.mac{background:var(--ink); color:var(--cream)}
.btn.mac:hover{background:#20443A; color:var(--cream)}
.btn.pending{position:relative; padding-right:58px}
.btn.pending:after{content:"待上传"; position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:600; border-radius:99px; padding:1px 7px;
  background:rgba(255,255,255,.26); color:#fff}
.btn.primary.pending:after{background:rgba(0,0,0,.20); color:#2B1F07}

/* 下载页「该选哪个？」：两张并排选择卡（原来是四行键值对，看不出"二选一"） */
.pick{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pick-card{display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.pick-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,48,42,.10); border-color:var(--gold)}
.pick-os{font-size:13px; letter-spacing:1.4px; color:var(--gold); font-weight:700}
.pick-main{font-size:19px; font-weight:700}
.pick-note{font-size:13.4px; color:var(--dim)}

/* 下载页「两个包的基本信息」：一个包一张卡（原来两个包挤在一格里） */
.pkgs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pkg{background:#FBFAF6; border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.pkg h4{margin:0 0 10px; font-size:15.6px}
.pkg-row{display:flex; gap:10px; align-items:baseline; padding:5px 0; border-top:1px dashed #EAE6DC; font-size:13.6px}
.pkg-row:first-of-type{border-top:0}
.pkg-row>span{flex:0 0 62px; color:var(--dim)}
.pkg-row code{font-size:12.6px; word-break:break-all}
.pkg-row b{font-weight:600}
.buy-steps{margin:0; padding-left:0; list-style:none; counter-reset:bs}
.buy-steps li{counter-increment:bs; position:relative; padding:0 0 14px 34px; font-size:15px}
.buy-steps li:last-child{padding-bottom:0}
.buy-steps li:before{content:counter(bs); position:absolute; left:0; top:1px; width:22px; height:22px;
  border-radius:50%; background:var(--ink); color:var(--gold-2); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center}
.buy-steps li>b{display:block; font-size:15.4px}
.buy-steps li>span{color:var(--dim); font-size:13.8px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}

/* 页脚 */
footer.site{background:var(--ink-2); color:#C9C3B6; padding:30px 0 34px; font-size:13.6px; line-height:1.9}
footer.site .wrap{display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap}
footer.site b{color:var(--cream); font-weight:600}
footer.site .ph{color:var(--gold-2)}
/* 页脚导航行（学美图/剪映/WorkBuddy：页脚别只有备案号，给一条能走的链接带） */
footer.site .fnav{flex-basis:100%; border-bottom:1px solid rgba(251,246,234,.16); padding-bottom:14px; margin-bottom:4px; font-size:13.8px}
footer.site .fnav a{color:#E8E2D4; margin-right:6px}
footer.site .fnav a:hover{color:var(--gold-2)}
footer.site .fnav .sep{color:#6B7A73; margin-right:6px}

/* 窄屏 */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:20px}
  .hero h1{font-size:31px}
  .hero{padding:38px 0 44px}
  /* 顶栏：品牌别被压成两行，导航换行排 */
  header.site .wrap{height:auto; padding:12px 0; flex-wrap:wrap; row-gap:10px}
  header.site .brand{font-size:17px; white-space:nowrap}
  header.site nav{margin-left:auto; gap:12px; font-size:13.4px; flex-wrap:wrap; justify-content:flex-end}
  /* 公告条与信任条：小屏上"·"分隔符会落在行尾，直接不显示 */
  .trustbar .dot{display:none}
  .trustbar .wrap{gap:8px 18px}
  .trustbar .items{gap:8px 18px}
  .cards{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .kvs,.kv{grid-template-columns:1fr}
  header.site nav{gap:14px; font-size:13.6px}
}