/* ==========================================================================
   院里 · 官方网站 —— 样式层
   设计基因取自 App 原稿：大面积宣纸米白 + 墨绿（图标取色 #2C5347）+ 橄榄灰，
   以「宣纸与青瓷」为贯穿的视觉语言：纸纹底、青瓷细缝、数字编号、窗棂纹样。
   全部零依赖：不引任何外链字体、图标库与 CDN，离线可用。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  --paper:      #FDF9F0;
  --paper-2:    #F7F2E7;
  --paper-3:    #F1EADD;
  --ink:        #22322C;
  --ink-2:      #4A5A53;
  --ink-3:      #7E8C85;

  --jade:       #2C5347;
  --jade-2:     #3E6457;
  --jade-3:     #173A31;
  --garden:     #1F7A5C;
  --garden-2:   #2A966F;
  --amber:      #B87A1E;
  --stone:      #86856E;
  --olive:      #747C67;
  --wood:       #5F4634;

  --line:       rgba(44, 83, 71, .16);
  --line-soft:  rgba(44, 83, 71, .08);

  --shadow-sm:  0 6px 18px -12px rgba(34, 50, 44, .5);
  --shadow:     0 22px 54px -30px rgba(34, 50, 44, .55);
  --shadow-lg:  0 40px 90px -44px rgba(34, 50, 44, .6);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --pill: 999px;

  --maxw: 1180px;
  --gut: 24px;

  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC",
           "Noto Serif SC", "SimSun", Georgia, serif;
  --sans:  system-ui, -apple-system, "PingFang SC", "Microsoft YaHei",
           "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  /* 数字专用字体栈：只服务"成组出现的编号"（印章 1–4、数据条 4 / 3 / 1 / 0）。
     全站零字体下载，所以不引外链字体，而是在系统字体里挑最耐看的一套阿拉伯数字。
     ⚠ 顺序刻意偏向"等高数字"（lining）：小写数字（old-style，如 Georgia 默认）会让
       单个数字在方形印章里忽高忽低 —— 1 缩在中间、3 拖到基线以下，成组看就散了。
       系统不支持时也不必担心：衬线中文数字（宋体 / 思源宋体）本身就是等高数字。 */
  --numeral: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             Cambria, "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
             "Noto Serif CJK SC", SimSun, Georgia, serif;

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------- 背景长图（2026-10-09）----------
     官网背景改为设计稿长图（整屏固定层 + cover + 随滚动沿长卷推进）。
     三个令牌是这套背景的**唯一来源**：图、白纱强度、推进位置。
     --bgp 由 site.js 按滚动进度写入：
       0% = 图顶对齐屏顶，100% = 图底对齐屏底（百分比定位正好走完整个行程）。

     ⚠⚠ 路径必须写成 **bg/yuanli-bg.webp**，不能写 assets/bg/yuanli-bg.webp：
         自定义属性里的相对 url() 是**按样式表自身的 URL 解析**的（本站 CSS 在 /assets/site.css，
         基址就是 /assets/），不是按页面目录解析。多写一层 assets/ 会解析成
         /assets/assets/bg/… → 404 → 图**静默不画**，页面只剩纸色。
         这一条踩过：首版就是这么写的，浏览器里"看不出效果"，而所有"按字符串比对路径"的
         检查全是绿的（见《院里官网背景长图上线记录-20261009.md》第十三节）。
         自检现在改成**按 CSS 所在目录解析后判文件是否存在**（check-yuanli-bg.js）。 */
  --bg-art:   url("bg/yuanli-bg.webp");
  --bg-scrim: rgba(253, 249, 240, .62);
  /* 首屏/页脚纸底强度。取值是**用户选定档**，改它属于改需求口径：
     2026-10-09 依次试过 0.90（文字最稳、图是淡影 5.9/255）→ 0.72（图明显 11.2）→ **0.66（当前）**。
     规律：调小 → 图更明显，但首屏/页脚的次要小字（--ink-3 / --stone，纯纸底上只有 3.3~3.6）
     会进一步往下降。正文三色在任何档位下都仍 ≥4.5。
     改这一行后必须：① 同步改 check-yuanli-bg.js 与 verify-yuanli-portal.sh 的选定档断言；
     ② 重跑 yuanli-bg-cdp.js（逐行报代价）与 yuanli-bg-diag.js（报可视度）；③ 在上线记录追加一条。 */
  --bg-veil:  rgba(253, 249, 240, .66);
  --bgp:      0%;

  /* ---------- 承载文字的"面"（2026-10-09）----------
     背景换成设计稿底图之后，凡是**卡片/顶栏这类托着文字的面**都必须够实 ——
     原来那套半透明（card .72、四色卡只有 5% 色淡、顶栏 .82）是"纸叠纸"时代的口径，
     在图上会让 30% 以上的图透上来，正文对比度被压掉一半
     （实测：「接送求助可以「接单」…」6.25 → 3.93）。
     现在统一到这个令牌：与纸同色、约 94% 不透明。改一处即可全站生效。 */
  --surface:  rgba(253, 249, 240, .94);

  /* ---------- 首屏悬浮手机的「悬浮感」参数（2026-10-10，便于逐档微调） ----------
     每个都是**单个数字**，改这一处即可，不用碰其它样式。范围与步长见配套《调参说明》
     与调参页（D:\Developer_Application\江南院子小区App\调参工具\yuanli-phone-tune.html）。

     为什么要参数化：原来的实现只有一条 translateY(-12px) 的呼吸，而且阴影是 `--shadow-lg` 的**固定值** ——
     固定阴影会让"抬起来"这个动作失去重量感：真实的悬浮是**物体升高时投影变大变淡、落回时收紧变实**。
     所以现在把位移、角度、缩放、周期、影的规模拆成五个参数，阴影随高度联动。

     默认值就是"比原来更强"的那一档：抬升 12→22px、多了一点摆角与微缩放，影更大更淡。
     2026-10-14 二轮调参（经调参页选定，PC 与移动端同参生效）：抬升 18px、摆角 0.0deg（机身不倾斜）、
     缩放 1.008、周期 8.8s（悠缓）、投影 1.8（上限档）—— "慢而影大"的安静高浮版；上一档为 22/0.0/1.018/6.4/1。 */
  --ph-lift:    18px;    /* 抬升幅度：0（不动）→ 44（明显飘起） */
  --ph-tilt:    0.0deg;  /* 摆动角度：0（纯上下）→ 3（有生命感；再大就轻浮了）
                            2026-10-11 按调参结果置为 0.0：机身不倾斜、只做纯上下浮动。
                            想回一点生命感就把这个数改成 .8deg（原值）或 1.2，只改这一处。 */
  --ph-scale:   1.008;   /* 最高点微放大：1（不缩放）→ 1.06 */
  --ph-dur:     8.8s;    /* 一个来回的周期：4（轻快）→ 10（悠缓） */
  --ph-shadow:  1.8;     /* 投影规模倍率：0（贴住纸面）→ 1.8（浮得很高）；只放大偏移与模糊，不动浓淡 */
}

