/* =========================================================
   拍啥子 · 品牌站点样式 v6
   识别系统：米白 70% · 深炭黑 20% · 品牌青 10%
   底色 #F7F7F5（冷调中性灰白，不带黄），文字是 #18181B 与 #71717A 两级。
   青是系统里唯一的彩色，只出现在：主按钮 / 关键数字 / 选中态 / 图标底 / 标签底 /
   hover / 流程激活 / 焦点环。全站 10% 配额——大片留白是它成立的前提，别再往上加密度。
   **唯一的例外是 logo**：品牌标是正蓝（色相 221.2；渐变族以 #4780FE 为一族，
   扁平族 #1E3A8A / #2563EB / #3B82F6），hero 那团虚化底纹就是它，所以也是蓝的。
   也就是说蓝只收缩在「品牌标和它的雾」这一处，和上面那支品牌青是两回事：
   青管交互填充，蓝只认标志，两边都别再往对方的地盘上扩。
   ⇒ 换全站色号时**不要顺手改 assets/ 里的标志文件**（三个 svg + 八个位图图标 + og.png
     共用同一套色相），它们要一起动，改之前先问。
   深色只允许出现在三处：首页第九节 CTA、全站页脚、/pricing 的投流段（.dk / .ft，token 重声明见文件末尾的 17b 段）。
   颜色比例靠**面积**守，不是靠调色：青一旦爬到整段底或大面积文字上，这套系统就废了。
   色值不是调的，是抄线上 paishazi.com 的 --brand 家族：
   #00C3FF 填充 / #33CFFF hover / #0092BF active / #0E7490 墨色 / #0284C7 展示墨色 /
   #DFF8FF 浅底 / #67D5FF 深色区墨色。
   ---------------------------------------------------------
   品牌色分两轨，别混用（这是全站唯一容易改错的地方）：
   ① --brand #00C3FF 是**填充**轨，只管「当背景用」的地方：主按钮底、流程激活的序号块、
      标签底、看板「进行中」的进度条。它身上放字一律用 --on-brand #1A1A1A。
      这是整套系统里唯一一处和上一版紫**反过来**的地方：#00C3FF 是亮青，
      白字落上去只有 1.96:1（正文尺寸连 AA 的边都摸不到），近黑字是 8.5:1。
      ⇒ 按钮永远是「亮底 + 近黑字」，别把 --on-brand 改回白色，也别把青色加深到能放白字
        的程度——那会同时毁掉这 10% 的「亮」和填充/墨色两轨的分工。
      主按钮是**平涂** var(--brand)，没有渐变——上一版紫按钮身上那个上浅下深是硬编码的
      （#7C3AED→#6D28D9），唯一职责是把白字压进 AA；字换成近黑后这个需求消失，
      渐变也就没有存在理由了。别再为"立体感"把它加回来，投影已经由 --brand-glow 负责。
      hover / active：青和紫的明度方向**不同**——亮青的 hover 是**变亮**（#33CFFF）、
      active 才**变暗**（#0092BF）。别照搬上一版「浅底上一律变暗」的写法。
      深色区（.dk / .ft）里这条**不需要**反过来：青是亮色，在近黑上照样是亮底近黑字，
      所以 17b 段不再重声明 --brand / --on-brand / --brand-hover / --brand-active。
   ② --brand-ink #0E7490 是**墨色**轨，管所有发丝级品牌痕迹与 12–16px 的品牌小字：
      焦点环、eyebrow 短横与「01│」竖线、hero 短横、5px 方点、流程箭头、看板图例、
      浅青标签底上的字。这些线太细、字太小，而亮青在米白底上是**直接消失**
      （#00C3FF 对白 1.96:1），所以墨色轨必须比填充轨深得多——#0E7490 对白 5.36:1。
      它同时**已经顶到 AA 的天花板**：全站最亮的那块底是浅青标签底 #DFF8FF，
      能在那儿还守住 4.5:1 的最亮蓝只到相对亮度 ≈0.161（≈#0078A4）——
      也就是说这个值已经取在许可范围的边缘上了。**"墨色轨看着不够亮蓝"不是选色失误，
      是物理上限；要更亮只能从 ③ 和填充面积上要，不要动这个值。**
      （顺带：#0E7490 与 #00C3FF 本来就是同一条色相带——192.9° vs 194.1°——
      全站不是"青色打架"，而是同一条青的深浅两端。）
      ——方向与上一版一致：白底上墨色轨要更深，黑底上要更浅（17b 段 #67D5FF）。
   ③ --brand-ink-lg #0284C7 是**展示**轨，只服务 .h1 em / .h2 em 这两处 ≥28px 的大字
      （它们是首页第一眼唯一的品牌彩色）。WCAG 对大字只要求 3:1，这条尺寸差就是它
      比墨色轨再亮一档的许可：#0284C7 对 #FAFAF8 3.92:1、对浅青底 3.71:1，成立。
      **它绝不能下沉到小字**——3.92 用在 12px 上就是不合格；反过来墨色轨也不该上大字，
      那等于白扔掉一档亮度。深色区（17b）把它一起换成 #67D5FF。
   --brand-soft #DFF8FF 是青的浅底，只当「行业标签底 / 选中项的底 / 案例流程里的强调块」用。
   图标底已经统一成实心 --brand（见 .pcard-ic / .srv-ic / .sol-ic），不要再用浅底版。
   青不作正文色。正文两级 --text / --text-2 在浅色版**合成了一级**（同为 #71717A，
   对底正好 4.50:1，压在 AA 线上）：#71717A 已经不能再浅，而 12.5px 的小字比正文更需要
   对比度。层级改由字号与字重承担，不要试图把这两级重新拆开。
   ========================================================= */

/* ---------- 1 · 设计 token ---------- */
:root{
  color-scheme:light;              /* 滚动条 / 表单控件 / <details> 三角随底色走 */

  /* 底与面：浅色版的层级靠**落影**而不是靠「抬亮」。三层颜色差得极小（2~4%），
     真正把卡片从页底上拎起来的是 --shadow-1/2 与 --border——不要靠把面调得更白来分层，
     #FFFFFF 已经是天花板，上面没有空间了。
     bg（页底） < band（整段交替底 / Hero） < card（卡片面） < card-2（嵌套块，比页底更暗，
     用来"凹陷"：图标底、hover 面）。card-2 是浅色版唯一"比底更深"的层，别把它当卡片用。 */
  --bg:#F7F7F5;
  --band:#FAFAF8;                  /* .band 整段交替底；Hero 也是这一档 */
  --card:#FFFFFF;                  /* 卡片面 */
  --card-2:#F4F4F2;                /* 卡片里的嵌套块：图标底、玻璃面板、hover 面 */

  --ink:#18181B;                   /* 标题与强调，对底 16.9:1 */
  --text:#71717A;                  /* 正文，对底 4.50:1 —— 正好压着 AA 线 */
  --text-2:#71717A;                /* 浅色版两级合成一级：#A1A1AA 只有 2.39:1，直接跌破 AA，
                                      而小字比正文更需要对比度。层级交给字号 / 字重。 */
  --border:#E4E4E7;
  --border-2:#D4D4D8;              /* 需要「看得见」的边：ghost 按钮 / 输入 / 玻璃卡 */

  --brand:#00C3FF;                 /* 亮青：只当背景，身上放 --on-brand 近黑字 */
  --brand-hover:#33CFFF;           /* 亮青的 hover 是**变亮**（与上一版紫相反） */
  --brand-active:#0092BF;
  --brand-soft:#DFF8FF;
  --brand-ink:#0E7490;             /* 墨色轨：12px 也读得下来的那一档，已顶到 AA 天花板（见文件头 ②） */
  --brand-ink-lg:#0284C7;          /* 展示轨：只给 ≥28px 的 h1/h2 em，走大字 3:1 门槛，能再亮一档 */
  --on-brand:#1A1A1A;              /* 白字落在 #00C3FF 上只有 1.96:1，必须近黑 */
  --brand-glow:rgba(0,195,255,.30); /* 只在发光里用：hero 底纹 / CTA 面板 / 主按钮投影 */
  --hair:0 1px 2px rgba(24,24,27,.05); /* 浅色版没有「顶上那道高光」——有厚度靠落影。
                                          变量名留着是为了不动下游的 box-shadow 组合。 */

  --dk:#18181B;                    /* 深色内容区：首页 CTA、整个页脚、/pricing 投流段，只此三处 */
  --danger:#DC2626;

  --r:20px;
  --r-sm:16px;
  --r-xs:12px;

  /* 浅色面上的阴影要短、要淡、要偏冷（用 24,24,27 而不是纯黑）：
     铺太远太重就从「浮起来」变成「脏」。 */
  --shadow-1:0 1px 2px rgba(24,24,27,.05);
  --shadow-2:0 18px 40px -24px rgba(24,24,27,.18);

  --ease:cubic-bezier(.2,.6,.2,1);
  --wrap:1180px;
  --hdh:68px;
  --font:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- 2 · 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
/* 选中态：--brand-soft（#DFF8FF）铺在米白底上根本看不出选中，所以选中底要自己造一个
   ——30% 的 #00C3FF，落在浅底上是淡青、落在深色区（.dk / .ft）是暗青，
   两边的字色都还站得住，所以这里**不写 color**，让字色跟着所在区域继承。 */
::selection{background:rgba(0,195,255,.30)}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.sec{padding:104px 0}
/* 节奏分级：整站 11 个板块不再同高同拍。刻意分配见各 section 的 class。
   目标是呼吸，不是均匀——均匀的留白等于没有留白。 */
.sec-lg{padding:132px 0}
.sec-sm{padding:76px 0}
/* .band 只是"这一段换个底"，比页底白一档、和卡片同色系但更灰（见 token 里的分层），
   用发丝线交代段落的起止；不要用阴影——整段宽的阴影会变成一条脏边。
   浅色版这条发丝线是**唯一**的段落分界（深色版还能靠明暗差），所以别把它删掉。 */
.band{background:var(--band);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* Hero 和紧随其后的 .band 是同一个颜色（都是 --band）。两片同色之间再横一道线
   就成了"没有意义的线"，所以相接处不画：区域的起点交给 Hero 自己的留白去说。 */
.hero + .band{border-top:0}
/* /pricing 删掉了页头 Hero，价格区块成了 main 的第一节、直接贴在页头下面。
   和上面同一个道理：页头底色 --bg 和 .band 的底色只差一点，中间横一道线就很突兀。 */
main > .band:first-child{border-top:0}
section[id]{scroll-margin-top:84px}
/* 只给读屏用的元素。/pricing 删掉页头 Hero 之后整页没有 h1 了，
   而「一个页面没有 h1」是无障碍和 SEO 的硬缺陷，所以补一个。
   这里**不能**用 display:none 或 visibility:hidden —— 那等于把元素从无障碍树里删掉，
   补了也白补。用 1px + 裁剪：视觉上不存在，读屏照读，也不占布局。 */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 2b · 12 列骨架 ----------
   全站所有多列板块共用同一条 12 列栅格，于是各板块的列边界落在同一条垂直线上。
   这是「看起来是设计过的」和「看起来是拼出来的」的分界。
   跨列由 Tailwind 工具类 col-span-* / row-span-* 给出（css/tw.css，排在 site.css 之后）。
   ≤820 一律塌成单列：`.g12>*` 的特指度 (0,1,1) 高于工具类 (0,1,0)，
   所以不需要 !important 也能盖掉所有跨列/跨行声明。
   例外板块（AI / 服务 / 案例 / 团队）在各自媒体查询里用 `.g12.xxx` (0,2,0) 重新给列数。 */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}

/* ---------- 3 · 排版 ---------- */
.h1{font-size:clamp(40px,6vw,72px);line-height:1.06;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
/* 窄屏专用折行点，宽屏不存在（见 560px 媒体块） */
.h1 .brk{display:none}
.h2{font-size:clamp(28px,3.4vw,44px);line-height:1.16;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
/* 数字等宽：流程序号在滚动脉冲点亮时宽度不抖（旧看板/count-up 已随板块删除） */
.flow-num{font-variant-numeric:tabular-nums}
.h2 em,.h1 em{font-style:normal;color:var(--brand-ink-lg)}
/* 首页 H1 末尾那个「拍啥子」已经不是文字了，是同一张字标图（外面仍留着 <em>，
   语义和 .h1 em 的其余属性都不动；颜色对 <img> 自然失效）。
   0.88em / -0.06em 是拿 CJK 墨迹框对齐的：PingFang / Noto Sans SC 的字身大约
   从基线下 0.06em 到基线上 0.82em，正好 0.88em 高；照这个摆，字标的墨底和
   左右「交给 / 。」的基线落在同一条线上。 */
.h1 .wm{display:inline-block;height:.88em;width:auto;vertical-align:-.06em;
  /* display:inline-block 是必须的，不是顺手写的：第 119 行 `img,svg,video{...display:block}`
     会把行内图变成块级，H1 会被从「交给」后面硬断成三行。 */
}
.lede{font-size:18px;line-height:1.78;color:var(--text);margin-top:18px;max-width:58ch}
.sec-head{max-width:780px;margin-bottom:56px}
.sec-head .lede{margin-top:16px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:600;letter-spacing:.06em;
  color:var(--brand-ink);margin-bottom:15px;
}
.eyebrow::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--brand-ink)}
/* 板块序号：把「一条龙」的序列感做成可导航的路标，同时保留品牌色短杠（改成竖杠）。
   只在带 data-no 的眉毛上生效，Hero 的定位句仍是原来的横杠。 */
.eyebrow[data-no]::before{
  content:attr(data-no);width:auto;height:auto;background:none;border-radius:0;
  font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.1;
  color:var(--text-2);padding-right:10px;border-right:2px solid var(--brand-ink);
}
.sec-note{font-size:13.5px;color:var(--text-2);margin-top:26px}
/* 板块底部的统一动作区（首页价格入口用它放「查看完整价格方案」）。
   单独一行、居中、上方留足空——它是三张价格卡之后的"下一步"，
   贴太近会被读成第四张卡的一部分。 */
.sec-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.tag{
  display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:8px;
  background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:600;
}

/* ---------- 4 · 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:var(--r-xs);border:1px solid transparent;
  font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
/* 主按钮：近黑字落在 #00C3FF 上是 8.49:1，落在 hover 的 #33CFFF 上是 9.54:1，
   active 的 #0092BF 上 4.86:1 —— 三个状态都过 AA。
   上一版紫按钮身上的渐变已经**拆掉**了，改成平涂。理由：那个渐变本来只有一个职责，
   就是把白字落点往深里压进 AA（#7C3AED 5.70 → #6D28D9 6.61）；现在字换成近黑的，
   亮青本身就够亮、不需要兜底，渐变也就没有存在理由了 —— 顺手退回平涂，与线上按钮一致。
   ⇒ 三个状态全部走 token，深色区（.dk / .ft）里的按钮因此自动和浅色区长得一模一样，
     而且青在近黑上本来就是一块亮底配近黑字，17b 段**不需要**再重声明这三个 token。
   hover 的方向与上一版紫**相反**：亮青的 hover 是**变亮**（#33CFFF），不是变暗；
   同时抬高 + 加强辉光。active 才压深一档（#0092BF，平涂，不再掺更深的一档——
   再深就跌破 AA 了）。 */
.btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 18px -10px var(--brand-glow)}
.btn-primary:hover{background:var(--brand-hover);transform:translateY(-1px);box-shadow:0 14px 32px -12px var(--brand-glow)}
.btn-primary:active{background:var(--brand-active);transform:none;box-shadow:0 4px 14px -10px var(--brand-glow)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2)}
/* 次级动作的 hover 只动那根发丝边：换成墨色轨。浅色区是深青（#0E7490），
   深色区自动变成亮青（#67D5FF）——两处都由 17b 段的 token 决定，这里不写死。 */