/* ---------- 2. 基础 ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  background-color: var(--paper);
  /* 2026-10-09：原来的三层径向晕染（模拟宣纸受光不均）被设计稿长图取代 ——
     那是"没有设计稿时自己造的纸底"，现在换了真图，留着只会给图再叠一层绿/褐偏色。
     底色 --paper 保留：图未到时、以及图之外的区域靠它兜底。 */
  -webkit-font-smoothing: antialiased;
}

/* 官网背景：设计稿长图（整屏固定层 + cover + 随滚动沿长卷推进）
   2026-10-09 需求：把设计稿长图作为官网背景，**三个 tab 页面**共用
   （三个 panel 都是 body 的子面板，所以背景落在这一层即覆盖三页，不给 .panel 各写一份）。

   ⚠ 这一层**只挂在带 .has-bgart 的页面**（只有 index.html 是；条款页/免责声明等纯文本阅读页
     虽然引用同一份样式表，但不该上背景画 —— 那些页满屏小字，压在插画上读不清）。
     故选择器写成 body.has-bgart::before，而不是 body::before。

   为什么用**固定层**而不是 body 的 background-attachment: fixed：
     · 长宽比 1:3.75，cover 在 390/414/768/1280/1440/1920 各档下**都由宽度驱动**，
       实测横向裁切恒为 0% —— 构图完整、不变形（这是选这个铺法的前提）；
     · 固定层的定位面积就是视口，0%~100% 的百分比定位正好走完
       "图顶对齐屏顶 → 图底对齐屏底"的整段行程，长图随滚动被完整走过一遍；
     · iOS Safari 对"图片 + background-attachment: fixed"支持不可靠，固定层到处都对。

   白纱（--bg-scrim）压在图**之上、正文之下**：这张图两头的插画很暗，没有白纱，正文压上去就废。 */
body.has-bgart::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--bg-scrim), var(--bg-scrim)),   /* 可读性白纱（最上） */
    var(--bg-art);                                        /* 设计稿长图（最下） */
  background-size: 100% 100%, cover;
  background-position: 50% 50%, 50% var(--bgp);
  background-repeat: no-repeat, no-repeat;
}

/* 纸纹颗粒：内联 SVG 噪声，零外部依赖
   2026-10-09 从 body::before 移到 body::after —— 背景换成图片后，
   颗粒必须画在**图之上**才有效果；同一元素的两个伪元素里 ::after 绘制在 ::before 之后。 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* 首屏与页脚的纸底（2026-10-09）
   为什么必须有：这张长图**两头是插画、中间是长留白**，而页面两头正好是首屏与页脚 ——
   两处都是**裸文字**（卡片与表格自带白底，它们没有），且**恰好压在插画最暗的部分上**。
   实测（yuanli-bg-cdp.js，按真实渲染像素逐行算、并与"关掉底图"的改前基线对照）：
   不加这层时，页顶首屏与页底页脚各有一批行的对比度被图压掉一半以上 ——
   例：「路径远洋 江南院子」3.51 → 2.15、「免费 · 无内购…」3.22 → 1.79、
   「下载 Android 版」3.57 → 1.82（均为 1920 档实测）；而中段（图的留白段）基本不受影响。
   为什么不靠"把白纱加重"：白纱是**均匀**的，压到能救文字时图就成了一张淡纸纹
   （实算要 ≈0.90，可视权重只剩 10%）。局部纸底只压"有字的那一块"。
   ⚠ 用 ::before + z-index:-1：.hero 与 .footer 都是 position:relative; z-index:1，
     在各自的层叠上下文里负 z-index 子层画在内容之下、背景层之上，且**不改任何布局**。
   ⚠ 若日后要更"实"（或更"淡"）的首屏文字，改 --bg-veil 一处即可；
     改完必须重跑 yuanli-bg-cdp.js —— 它会逐行给出"加图 / 无图"两个数，别只看观感。 */
.hero::before,
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  /* 上实下透：首屏文字落在纸上，画面在渐隐之后露出来。
     实区到 97% 才起渐隐：首屏里最低那一行小字（右栏那句"本次更新…"）落在 92%~96% 的位置，
     实区只到 92% 时它处在半透区，被图压到 2.96:1（无图 3.16）—— 延伸实区即可全清。 */
  background: linear-gradient(180deg, var(--bg-veil) 0%, var(--bg-veil) 97%, transparent 100%);
}
.footer::before {
  /* 与首屏相反：页脚文字在下半，所以从底部往上实、往上透。
     覆盖度实测调过三轮：66% 剩 3 行、74% 剩 1 行、82% 全清；这里取 86% 留余量。 */
  background: linear-gradient(0deg, var(--bg-veil) 0%, var(--bg-veil) 86%, transparent 100%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(31, 122, 92, .18); }

/* ---------- 3. 排版 ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .01em; }

.h-hero {
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.24;
  letter-spacing: .015em;
  color: var(--jade-3);
}
.h-sec {
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.35;
  color: var(--jade);
}
.h-card { font-size: 18.5px; line-height: 1.5; color: var(--jade-3); }

.lead { font-size: clamp(15.5px, 1.25vw, 17.5px); color: var(--ink-2); line-height: 1.95; }
.body { color: var(--ink-2); }
.small { font-size: 14px; color: var(--ink-3); line-height: 1.8; }
.micro { font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em; }

/* 小标签：汉字编号 / 眉标 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--stone); font-family: var(--sans);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--stone); opacity: .7;
}

/* ---------- 4. 布局 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); position: relative; z-index: 1; }
.section { padding: 56px 0; padding: clamp(56px, 8vw, 108px) 0; position: relative; z-index: 1; }
.section--tight { padding: 40px 0; padding: clamp(40px, 5vw, 68px) 0; }
/* 以上几处与小节的间距都写了"旧内核回退"：clamp() 不被支持时整条声明失效、
   会回落到 0（=.hero 没有上下留白、各节紧贴），页面对老 WebView 会显得很挤。
   回退值取 clamp 的下限，观感接近手机端，且现代浏览器读的是后面那一行、结果不变。 */
.sec-head { max-width: 720px; margin-bottom: 28px; margin-bottom: clamp(28px, 4vw, 46px); }
.sec-head .h-sec { margin-top: 14px; }
.sec-head .lead { margin-top: 14px; }

.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* .g-4 已删除（2026-10-08 第二轮改版）：原先用它排"四件事 / 四条底线"，现已改为
   .quad（田字格 2×2 四色卡片），四列等宽不再有任何调用点。 */

/* ---------- 5. 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  /* 2026-10-09：.82 → --surface(.94)。顶栏托着三个 tab 的文字，压在图上必须够实。 */
  background: var(--surface);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__in {
  max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gut);
  display: flex; align-items: center; gap: 16px;
}
/* 品牌（logo + 名称）
   ⚠ 首页顶栏里的那一份已移到 App 悬浮图下方（见 .hero__brand），但这组样式**不能删** ——
   terms / privacy / minors 三个条款页有自己的品牌头，首页页脚也在用同一组类名。 */
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-sm); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--jade-3); letter-spacing: .06em; }
.brand__sub { font-size: 11px; color: var(--ink-3); letter-spacing: .18em; }