.btn-ghost:hover{background:var(--card-2);border-color:var(--brand-ink)}
.btn-quiet{
  height:auto;padding:9px 4px;border:0;background:none;
  color:var(--text);font-size:14px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--border-2);
}
.btn-quiet:hover{color:var(--ink);text-decoration-color:var(--brand-ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}

/* ---------- 5 · 顶部导航 ---------- */
.hd{
  position:sticky;top:0;z-index:60;
  transition:background .22s var(--ease),border-color .22s var(--ease);
  border-bottom:1px solid transparent;
}
.hd.scrolled{
  /* 浅色玻璃：底色取 --bg 的 #F7F7F5、透明度 .82 —— 浅色底后面透出来的深色内容
     （标题、深色 CTA 段）比深色版更容易"脏"，所以透明度比深色版低一档；
     分隔手段仍是模糊，颜色只负责不偏色。页底与 Hero 底只差 1.5 个明度，透过来看不出接缝。 */
  background:rgba(247,247,245,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--border);
}
.hd-in{display:flex;align-items:center;gap:26px;height:var(--hdh)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
/* Logo 盒比墨迹大：brand-symbol.svg 的 viewBox（932×969）四周留了一圈空。
   里面的三角是内接的，墨迹外接框只占盒子的 30/34。负 margin 把这圈留白抵掉，
   于是它在 flex 里的占位等于墨迹尺寸 —— 与文字的 10px 间距、与 .wrap 左边的对齐都靠这个。
   那圈留白当初是给「悬停旋转时不裁尖角」留的，中途改过配色循环、静态了一阵（现在这版
   由页面 CSS 转了，见下面 logo-turn），留白已无必要；但拆掉会动到已逐像素验证过的布局，
   故保留，改动时整组等比缩放。
   34px → 42.5px（用户要求「三角logo放大1/4」）：盒、留白、负 margin 同乘 1.25，
   30/34 这个比例不变，于是墨迹 30px→37.5px，flex 占位也是 30px→37.5px。
   页头那一行因此宽了 7.5px：最挤的 821px 视口（汉堡菜单刚让位给完整导航那一档）
   余量从 23px 降到 15.5px，仍不折行。
   HTML 里的 width/height 只能写整数，取 43 只当 CSS 加载前的占位提示，实际尺寸看这里。 */
.brand-logo{width:42.5px;height:42.5px;margin:-2.5px;animation:logo-turn 9s cubic-bezier(.65,.05,.35,1) infinite;will-change:transform}
/* 旋转（用户要求：「左上角三角logo整体每三秒转动一个点位」）。
   一个点位 = 120°（三角三个角），9 秒一轮 = 转三次，转满 360° 正好接回起点，接缝无跳变。
   每 3 秒里 0.9s 转 + 2.1s 停：停顿是这句需求的关键 —— 匀速连转只读得出「在转」，
   读不出「一个点位一个点位地转」。缓动用 ease-in-out 型曲线，起步和到位都带个收势。
   transform-origin 取默认的 50% 50%：把这张图渲成 420×437 量 alpha 通道，墨迹外接框
   正好铺满画布、中点 (210.0,218.5) 与画布中点一格不差 —— 墨迹本来就居中于 viewBox，
   不需要另定原点。
   转起来会不会顶到字标？也量过：墨迹最大半径 24.0px（自中心），盒半宽 21.25px，
   于是某些相位会探出盒外最多 2.8px。但字标在 10px 间距之外，这点探出只是把间距压到
   ≥7.2px，碰不到；且最大半径在旋转下是不变量，所以不存在「转到某一格突然更挤」。
   不必为此缩图。
   will-change:transform 是给常驻动画提层，免得页头跟着逐帧重绘。

   ★ 这里必须说清一件事，免得和下面那段历史混淆：这次转的是 **<img> 这个元素**，
   不是 SVG 内部。brand-symbol.svg 本身仍是桌面文件夹来的静态紫色版 ——
   19 个折面、几何一字未改，没有 <animate>、没有内部 <style>、没有 @media，
   文件一个字节都不用动。当年那版把「转」和渐变循环写进 SVG 自己的 <style>/<animate>，
   是因为外链 <img> 引用的 SVG 是独立文档、页面 CSS 进不去它**内部**，代价是
   prefers-reduced-motion 也得在 SVG 里再兜一份。而 transform 作用在元素上，
   不受那条影子文档边界限制，所以这回由 §22 统一兜底就够。
   动过的那版留在 ~/paishazi-asset-backup/brand-symbol.svg.blue-anim-20260927。

   只挂 .brand-logo：页脚白色标是另一个文件，首屏 .hero-glow 用的是同一张图但没有 class，
   两处都不进这条 —— 底纹那边仍由 §22 自己关。方向是顺时针（rotate 正角）。 */
@keyframes logo-turn{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(120deg)}
  33.33%{transform:rotate(120deg)}
  43.33%{transform:rotate(240deg)}
  66.66%{transform:rotate(240deg)}
  76.66%{transform:rotate(360deg)}
  100%{transform:rotate(360deg)}
}
/* 字标从「文字」换成了桌面来的矢量字标导出图（assets/wordmark-dark.png）。
   这张图现在是**单色 --brand #00C3FF**：原稿是黑字 + 橙箭头，按用户要求两步走到了一色
   （先「橙色改为主体的亮蓝色」，再「整体亮蓝色」）。所以文件名里的 dark 已经名不副实，
   留着不改是因为它是路径、改它要动 5 个页面，而它只是内部名字。
   ——对比度必须记在这里：图里整块青只有 **1.96:1**（对 #FAFAF8），连 3:1 的非文字门槛都不到。
   WCAG 里 logo 属于豁免项，所以这不算违规。
   2026-09-27 用户点名「左上角那个拍啥子 黑色字体」，于是**页头这一处改成纯黑**，做法见下面
   .brand-wm 的 filter。这里必须用 CSS filter、不能改图——同一个 PNG 在首屏 H1（.wm）里还在用
   而且要保持青的；两处要两种颜色，区分就只能落在「位置」上。
   纯黑对 #F7F7F5 是 19.7:1，全站最高，所以原先「页头里它对比度最低」这条随之作废
   （首屏那个 .wm 仍是 1.96:1，仍是全站最低）。哪天还要加深那一处，仍按这个顺序换**图里的颜色**，
   图本身是唯一真相，不要在两处各挂一条 filter 去凑：
   #0092BF（3.44:1，就是已有的 --brand-active）→ #0284C7（3.92）→ #0E7490（5.13）。
   20px 是光学尺寸，不是墨迹尺寸：原文字 17px 的 CJK 墨高只有约 15px，直接按 15px 摆
   会显得比旁边的 34px 徽标矮一截；20px 让它读起来是「标」而不是「一行字」。
   宽度由 705x200 的固有比例自动算（约 70px），不写死，换图不会变形。
   注意：它在 821px 视口（汉堡菜单刚好让位给完整导航的那一档）是全站最挤的一行，
   按 20px 算下来还剩约 20px 余量；把这里调高之前先回去算那 757px 的 wrap。 */
.brand-wm{display:block;height:20px;width:auto;filter:brightness(0)}
/* 定位语缀在字标后面：比字标小一档，一根发丝线隔开。用 --text（#71717A）而不是更淡的
   --text-2：12.5px 的小字没有余量可让——--text 对 #F7F7F5 正好 4.50:1，是 AA 的底线，
   再淡一档就不可读了。这是要读的品牌信息，不是装饰。
   .brand 的 gap 是 10px，这里再补 10px 内边距，于是「字标 | 竖线 | 定位语」三段间距都是 10px。
   nowrap 是必须的：10 个字在窄一点的视口上会被折成两行，把 56px 的页头撑高。 */
.brand-region{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--text);white-space:nowrap;padding-left:10px;border-left:1px solid var(--border-2)}
/* 手机上收起定位语：页头一行要同时放下 logo、字标、CTA 和汉堡按钮，这 125px 塞不进去。
   定位语在首页首屏的 eyebrow 和每页页脚里都还在，不会因此丢失。 */
@media (max-width:560px){.brand-region{display:none}}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text);text-decoration:none;transition:color .16s var(--ease)}
.nav-links a:hover{color:var(--ink)}
/* 当前页高亮：字色走墨色轨，下划线用青做填充（青不作正文色，只做色块）。
   下划线走 ::after，绝对定位出流，不改变导航原有高度和间距。 */
.nav-links a[aria-current="page"]{position:relative;color:var(--ink);font-weight:600}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand)}
/* 「出片台」是站点主入口，单独做成品牌色药丸：亮青底 + 近黑字，和其他文字链接拉开层级。
   左右各收 8px 负边距，补回药丸内边距吃掉的一部分导航间距。
   当前页的下划线在药丸上会悬在底边外，另起一条规则关掉。 */
.nav-links a[href="/studio/"]{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;margin:0 -8px;padding:0 16px;border-radius:999px;
  background:var(--brand);color:var(--on-brand);font-weight:600;
  box-shadow:0 6px 18px -10px var(--brand-glow);
  transition:background .16s var(--ease),box-shadow .16s var(--ease);
}
.nav-links a[href="/studio/"]:hover{background:var(--brand-hover);color:var(--on-brand);box-shadow:0 8px 22px -10px var(--brand-glow)}
.nav-links a[href="/studio/"]:active{background:var(--brand-active);color:var(--on-brand)}
.nav-links a[href="/studio/"][aria-current="page"]{color:var(--on-brand);font-weight:600}
.nav-links a[href="/studio/"][aria-current="page"]::after{display:none}
.nav-tog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{
  display:none;width:40px;height:40px;flex:0 0 auto;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;border-radius:10px;
}
.nav-burger i{display:block;width:18px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform .22s var(--ease),opacity .22s var(--ease)}
.nav-tog:checked ~ .nav-burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-tog:checked ~ .nav-burger i:nth-child(2){opacity:0}
.nav-tog:checked ~ .nav-burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* 首页导航的「案例」有两个出口，按档位二选一：桌面滚到页内 #cases 区块（.nav-to-anchor），
   手机进 /cases/ 页面（.nav-to-page）。默认只放桌面那个，切换在 §20。
   为什么不是用 JS 按宽度改写同一个 a 的 href：全站导航是纯 CSS、不引库，这一处不值得破例。
   两份都在 DOM 里也不会重复读——display:none 的那份不在无障碍树里，读屏和 Tab 只会碰到当前档。 */
.nav-to-page{display:none}
/* 返回首页：本体在这里，显示时机在 §20 —— 桌面 display:none，≤820px 才 inline-flex。
   为什么需要它：手机上导航收进汉堡，导航里的「首页」跟着一起藏了。logo 虽然本身
   就链回 /，但没人会去点 logo 找路，于是「回到首页」在手机页头上没有可见出口。
   桌面不加：桌面导航里「首页」常驻可见，再加一个是重复。
   为什么写 href="/" 而不是 history.back()：从站外来路（搜索、微信分享）按浏览器
   返回等于把访客送出站；而站内来路（首页 → 本页）两种写法结果完全一样。所以链到 /
   既覆盖了「返回上一页」，又不会把人丢出站，还不需要 JS，读屏和键盘也照常可用。
   （说明：向右滑动返回是浏览器/系统的内置手势，网页无法新增或改写它，能改的只有按钮。）
   位置在汉堡左边而不是最左：最左是品牌位，7 个页面都钉在那里，不为一个只在子页
   出现的按钮去挪它；右簇本来就是手机端的控件区，返回放这里才读成「控件」而非品牌的一部分。
   不写 :hover —— 它只在触摸设备上出现，点完 hover 会粘住。 */
.back{display:none;align-items:center;height:34px;padding:0 13px;border:1px solid var(--border-2);border-radius:999px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap}
.back::before{content:"←";margin-right:5px;font-size:14px;line-height:1}

/* ---------- 6 · Hero ----------
   组合：文案居中在上，链路面板整幅在下（.hero-in 竖排）。
   为什么仍是居中而不是左文右图：底纹 .hero-glow 以 50%/50% 定位（见 6b），
   文案靠左时圆心会落在文字右侧，那团雾看起来就是"偏到右边去了"。两边同心才不别扭。
   .hero 是 5 个页面共用的类，首页与 4 个子页保持同一套排版；
   子页没有 .hero-vis，竖排容器里自然只剩一块，不需要额外规则。 */
.hero{padding:72px 0 96px;text-align:center;background:var(--band)}
.hero-in{display:flex;flex-direction:column;align-items:center;gap:60px}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero .h1{margin-top:18px}
/* 大字的 em 跟着整站的 em 走 —— .h1 em / .h2 em 一起吃展示轨 --brand-ink-lg
   （浅色区 #0284C7，对 #FAFAF8 3.92:1，大字门槛 3:1；深色区自动变 #67D5FF）。
   这两处是全站**唯一**允许用展示轨的地方：字号够大，才换得来这一档亮度。
   全站只允许出现这一个品牌彩色，所以这里**不要**再给 Hero 单独取色：
   一旦 Hero 的青和正文的青不是同一个值，识别就散了。
   ——首页的变数：H1 末尾那个「拍啥子」现在是字标图（.h1 .wm），不再吃这个颜色，
   于是首页首屏的展示轨蓝只剩 .h2 em（在第 02 节）；子页的 H1 仍是文字 em，照旧。
   首屏那点亮蓝不靠这里的 em：字标图整块就是 --brand #00C3FF（见 .brand-wm 那段），
   H1 末尾和页头各一处，首屏的青色锚点就是它——注意它比这里的展示轨还浅一档，
   摆在一起时 #00C3FF 的字标比 #0284C7 的「也需要被持续看见」更亮，这是有意的。 */