/* Tab 导航：做成一张"tab 卡"（2026-10-08 第二轮改版）
   移动端原先把 logo、三个 tab、两个入口全塞在顶栏里，390px 下必然折行错位；
   现在顶栏只剩这张卡（以及桌面端的网页版按钮），三个 tab 位置固定不漂。 */
.tabs {
  display: flex; gap: 4px; position: relative;
  padding: 4px; border-radius: var(--pill);
  background: rgba(255, 255, 255, .66);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}
.tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink-2);
  padding: 9px 15px; border-radius: var(--pill);
  letter-spacing: .04em; white-space: nowrap;
  transition: color .22s var(--ease), background .22s var(--ease);
}
.tab:hover { color: var(--jade); background: rgba(44, 83, 71, .06); }
.tab[aria-selected="true"] {
  color: var(--jade-3); font-weight: 600;
  background: rgba(44, 83, 71, .1);
  box-shadow: inset 0 0 0 1px var(--line);
}

.topbar .btn { flex: none; }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .04em;
  padding: 13px 24px; border-radius: var(--pill); border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .24s var(--ease),
              background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--sm { padding: 9px 17px; font-size: 13.5px; }
.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--primary {
  color: #fff;
  background: linear-gradient(178deg, var(--garden-2) 0%, var(--garden) 100%);
  box-shadow: 0 14px 30px -16px rgba(31, 122, 92, .8);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(31, 122, 92, .85); }
.btn--ghost { color: var(--jade); background: transparent; border-color: var(--line); }
.btn--ghost:hover { background: rgba(44, 83, 71, .06); transform: translateY(-2px); }
.btn--line { color: var(--jade); background: rgba(255, 255, 255, .5); border-color: var(--line); }
.btn--line:hover { border-color: var(--jade-2); color: var(--jade-3); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none; }

/* ---------- 7. 卡片 ---------- */
.card {
  /* 2026-10-09：.72 → --surface(.94)。卡片托着正文，压在图上必须够实。 */
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }

/* 编号徽标：阿拉伯数字 1–4（沿用数字专用栈，等高等宽）
   2026-10-08 第二轮改版：编号不再独立成"青瓷片"，而是变成**四色卡片里的色标** ——
   颜色交给卡片（--qc）决定，编号本身只要一个浅底 + 同色数字即可。
   数字的"美化"仍是三件事：字号字重、lining + tabular 等高等宽、以及材质。 */
.seal {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--numeral);
  font-size: 17px; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: -.005em;
  color: var(--jade-3);
  background: linear-gradient(180deg, #FCF8F0 0%, #F1E9DC 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 8px -6px rgba(34, 50, 44, .45);
  margin-bottom: 12px;
}