.hero-sub{font-size:18px;line-height:1.8;color:var(--text);margin-top:22px;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* /services/ 的 Hero 底部：4 条「我们负责什么」的短句。
   它和 .out-list 是同一种东西（一撮并列陈述 + 5px 方点），就用同一套行样式，
   只把外层从「左对齐两栏」改成「居中两栏」——Hero 里的一切都是居中的，
   这一段一旦靠左，读起来不像 Hero 的一部分，像掉出来的一段。
   宽度收在 720px 而不是铺满 1180：4 条各约 20 字，铺满会被拉成两行，
   方点也会离正文太远，失去"点着一条一条看"的节奏。 */
.hero-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;
  max-width:720px;margin:30px auto 0;text-align:left;
}
.hero-foot li{display:flex;gap:10px;font-size:14px;line-height:1.6;color:var(--text)}
.hero-foot li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:1px;background:var(--brand-ink);margin-top:9px}

/* 链路面板：Hero 的视觉主角，宽度收在 1000px。
   不给整幅 1180——面板一宽，5 个节点之间的空隙就大过内容本身，看着空。 */
.hero-vis{width:100%;max-width:1000px}
/* 玻璃感来自三件事，缺一件就退化成一块灰方片：
   ① 一层均匀的半透明白（.72）。浅色版**不能**沿用深色版那种「上亮下暗的白渐变」——
      浅底上再往上加白没有空间，渐变会被底吃掉，剩下的只是一块发灰的实色；
   ② 落影 --shadow-2 交代厚度。浅色版没有"顶上那道高光"，厚度全靠影；
   ③ backdrop-filter 让背后那团底纹的紫透进来一点点。 */
.glass-card{
  position:relative;padding:20px 26px 26px;
  border:1px solid var(--border);border-radius:var(--r);
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow-2),var(--hair);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.gc-head{
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--text-2);
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--border);
}
.gc-dots{display:inline-flex;gap:5px}
.gc-dots i{width:7px;height:7px;border-radius:50%;background:var(--border-2)}
/* 第一个点是面板上唯一的彩色，等于一枚"进程活着"的指示灯。 */
.gc-dots i:first-child{background:var(--brand)}

/* 5 段链路：等宽 5 列 + 一条横穿圆心的连接线。
   线从 10% 画到 90%：5 列等分时第 1 列圆心正好落在 10%、第 5 列在 90%，线正好首尾相接。
   图块必须有实底并抬到线上（z-index），否则线会从图标中间穿过去。 */
.hero-pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hero-pipe::before{
  content:"";position:absolute;top:21px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-2) 14%,var(--border-2) 86%,transparent);
}
.hero-pipe li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  /* 错峰入场：--i 是渲染时按序号写进 style 的，第 n 个比前一个晚 90ms。
     整条链路读起来是"从左往右走一遍"，而不是整块一起闪出来。 */
  animation:pipe-in .62s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 90ms + 160ms);
}
@keyframes pipe-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pipe-ic{
  position:relative;z-index:1;
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--card-2);border:1px solid var(--border);color:var(--brand-ink);
  box-shadow:var(--hair);
}
.pipe-tx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.pipe-tx i{display:block;font-style:normal;font-size:12.5px;color:var(--text-2);line-height:1.6;margin-top:4px}

/* 底部这条不是"进度条"，是持续运转的指示灯：一段青光循环扫过。
   用 indeterminate 的扫掠而不是 0→100% 的填充——后者走完就停住，会读成"卡住了"。 */
.gc-track{height:3px;border-radius:3px;background:rgba(24,24,27,.08);margin-top:26px;overflow:hidden}
.gc-track i{
  display:block;width:38%;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-ink),transparent);
  animation:gc-sweep 3.6s var(--ease) infinite;
}
/* 100% 轨道 = 263% 自身宽度（1/0.38），所以终点取 264% 才能完全扫出右边界。 */
@keyframes gc-sweep{from{transform:translateX(-100%)}to{transform:translateX(264%)}}

/* ---------- 6b · 首页 Hero 底纹 ----------
   只作用于首页（section 上多一个 .hero-bg）：4 个子页 Hero 没有底纹。
   排版不在这里碰——居中规则在第 6 节统一给（首页与子页一致）；这段只给底纹提供
   定位与裁切上下文。
   上下 padding 比 .hero 的基准（72/96）各多 24/16px：Hero 越高，底纹上下能被裁到的
   余量越大，遮罩才来得及在裁切边之内归零（详见下面 .hero-glow 的注释）。
   底纹是同一个 brand-symbol.svg，不新建资源、不改 assets。 */
.hero-bg{position:relative;overflow:hidden;isolation:isolate;padding:96px 0 112px}
.hero-bg .wrap{position:relative;z-index:1}

/* 底纹：居中 → 虚化 → 缓慢自转。
   遮罩是关键，而且**必须比元素本身更早淡完**：元素会被 .hero-bg 的 overflow:hidden 裁掉，
   凡是遮罩在裁切边处还没归零的地方，都会变成一条横贯整屏的硬边（实测在 1440×900 上肉眼可见）。
   所以遮罩不能再用 closest-side——它把淡出距离绑在元素尺寸上，元素一大就必然越界。

   改为**显式椭圆**，两个半径分别独立受控（实测 2026-09-27，背景色变化扫描 x=4 列）：
     · 横向 clamp(180px,42vw,560px)：视口半宽有 720px（1440 下），横向全是余量，放开长。
     · 纵向 344px 固定：Hero 实测高 737px（桌面）/ 757px（手机）⇒ 圆心上下余量只有
       368 / 378px。344 是唯一在两端都留出安全边际的值，**不要再往上加**——
       除非先给 .hero-bg 加 padding 把 Hero 撑高（见上一节注释）。
   结果：横向可见范围 344 → 560px（+63%），纵向维持不变，总观感明显变大而不是变圆。
   元素宽度必须 ≥ 2×横向半径，否则椭圆还没淡完就被元素自身的边切了：
   112vw ≥ 2×42vw 恒成立，且上限 1200 ≥ 2×560。 */
.hero-glow{
  position:absolute;top:50%;left:50%;z-index:0;
  width:min(1200px,112vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;user-select:none;
  -webkit-mask-image:radial-gradient(ellipse clamp(180px,42vw,560px) 344px at 50% 50%,#000 20%,rgba(0,0,0,.55) 50%,transparent 100%);
  mask-image:radial-gradient(ellipse clamp(180px,42vw,560px) 344px at 50% 50%,#000 20%,rgba(0,0,0,.55) 50%,transparent 100%);
}
/* 虚化半径跟着尺寸走：手机上 46px 对 440px 的底纹已经糊成一片雾，桌面 86px 才够。
   比例沿用旧的 64/860≈0.074，元素放大后视觉软度不变，靠 opacity 单独调「明显」。
   will-change 让浏览器把「模糊后的纹理」缓存成一层，之后每帧只做 transform。
   浅色底上这层要**很淡**，所以 opacity 从深色版的 .58 压到 .20：
   logo 本身是正蓝（渐变族 #4780FE），58% 铺在 #FAFAF8 上会变成一整片蓝雾，
   直接吃掉「彩色只占 10%」的配额——它现在只是一层底色里的呼吸感，不是视觉主体。
   saturate 保留：糊到 86px 之后色相已经没差别了，剩下能读的就只有饱和度；
   不补这一点，这团雾在米白底上会退成一片脏灰，而不是一团确定的蓝。
   全站唯一的蓝就是这里和它上面那个 logo。 */
.hero-glow img{
  display:block;width:100%;height:100%;
  opacity:.20;
  filter:blur(clamp(46px,7.4vw,86px)) saturate(1.4);
  will-change:transform;
  animation:hero-glow-spin 72s linear infinite;
}
/* 旋转只作用在 img 上，居中位移留在父层 .hero-glow——两处不能都写 translate(-50%,-50%)，
   否则 img 会以自身尺寸再偏移半个身位，底纹直接飞出可视区。 */
@keyframes hero-glow-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---------- 7 · 痛点 ----------
   栅格由 .g12 提供；三张卡等分 12 列，每张跨 4 列。
   跨列必须写在这里而不是 HTML 的 col-span-*：卡片是 JS 渲染出来的，
   Tailwind 的 @source 只扫 5 个 HTML，扫不到 js/ 字符串里的类名。
   规矩是「类名跟着 markup 走」——HTML 里的结构用工具类，JS 出的结构只能用选择器接。 */
.pains>*{grid-column:span 4}
.pcard{
  position:relative;padding:30px 28px 32px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-1);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
/* hover 只提两根发丝（边 + 上浮 2px），不改底色：三张卡并排时任何一张变色都会抢走另外两张的权重。 */
.pcard:hover{border-color:var(--border-2);transform:translateY(-2px)}
/* 序号钉在右上角：它标的是"第几个问题"，不该参与从左到右的阅读流。
   绝对定位后与图标同处卡片顶部，但一个是标尺、一个是内容，位置分开正好各司其职。 */
/* 子页的同类卡片（/services /about /cases）用的是 <div class="pnum">。
   内容和 .pcard-no 不一样（写的是"第一步""制造业"这类词，不是序号），
   但在卡片里的角色完全相同——都是钉在右上角的标尺。
   所以两处共用同一条声明：分头写两份，改的时候一定会漏掉一份。 */
.pcard-no,.pnum{position:absolute;top:28px;right:28px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--text-2)}
/* 图标底是**实心亮青**（--brand）配 --on-brand 近黑描边，与主按钮同一对：
   亮青上放近黑是 8.50:1，全站最扎实的一对；上一版是"浅青底 + 墨色细边"，
   结果整张卡片没有一处真正亮起来。首页三张痛点卡各带一枚 44px 的实心青块，
   这是"亮蓝"在页面中段的主要面积来源，别为了"轻一点"又缩回浅底。 */
.pcard-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--brand);border:1px solid var(--brand);color:var(--on-brand);
}
.pcard h3{font-size:20px;letter-spacing:-.01em;margin:20px 0 10px}
.pcard p{font-size:15px;line-height:1.75;color:var(--text)}
/* 收口句：三张卡之后的一句总起。刻意比卡片正文大两档（20px/600），
   让它读起来是"结论"而不是"第四张卡"。 */
.pnote{margin-top:34px;text-align:center;font-size:20px;font-weight:600;letter-spacing:-.01em}
.pnote em{font-style:normal;color:var(--brand-ink)}

/* ---------- 8 · 一条龙 Timeline ---------- */
.flow{position:relative;max-width:900px}
.flow::before{content:"";position:absolute;left:20px;top:20px;bottom:20px;width:1px;background:var(--border)}
.flow-step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:22px;padding:13px 0}
/* 浅色版把「点亮」整件事反转了：深色版是暗→亮（未到的步压到 .62），
   浅色版**不能压暗**——正文吃的 --text 是 #71717A，对 #F7F7F5 正好 4.50:1，
   已经贴着 AA 底线，乘任何小于 1 的透明度都会掉出去（.62 实测约 2.3:1，3:1 都不到）。
   所以这里不碰文字，状态改由节点自己承担：未到的步是白底灰字的方牌，
   滚到谁，谁的方牌才翻成品牌青（.flow-step.on .flow-num，见下）。
   顺带把青用得更省——只有 40px 见方，正合「青只做小面积视觉强调」。 */
/* 节点底用 --card 而不是 --card-2：这一节整体是 --bg 或 --band（#F7F7F5 / #FAFAF8），
   浅色版里比底**更亮**的只有 --card（纯白），所以白方块压在连接线上才是"浮起来"；
   --card-2 比页底更深，用它节点会变成一个个凹进去的坑，和"流程节点"的意思正好相反。
   （这一节只出现在浅色页面，不经过深色区；深色区那边 --card 是 #202024，同样比底亮。） */
.flow-num{
  position:relative;z-index:1;width:40px;height:40px;border-radius:var(--r-xs);
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--text-2);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.flow-step.on .flow-num{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.flow-step h3{font-size:17px;margin:7px 0 5px;letter-spacing:-.01em}
.flow-step p{font-size:14.5px;line-height:1.72;color:var(--text);max-width:66ch}
.loop{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:36px;padding:16px 22px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--card);font-size:15px;font-weight:600;
}
.loop i{font-style:normal;color:var(--brand-ink)}
.loop span{font-size:13.5px;font-weight:500;color:var(--text-2);margin-left:4px}

/* 首页「核心产品」用的宽版链路：5 步，比子页的 10 步链路更宽也更疏。
   仍保持竖向——Hero 里已经有一条横向的 5 段链路，这里再横一次就重复了；
   竖排正好把这一步一步"往下走"的推进感做出来，和 Hero 的"并行五段"区分开。
   宽度收在 780px、与上面 .sec-head 同宽同起点——整节的左边缘因此是一条直线，
   数字列、标题、正文全部对齐在同一个轴上看。 */
.flow-wide{max-width:780px}
.flow-wide .flow-step{padding:16px 0}
.flow-wide .flow-step h3{font-size:19px;margin:9px 0 6px}
.flow-wide .flow-step p{font-size:15px}
/* 收口句：比正文大一档、居中，和三张痛点卡后面的 .pnote 是同一个角色——
   给一整节一个"说完了"的落点，而不是让段落自然结束。 */
.product-line{margin-top:38px;text-align:center;font-size:20px;font-weight:600;letter-spacing:-.01em}
.product-line em{font-style:normal;color:var(--brand-ink)}

/* ---------- 9 · 核心服务 ---------- */
/* 5 张卡在 12 列里排 7+5 / 4+4+4：两行都填满，且第一行刻意不等分。
   主服务放 7 列，是这一节的重心；后三张等分收尾。 */