/* 四件事 / 四条底线：田字格（2×2）四色小卡片（2026-10-08 第二轮改版）
   为什么改成 2×2：四列摊平成一条线时，"1 到 4"只是装饰 —— 手机上一列一列往下滚，
   四件事要滚四屏。田字格把四件事收进一屏，每张卡一个颜色、编号变成颜色标记，
   扫一眼就知道"第四件事"在哪儿，不必读完文字。
   颜色都压在低饱和上（青瓷绿 / 铜金 / 靛青 / 藕紫），四张并排不打架。 */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quad__card {
  position: relative; overflow: hidden;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  /* 2026-10-09：四色卡原来只有一层 5% 的色淡（--qc-bg），白底那半句只是兜底值 ——
     等于卡面近乎透明；换成设计稿底图后正文被图透上来压到 3.93:1。
     改成"纸底 + 色淡"两层：background-color 画在下、色淡用渐变层压在上。
     ⚠ 色淡不能用裸颜色当图层（只有最后一层允许带 color），所以包一层 linear-gradient。 */
  background-color: var(--surface);
  background-image: linear-gradient(var(--qc-bg, transparent), var(--qc-bg, transparent));
  border: 1px solid var(--qc-bd, var(--line-soft));
  box-shadow: var(--shadow-sm);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
/* 卡片顶部一道同色细边：颜色标记的主要来源 */
.quad__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--qc, transparent); opacity: .9;
}
.quad__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.quad__card .seal {
  color: var(--qc);
  background: rgba(255, 255, 255, .82);
  border-color: var(--qc-bd);
  box-shadow: 0 2px 6px -5px rgba(34, 50, 44, .5);
}
.quad__card .h-card { margin-bottom: 10px; }
.quad__card .body { font-size: 14px; line-height: 1.8; }
.quad__card--a { --qc: #2C5347; --qc-bg: rgba(44, 83, 71, .055);  --qc-bd: rgba(44, 83, 71, .17); }
.quad__card--b { --qc: #B0761B; --qc-bg: rgba(176, 118, 27, .06); --qc-bd: rgba(176, 118, 27, .19); }
.quad__card--c { --qc: #3B6FA8; --qc-bg: rgba(59, 111, 168, .055); --qc-bd: rgba(59, 111, 168, .17); }
.quad__card--d { --qc: #7A5AA6; --qc-bg: rgba(122, 90, 166, .055); --qc-bd: rgba(122, 90, 166, .17); }
.card .h-card { margin-bottom: 10px; }
.card .body { font-size: 14.5px; line-height: 1.85; }

/* 打开方式（2026-10-08 第二轮改版）
   原来是 5 枚椭圆 chip 横向排，手机宽度下折成两三行、框里塞文字，观感很差。
   改成：整体居中，圆形框里放品牌 logo，品牌名居中排在圆框下方。
   logo 是内联 SVG（simple-icons 收录的品牌矢量标），不引任何外部请求。 */
.adapt {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 24px 22px;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-sm);
}
.adapt__label { font-size: 12.5px; letter-spacing: .22em; color: var(--stone); }
.bc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; gap: 14px clamp(14px, 3.6vw, 32px); }
/* 8 个品牌的换行（2026-10-09 第八轮）：flex 自动换行在 761~1000px 会排成「7 + 1」——
   8 个需要 8×72 + 7×32 = 800px，而这一段容器只有约 776px，最后一个被挤到单独一行。
   改成 4 列网格后，这一段与手机端都稳定是 **4 + 4**（每行 4 个，两行排满）。

   ⚠ 2026-10-10 窄屏适配修正：轨道原来是「4 个 auto 轨道」，而 `.bc` 是固定宽
   （72/62px）—— auto 轨道的**最小值就是内容的最小尺寸**，于是这一行的 min-content
   = 4×62 + 3×14 = **290px**；而 `.adapt` 是 `align-items:center` 的列向 flex 容器，
   子项宽度取 fit-content 但**不得小于 min-content** → 320 档下这一行 290px 撑在一张
   284px 的卡里，**左右各冒出卡片边框 3px**；280 档更糟：整页被撑宽 5px、出现横向滚动
   （实测：scrollWidth 285 / clientWidth 280，溢出元凶就是 `.bc-row` 与 `.bc`）。
   改成可收缩的分数轨道后，行宽恰好等于卡片内容宽，
   任何宽度下都不再冒出去（`.bc` 同时改成跟随轨道，否则固定宽又会被撑出去）。 */
@media (max-width: 1000px) {
  .bc-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center; width: 100%; max-width: 320px; margin-inline: auto;
    gap: 14px 10px; gap: 14px clamp(10px, 3vw, 24px);
  }
  .bc { width: auto; min-width: 0; }
}
.bc {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 72px; text-align: center;
  transition: transform .24s var(--ease);
}
.bc:hover { transform: translateY(-3px); }
.bc__ring {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.bc:hover .bc__ring { box-shadow: var(--shadow); border-color: var(--line); }
.bc__ring svg { width: 28px; height: 28px; fill: currentColor; }
/* 红米 / 真我：simple-icons 未收录这两家的官方矢量标，用字标代替。
   真我的官方标是"黄底黑字"，本组件的圆框是白底 —— 黄字在白色上几乎看不见，
   所以字标两处都用黑/近黑，与各自的官方字标颜色一致。 */
.bc__txt { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.bc__name { font-size: 12.5px; color: var(--ink-2); letter-spacing: .02em; }
.adapt__note {
  display: inline-flex; align-items: center; gap: 8px; text-align: center;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.7;
}
.adapt__note::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  opacity: .8; flex: none;
}

/* ---------- 8. 青瓷细缝（区块分隔的签名细节） ---------- */
.seam {
  height: 1px; border: 0; margin: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(44, 83, 71, .28) 18%,
                    rgba(184, 122, 30, .22) 50%, rgba(44, 83, 71, .28) 82%, transparent 100%);
}
/* 荆棘花纹样带（2026-10-08：原为"田字格"窗棂，改为江南院子的荆棘花）
   —— 四瓣花 + 两簇尖刺，同一笔画语言（青瓷绿细线、stroke-only），46px 循环平铺。
   花心与花瓣用重叠椭圆勾出轮廓，刺用短折线；不填充，保持与全站一致的细线质感。 */
.lattice {
  height: 46px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 46px 46px;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%232C5347' stroke-width='1' stroke-opacity='.42' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='23' cy='15' rx='5' ry='8'/%3E%3Cellipse cx='23' cy='31' rx='5' ry='8'/%3E%3Cellipse cx='15' cy='23' rx='8' ry='5'/%3E%3Cellipse cx='31' cy='23' rx='8' ry='5'/%3E%3Ccircle cx='23' cy='23' r='2.6'/%3E%3Cpath d='M4 42l5-5M3 35l3 2M2 29l3 1'/%3E%3Cpath d='M42 4l-5 5M43 11l-3-2M44 17l-3-1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 9. 首屏 ---------- */
.hero { padding: 42px 0 36px; padding: clamp(42px, 6vw, 84px) 0 clamp(36px, 5vw, 64px); position: relative; z-index: 1; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 28px; gap: clamp(28px, 5vw, 64px); align-items: center; }
/* App 悬浮图 + 品牌（2026-10-08 第二轮改版）
   logo 与名称从顶栏移到这儿，居中压在 App 悬浮图下方 —— 顶栏留给导航，
   品牌交给首屏；移动端首屏本来就只有一个入口按钮，品牌贴在这儿比挤在折行的顶栏里干净。 */
.hero__aside { display: flex; flex-direction: column; align-items: center; gap: 16px; gap: clamp(16px, 3vw, 26px); }
.hero__brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.hero__brand img { width: 52px; height: 52px; border-radius: 15px; box-shadow: var(--shadow); }
.hero__brand b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--jade-3); letter-spacing: .1em; }
.hero__brand span { font-size: 12px; color: var(--ink-3); letter-spacing: .2em; }
.hero__txt .h-hero { margin: 18px 0 0; }
.hero__txt .lead { margin: 20px 0 0; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* 手机框 */
.phone {
  position: relative; justify-self: center;
  /* ⚠ 旧内核回退（2026-10-10 移动端适配）：`min()` / `clamp()` 需要 Chrome 79+，
     而国内 App 内置浏览器（X5 / 各家 WebView）仍有更老的核。丢掉声明时，
     `width: min(310px,74vw)` 会整条失效、宽度回落成 auto —— 而里面的 <img> 是
     width:100%，循环解析后取的是**图片的固有宽度**（截图 1080px 级），
     于是这台手机瞬间变成一个 1000px 宽的大方块：横向溢出、看着"没居中"、
     整页版式全塌。回退值写成"100% + max-width"，丢声明时最多是图片填满一栏，
     绝不会撑破视口。现代浏览器用下面那一行，渲染结果与改动前逐像素相同。 */
  width: 100%; max-width: 310px;
  width: min(310px, 74vw);
  padding: 11px; border-radius: 40px;
  background: linear-gradient(160deg, var(--jade-2), var(--jade-3));
  box-shadow: var(--shadow-lg);
}
.phone::after {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 5px; border-radius: var(--pill); background: rgba(255, 255, 255, .22);
}
.phone img { border-radius: 30px; width: 100%; }
/* 首屏那台悬浮手机：位移 / 摆角 / 微缩放 / 影的规模全部走 §1 的 --ph-* 参数。
   影随高度联动（升高 → 更大更淡，落回 → 收紧变实）是"悬浮"与"上下抖动"的分界；
   原来的固定 `--shadow-lg` 把它做成了后者。只动画 transform 与 box-shadow。
   减弱动效偏好下由全局规则关掉，停在最低点那张静态影上。 */
.phone--float {
  animation: ph-float var(--ph-dur) ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes ph-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow:
      0 calc(16px * var(--ph-shadow)) calc(30px * var(--ph-shadow)) rgba(28, 34, 32, .30),
      0 calc(4px * var(--ph-shadow)) calc(10px * var(--ph-shadow)) rgba(28, 34, 32, .18);
  }
  50% {
    transform: translateY(calc(-1 * var(--ph-lift))) rotate(var(--ph-tilt)) scale(var(--ph-scale));
    box-shadow:
      0 calc(38px * var(--ph-shadow)) calc(64px * var(--ph-shadow)) rgba(28, 34, 32, .18),
      0 calc(10px * var(--ph-shadow)) calc(22px * var(--ph-shadow)) rgba(28, 34, 32, .12);
  }
}

/* 双机并列 */
.phones { display: flex; gap: 20px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
/* 同上：旧内核丢掉 min() 时的回退（两机并排靠 flex-shrink 收缩，不会撑破视口） */
.phones .phone { width: 100%; max-width: 250px; width: min(250px, 40vw); }

/* ---------- 10. Tab 面板与切换动效 ---------- */
.panel { display: none; }
.panel.is-on { display: block; animation: panelIn .46s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 入场级联 */
.reveal > * { animation: rise .7s var(--ease) both; }
.reveal > *:nth-child(1) { animation-delay: .04s; }
.reveal > *:nth-child(2) { animation-delay: .12s; }
.reveal > *:nth-child(3) { animation-delay: .2s; }
.reveal > *:nth-child(4) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 11. 表格 / 列表 ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table th { font-family: var(--serif); font-weight: 600; color: var(--jade); background: rgba(44, 83, 71, .045); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td b { color: var(--jade-3); }
.table-wrap { border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .6); }

.list { margin: 0; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 20px; margin: 9px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.85; }
.list li::before {
  content: ""; position: absolute; left: 2px; top: .78em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--garden); opacity: .65;
}

/* 版本更新记录（编号同样用阿拉伯数字，理由见 §17 的 .clauses：
   全站只保留一种编号写法 —— 中文数字只在正文里出现，不用作编号） */
.notes { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.notes li {
  position: relative; padding: 12px 0 12px 44px; border-bottom: 1px dashed var(--line-soft);
  font-size: 14.5px; color: var(--ink-2);
}
.notes li:last-child { border-bottom: 0; }
.notes li::before {
  counter-increment: n; content: counter(n);
  position: absolute; left: 0; top: 13px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--numeral); font-size: 12.5px; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--stone);
  background: rgba(44, 83, 71, .06); border: 1px solid var(--line-soft);
}