.srv{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:26px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
/* 跨列用 :nth-child 而不是工具类 —— 这 5 张卡是 app.js 从 SERVICES 渲染出来的，
   而 Tailwind 的 @source 只扫 HTML，写在 JS 里的类名不会被生成。
   规矩：**类名跟着 markup 走**，HTML 里的用工具类，JS 渲染的用 CSS 选择器。 */
.srvs>*{grid-column:span 4}
.srvs>:nth-child(1){grid-column:span 7}
.srvs>:nth-child(2){grid-column:span 5}
.srvs>:nth-child(1) h3{font-size:22px}
.srvs>:nth-child(1) p{font-size:15px;max-width:52ch}
.srv:hover{border-color:var(--border-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* 同 .pcard-ic：实心亮青 + 近黑描边。三张服务卡是 /services 的第一屏，
   这里的青块负责让那一屏也有亮色，别退回浅底。 */
.srv-ic{
  width:38px;height:38px;border-radius:10px;background:var(--brand);color:var(--on-brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
/* 这五行是「这一档服务解决谁的什么问题」，是卡片的入口句，
   所以做得比正文小、比正文淡，且不能带下边距——它和 h3 是一组。
   注意别写成 .srv p：那会连 .srv-d 一起命中，把正文也压成 12.5px。 */
.srv-need{font-size:12.5px;line-height:1.6;color:var(--text-2);letter-spacing:.02em;margin:0}
.srv h3{font-size:19px;letter-spacing:-.01em;margin:8px 0 10px}
.srv-d{font-size:14.5px;line-height:1.72;color:var(--text);margin:0 0 18px}
/* 标签直接用 <i> 出，所以每条标签的边和底都落在 .srv-tags>i 上；
   底用 --card-2（卡片里再抬一层）而不是 --bg：--bg 比卡片还深，贴上去像挖了个洞。 */
.srv-tags{display:flex;flex-wrap:wrap;gap:8px}
.srv-tags>i{
  font-style:normal;font-size:12.5px;color:var(--text);
  background:var(--card-2);border:1px solid var(--border);
  border-radius:7px;padding:4px 9px;
}

/* ---------- 10 · 月度服务方案（首页价格入口 + /pricing 共用） ----------
   这一块卖的是「按月持续生产内容的服务」，不是「一条视频多少钱」。
   所以整块只有一条红线：**价格的视觉重量必须压过视频条数**。
   落到数值上就是价格 40px、条数 15px，而且条数永远排在价格下面一行；
   顺序一旦反过来，这块就会被读成批发视频，「持续生产」这件事就没了。
   三张卡等高靠的是 align-items 的默认值 stretch（原来写死的 start 会让各卡各高，
   底部 CTA 跟着参差不齐）；卡片本身已经是 flex 列，CTA 由 margin-top:auto 顶到底。 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow-1);
}
/* transition 必须挂在 .plans .plan（权重 0-2-0）上，不能只写 .plan：
   同权重时后出现的 .rv 会把 transition 整条覆盖掉（.rv 在下面第 900 多行），
   hover 就一点过渡都没有。opacity / transform 两项照抄 .rv 的 .6s，
   滚动入场动画不受影响；上浮改走独立的 translate 属性，不去和 .rv 抢 transform，
   于是上浮可以是 .2s 的手感。
   代价是这一条权重高过下面 prefers-reduced-motion 里的 .plan，
   那边已经同步补上 .plans .plan，否则关掉系统动效的用户反而会看到上浮。 */
.plans .plan{
  transition:opacity .6s var(--ease),transform .6s var(--ease),
    translate .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
/* hover 只做三件事：边框换品牌色、阴影抬起来、整体上浮 2px。不换底色、不缩放、不闪。 */
.plan:hover{border-color:var(--brand);box-shadow:var(--shadow-2);translate:0 -2px}
/* 推荐档只强调、不喧哗：边框深一档、阴影重一档、价格换色相（见下面 .plan.feat .plan-price）。
   不做渐变、不放大、不加动画——这块的气质是商业，不是促销。
   边框用 --brand-ink 而不是 --brand：1px 的线是图形不是文字，
   --brand（#00C3FF）对白只有 2.05:1，够不到 3:1 的非文字门槛；
   --brand-ink（#0E7490）是 5.36:1，同样是青，但在白卡片上立得住。 */
.plan.feat{border-color:var(--brand-ink);box-shadow:var(--shadow-2)}
/* 推荐标是实心亮青 + 近黑字（8.50:1）。浅青底那版在价格区里太安静，
   而这块地方正是要一眼看出"哪一档是推荐的"——彩块比浅底更胜任。 */
.plan-tag{
  position:absolute;top:20px;right:20px;padding:4px 9px;border-radius:7px;
  background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:600;
}
/* 卡片的阅读顺序是定死的，不能改：
     套餐名 → 价格 → / 月 → 视频数量 → 适合人群 → 核心服务 → CTA
   价格是这一档的决策点，是整张卡里字号最大的一行；
   --ink 而不是青：青色在这个版面上是"强调"，价格需要的是"清楚"。 */
.plan-name{font-size:16px;font-weight:600;letter-spacing:0}
/* 编号只是索引，不是内容：12px + --text-2。它让卡片和下面那张对比表能对上号。 */
.plan-no{display:inline-block;margin-right:8px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--text-2);font-variant-numeric:tabular-nums}
.plan-price{font-size:40px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:18px 0 0;font-variant-numeric:tabular-nums}
/* 推荐档的价格换到 --brand-ink-lg（#0284C7，对白 4.10:1，大字号够用）。
   只换色相、不动字号：¥6999 于是成为三张卡里第一眼看到的东西。
   放大或加底色都会让这一档显得比别的档"高级"，而我们要说的是"推荐"。 */
.plan.feat .plan-price{color:var(--brand-ink-lg)}
/* 「/ 月」跟着价格走，但不能和数字抢：12.5px 的 --text-2 正好是它的位置。
   左边留一点空——「¥4999/月」挤在一起时，"月"会被读成价格的一部分。 */
.plan-unit{font-size:12.5px;font-weight:500;color:var(--text-2);margin-left:6px;letter-spacing:0}
/* 条数是价格的注脚，不是它的对手：15px（不到价格的 4 成），数字用 --ink 提一档，
   单位「条 / 月」留在 --text-2。看得清，但不可能比 ¥4999 响——这就是那条红线。 */
.plan-qty{font-size:15px;color:var(--text-2);margin-top:8px;font-variant-numeric:tabular-nums}
.plan-qty b{font-weight:600;color:var(--ink)}
/* 一句适合人群，用一条发丝线隔开：线以上是事实（多少钱、多少条），
   线以下是判断（适不适合你）。三张卡的线落在同一高度附近，扫读时是一列。 */
.plan-for{font-size:14px;line-height:1.7;color:var(--text);margin:18px 0 22px;padding-top:18px;border-top:1px solid var(--border)}
.plan-list{display:grid;gap:11px;margin-bottom:26px}
.plan-list li{display:flex;gap:10px;font-size:14px;color:var(--text);line-height:1.6}
/* 5px 方点用墨色轨（--brand-ink）：这是发丝级的小标记，底下是纯白卡片，
   要用两条轨里更深的那条才立得住——正是 --brand 与 --brand-ink 分开的原因。 */
.plan-list li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:1px;background:var(--brand-ink);margin-top:9px}
.plan-list b{color:var(--ink);font-weight:600}
/* 按钮靠 margin-top:auto 推到卡片底部，三张卡高度不一时按钮仍然齐平。
   选择器直接写 .plan-cta（它就是那个 <a> 本身），别再写 .plan-cta .btn——
   那个选择器找的是 .plan-cta 里的后代按钮，而这里压根没有后代，永远不命中。 */
.plan-cta{margin-top:auto;width:100%}

/* ---------- 首页 §06：改版前的卡片版式（data-plans="entry"） ----------
   /pricing 是改版后的月度三档，首页 §06 按用户要求整块退回改版前那一版。
   两处仍然共用同一份数据层和 CSS，所以旧版式全部收在容器属性
   `.plans[data-plans="entry"]` 上（权重 0-2-0 起，稳过上面那些 0-1-0 的新版规则），
   /pricing 的 DOM 一个字都不用动，也不会被这里改到。
   版式差别只有四处：卡片不等高、价格 34px、推荐档价格不换色、hover 边框不上浮。
   另外补回新版删掉的两个类：.plan-cn（副题）和 .plan-desc（一句话定位）。 */
.plans[data-plans="entry"]{align-items:start}
.plans[data-plans="entry"] .plan{
  transition:opacity .6s var(--ease),transform .6s var(--ease),
    border-color .2s var(--ease),box-shadow .2s var(--ease);
}
/* 旧版 hover 只抬阴影、边框深一档，不位移。上浮是改版后新加的，这里要显式关掉，
   否则 .plan:hover 的 translate:0 -2px（0-2-0）会被继承下来。 */
.plans[data-plans="entry"] .plan:hover{border-color:var(--border-2);box-shadow:var(--shadow-2);translate:none}
.plans[data-plans="entry"] .plan-price{font-size:34px}
/* 推荐档在旧版里只靠边框和推荐标区分，价格不换色相。 */
.plans[data-plans="entry"] .plan.feat .plan-price{color:var(--ink)}
/* 卡片的阅读顺序：方案名（这是什么）→ 一句话定位 → 价格（多少钱）→ 说明 → 清单。
   价格是这一档的决策点，所以它是卡片里字号最大的一行，
   --ink 而不是青：青色在这个版面上是「强调」，价格需要的是「清楚」。 */
.plans[data-plans="entry"] .plan-cn{font-size:12.5px;color:var(--text-2);letter-spacing:.04em;margin-top:6px}
.plans[data-plans="entry"] .plan-desc{font-size:14px;line-height:1.7;color:var(--text);margin:14px 0 20px}


/* 详细服务对比表（只有 /pricing 有）。
   这张表最容易做错的地方是"做成 Excel"：格子太满、线太重、每格都描边。
   所以这里只留横向的行线（border-bottom），不画竖线、不画外框；
   表头那一条比行线深一档（--border-2），扫读时一眼能找到"这一列是谁"。
   对齐是刻意的：第一列左对齐（它是标签，像一段文字），三个方案列居中（它们是格）。
   min-width:720px 是桌面的舒适下限（再窄，标签列就被挤成两行）。
   窄屏不靠横滑解决：那里把下限让给视口、字号收一档，四列并排放下（见 §20）。
   .cmp-scroll 的 overflow-x 只是兜底——正常不该滚，表是 100% 宽、fixed 布局。 */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-tb{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed}
.cmp-tb th,.cmp-tb td{padding:16px 14px;text-align:center;border-bottom:1px solid var(--border)}
.cmp-tb thead th{border-bottom:1px solid var(--border-2)}
/* 第一列既要左对齐又要压过上面那条居中规则，所以必须写到 0-2-0。
   服务名这一格在表头和每一行都用同一个类，一条规则同时管住两处。 */
.cmp-tb .cmp-k{width:34%;text-align:left;font-weight:500;color:var(--text)}
.cmp-tb thead .cmp-k{font-weight:600;color:var(--ink)}
/* 带文字的格子只有"月度视频数量"一行：它是数字，用 --ink 提到最清楚，
   但字号仍是 15px —— 比卡片的 40px 价格小得多，不能靠表格把条数抬起来。 */
.cmp-t{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* ✓ 用墨色轨（--brand-ink，#0E7490，对白 5.36:1）。
   --brand（#00C3FF）对白只有 2.05:1，一个 17px 的勾用它等于糊在白纸上。
   「—」也刻意不灰到看不见：它说的是"这一档不含"，不是"没有内容"。 */
.cmp-y{font-style:normal;font-size:17px;font-weight:700;color:var(--brand-ink)}
.cmp-n{font-style:normal;color:var(--border-2)}
/* 推荐列给一层最淡的浅青底（--brand-soft）。整列铺色就已经足够指出重点，
   再加深、再加边框，这张表就会重新变成促销物料。 */
.cmp-hl{background:var(--brand-soft)}

/* 「不确定选哪个？」三选一。它不是第二组价格卡，所以刻意做得更轻：
   没有价格、没有按钮、没有阴影，只有条数 + 一句人话。 */
.choose{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.choose-i{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:24px}
.choose-q{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.choose-t{font-size:16px;font-weight:600;color:var(--ink);margin-top:8px}
.choose-d{font-size:14px;line-height:1.7;color:var(--text);margin-top:8px}
.choose-more{display:inline-block;margin-top:26px;font-size:15px;font-weight:600;color:var(--brand-ink)}
.choose-more:hover{text-decoration:underline;text-underline-offset:3px}


/* ---------- 10b · 企业短视频运营报价模块（只挂在 /pricing） ----------
   这一节把「一个核心产品 + 三档服务深度」讲完：卡片（.plan 系列）→ 三档差在哪
   （.pkeys）→ 一次上门拍什么（.shoots）→ 怎么做（.how）→ 对比表（.cmp 系列）
   → 投流加项（.ads）→ 价格说明与收尾（.notes / .pfin）。
   颜色全部走既有 token，没有新增 --xxx：青色 --brand 只做填充和角标，
   墨色 --brand-ink 做小标题与勾，展示色 --brand-ink-lg 只给推荐档价格。
   注意 .plan-list 是 grid，[hidden] 的 display:none 会被它盖掉，
   所以手机上折叠用的是类名（.plan-svc / .is-open），见 §20。 */

/* 卡片里的「定位」一句话：比适合人群重，但不抢价格 */
.plan-pos{font-size:15px;font-weight:600;line-height:1.6;color:var(--ink);margin-top:16px}

/* 服务清单改成「名称一行 + 说明一行」：名称是主体，说明是补充。
   margin-bottom 归零——原来的 26px 是给收尾按钮留的，这里收尾的是 .plan-who。 */
.plan-svc{margin-bottom:0;flex:1 1 auto;align-content:start}
.plan-svc li{display:block;position:relative;padding-left:15px}
.plan-svc li::before{position:absolute;left:0;top:8px;margin-top:0}
.plan-svc li b{display:block}
.plan-svc li span{display:block;font-size:13px;line-height:1.6;color:var(--text-2);margin-top:3px}

/* 适合客户：和上面的服务清单用一条细线隔开，再往下才是按钮 */
.plan-who{font-size:13px;line-height:1.7;color:var(--text);margin:22px 0 22px;padding-top:18px;border-top:1px solid var(--border)}
.plan-who span{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-2);margin-bottom:5px}

/* 折叠开关只在窄屏出现（§20 给样式），宽屏清单始终展开 */
.plan-toggle{display:none}

/* 三档到底差在哪：一行一档，左边档次名，右边那个词 */
.pkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.pkey{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xs);padding:14px 18px}
.pkey-n{font-size:14px;font-weight:600;color:var(--text-2)}
.pkey-k{font-size:15px;font-weight:600;color:var(--brand-ink)}

/* 一次上门可以拍什么：八张小卡，两行四列。
   这一节的地是 --bg，卡片取 --card（白）才浮得起来。 */
.shoots{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shoot{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px}
.shoot-t{font-size:16px;font-weight:600;color:var(--ink)}
.shoot-d{font-size:13.5px;line-height:1.65;color:var(--text);margin-top:8px}
.shoots-note{font-size:14.5px;line-height:1.7;color:var(--text-2);margin-top:28px;text-align:center}

/* 怎么做：五步。宽屏横向，步骤之间一个箭头；窄屏竖着排（§20 换方向）。
   这里必须是 <ol> 才能用 li+li 定位箭头，而 ol 自带 padding-left 和小圆点，
   所以先把列表重置掉。 */
.how{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;padding:0}
.how-i{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px}
.how-i+.how-i::before{content:"→";position:absolute;left:-14px;top:50%;translate:0 -50%;width:12px;text-align:center;font-size:12px;color:var(--border-2)}
.how-n{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.how-t{font-size:16px;font-weight:600;color:var(--ink);margin-top:10px}
.how-d{font-size:13.5px;line-height:1.65;color:var(--text);margin-top:8px}
.how-note{font-size:16px;font-weight:600;color:var(--brand-ink);margin-top:28px;text-align:center}

/* 视频号投流：可选加项，所以不做成第四张套餐卡——一张白卡，左价格右清单。 */
.ads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px 34px;box-shadow:var(--shadow-1)}
.ads-main{min-width:0}
.ads-price{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ads-unit{font-size:13px;font-weight:500;color:var(--text-2);margin-left:6px;letter-spacing:0}
.ads-pos{font-size:14.5px;line-height:1.7;color:var(--text);margin-top:10px}
.ads-list{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;list-style:none;padding:0;margin:0}
.ads-list li{display:flex;gap:10px;font-size:14px;color:var(--text);line-height:1.6}
.ads-list li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:1px;background:var(--brand-ink);margin-top:9px}
.ads-note{font-size:13px;line-height:1.75;color:var(--text-2);margin-top:20px}

/* 价格说明：四条，两行两列 */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.note-i{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:24px}
.note-t{font-size:15px;font-weight:600;color:var(--ink)}
.note-d{font-size:14px;line-height:1.75;color:var(--text);margin-top:10px}

/* 模块收尾：整块留白收在一句上，按钮只有一个 */
.pfin{margin-top:56px;padding:52px 40px;border-radius:var(--r);background:var(--card);border:1px solid var(--border);text-align:center}
.pfin-h{font-size:clamp(24px,2.6vw,34px);line-height:1.25;letter-spacing:-.02em;font-weight:700;color:var(--ink);text-wrap:balance}
.pfin-h em{font-style:normal;color:var(--brand-ink-lg)}
.pfin-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ---------- 11 · 生产状态看板 ----------
   这一节的地是 --bg（#F7F7F5），面板要读成"浮起来"，所以底必须取 --card（纯白）——
   浅色版的阶梯是 --card-2 < --bg < --band < --card，只有 --card 比页底亮；
   用 --card-2 会把这个面板做成一个凹进去的坑（那一层是留给"内嵌/凹陷"的）。
   抬起来只靠两件事：纯白底 + 外圈 --shadow-2 的落影——浅色版没有"顶上那道高光"可用。
   （原 .sec-dark 的一组规则已随暖白版一起删除：HTML 里没有任何元素用过它。） */
.board{background:var(--card);border:1px solid var(--border-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-2),var(--hair)}
.board-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:24px 28px;border-bottom:1px solid var(--border);
}
.board-title{font-size:17px;font-weight:700;color:var(--ink)}
.board-sub{font-size:13px;color:var(--text-2);margin-top:4px}
.board-total{font-size:14px;color:var(--text);white-space:nowrap}
.board-body{padding:14px 28px 22px}
.row{display:grid;grid-template-columns:72px 1fr 88px;gap:16px;align-items:center;padding:11px 0}
.row-k{font-size:14.5px;color:var(--text)}
.row-bar{height:8px;border-radius:4px;background:rgba(24,24,27,.07);overflow:hidden}
/* 未完成的一条：轨道内那截填充是"有进度但还没走完"留下的痕迹，
   用 16% 炭黑——比 7% 的轨道明显一档，又不会读成一条已经跑满的进度。 */
.row-fill{display:block;height:100%;width:0;border-radius:4px;background:rgba(24,24,27,.16);transition:width .9s var(--ease)}
.row.done .row-fill{background:var(--ink)}
.row.run .row-fill{background:var(--brand)}
.row-n{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  font-size:14.5px;color:var(--text-2);
}
.row.done .row-n{color:var(--ink)}
.row.run .row-n{color:var(--brand-ink);font-weight:600}
.mk{font-style:normal;font-size:12px;line-height:1}
.mk-run{width:6px;height:6px;border-radius:2px;background:var(--brand)}
.board-foot{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding:16px 28px 22px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-2);
}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg i{display:block;width:10px;height:6px;border-radius:2px}
/* 图例三态靠"深浅 + 色相"两轴分开：已完成 = --ink（近黑，最重）、
   进行中 = --brand（唯一有彩的一格，也正好是那 10% 青该去的地方）、
   未开始 = 18% 炭黑（最浅，读成"还没轮到"）。
   三格的明度必须拉开：未开始一旦接近已完成那格的重量，图例就没有意义了。 */
.lg .s-done{background:var(--ink)}
.lg .s-run{background:var(--brand)}
.lg .s-todo{background:rgba(24,24,27,.18)}

/* ---------- 12 · 为什么高效 ---------- */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 36px}
.chain b{
  font-size:14px;font-weight:600;background:var(--card);
  border:1px solid var(--border);border-radius:9px;padding:8px 13px;
}
.chain i{font-style:normal;color:var(--brand-ink);font-size:14px}
.meth{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.meth-i{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--border)}
.meth-i b{font-size:13px;font-weight:700;color:var(--brand-ink)}
.meth-i h3{font-size:15.5px;letter-spacing:-.01em;margin-bottom:5px}
.meth-i p{font-size:13.5px;line-height:1.68;color:var(--text)}

/* ---------- 13 · AI ---------- */
/* 7 张卡原来挤在 repeat(7,1fr) 里，是整页最严重的等分。
   改成 4+3：第一行四张 span 3，第二行三张 span 4，两行都填满 12 列。 */
.ai-grid>*{grid-column:span 3}
.ai-grid>:nth-child(n+5){grid-column:span 4}
.ai-i{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:20px 14px;
}
.ai-ic{width:30px;height:30px;color:var(--brand-ink)}
.ai-i h3{font-size:14px;font-weight:600}
.ai-i p{font-size:12px;line-height:1.6;color:var(--text-2)}

/* ---------- 14 · 案例 ---------- */
.case-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.case-name{font-size:17px;font-weight:700}
.case-meta{font-size:13px;color:var(--text-2)}

/* —— 首页：三张企业卡（#caseCards）——
   跨列写在这里而不是 HTML 的 col-span-*：卡片是 app.js 从 CASES 渲染的，
   Tailwind 的 @source 只扫 HTML（见开头「类名跟着 markup 走」那条规矩）。 */
.cases>*{grid-column:span 4}
.case-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-1);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.case-card:hover{border-color:var(--border-2);transform:translateY(-2px)}
.case-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:20px}
.case-hd h3{font-size:17px;letter-spacing:-.01em}
/* 行业标签做成一块小底：它是这三张卡唯一的分类维度，
   没有它，三家企业看起来只是三段并列的文字。 */
.case-ind{
  font-size:12px;font-weight:600;color:var(--brand-ink);
  background:var(--brand-soft);border-radius:6px;padding:3px 8px;
}
.case-rows{display:grid;gap:14px;margin:0}
/* 每一行是「字段名 + 内容」的横排：字段名固定 5.2em 对齐，
   四行的内容左边缘因此能连成一条竖线，扫读时不必逐行找起点。 */
.case-row{display:grid;grid-template-columns:5.2em 1fr;gap:12px;align-items:baseline}
.case-row dt{font-size:12.5px;color:var(--text-2);white-space:nowrap}
.case-row dd{font-size:13.5px;line-height:1.7;color:var(--text);margin:0}

/* —— /cases：一个企业的完整链路 ——
   9 步排成两列：中间第 5 步「第一次集中拍摄」是叙事的转折点，
   独占整行并加重——这个位置恰好就是案例故事里投入发生的那一刻。 */
.case-flow>*{grid-column:span 6}
/* 转换点那一步用 --brand-soft 的底 + 22% 品牌青的边：底已经是浅青，
   边不能再浅（会和底糊成一片），也不能直接上 --brand 的实线
   （一整块浅青上突然出现一根很重的框，会把这一步读成"错误状态"）；
   22% 是同一族青里退后一档的位置。 */
.case-flow>:nth-child(5){
  grid-column:span 12;padding:28px;
  background:var(--brand-soft);border-color:rgba(0,195,255,.22);
}
.case-flow>:nth-child(5) .case-h{font-size:18px}
.case-flow>:nth-child(5) .case-v{font-size:15.5px;max-width:64ch}
.case-step{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:22px}
/* .case-h / .case-v 在 app.js 里是 <span>；span 默认 inline，两条会并排挤成一行。
   这里必须显式改成块级，否则九个步骤全部连成一句。 */
.case-h{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.case-v{display:block;font-size:14px;line-height:1.72;color:var(--text)}

/* ---------- 15 · 企业内容配置器（只挂在 /pricing 的 #quote） ---------- */
/* 需求诊断 → 推荐套餐 → 咨询。整块是「轻工具」，不是后台表单，
   所以：一道题一屏、选项整块可点、答完自己往前走，没有提交按钮。
   深色区只留给首页 CTA、页脚和 /pricing 的投流段，这里必须保持浅底。 */
.wiz{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:32px;box-shadow:var(--shadow-1);max-width:960px;margin:0 auto;
}
/* 顶部只给「01 / 04」和四段细指示，不做百分比进度条。
   四段是等宽短杠不是圆点：圆点在浅色底上会读成轮播指示器，短杠才像工具。
   当前段用 --brand-ink（墨青，5.36:1）而不是 --brand：3px 的色块属于
   「发丝级品牌痕迹」，浅青在白色面板上只有 2.05:1，当状态指示读不出来。
   已过段用同一支墨青压低透明度，三步明度关系自己成立，不引入第四种颜色。 */
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.wiz-no{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--text-2);font-variant-numeric:tabular-nums}
.wiz-dots{display:flex;gap:6px}
.wiz-dots i{display:block;width:22px;height:3px;border-radius:2px;background:rgba(24,24,27,.10);transition:background .3s var(--ease)}
.wiz-dots i.done{background:rgba(14,116,144,.38)}
.wiz-dots i.on{background:var(--brand-ink)}
/* 四道题的高度差得很多（6 张大卡 vs 9 个短标签），给一个下限，
   翻页时卡片不会一屏高一屏矮地跳。 */
.wiz-body{min-height:340px}
.wiz-step{display:none}
.wiz-step.on{display:block;animation:cfgIn .26s var(--ease) both}
@keyframes cfgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wiz-q{font-size:17px;font-weight:700;letter-spacing:-.01em}
.wiz-hint{font-size:13px;color:var(--text-2);margin:6px 0 20px}

/* ---- 选项 ----
   两种版式，由「单选还是多选」决定（见 app.js 的 wizPanelHTML）：
   单选带说明，用大卡片；多选是并列的短标签，用药丸行。
   注意本页从来没有全局 box-sizing:border-box（preflight 一直没引进来），
   所以下面凡是「有边框 + 有固定尺寸」的盒子，尺寸都要自己把边框算进去。 */
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  border:1px solid var(--border);background:var(--card);border-radius:var(--r-xs);
  padding:13px 18px;text-align:left;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
/* 选项和它所在的 .wiz 面板同为 --card（纯白），靠边框分格。
   hover 用 --card-2（#F4F4F2）压一档——浅色界面里"鼠标停在这"就是压一层灰，
   不是抬亮；不能反过来去用 --band（#FAFAF8）：那比卡片亮，在白面板上根本看不出来。
   选中态（.on）走的是色相不是明度（浅青底 + 墨青边），所以和 hover 不会撞。 */
.opt:hover{border-color:var(--border-2);background:var(--card-2)}
.opt.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.opt-k{display:block;font-size:14.5px;font-weight:600}
.opt.on .opt-k{color:var(--brand-ink)}
.opt-d{display:block;font-size:12.5px;color:var(--text-2);margin-top:3px}

.opts-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  min-height:96px;padding:18px 46px 18px 20px;
  border:1px solid var(--border);background:var(--card);border-radius:var(--r-sm);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.opt-card:hover{border-color:var(--border-2);background:var(--card-2)}
.opt-card.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.opt-card .opt-k{font-size:15px}
.opt-card .opt-d{margin-top:5px}
.opt-card.on .opt-k{color:var(--brand-ink)}
/* 勾选框：18px 内容盒 + 上下左右各 1px 边框 = 20px 视觉尺寸。
   勾本身用两条边框转 45° 画出来，不引任何图标资产。
   .opt-ck::after 是绝对定位、不参与任何宽度分配，所以这里的
   left/top 就是相对内容盒量出来的：margin 盒 6..12 × 4..14，
   旋转后包围盒中心落在 (9,9)，正好是圆心的位置。 */
.opt-ck{
  position:absolute;top:16px;right:16px;width:18px;height:18px;
  border:1px solid var(--border-2);border-radius:50%;background:var(--card);
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.opt-ck::after{
  content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;
  border-style:solid;border-width:0 2px 2px 0;border-color:var(--on-brand);
  transform:rotate(45deg);opacity:0;transition:opacity .16s var(--ease);
}
/* 选中：填充用 --brand，勾用 --on-brand。这就是「亮底 + 近黑字」那条规则，
   放在图形上也一样——#1A1A1A 压在 #00C3FF 上是 8.5:1。 */
.opt-card.on .opt-ck{background:var(--brand);border-color:var(--brand)}
.opt-card.on .opt-ck::after{opacity:1}
/* 「基本没有素材」的安抚话术。由 JS 按选择结果决定要不要渲染，
   不是靠 display 开关——省掉一次权重计算。 */
.wiz-note{
  font-size:13px;line-height:1.7;color:var(--brand-ink);
  background:var(--brand-soft);border-radius:var(--r-xs);
  padding:12px 16px;margin-top:16px;
}
.wiz-nav{display:flex;align-items:center;gap:12px;margin-top:28px}
.wiz-out{display:none;margin-top:28px;padding-top:26px;border-top:1px solid var(--border)}
.wiz-out.on{display:block}
/* 结果态：上面已经没有问题卡了，那条分隔线就没有意义。 */
.wiz-out.full{margin-top:0;padding-top:0;border-top:0}

/* ---- 结果：左边企业内容画像，右边推荐方案 ---- */
.cfg-head{margin-bottom:26px}
.out-h{font-size:20px;font-weight:700;letter-spacing:-.015em}
.out-sub{font-size:13.5px;color:var(--text-2);margin:8px 0 0}
.cfg-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:32px;align-items:start}
.cfg-block+.cfg-block{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.cfg-k{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--text-2);margin-bottom:10px}
.cfg-tags{display:flex;flex-wrap:wrap;gap:8px}
.cfg-tag{font-size:13px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink)}
.cfg-v{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cfg-v-s{font-size:14.5px;font-weight:500;line-height:1.65;color:var(--ink)}
.cfg-x{font-size:12.5px;line-height:1.7;color:var(--text-2);margin-top:8px}
/* 推荐方案是全页最重要的东西，所以它是这块里唯一带投影的盒子——
   用的是已有的 --shadow-2，不是新造一层投影。 */
.cfg-pick{border:1px solid var(--border-2);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-2);padding:28px}
.cfg-flag{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--brand);color:var(--on-brand)}
.cfg-pick-name{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-top:14px}
.cfg-pick-price{display:flex;align-items:baseline;gap:4px;font-size:38px;font-weight:700;letter-spacing:-.035em;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.cfg-pick-price span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--text-2)}
.cfg-pick-qty{font-size:14px;font-weight:600;color:var(--brand-ink);margin-top:2px}
.cfg-pick-line{font-size:14px;line-height:1.72;color:var(--text);margin-top:14px}
.cfg-why-h{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--text-2);margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.cfg-why{display:grid;gap:8px;margin-top:10px}
.cfg-why li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.cfg-why li::before{
  content:"";position:absolute;left:3px;top:6px;width:4px;height:8px;
  border-style:solid;border-width:0 2px 2px 0;border-color:var(--brand-ink);
  transform:rotate(45deg);
}
.cfg-x-price{margin-top:16px}
.cfg-foot{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.cfg-lock{font-size:12.5px;line-height:1.7;color:var(--text-2)}
.cfg-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
/* .btn 自带 display:inline-flex，权重 (0,1,0)。HTML 的 hidden 属性对它无效
   （UA 的 [hidden] 权重更低，任何 display 声明都能压过去），所以「打开微信咨询」
   的收起只能靠权重更高的类选择器，不能靠 hidden，也不值得上 !important。 */
.cfg-acts .cfg-wx{display:none}
.cfg-acts .cfg-wx.on{display:inline-flex}
.cfg-hint{font-size:13px;line-height:1.7;color:var(--brand-ink);margin-top:12px}
.cfg-hint:empty{display:none}
.cfg-ta{
  display:none;width:100%;margin-top:14px;padding:14px 16px;
  border:1px solid var(--border-2);border-radius:var(--r-xs);
  background:var(--card-2);color:var(--text);
  font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  resize:vertical;
}
.cfg-ta.on{display:block}

/* 下面这组 .out-* 只服务 <noscript> 的静态兜底正文（/pricing 和首页各一段），
   JS 不碰它们，所以样式保持原样。 */
.out-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin-bottom:22px}
.out-list li{display:flex;gap:10px;font-size:14px;color:var(--text);line-height:1.6}
.out-list li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:1px;background:var(--brand-ink);margin-top:9px}
.out-list b{color:var(--ink);font-weight:600}

/* ---------- 15b · 博客列表（只挂在 /blog） ----------
   （沿用这一区「后加的板块按字母往后挂」的编号法：15b 排在 §15 之后、§16 之前。）
   这一节只定义"列表"，不定义"文章正文"。正文排版等真的有文章时再按那时的需要写，
   现在写下来只是猜的，猜出来的行宽和标题层级以后一定要推翻重来。
   卡片沿用 .pcard / .case-card 那一套（白底 + 发丝边 + 20px 圆角 + hover 抬 2px），
   博客卡在整站里不该长得像另一种东西。 */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-1);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.post:hover{border-color:var(--border-2);transform:translateY(-2px)}
.post-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:18px}
.post-hd h3{font-size:17px;letter-spacing:-.01em}
/* 分类标签和案例的 .case-ind 是同一个东西（浅青底 + 墨色小字），所以用同一个做法。
   --brand-soft 上的 --brand-ink 是 4.88:1，12px 也站得住。 */
.post-tag{font-size:12px;font-weight:600;color:var(--brand-ink);background:var(--brand-soft);border-radius:6px;padding:3px 8px}
.post-d{font-size:13px;color:var(--text-2)}
.post-x{font-size:13.5px;line-height:1.7;color:var(--text);margin-bottom:22px}
/* 「阅读」钉在卡片底边：三张卡的摘要长短不可能一样，靠 margin-top:auto 把链接压到底，
   三张卡的链接才会落在同一条水平线上。 */