/* ---------- 12. 下载区 ---------- */
.download {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  /* 2026-10-09：底色 .66 → --surface(.94)。这一块是**裸文字**（标题、正文、小字说明都在里面），
     而且它不在 .hero 里，首屏那层纸底盖不到它 —— 实测「本次更新…」被图压到 2.96:1（无图 3.16）。 */
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(31, 122, 92, .14) 0%, transparent 58%),
    radial-gradient(90% 120% at 0% 100%, rgba(184, 122, 30, .1) 0%, transparent 55%),
    var(--surface);
  padding: 26px; padding: clamp(26px, 4vw, 46px);
  box-shadow: var(--shadow-sm);
}
.download__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: center; }
.dl-box {
  /* 2026-10-09：.74 → --surface(.94)（托着参数表文字） */
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 20px 22px;
}
.dl-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line-soft); font-size: 14px; }
.dl-row:last-child { border-bottom: 0; }
.dl-row span { color: var(--ink-3); }
.dl-row b { color: var(--jade-3); font-weight: 600; }
.dl-row a { color: var(--jade); border-bottom: 1px solid var(--line); transition: border-color .2s var(--ease); }
.dl-row a:hover { border-bottom-color: var(--jade); }

/* ---------- 13. 页脚 ---------- */
/* 2026-10-08 第五轮：页脚从"宽品牌列 + 两列链接"改成"三列链接 + 底部工作室说明"。
   2026-10-09 第七轮：三列顺序按需求调整为 **开始使用 → 官网导航 → 法律条款**（法律条款放最后）。
   两处要点：
     ① 工作室说明落在 .footer__bottom 最底部（不再占第一列）；
     ② 三列等宽 —— 原来第一列 1.3fr 是为了放带 logo 的宽品牌块，那块已挪走，
        再让它宽一档只会在列与列之间留一道空。
   窄屏（≤1000px 起）是两列：「开始使用 / 官网导航」左右并排，法律条款横跨整行落到下一行。
   靠的是 .footer__legal 的 grid-column: 1 / -1 —— **DOM 顺序即视觉顺序**，
   不用 order 硬掰（否则读屏与键盘顺序会和眼睛看到的对不上）。 */
.footer { border-top: 1px solid var(--line-soft); margin-top: 40px; padding: 44px 0 56px; position: relative; z-index: 1; }
.footer__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.footer__legal { min-width: 0; }
.footer h4 { font-size: 14px; color: var(--jade); margin-bottom: 12px; letter-spacing: .08em; }
.footer .list li { font-size: 13.5px; margin: 7px 0; }
.footer__bottom { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img { width: 44px; height: 44px; border-radius: 13px; }
.footer a:hover { color: var(--jade); }
.footer__bottom a {
  color: var(--ink-2); border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__bottom a:hover { color: var(--jade); border-bottom-color: var(--jade); }

/* ---------- 14. 响应式 ---------- */
@media (max-width: 1000px) {
  .hero__in { grid-template-columns: 1fr; }
  /* 单列后 App 悬浮图要排在文字之前 —— 手机在 .hero__aside 里，order 得加在这一层，
     加在 .phone 上不起作用（它已经不是网格子项了）。品牌块跟着图一起上移。 */
  .hero__aside { order: -1; }
  .download__in { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr 1fr; }
  /* 两列：「开始使用 / 官网导航」左右并排；法律条款横跨整行落到下一行
     （2026-10-09 第七轮：顺序调整后依然是这一条在保证"移动端左右排布"） */
  .footer__legal { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --gut: 18px; }
  /* 顶栏只剩一张 tab 卡（2026-10-08 第二轮改版）：
     tab 卡居中，顶栏不再折行。
     ⚠ 隐藏 .topbar__cta 的那条写在文件末尾的同名媒体块里 —— 见那里的注释，
       放在这里会被后面基础规则的 display:flex 覆盖（实测踩过）。 */
  .topbar__in { justify-content: center; }
  .tab { padding: 9px 13px; font-size: 14px; }
  .g-3, .g-2 { grid-template-columns: 1fr; }
  /* 手机端页脚：仍是**左右排布**（两列），不是一列到底 ——
     「开始使用 / 官网导航」左右并排，法律条款横跨整行落在下一行。
     2026-10-08 第五轮改成一列到两列；2026-10-09 第七轮调整列序后规则不变。 */
  .footer__in { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 26px; }
  .phones .phone { width: 100%; max-width: 230px; width: min(230px, 44vw); }
  /* 田字格在手机上**保持 2×2** —— 这正是它存在的理由，只把间距与字号收紧 */
  .quad { gap: 12px; }
  .quad__card { padding: 18px 16px; }
  .quad__card .body { font-size: 13.5px; }
  /* 2026-10-10：原来这里写 `.bc { width: 62px }`（把品牌圆框收窄一档）。
     窄屏改成 4 列网格后，宽度应由**轨道**决定 —— 再钉一个固定宽会把行重新撑出卡片
     （实测 320 档冒出 3px）。所以这里只收窄圆框与图标本身，宽度交给 .bc-row 的轨道。 */
  .bc__ring { width: 50px; height: 50px; }
  .bc__ring svg { width: 25px; height: 25px; }

  /* 四大板块表格 → 每行一张卡（2026-10-08 第三轮）
     实测为什么必须改：表头写死 150px / 120px 两列，390px 下"规则要点"只分到 92px 宽，
     一行文字被挤成 92px 宽的竖缝，行高飙到 592px —— 三行列规则要滑半天，基本不可读。
     改成堆叠后：板块名当标题、"谁能发"降为标签、规则要点整幅宽。
     桌面端仍是表格（语义与三列对照都没丢），只在窄屏换表现。 */
  .table-wrap { overflow: visible; border: 0; background: none; border-radius: 0; }
  .table, .table tbody, .table tr, .table td { display: block; width: auto; }
  .table thead { display: none; }
  .table tr {
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px; margin-bottom: 12px;
  }
  .table tr:last-child { margin-bottom: 0; }
  .table td { border-bottom: 0; padding: 0; }
  .table td:first-child { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--jade-3); }
  /* 列名靠 ::before 补回来 —— thead 藏了，不补读者就不知道"业主/仅业委会"是什么 */
  .table td:nth-child(2) { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); }
  .table td:nth-child(2)::before { content: "谁能发 · "; color: var(--stone); }
  .table td:last-child { margin-top: 11px; font-size: 14px; line-height: 1.82; }
}
@media (max-width: 480px) {
  .btn { width: 100%; }
  .hero__cta { flex-direction: column; }
  .topbar .btn { width: auto; }
}