.post-more{margin-top:auto;display:inline-block;align-self:flex-start;font-size:13.5px;font-weight:600;color:var(--brand-ink)}
.post-more:hover{text-decoration:underline;text-underline-offset:3px}

/* 还没有文章时的说明块。它不是错误状态，所以不给虚线框、不给灰底、不用警告色：
   一张普通卡片、一句实话，外加一个现在就能做的动作。
   grid-column:1/-1 是必须的：.posts 是三栏网格，不加这一行这张卡会只占左边三分之一，
   右边空两栏——而现在它下面本来就没有别的卡，空出来的位置没有任何东西会来填。 */
.posts-empty{
  grid-column:1/-1;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:56px 32px;text-align:center;box-shadow:var(--shadow-1);
}
.posts-empty h3{font-size:18px;margin-bottom:12px}
.posts-empty p{font-size:14px;line-height:1.75;color:var(--text);max-width:56ch;margin:0 auto}
/* .btn 是 inline-flex（行内级），所以上面那行 text-align:center 就能按钮居中，
   不必再套一层 flex 容器。 */
.posts-empty .btn{margin-top:26px}

/* 最新一篇占满整行。列表只有一篇文章时，三栏网格里单张卡只占左三分之一，
   右边两栏空着——那不像"刚开始"，像"页面坏了"。整行的位置留给最新的一篇，
   以后文章多了，其余自然进下面的三栏，这条规则不用改。 */
.post-lead{grid-column:1/-1;padding:34px}
.post-lead .post-hd h3{font-size:clamp(21px,2.2vw,26px);letter-spacing:-.015em}
.post-lead .post-x{font-size:15px;line-height:1.8;max-width:64ch}

/* ---------- 15c · 博客正文（只挂在 /blog/<slug>） ----------
   （沿用同一套编号法，15c 接在 15b 之后、§16 之前。15b 里写明了"正文排版等真有
   文章时再按那时的需要写"——现在有文章了，所以补在这里。）
   行宽 720px：CJK 一行 38–42 字最舒服，720÷17 ≈ 42 字，正好落在区间里；--wrap（1180）
   减掉两侧 padding 还有 1116，正文铺满要到 65 字以上，换行时眼睛会找不到下一行的头。
   正文用 --ink 不用 --text：#71717A 落在 --bg 上是 4.50:1，刚好压线，短句没问题，
   整篇长文用压线色会显得没印实；#18181B 是 16:1，长文才站得住。日期、卡片说明、
   文末补充这些次级信息才用 --text。
   青色在正文里只出现三处：引文那根竖线、列表的小方点、价格数字。正文不铺青底——
   铺底是 .post-tag 和 .case-ind 的活，一篇文章里铺十处底会把 70% 米白的比例打散。 */
.art{max-width:720px;margin:0 auto}
.art p{font-size:17px;line-height:1.9;color:var(--ink);margin-top:20px}
/* 段距给到 20px 而不是 14px：这篇里大量"一句话成段"，1.9 的行高下段距是它们
   唯一的呼吸，收紧了整篇会糊成一坨。 */
.art h2{font-size:clamp(24px,2.6vw,32px);line-height:1.3;letter-spacing:-.015em;font-weight:700;color:var(--ink);margin-top:62px;text-wrap:balance}
.art h3{font-size:19px;line-height:1.5;font-weight:700;color:var(--ink);margin-top:36px}
.art>:first-child{margin-top:0}
.art strong{font-weight:700;color:var(--ink)}
.art ul{margin-top:20px;display:grid;gap:9px}
.art ul li{position:relative;padding-left:17px;font-size:17px;line-height:1.85;color:var(--ink)}
/* 方点与 .out-list / .hero-foot 同一套做法（5px、1px 圆角、墨色轨），落在第一行的
   光学中线上——三处用同一个记号，读者才会把它读成"同一类东西"。 */
.art ul li::before{content:"";position:absolute;left:0;top:.74em;width:5px;height:5px;border-radius:1px;background:var(--brand-ink)}

/* 断句成行的短句块（开篇那几句、行业清单、选题来源）。
   它们本来就是一句话被拆成几行，逐行是节奏不是段落，所以行距收到 1.78、段距归零；
   按普通段落排会得到双倍行距，节奏散掉。 */
.art-lines{margin-top:26px}
.art-lines p{margin-top:0;font-size:18px;line-height:1.78}
.art-lines p+p{margin-top:2px}

/* 中英双语：同一篇文章中文在上、英文在下，中间需要一道看得见的分界，
   否则读者会把英文读成正文的延续。用满宽细线 + 品牌色短杠的「ENGLISH」标签，
   和 .eyebrow 是同一套记号——不为这一次新造一种视觉语言。
   特指度必须写到 .art .art-lang：它是 <article class="art"> 的第一个子元素，
   会被上一段 `.art>:first-child{margin-top:0}` 按源码顺序压掉 margin-top，
   把中英文挤在一起。两条同为 (0,2,0)，写在后头的这条才赢。 */
.art .art-lang{margin-top:72px;padding-top:34px;border-top:1px solid var(--border)}
.art .art-lang .eyebrow{margin-bottom:0}

/* 引文：整篇里那些"要被记住的一句"。不给底色、不给大引号，只给一根竖线——
   竖线是唯一不会在长文里堆成色块的强调手法。
   margin 必须写全：<blockquote> 不在文件开头那行 `h1,h2,h3,h4,p,ul,ol,figure{margin:0}`
   的重置名单里，只写 margin-top 会漏出 UA 默认的左右各 40px 缩进。 */
.art-q{
  margin:32px 0 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--brand-ink);
  font-size:18.5px;line-height:1.78;font-weight:600;color:var(--ink);
}
/* 箭头流程：只服务"传统制作流程"那一段（需求→方案→拍摄→剪辑→交付→结束）。
   它表达的是一条单向直线，所以用 ↓ 而不是方点——用方点会被读成"并列的几件事"。
   标签用 <ol> 不用 <ul>：.art ul li::before 那个青色方点只匹配 ul，
   用 ul 的话第一块下面会同时压着方点和箭头。ol 的 UA 序号和缩进要显式关掉。 */
.art-flow{margin-top:28px;padding-left:0;list-style:none}
.art-flow li{
  position:relative;width:fit-content;min-width:132px;padding:11px 18px;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-xs);
  font-size:15px;line-height:1.5;color:var(--ink);
}
.art-flow li+li{margin-top:26px}
.art-flow li+li::before{
  content:"↓";position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-size:13px;line-height:26px;color:var(--text-2);
}

/* 三项服务的价格卡。它们的结构完全一样（名字 / 起价 / 说明），做成三张卡比排成
   三小段更好比；名字用 h3、说明用 --text，让价格数字是卡里唯一的重点。 */
.art-svc{margin-top:26px;display:grid;gap:16px}
.art-svc-i{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:26px 24px;box-shadow:var(--shadow-1)}
.art-svc-i h3{margin-top:0;font-size:17px}
/* 选择器写成 .art-svc-i .art-svc-p：单写 .art-svc-p 是 (0,1,0)，
   会被下面那条描述文字的 .art-svc-i p (0,1,1) 盖掉，价格数字就掉回 15px。 */
.art-svc-i .art-svc-p{margin-top:10px;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--brand-ink)}
.art-svc-i .art-svc-p span{font-size:14px;font-weight:600;letter-spacing:0}
.art-svc-i p{font-size:15px;line-height:1.8;color:var(--text);margin-top:12px}
.art-svc-i ul{margin-top:12px;gap:6px}
.art-svc-i ul li{font-size:15px;line-height:1.75;color:var(--text)}
.art-svc-i ul li::before{top:.7em;background:var(--border-2)}

/* 文章头：面包屑 + 日期/分类/时长。它挂在 .hero 里，所以跟着 .hero 居中。 */
.crumb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:20px}
.crumb a{color:var(--text-2);text-decoration:none;transition:color .16s var(--ease)}
.crumb a:hover{color:var(--brand-ink)}
.crumb i{font-style:normal;color:var(--border-2)}
.art-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:24px;font-size:13.5px;color:var(--text-2)}
.art-meta i{font-style:normal;color:var(--border-2)}
.art-meta .post-tag{font-size:12.5px;padding:3px 9px}

/* 文末动作区。它和 .ft-cta 不重复：页脚那段是全站的收口，这一段回答的是
   "这篇读完了，下一步看什么"，所以只给站内链接，不放二维码——二维码留在首页和页脚。 */
.art-end{
  max-width:720px;margin:64px auto 0;padding:30px 28px;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-1);
}
.art-end h2{font-size:20px;line-height:1.4;letter-spacing:-.01em}
.art-end p{margin-top:12px;font-size:15px;line-height:1.8;color:var(--text)}
.art-end .cta-actions{margin-top:24px}

/* ---------- 16 · 关于 ---------- */
/* 容器栅格交给 .g12（见文件开头）。这里**不能**再定义 .team 的 grid-template-columns：
   它的特指度 (0,1,0) 与 .g12 相同，靠源码顺序会反压 .g12（曾经把团队 bento 压成 3 列）。 */
.team-i{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:24px}
/* 前两张（策划 / 口播）是「替你想内容」的那一半，放大；后四张是「一条龙做」的执行岗，收小 */
.team-lead{padding:28px}
.team-lead h3{font-size:19px}
.team-lead p{font-size:14.5px;max-width:44ch}
.team-i h3{font-size:16px;letter-spacing:-.01em;margin-bottom:9px}
.team-i p{font-size:13.5px;line-height:1.7;color:var(--text)}
.about-line{margin-top:30px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.about-line em{font-style:normal;color:var(--brand-ink)}

/* ---------- 16b · 常见问题（/pricing） ----------
   用 <details> 实现，零 JS 依赖：禁用 JS 时依然能展开，
   搜索引擎也读得到答案（答案始终在 DOM 里，只是折叠）。
   样式上不做成"卡片"，做成一张卡里的若干行——问答是同一件事的连续追问，
   拆成三张卡会把它们读成三个互不相干的条目。 */
.faq{margin-top:20px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);overflow:hidden}
.faq-i{border-top:1px solid var(--border)}
.faq-i:first-child{border-top:0}
.faq-i>summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;color:var(--ink);
  transition:background .18s var(--ease);
}
/* Safari 会在 summary 上留一个三角，显式去掉，改用自己的 .faq-mark。 */
.faq-i>summary::-webkit-details-marker{display:none}
.faq-i>summary:hover{background:var(--card-2)}
.faq-i[open]>summary{color:var(--brand-ink)}
/* 加号用两条 1px 的横竖线拼：竖线绕中心转 90° 就收进横线里，变成减号。
   这样开合是"一根线转过去"，比换一个字符（+ → −）在字重和居中上都更稳。 */
.faq-mark{position:relative;flex:0 0 auto;width:14px;height:14px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;
  background:var(--brand-ink);transition:transform .28s var(--ease);
}
.faq-mark::after{transform:rotate(90deg)}
.faq-i[open] .faq-mark::after{transform:rotate(0deg)}
.faq-a{padding:0 26px 24px}
.faq-a p{font-size:14.5px;line-height:1.8;color:var(--text);max-width:74ch}

/* ---------- 16c · 图标 ----------
   app.js 的 svg() 统一输出 class="ic"，且 fill:none / stroke:currentColor，
   颜色一律由父元素给。这里只做一件事：把 svg 的 inline 基线缝隙去掉，
   顺带保证图标不参与缩放变形。 */
.ic{display:block;flex:0 0 auto}

/* ---------- 16d · 解决方案（首页 #solutions） ----------
   三张卡等分 12 列。跨列写在这里而不是 HTML 的 col-span-*：卡片是
   app.js 从 SOLUTIONS 渲染的，Tailwind 的 @source 扫不到 js/（见开头那条规矩）。 */