/* ---------- 15. 无障碍与偏好 ---------- */
:focus-visible { outline: 2px solid var(--garden); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 15.5 网页版优先（2026-10-08 改版） ----------
   目标配比：网页版 90% / Android 10%。落到样式上就是一句话 ——
   全页**只允许一个**最重的元素（网页版主按钮），其余与 Android 相关的东西
   一律比它轻一到两级。层级靠四件事同时拉开：尺寸、色彩饱和、阴影、以及"像不像按钮"。
   四件一起降，才拉得开；只改颜色是没用的（按钮形状本身就在喊"我更重要"）。 */

/* 主按钮加大一档：网页版是全页唯一的主行动点 */
.btn--primary.btn--xl {
  padding: 20px 44px;
  font-size: 17.5px;
  letter-spacing: .06em;
  position: relative;
}
/* 极低对比的扩散环：只做"这里可以点"的视觉引导，不抢内容。
   呼吸幅度刻意做得很小 —— 营销页常见的跳动脉冲在这套克制的江南配色里会显脏。 */
.btn--primary.btn--xl::after {
  content: '';
  position: absolute; inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(31, 122, 92, .3);
  pointer-events: none;
  animation: ctaBreath 3.6s var(--ease) infinite;
}
@keyframes ctaBreath {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .1; transform: scale(1.05); }
}

/* 弱化的次级入口（Android 下载）：刻意做成"文字链接"而不是按钮 ——
   和主按钮之间隔着一个形状级别的差异，比任何配色调整都管用。
   hover 才回到"可点"的手感。 */
.btn--weak {
  color: var(--ink-2);
  background: rgba(255, 255, 255, .55);
  border-color: var(--line-soft);
  font-weight: 500;
  box-shadow: none;
}
.btn--weak:hover {
  color: var(--jade); border-color: var(--line);
  background: rgba(255, 255, 255, .82); transform: translateY(-1px);
}
.btn--weak svg { opacity: .65; }

/* 静默链接：Android 下载/安装说明这类"非主路"入口的统一写法。
   没有底色、没有边框、字更小、颜色更淡，只用一条点线暗示可点。 */
.link-quiet {
  color: var(--stone);
  font-size: 13.5px;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-quiet:hover { color: var(--jade-2); border-bottom-color: var(--jade-2); }
.link-quiet svg { width: 14px; height: 14px; opacity: .7; vertical-align: -2px; margin-right: 5px; }

/* 主 CTA 下方那行"安卓手机想装 App？" */
.hero__alt { margin-top: 22px; }
.topbar__alt { font-size: 12.5px; }
/* 页脚里的 Android 入口再淡一档：页脚本就次要，它只需要"存在" */
.footer__alt { color: var(--stone); }
/* 静默链接嵌在 micro 行里时跟随该行的字号，别把行高带歪 */
.hero__meta .link-quiet { font-size: inherit; }

/* 网页版好处清单：三行短句，替代原先右栏那块 Android 参数表的位置 */
.tick-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tick-list li {
  display: grid; grid-template-columns: 19px 1fr; gap: 11px;
  font-size: 14.5px; line-height: 1.78; color: var(--ink-2);
}
.tick-list svg { width: 19px; height: 19px; margin-top: 4px; color: var(--jade-2); }
.tick-list b { color: var(--jade-3); }

/* 网页版主区块：改成单列纵向，把整块版面让给网页版；
   Android 的按钮与参数表收进折叠区 —— 不删内容，只收回默认可见度。 */
.download--web { padding: 34px; padding: clamp(34px, 5vw, 62px); }
.download--web .download__in { display: block; }
.download--web .dl-lead { max-width: 52em; }

/* 折叠区（Android 安装包信息 / 安装步骤）：默认收起，需要的人点开就有 */
.dl-fold { margin-top: 22px; border-top: 1px solid var(--line-soft); }
.dl-fold > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 9px;
  padding: 15px 0 5px;
  font-size: 13.5px; color: var(--stone);
  transition: color .2s var(--ease);
}
.dl-fold > summary::-webkit-details-marker { display: none; }
.dl-fold > summary::before {
  content: ''; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .2s var(--ease);
}
.dl-fold[open] > summary::before { transform: rotate(90deg); }
.dl-fold > summary:hover { color: var(--jade-2); }
.dl-fold__body { padding: 6px 0 4px; }
.dl-fold__body .dl-box { margin-top: 16px; }

/* 安装引导（把站点加到手机桌面）：底部升起的说明层，移动端优先 */
.guide-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 34, 32, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease);
}
.guide-mask.is-on { opacity: 1; pointer-events: auto; }
.guide {
  width: 100%; max-width: 540px;
  width: min(540px, 100%);
  background: #FBF9F4;
  border-radius: 20px 20px 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -18px 48px -20px rgba(28, 34, 32, .45);
  transform: translateY(16px);
  transition: transform .3s var(--ease);
  max-height: 92vh; overflow-y: auto;
}
.guide-mask.is-on .guide { transform: none; }
.guide__grip { width: 42px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 16px; }
.guide__t { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--jade); }
.guide__s { margin-top: 9px; font-size: 13.5px; line-height: 1.85; color: var(--ink-2); }
.guide__steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.guide__steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
  font-size: 13.5px; line-height: 1.78; color: var(--ink-2);
}
.guide__steps b {
  width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--jade);
  background: rgba(44, 83, 71, .08); border: 1px solid var(--line);
}
.guide__os { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--ink-2); opacity: .75; }
.guide__cta { margin-top: 18px; display: grid; gap: 10px; }

/* 顶栏两个按钮并排（网页版主 + Android 弱化次）；margin-left:auto 保住右侧对齐 */
.topbar__cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar__cta .btn { white-space: nowrap; }

@media (max-width: 760px) {
  /* 移动端：主 CTA 满宽独占一行 —— 与任何东西并排都会稀释它的重量 */
  .hero__cta { display: grid; gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .topbar__in .btn--sm { padding: 8px 13px; font-size: 12.5px; }
  /* ⚠ 这条必须写在文件**靠后**的位置：.topbar__cta 的基础规则（display:flex）在下面
     （原本在 §14 附近）定义了，同一个类选择器、同优先级 —— 写在前面会被后面的覆盖掉。
     实测过：写在上面的那条 760px 规则完全不生效，顶栏按钮在手机上照样出现。 */
  .topbar__cta { display: none; }
  /* 顶栏瘦一点：390px 宽下 tab 卡占 46px、加上内边距整条 67px，压掉约 10px */
  .topbar__in { padding: 7px var(--gut); }
  .tab { padding: 7px 13px; }
  .guide { width: 100%; border-radius: 18px 18px 0 0; }
  .btn--primary.btn--xl { padding: 18px 26px; font-size: 16.5px; }
  .download--web { padding: 26px 20px; }
  .tick-list li { font-size: 14px; }
}

/* 顶栏挤不下两个入口时，宁可只留网页版 —— 这就是 90/10 的直接体现 */
@media (max-width: 400px) {
  .topbar__alt { display: none; }
}

/* 降动效偏好下不呼吸，只留一圈静态描边 */
@media (prefers-reduced-motion: reduce) {
  .btn--primary.btn--xl::after { animation: none; opacity: .4; }
}

/* ---------- 15.9 背景音乐光盘（2026-10-09） ----------
   右下角悬浮固定的**旋转光盘**：进站即加载并尽力自动播放，循环；点它切播放/暂停，
   旋转跟着走/停。三个 tab 是同一文档里的页内切换（role=tabpanel），
   单个 <audio> 挂在文档级，切 tab 不动它，音乐自然连续。
   ⚠ 自动播放受浏览器策略约束（普遍禁止无交互的有声自动播放），
      被拒时的兜底见 site.js —— 光盘停在暂停态 + 冒出"点这里播放"提示，
      等第一次交互立刻开播，不弹窗、不打扰。
   分层：z-index 60 —— 在吸顶导航(40)之上、安装引导遮罩(90)之下（引导弹出时能正常盖住它）。
   触控目标：直径 56px（≥44px），移动端贴边 16px。
   ⚠ 安全区（2026-10-10 移动端适配）：贴边量走 env(safe-area-inset-*) ——
      这是本文件既有的口径（§15.7 的 .guide 底部内边距就是这么写的），光盘此前漏了。
      在有刘海 / 底部手势条 / 圆角的机型上、以及**加到主屏后以独立窗口打开**时
      （本站主动引导用户"加到桌面"，这条路径并不罕见），安全区不为 0；
      不加这一层，56px 的圆盘会被底部横条或屏幕圆角切掉一角，看着就是"没在右下角"。
      普通浏览器里 env() 为 0，等于没改，零副作用。
   减弱动效：本文件的无障碍段里的全局规则已把动画全部关掉，光盘会静止 —— 播放/暂停功能照常。 */
.bgm {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--ease);
}
.bgm:hover { transform: scale(1.06); }
.bgm:active { transform: scale(.96); }
.bgm:focus-visible { outline: 3px solid var(--jade-2); outline-offset: 3px; }

/* 盘面：同心沟槽 + **旋转高光**。
   高光是"看得出来在转"的关键 —— 纯同心沟槽转起来视觉上是静止的。 */
.bgm__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,.34) 30deg, rgba(255,255,255,0) 66deg,
      rgba(255,255,255,0) 174deg, rgba(255,255,255,.20) 206deg, rgba(255,255,255,0) 240deg),
    repeating-radial-gradient(circle at 50% 50%, #2F3432 0 1px, #232826 1px 3px),
    radial-gradient(circle at 50% 50%, #39403D 0 20%, #242927 20% 100%);
  box-shadow: 0 6px 18px rgba(28, 34, 32, .32), inset 0 0 0 1px rgba(255, 255, 255, .10);
  animation: bgm-spin 9s linear infinite;
  animation-play-state: paused;              /* 默认停 —— 暂停态就是"不转" */
}
.bgm.is-playing .bgm__disc { animation-play-state: running; }
@keyframes bgm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 中心标签：跟着盘一起转（像唱片label） */
.bgm__label {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--jade-2), #2A5145 78%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  animation: bgm-spin 9s linear infinite;
  animation-play-state: paused;
}
.bgm.is-playing .bgm__label { animation-play-state: running; }

/* 状态字形：**固定在中心、不跟着转** —— 这样"在放 / 已停"任何时候都读得出来。
   形状全用 CSS 画，不依赖任何字体或图标库。 */
.bgm__glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bgm__glyph::before {
  content: ""; display: block;
  width: 0; height: 0; margin-left: 2px;                 /* 暂停态：▶ */
  border-left: 11px solid var(--paper);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.bgm.is-playing .bgm__glyph::before {                     /* 播放态：❚❚ */
  width: 10px; height: 14px; margin-left: 0; border: 0;
  background: linear-gradient(to right, var(--paper) 0 3.5px, transparent 3.5px 6.5px, var(--paper) 6.5px 10px);
}

/* 自动播放被拒时的提示：一圈呼吸描边 + 一枚小气泡。起播后自动消失。 */
.bgm__tip {
  position: absolute; right: 0; bottom: 68px; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1.2; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line-soft);
  box-shadow: 0 4px 14px rgba(28, 34, 32, .16);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.bgm.is-hint::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--jade-2); opacity: 0;
  animation: bgm-hint 2.2s ease-out infinite;
}
.bgm.is-hint .bgm__tip { opacity: 1; transform: none; }
@keyframes bgm-hint {
  0%   { opacity: .55; transform: scale(.92); }
  70%  { opacity: 0;   transform: scale(1.14); }
  100% { opacity: 0; }
}

/* ---------- 15.10 移动端简化版：圆底 + 音符（2026-10-11） ----------
   需求原话："移动端的效果可以和 pc 端不一样，简化一下为一个圆中间带音乐符号的旋转按钮，
   播放状态是旋转，点击一下是暂停，暂停状态是默认静止且音乐符号上带一个斜杠划掉。"

   为什么单独给移动端做一版：
   ① 黑胶盘面（同心沟槽 + 中心 label + 小三角）在桌面够精致，但手机上是 56px 的小尺寸，
      深色盘面压在背景长图上本来就吃对比度；实测把它截图下来量过——它**确实画出来了**
      （区域均值亮度 94.6，而旁边同尺寸对照区 240），但观感上更像"一枚深色圆点"，
      不容易一眼认出是音乐开关。简化成一枚高对比的圆底 + 音符后，识别成本立刻降下来。
   ② 手机上 hover 不存在，那套"旋转高光 + 中心 label 跟着转"的精细分层基本白费。

   本版的三个状态：
   · 播放中：外圈细环上的亮点**绕圈走**（旋转的是这一层，不是整个按钮）
   · 暂停（默认）：环停住、静止；音符上压一道斜杠（静音图标口径）
   · 被浏览器拒绝自动播放时：沿用原有的呼吸描边 + 提示气泡（.is-hint，不重复实现）

   ⚠ 旋转放在 `.bgm__disc` 这一层、而**不是整个按钮**，是因为暂停时按钮要"静止且斜杠是正的"：
     若把 rotation 加在按钮上，暂停会把它**冻在当时的任意角度**，音符和斜杠就歪了，
     "斜杠划掉音符"这个图标就不成立。让内层环转、图标不转，两个诉求同时满足。

   ⚠ 音符仍然**全用 CSS 画**（不用字体符号、更不用图标库）——这是本文件既有的口径，
     而且几何形状可被像素断言复核（见 check-yuanli-bgm.js 的移动端一节）。
     `::before` 覆盖基类里那枚 ▶/`❚❚`：基类的播放态选择器特异性更高，
     所以两个状态选择器都要一起覆盖，否则播放时会漏回 ❚❚。 */