.sols>*{grid-column:span 4}
.sol{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-1);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.sol:hover{border-color:var(--border-2);transform:translateY(-2px)}
/* 图标底与痛点卡同一套（实心 --brand + --on-brand 描边），
   只把尺寸收到 40：这一节的三张卡比痛点卡信息多一行，图标再大会头重脚轻。 */
.sol-ic{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--brand);border:1px solid var(--brand);color:var(--on-brand);
}
.sol h3{font-size:19px;letter-spacing:-.01em;margin:20px 0 0}
/* 「解决：…」是这张卡的落点——它回答"这个模块解决谁的什么问题"，
   所以不跟正文同级：左侧压一条 2px 的 --brand-ink 竖线把它挑出来，
   正文再退回普通灰。线用 ink 轨而不是 --brand：2px 的细线要的是更沉的一档青，
   --brand 打在纯白卡上会飘。
   上边距给到 14px 是因为这句要"离开标题一点"，贴着标题就变成副标题了。 */
.sol-solve{
  margin:14px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--brand-ink);
  font-size:13.5px;font-weight:600;line-height:1.65;color:var(--brand-ink);
}
.sol-solve span{font-weight:500;color:var(--text-2);margin-right:6px}
/* 正文用 margin-top:auto 吸到卡片底部：三张卡的 .sol-d 长度不一，
   吸底之后三行正文的基线大致齐平，卡片高度差被推到中间的空隙里。 */
.sol-d{font-size:14.5px;line-height:1.72;color:var(--text);margin:14px 0 0}

/* ---------- 16e · 品牌理念（首页 #belief） ----------
   这一节全站唯一居中：它是一句主张，不是一个模块，不需要左对齐的阅读轴。
   窄到 760px、居中，是为了让上下留白从"页面的边距"变成"句子的呼吸"。 */
.belief{max-width:760px;text-align:center}
/* 主张句比普通 .lede 大一档：它是这段话里唯一要被记住的一句，
   再往下压字重就变成又一段说明文字了。 */
.belief-p{font-size:17.5px;line-height:1.85;color:var(--text);margin-top:22px}

/* ---------- 16f · CTA（首页 #cta） ----------
   这一节是 20% 深色内容区的上半块（section 上挂 .dk，见 17b 段），
   所以它自己不再是"页面里的一块玻璃"，而是深色底上唯一被照亮的东西。
   .dk 会把 --card-2 换成 rgba(255,255,255,.06)，面板因此比 #18181B 亮一档；
   顶上那层径向青光是深色区**允许**的青之一（动态光效 / 小面积强调），
   用深色专用的亮青 #67D5FF 而不是 #00C3FF——后者的 alpha 只有 .16 时不够亮，
   在近黑上会沉下去。
   光只到 62% 就散尽：它是从面板内部透出来的，不是贴上来的色块，
   散不尽就会在下半部分留下一条硬边。 */
.cta{
  padding:64px 40px;border:1px solid var(--border);border-radius:var(--r);
  background:radial-gradient(ellipse at 50% 0%,rgba(103,213,255,.16),transparent 62%),var(--card-2);
  box-shadow:var(--shadow-2),var(--hair);
  text-align:center;
}
.cta-h{font-size:clamp(26px,3.4vw,40px);line-height:1.22;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:20ch;margin:0 auto}
.cta-p{font-size:16px;line-height:1.8;color:var(--text);max-width:54ch;margin:18px auto 0}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* 二维码是这一节唯一的动作，所以它得当主角而不是当附件：一张纯白卡浮在
   --card-2 的面板上。深色区里 --card 已经是 #202024，卡片抬不起来，所以这里
   写死 #FFFFFF 不走 token——白是本页能给的最强对比，也是扫码所需（深底上的
   二维码相机对不上焦）。
   四周留白不是装饰，是能不能扫出来的前提：二维码规范要求静默区至少 4 个模块宽，
   缺了相机对不上焦。这 12px 加上裁切时留的白边，折算下来约 4 个模块，刚好踩线。
   图本身自带的彩就是这一节的那点颜色，不用再补品牌色。 */
.qr{margin:34px auto 0;width:max-content;max-width:100%}
.qr-img{display:block;width:240px;max-width:100%;height:auto;padding:12px;border-radius:var(--r-sm);background:#FFFFFF;box-shadow:var(--shadow-2)}
.qr-cap{display:flex;flex-direction:column;gap:3px;margin-top:15px}
.qr-cap b{font-size:15px;font-weight:600;color:var(--ink)}
.qr-cap span{font-size:12.5px;color:var(--text-2)}

/* 留给不用微信的人一条路。用墨色轨（深色区里是 #67D5FF）而不是 --brand：
   #00C3FF 在 #26262A 上是 7.35:1，其实也过 AA，但 13px 的链接要的是余量；
   换成 --brand-ink #67D5FF 是 9.00:1，而且这也正是墨色轨在深色区该有的方向。 */
.cta-alt{margin-top:22px;font-size:13px;color:var(--text-2)}
.cta-alt a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .16s var(--ease)}
.cta-alt a:hover{color:var(--ink)}

/* ---------- 17 · 页脚 ----------
   整站浅色，最后压得住收口的只有深色——页脚就是那 20% 深色内容区的下半块
   （上半块是首页第九节 CTA；两块共用 17b 段同一份 token 重声明）。
   所以 .ft **不在这里写 background**：底由 17b 段的 `.dk,.ft` 统一给，
   写在会盖掉那段的作用域声明，页脚又变回浅色。
   这段只管深色区里的排版：正文全走次级灰、让最后一行最轻，
   层次靠字号与灰度拉，不靠颜色。
   （原来那一串 #111/#262626/#A8A8A8 硬编码早已换成 token；
     深色区能亮起来也全靠 token 重声明——这里任何一处写死都会让收口失效。） */
.ft{border-top:1px solid var(--border)}
.ft-cta{padding:88px 0 64px;border-bottom:1px solid var(--border)}
.ft-h{font-size:clamp(28px,3.6vw,44px);line-height:1.2;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:22ch}
.ft-csub{font-size:16px;line-height:1.75;color:var(--text-2);margin-top:18px;max-width:46ch}
.ft-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:52px 0}
.ft-b{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--ink)}
.ft-b img{width:26px;height:26px}
.ft-line{font-size:13.5px;line-height:1.75;color:var(--text-2);margin-top:12px;max-width:30ch}
.ft-col h4{font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--text-2);margin-bottom:15px}
.ft-links{display:grid;gap:11px}
/* 页脚是深色区，--text / --ink 在这里已被 17b 段重声明：
   链接用 --text（白 72%，对 #18181B 约 8.7:1），比旁边的说明文字（--text-2）更实；
   hover 提到 --ink（纯白）——深色底上"变亮"就是最强的 hover 信号，不用再加下划线。 */
.ft-links a{font-size:14px;color:var(--text);text-decoration:none;transition:color .16s var(--ease)}
.ft-links a:hover{color:var(--ink)}
.ft-links span{font-size:14px;color:var(--text-2)}
.ft-bot{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  border-top:1px solid var(--border);padding:22px 0 32px;font-size:12.5px;color:var(--text-2);
}
.ft-bot a{color:var(--text-2);text-decoration:none}
.ft-bot a:hover{color:var(--text)}
.ft-legal{line-height:1.95;min-width:0}

/* ---------- 17b · 深色内容区（20%） ----------
   深色只出现在三处：首页第九节 CTA（.dk）、全站页脚（.ft）、/pricing 的投流段（.dk）。
   第三块是后加的：用户要求「投流这个板块黑色背景」，它作为可选加项单独成段，
   升成深色正好把它从「套餐的一部分」拉出来读成「另一件事」。
   做法是**在作用域上重声明 token**，而不是给每个类写一条 .dk .xxx 覆盖——
   里面所有规则本来就只引用 var(--ink) / var(--text) / var(--card) / var(--border)，
   重声明之后整棵子树自己就反过来，一条新覆盖规则都不需要。
   这也意味着：这一节之后新增的规则，只要老实引用 token，深色区就白送。

   必须在文件里排在**最后**（§17 之后）：它是作用域声明，谁后写谁说了算，
   排在前面会被后面同优先级的 `.ft{background:…}` / `.band{…}` 盖掉。

   青色版只剩**一条**方向规则需要在这里反转（上一版紫有两条）：
     · 墨色轨 --brand-ink 与展示轨 --brand-ink-lg 在浅底上要**更深**（#0E7490 / #0284C7），
       在近黑上要**更浅**——两条都换 #67D5FF：它在那儿本来就是 9.00:1，没有再分档的必要。
   另一条（hover / active 的方向）**不再需要反转**：亮青在浅底和近黑上都是"亮底 + 近黑字"，
   #00C3FF / #33CFFF / #0092BF 三档在两个区域里同时成立，所以下面**不重声明**
   --brand / --on-brand / --brand-hover / --brand-active——这正是青比紫省事的地方。
   深色区里唯一要临时加亮的是辉光与浅底：近黑把 .30 的辉光吃掉了，得抬到 .45。
   color 必须在这里重新声明一次：color 在哪个元素上声明就在哪算完，
   body 算出的 --text 会**以算好的颜色值**继承给子树，
   光改 .dk 上的 --text 是拉不回来的（这是这个写法唯一的坑）。
   --card 取不透明值而不是半透明白：#FFFFFF 在浅色区是不透明的"最亮面"，
   保持同一语义，压在线上的节点才挡得住背后的连接线。 */
.dk,.ft{
  color-scheme:dark;
  background:var(--dk);
  color:var(--text);

  --ink:#FFFFFF;
  --text:rgba(255,255,255,.72);
  --text-2:rgba(255,255,255,.52);
  --border:rgba(255,255,255,.12);
  --border-2:rgba(255,255,255,.20);
  --card:#202024;
  --card-2:rgba(255,255,255,.06);

  --brand-soft:rgba(103,213,255,.16);
  --brand-ink:#67D5FF;
  --brand-ink-lg:#67D5FF;
  --brand-glow:rgba(0,195,255,.45);
  --hair:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 24px 50px -28px rgba(0,0,0,.7);
}

/* ---------- 18 · 滚动 reveal ---------- */
.rv{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.on{opacity:1;transform:none}

/* ---------- 19 · 响应式：1100 ---------- */
@media (max-width:1100px){
  .wrap{padding:0 28px}
  .sec{padding:88px 0}
  .hero{padding:56px 0 80px}
  /* 节奏分级同步降一档，保住「大 / 中 / 小」的相对差 */
  .sec-lg{padding:108px 0}
  .sec-sm{padding:64px 0}
  /* 12 列不降列数，只把过窄的跨列拉平：服务从 7+5/4+4+4 收成 整行 / 2+2 */
  .srvs>*{grid-column:span 6}
  .srvs>:nth-child(1){grid-column:span 12}
  .ai-grid>:nth-child(n+5){grid-column:span 3}
  .ft-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  /* 博客列表三栏收到两栏：卡片本身没变，只是 1180px 的 wrap 减掉 padding 之后
     三栏每栏只剩约 340px，摘要会折成五行以上。 */
  .posts{grid-template-columns:1fr 1fr}
}

/* 导航加「视频翻译」后是 8 项，约 930 以下会挤到换行；这一档收间距和字号，
   撑到 820 收汉堡为止。820 那档会把字号改回 16（竖排菜单），本段不冲突。 */
@media (max-width:960px){
  .nav,.nav-links{gap:14px}
  .nav-links a{font-size:13.5px}
}

/* ---------- 20 · 响应式：820（移动端重新排版，非缩放） ---------- */
@media (max-width:820px){
  .sec{padding:72px 0}
  section[id]{scroll-margin-top:72px}
  .sec-head{margin-bottom:40px}
  .h1{font-size:clamp(32px,8.4vw,46px)}
  .lede{font-size:17px}

  /* 导航收成汉堡（纯 CSS，无库） */
  .nav-burger{display:flex}
  .nav{gap:14px}
  .nav-links{
    display:none;position:absolute;top:var(--hdh);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--card);border-bottom:1px solid var(--border);
    padding:6px 28px 18px;box-shadow:var(--shadow-2);
  }
  .nav-tog:checked ~ .nav .nav-links{display:flex}
  .nav-links a{font-size:16px;padding:14px 0;border-bottom:1px solid var(--border)}
  .nav-links a:last-child{border-bottom:0}
  /* 手机上是竖排列表，每项自带一条分隔线，桌面那条下划线会跟它叠在一起，
     所以这里换一种表达：分隔线本身变青，字色照旧加深。 */
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--brand)}
  /* 药丸在竖排菜单里改成整行主按钮：没有分隔线、左右不留负边距。 */
  .nav-links a[href="/studio/"]{
    height:46px;margin:8px 0 12px;padding:0 16px;
    border-bottom:0;border-radius:10px;box-shadow:none;
  }
  /* 首页「案例」在手机上整段收走（2026-09-28 用户要求）：窄屏这一屏原本只是几条摘要，
     而真实案例链路本来就在 /cases/，与其在手机上塞一个缩水版，不如让导航那一下直达。
     收走之后有两处会被看出来，得一起处理：
     1) 导航「案例」的 #cases 锚点会变成滚不到东西的死链 → 这一档换成 /cases/ 出口；
     2) 眉毛序号会跳号（03 之后直接 05）→ 案例往后三块各减一，接着 04/05/06 排。
     序号是 §3 的 .eyebrow[data-no]::before 用 content:attr(data-no) 画出来的，
     CSS 没法改属性，只能在这档重写 content——首页板块顺序再动，下面三条要跟着改。 */
  .nav-to-anchor{display:none}
  .nav-to-page{display:block}
  #cases{display:none}
  #pricing .eyebrow[data-no]::before{content:"04"}
  #belief .eyebrow[data-no]::before{content:"05"}
  #about .eyebrow[data-no]::before{content:"06"}
  /* 返回首页只在这一档出现（本体在 §5，默认 display:none）。 */
  .back{display:inline-flex}

  .hero-sub{font-size:17px}
  /* Hero 底部那 4 条在窄屏收回一栏：每条都是一整句话（约 20 字），
     两栏时每栏只剩不到 160px，会被折成三行、比单栏还长。 */
  .hero-foot{grid-template-columns:1fr;max-width:440px}

  /* 底纹在窄屏提浓一档：桌面那片紫够显眼，但手机屏幕小、周围环境光强，
     同一个 opacity 看上去会淡掉一截，所以浓度提 1/4（.20 → .25）。
     只动 opacity——模糊半径和饱和度各自带 clamp，本来就随视口自己收
     （46px 是它的下限），片子（brand-symbol.svg）和遮罩都没换，
     所以这是「同一片底纹更实」，不是换了个更亮的东西。旋转仍归 §22 管。
     挂在 820 档而不是 560 档：底纹的模糊半径在 620px 以下已压到 clamp 下限，
     两档之间本来没有断点，为它单切一刀反而凭空造出一个跳变；
     560 以下自然包含在这条里。 */
  .hero-glow img{opacity:.25}

  /* bento 是桌面端的密度装置，窄屏只会碎成难读的拼贴 —— 一次性清掉所有跨列/跨行。
     用 !important 是因为跨列声明散在多个不同特指度的选择器里（含 :nth-child），
     逐条对赌既脆弱又难读；这是「一处生效的复位」，不是逐条压权重。
     痛点的三张卡、解决方案的三张卡都走这条复位（它们没有自己的窄屏重排）。 */
  .g12>*{grid-column:auto!important;grid-row:auto!important}
  .g12{grid-template-columns:1fr;gap:16px}
  .sec-lg{padding:88px 0}
  .sec-sm{padding:56px 0}
  .g12.srvs,.g12.ai-grid,.g12.case-flow,.g12.team{grid-template-columns:1fr 1fr}
  .team-lead{padding:26px}
  /* 三档在窄屏塌成一列，顺序仍是 01 → 02 → 03。
     曾经把推荐档 order:-1 提到最上面，但那会打乱 01/02/03 这条阶梯，
     也和对比表、卡上的编号对不上；推荐这件事交给角标说就够了。 */
  .plans{grid-template-columns:1fr;gap:16px}
  /* 对比表在窄屏仍是一张真表——这是这一档唯一不重排的板块。
     它曾经塌成「一行一张卡」（档位名从 thead 挪到 td 的 data-col 上画出来），
     但卡片把三档从「并排」改成了「上下」，而这张表存在的理由就是横向比：
     比三档差在哪、比运营版多出什么，一行扫过去才算比。竖排等于把比较这件事删了。
     现在只做两件事：把桌面的 720px 下限让给视口，字号与内边距各收一档。
     表是 table-layout:fixed，标签列 33%、三档平分剩下的 67%，
     在 375px 屏（wrap 内宽 335px）上正好放得下，所以既不横滑、也不藏列。
     推荐档继续铺浅青底（.cmp-hl）——列底比档位名加粗更早被眼睛抓到。 */
  .cmp-tb{min-width:0}
  .cmp-tb th,.cmp-tb td{padding:12px 5px}
  .cmp-tb thead th{font-size:14px}
  .cmp-tb .cmp-k{width:33%;font-size:14px}
  .cmp-t{font-size:14px}
  .cmp-y{font-size:16px}

  /* 服务清单在手机上折起来：卡片不是报价单，细节归下面那张对比表。
     .plan-list 是 grid，[hidden] 的 display:none 压不住它，所以折叠走类名。
     开关只在窄屏出现（宽屏在 §10b 里 display:none），桌面上清单始终展开。
     不能挂在 .js 上——页头那个守卫 2.5 秒后会把 .js 摘掉，
     那样清单会在两秒半之后自己弹开。 */
  .plan-svc:not(.is-open){display:none}
  .plan-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card-2);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .plan-chev{width:7px;height:7px;margin-bottom:3px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
  .plan-toggle[aria-expanded="true"] .plan-chev{transform:rotate(-135deg);margin-bottom:-3px}
  /* 按钮自己就是那条分隔线，下面的「适合客户」不用再画一条 */
  .plan-who{margin-top:14px;padding-top:0;border-top:0}

  /* 一次上门：八类两列。单列会把这一节拉成八屏长，正是 §十二 要避的。 */
  .shoots{grid-template-columns:1fr 1fr;gap:14px}
  .shoot{padding:20px}

  /* 五步改竖排，箭头跟着掉头向下 */
  .how{grid-template-columns:1fr;gap:0}
  .how-i{padding:20px}
  .how-i+.how-i{margin-top:36px}
  .how-i+.how-i::before{content:"↓";left:50%;top:auto;bottom:100%;translate:-50% 0;width:auto;margin-bottom:9px}

  /* 投流加项：左右改上下 */
  .ads{grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .ads-price{font-size:34px}

  .pkeys{grid-template-columns:1fr;gap:10px}
  .notes{grid-template-columns:1fr;gap:14px}
  .pfin{margin-top:44px;padding:40px 24px}

  .choose{grid-template-columns:1fr;gap:14px}
  .meth{grid-template-columns:1fr}
  .wiz{padding:24px}
  /* 结果卡在窄屏改成上下排列：左栏是画像、右栏是推荐方案，
     竖着读的顺序正好是「你是什么情况 → 所以推荐哪一档」。 */
  .cfg-grid{grid-template-columns:1fr;gap:24px}
  .ft-grid{grid-template-columns:1fr;gap:34px;padding:44px 0}
  .ft-cta{padding:68px 0 52px}
  .board-head{padding:20px}
  .board-body{padding:10px 20px 18px}
  .board-foot{padding:14px 20px 18px}
  /* CTA 面板窄屏把 40px 内边距收到 26：面板已经占满屏宽，
     再留 40 就只剩不到 240px 放正文，两个按钮会被挤成两行。 */
  .cta{padding:44px 26px}
  /* 博客卡在手机上塌成一栏；空状态的内边距同步收一档，
     否则 56px 的上下留白在 375px 屏上会占掉半屏。 */
  .posts{grid-template-columns:1fr;gap:14px}
  .posts-empty{padding:40px 22px}
  /* 整行头条在窄屏没有"整行"可言了，内边距跟着普通卡收一档；
     标题的 clamp 在 375px 上本来就会落到下限，不用另写。 */
  .post-lead{padding:24px}

  /* 正文：17px 是为 720px 行宽选的。手机上 wrap 只剩 335px（375 减 20×2），
     17px 一行只排得下 18 字，短句会碎成一片。降到 16px 并把行距放到 1.85，
     一行约 20 字，行数不再失控，读起来也不挤。 */
  .art p,.art ul li{font-size:16px;line-height:1.85}
  .art-lines p{font-size:16.5px;line-height:1.75}
  .art h2{margin-top:46px}
  .art h3{margin-top:30px}
  .art-q{margin-top:26px;padding-left:16px;font-size:17px}
  /* 流程块在手机上不再居中悬着：min-width 会逼它脱离左边界，
     改成占满宽度，箭头才落在正文的中轴上。 */
  .art-flow li{width:100%;min-width:0}
  .art-svc-i{padding:22px 20px}
  .art-svc-p{font-size:23px}
  .art-end{margin-top:46px;padding:26px 20px}
}

/* ---------- 21 · 响应式：560 ---------- */
@media (max-width:560px){
  .wrap{padding:0 20px}
  .sec{padding:60px 0}
  .sec-lg{padding:72px 0}
  .sec-sm{padding:48px 0}
  .h1{font-size:clamp(30px,9.2vw,38px)}
  /* 手机上 h1 第一行「企业短视频不知道怎么拍？」会逐字折行，且断点正好落在
     「不」后面（企业短视频不／知道怎么拍？），孤字挂行尾很难看。这里放一个
     只在窄屏变成块级的空 span，把第一行钉在「企业短视频」之后断开。
     宽屏它是 display:none，不影响桌面那两行。 */
  .h1 .brk{display:block}
  .h2{font-size:clamp(24px,6.6vw,30px)}
  .sec-head{margin-bottom:34px}
  .nav-links{padding:6px 20px 16px}
  .nav-cta{padding:0 15px;font-size:14px;height:42px}


  /* 套餐卡在手机上不横滑了，改回单列堆叠。
     横滑那版把每张卡压到 84% 宽：卡片里要放 40px 的价格、条数、适合人群和 3-5 条服务，
     挤到 300px 出头就得逐个缩字号，价格那条红线第一个守不住。
     而且横滑天生藏内容——第三档要滑两下才看得见，"三档一览"就没了。 */
  .plans{grid-template-columns:1fr;gap:14px}
  .plan{padding:26px 24px}
  .plan-price{font-size:34px}

  /* 首页 §06 的旧版式在手机上仍是横滑：一次露一张 + 半张，滑出后面两档。
     上面那段单列堆叠是改版后为月度三档写的（卡片里要塞 40px 价格、条数、适合人群），
     旧卡片只有「方案名 / 定位 / 价格 / 一句话 / 清单」，84% 宽放得下，所以退回原样。
     左右各欠 20 = .wrap 在这个断点的内边距，让滑动区贴边、卡片仍与正文对齐。 */
  .plans[data-plans="entry"]{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;margin:0 -20px;padding:4px 20px 18px;
  }
  .plans[data-plans="entry"] .plan{flex:0 0 84%;scroll-snap-align:start}
  /* 角标在横滑版里不压在卡角（卡片变窄，压角会和价格抢地方），改回排在卡片内容最上面。 */
  .plans[data-plans="entry"] .plan-tag{position:static;display:inline-block;margin-bottom:12px}
  /* 对比表仍是那张并排表（§20），这一档只再收一档字号和内边距。
     列宽比例刻意不动：标签列已经很紧（「真人口播主出镜」14px 时约 98px、栏宽 110px），
     再收就得折行，一折行整张表的行高就跟着乱。 */
  .cmp-tb th,.cmp-tb td{padding:10px 3px}
  .cmp-tb thead th{font-size:12px}
  .cmp-tb .cmp-k{font-size:13px}
  .cmp-t{font-size:13px}
  .cmp-y{font-size:15px}

  /* AI 是七张「图标 + 标题 + 一句话」的小卡，全宽单列会拉成一条很长很空的山脊，
     所以它在手机上保留两列——这是全场唯一不在手机上塌成单列的板块。 */
  .g12.ai-grid{grid-template-columns:1fr 1fr}
  .g12.case-flow,.g12.team{grid-template-columns:1fr}

  /* 企业内容配置器：全宽大点击区 + 底部常驻操作条 */
  .opt{width:100%;padding:15px 18px}
  /* 卡片的 min-height 是给桌面两列对齐用的，手机上六张卡竖着码本来就够高，
     再保 96px 只是撑空；勾选框跟着上边距一起收 2px，维持和标题的视觉居中。 */
  .opts-cards{grid-template-columns:1fr}
  .opt-card{min-height:0;padding:16px 44px 16px 18px}
  .opt-ck{top:14px;right:14px}
  .wiz-body{min-height:260px}
  .out-list{grid-template-columns:1fr}
  .wiz-nav{
    position:sticky;bottom:0;margin:22px -24px 0;padding:14px 24px;
    background:var(--card);border-top:1px solid var(--border);
  }
  /* 结果卡：手机上按钮整宽堆叠，手指够得到；金额比桌面收 4px，
     38px 在 320px 宽的屏上会把「/ 月」挤到第二行。 */
  .cfg-pick{padding:22px}
  .cfg-pick-price{font-size:34px}
  .cfg-acts{flex-direction:column;align-items:stretch}
  .cfg-acts .btn{width:100%}

  .flow-step{grid-template-columns:34px 1fr;gap:16px}
  .flow-num{width:34px;height:34px;font-size:12px}
  .flow::before{left:17px}
  .board-title{font-size:15px}
  .row{grid-template-columns:58px 1fr 72px;gap:10px}
  .ft-actions .btn{width:100%}

  /* 报价模块：320 档再收一档内边距。八类那两张列不塌成单列——单列会把这一节
     拉成八屏长；这一档只把卡片内边距收到最紧，好让一行还放得下七八个字。
     投流清单从两列变一列：38px 的价格一占，右边那两列在 320 上每列只剩 100px 出头。 */
  .shoot{padding:18px 15px}
  .how-i{padding:20px 18px}
  .ads{padding:22px 18px}
  .ads-list{grid-template-columns:1fr}
  .note-i{padding:20px 18px}
  .pfin{padding:32px 20px}
  .pfin-h{font-size:23px}

  /* 320px 档：正文再降 1px 并收紧段距。1.85 的行距在 16px 时是 29.6px，
     一屏放不下 10 行，整篇会显得很长；15.5/1.8 是能保住可读性的下限。 */
  .art p,.art ul li{font-size:15.5px;line-height:1.8}
  .art p{margin-top:17px}
  /* 必须写 margin-top:0。上面那条 .art p 是 (0,1,1)，跟基础段的 .art-lines p 打平，
     而它在文件里更靠后——不给这一条，断句块里除了第一行以外的行会被 .art-lines p+p
     兜住，第一行却吃 17px，一组句子里外间距不一致。 */
  .art-lines p{margin-top:0;font-size:16px}
  .art h2{font-size:22px;margin-top:40px}
  .art-svc{gap:12px}
  .art-end{padding:24px 18px}
  /* 文章头（面包屑 + 日期行）在窄屏换行会各占一行，
     居中之后左右对齐不齐，靠 gap 收紧让它们尽量并在一行。 */
  .crumb{gap:6px}
  .art-meta{gap:8px;margin-top:20px}
}

/* ---------- 22 · 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  /* .plans .plan 是 0-2-0，压得过 .plan —— 上面 §10 那条 transition 就是靠权重
     才没被 .rv 覆盖掉的，所以这里必须用同样的权重把它关回来，光写 .plan 不够。 */
  .rv,.row-fill,.flow-num,.opt,.opt-card,.opt-ck,.wiz-dots i,.btn,.srv,.plan,.plans .plan,
  .plans[data-plans="entry"] .plan,.plan-chev{transition:none}
  /* 翻题的入场（cfgIn）是纯淡入 + 6px 位移，但位移就是这一组里要避免的东西，
     而且换题本来就自带"内容变了"，不需要再用动画交代。整条动画清掉。 */
  .wiz-step.on{animation:none}
  .btn-primary:hover{transform:none}
  /* 顶栏 Logo 的「每 3 秒转 120°」和首页 Hero 底纹的自转，都是页面 CSS 加的
     （SVG 文件本身是静态的，里面既无 <animate> 也没有自己的 @media，换文件不会动它们）。
     两处都转在 <img> 元素上，所以都得在这里关。Logo 关的同时把 will-change 一起收回，
     否则等于为一个已经停掉的动画白提一层。
     ——这条是「每 3 秒跳一格」这类动效最该被关的地方：它是常驻的，不是一次入场。 */
  .brand-logo{animation:none;will-change:auto}
  .hero-glow img{animation:none}
  /* Hero 的两处动效：五段链路的错峰入场（pipe-in）和底部那条循环扫掠（gc-sweep）。
     前者是 backwards 填充的入场动画，--i 写在行内 style 上；只清 animation-name
     会把它留在动画的起始帧（opacity:0），整条链路就等于消失了。必须写 animation:none，
     元素才会直接落到最终态。后者是无限循环，只能整条停掉，放慢没有意义。
     同理清掉 --i 的延时：留着延时也还是要等，这正是要避免的东西。 */
  .hero-pipe li,.gc-track i{animation:none;animation-delay:0s}
  /* 三处 hover 的 2px 上浮也一并取消：位移是这一组里唯一会引起不适的动效，
     而颜色/边框的变化已经足够说明"鼠标在这张卡上"，不必靠移动来交代。
     套餐卡的上浮走的是 translate（不是 transform），所以要多写一条 translate:none。 */
  .pcard:hover,.sol:hover,.case-card:hover,.post:hover{transform:none}
  .plan:hover{translate:none}
}