@media (max-width: 760px) {
  .bgm {
    width: 54px; height: 54px;
    background: radial-gradient(circle at 50% 32%, #3E6F5E, #23443A 78%);
    box-shadow: 0 8px 20px rgba(28, 34, 32, .30), inset 0 0 0 1px rgba(255, 255, 255, .14);
  }
  /* 内层：细环 + **两颗不对称的亮点**（一明一暗）—— 就是它让"在转"看得出来。
     纯色圆盘 / 纯同心环转起来视觉上是静止的（PC 版那条注释讲的是同一件事）；
     两颗大小与亮度都不同的亮点绕圈走，一眼就能看出在转，也不用引入 mask。 */
  .bgm__disc {
    inset: 5px; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .26);
    box-shadow: none;
    background:
      radial-gradient(circle at 50% 5%, rgba(255, 255, 255, .96) 0 3.4px, rgba(255, 255, 255, 0) 3.9px),
      radial-gradient(circle at 50% 95%, rgba(255, 255, 255, .40) 0 2.2px, rgba(255, 255, 255, 0) 2.7px);
  }
  .bgm__label { display: none; }        /* 移动端不要中心标签 */
  /* 音符：符头（左下圆点）+ 符干（右侧竖条），合起来是一枚四分音符 */
  .bgm__glyph { width: 20px; height: 20px; }
  .bgm__glyph::before,
  .bgm.is-playing .bgm__glyph::before,
  .bgm.is-paused .bgm__glyph::before {
    position: absolute; left: 0; bottom: 0;
    width: 12px; height: 12px; margin: 0; border: 0;    /* border:0 收掉基类的 ▶ 三角 */
    border-radius: 50%; background: var(--paper);
  }
  /* 符干：贴住符头右缘竖起来（right:6px 让竖条与圆点相接，不出现一道缝） */
  .bgm__glyph::after {
    content: ""; position: absolute; right: 6px; bottom: 5px;
    width: 2.5px; height: 17px; border-radius: 1.5px; background: var(--paper);
  }
  /* 暂停：一道斜杠划掉音符。深色描边让斜杠与音符之间留出一圈"切断"的缝，
     这正是静音图标的读法；挂在按钮上居中，正好压住音符。 */
  .bgm.is-paused::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 30px; height: 3px; border-radius: 2px;
    background: var(--paper);
    box-shadow: 0 0 0 1.5px rgba(35, 68, 58, .92);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* ---------- 16. 打印 ---------- */
@media print {
  /* 导出 PDF 时保住背景色与配色：Edge / Chrome 默认会丢弃背景 */
  @page { size: A4; margin: 18mm 16mm; }
  html, body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body { background-image: none; }
  /* 纸纹与背景长图都不打印（2026-10-09：颗粒从 body::before 移到 body::after，
     所以这里两个伪元素都要列上，否则打印时会多出一层纸纹颗粒） */
  body.has-bgart::before, body::after, .topbar, .lattice, .phone--float, .legal__back, .bgm { display: none !important; }
  .panel { display: block !important; }
  .card, .table-wrap, .download { box-shadow: none; }
  .legal { padding-top: 0; }
  .legal__foot { break-inside: avoid; }
  .legal__sec { break-inside: auto; }
  .legal__sec h2 { break-after: avoid; }
  .legal table { break-inside: auto; }
  .legal tr { break-inside: avoid; }
}

/* ---------- 17. 条款清单（编号 · 法律条款入口 · 页脚协议链接） ---------- */
.clauses { margin: 0; padding: 0; list-style: none; counter-reset: c; }
.clauses > li {
  position: relative; margin: 0 0 18px; padding-left: 42px;
  font-size: 14.5px; line-height: 1.95; color: var(--ink-2);
}
.clauses > li:last-child { margin-bottom: 0; }
/* 编号：阿拉伯数字 1–12（2026-10-08 第四轮改）
   原先是 counter(c, cjk-ideographic) 的"一二三……十二"。改的两条理由：
     ① 与首页 / 软件介绍里印章编号（1–4）统一，全站只有一种编号写法；
     ② 12 条的长清单里，"十二"比"12"更占宽也更慢认读。
   数字本身沿用全站数字专用栈：等高等宽（tabular）+ lining，两位数的 12 在 28px 方框里刚好。 */
.clauses > li::before {
  counter-increment: c; content: counter(c);
  position: absolute; left: 0; top: 3px;
  width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--numeral); font-size: 13px; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--jade);
  background: rgba(44, 83, 71, .07); border: 1px solid var(--line-soft); border-radius: 9px;
}
.clauses b { color: var(--jade-3); font-weight: 600; }

.legal-links {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.legal-links a { color: var(--jade); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.legal-links a:hover { border-bottom-color: var(--jade); }
.legal-links .sep { color: var(--ink-3); }
.legal-links__label { color: var(--ink-3); font-size: 13.5px; }

/* ---------- 18. 法律文件页（免责声明 / 用户协议 / 隐私条款 / 未成年人安全承诺） ---------- */
.legal { padding: 30px 0 0; padding: clamp(30px, 5vw, 58px) 0 0; }
.legal__hd { max-width: 840px; margin: 0 auto; padding: 0 var(--gut); }
.legal__hd h1 { font-size: clamp(23px, 3vw, 34px); color: var(--jade-3); }
.legal__meta {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-size: 13px; color: var(--ink-3);
}
.legal__body { max-width: 840px; margin: 32px auto 0; padding: 0 var(--gut); }
.legal__sec { margin: 0 0 32px; }
.legal__sec h2 {
  font-family: var(--serif); font-size: 19px; color: var(--jade);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.legal__sec p, .legal__sec li { font-size: 14.5px; line-height: 2; color: var(--ink-2); }
.legal__sec p { margin: 10px 0; }
.legal__sec ol, .legal__sec ul { margin: 10px 0; padding-left: 22px; }
.legal__sec li { margin: 7px 0; }
.legal__sec b, .legal__sec strong { color: var(--jade-3); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 14px 0; }
.legal th, .legal td { padding: 10px 12px; border: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.legal th { background: rgba(44, 83, 71, .05); color: var(--jade); font-weight: 600; white-space: nowrap; }
.legal .note {
  margin: 14px 0; padding: 14px 18px; border-radius: var(--r);
  border-left: 3px solid var(--amber); background: rgba(184, 122, 30, .06);
  font-size: 14px; color: var(--ink-2);
}
.legal__back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  font-size: 13.5px; color: var(--jade); border-bottom: 1px solid var(--line);
}
.legal__back:hover { border-bottom-color: var(--jade); }
.legal__foot {
  max-width: 840px; margin: 40px auto 0; padding: 22px var(--gut) 0;
  border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-3); line-height: 1.9;
}
.legal__foot a { color: var(--jade); border-bottom: 1px solid var(--line); }
.legal__foot a:hover { border-bottom-color: var(--jade); }

@media (max-width: 640px) {
  .legal table { font-size: 12.5px; }
  .legal th, .legal td { padding: 8px 9px; }
  .clauses > li { padding-left: 36px; }
}