/* ============================================================================
   闪册 savorin 官网首页样式（2026-08 官网重构 · 修改意见批③）
   🔴 桌面（≥1280）以 1512×950 基准出稿；2026-08-22 起已带响应式层（文件末尾）：
      ≤1279 平板收缩带、≤899 移动版单独排版，断点值与 home.js 的 mqMobile 联动。
   批③要点：首屏高度降为约一屏减导航（参照 shootproof/pixieset/拍立享 的背景图比例），
   手机整体加大一档；素材板底色回退原型暖渐变；案例展示改 pic-time 式
   sticky 横向滚动（无箭头无页码，卡下方场景标题+副文案）；服务保障改
   pixieset best-in-class 式左题右 2×2、原型浅蓝底；定价表去单元格白底、
   功能列去粗；收尾拼贴做实（后台 mock + 手机 + 相册卡压入页脚）。
   ============================================================================ */

:root {
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --blue: #5b9bf0;
  --logo-blue: #2563eb;
  --ink: #1c2b40;
  --body: #5c6068;
  /* 批⑤：全站底色系对齐 pixieset 实测（2026-08-14 @1512）：
     白 #fff / 浅灰 #fafafa / 深底（hero 基底 + 页脚）#191918 */
  --gray-band: #fafafa;
  --dark-band: #191918;
  /* CTA 绿 = pixieset 实测 emerald：默认 rgb(26,188,156) / hover token emerald-700 rgb(0,142,116) */
  --green: #1abc9c;
  --green-hover: #008e74;
  /* 定价表专用紫（shootproof 实测：MOST POPULAR 深紫带 + 推荐列极淡紫底）。
     🔴 只给 `#pricing` 那张表用，别扩散到 CTA / 导航 / 其它区块。 */
  --plum: #4a1038;
  --plum-soft: #faf5fa;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* 🔴 2026-08-19 走查：关掉横向 overscroll，否则 macOS 触控板双指横扫会触发
     **浏览器前进/后退**（用户实测踩到，页面直接跳走）。
     ⚠️ 光在 wheel 里 preventDefault **不够** —— 那个导航手势走的是 overscroll 机制，
     系统识别到手势时 preventDefault 已经晚了；实测 wheel 拦截生效但页面照样跳。
     两者都要：这条关掉浏览器手势，home.js 的 wheel 监听负责把横向 delta 折算成轨道位移。
     html 与 body 都写 —— 视口的 overscroll 取自 html，body 那份是回落。 */
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  background: #fff;
  color: #16181c;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  opacity: 0.85;
}
h1,
h2,
h3,
p {
  margin: 0;
}

@keyframes arrowDrift {
  0%,
  100% {
    transform: translateY(-3px);
    opacity: 0.55;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}
@keyframes playPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(91, 155, 240, 0.5);
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(91, 155, 240, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(91, 155, 240, 0);
    transform: scale(1);
  }
}

/* 内容壳：宽容器（shootproof 尺度） */
.shell {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
.page {
  position: relative;
}

/* ── 共享手机（滚动跨屏动画，JS 定位；批③加大一档 292×596）
   🔴 2026-08-19 用户令：三处手机 mock 一律**不画灵动岛/刘海**（.notch /
   .phone-slot-notch / .cv-phone-notch 已连同 DOM 一起删除），别再加回来。 ── */
.phone {
  position: absolute;
  left: 0;
  top: 0;
  background: #0e0f12;
  overflow: hidden;
  z-index: 6;
  visibility: hidden;
  will-change: left, top;
  /* 2026-08-22 壳终稿（用户令：1:1 照录制机画、干净无按钮、状态栏裁掉）：
     黑边 11 均匀（=源片 17 等比）；屏角 34（=烘焙屏角等比，视频下两角吻合）；
     外角 45 = 34+11 同心。
     同日走查两步：①微信标题栏（X/标题/域名行）不适合官网 demo → 源片追裁
     （crop=470:906:66:144，参数见 图片素材/官网素材-shotlist.md）；②🔴 壳尺寸**不跟着
     视频变矮**（压扁就不像真机了，用户拍过）——保持真机比例 320×631，屏内改纵向
     flex：顶部 5.66% 自绘 iOS 状态栏（34.5/609 = iPhone 状态栏真实占比），
     余下 574.5 恰与视频 470×906 同比（contain 零裁切）。 */
  width: 320px;
  height: 631px;
  border-radius: 45px;
  padding: 11px;
  box-shadow: 0 40px 84px rgba(12, 16, 24, 0.4);
}
.phone-screen {
  height: 100%;
  overflow: hidden;
  background: #0e0f12;
  border-radius: 34px;
  /* 纵向两段：自绘状态栏 + 视频区（见 .phone 注释②） */
  display: flex;
  flex-direction: column;
}
/* 自绘 iOS 状态栏：百分比高度随壳等比缩放，三档断点无需另调 */
.phone-status {
  flex: none;
  height: 5.66%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 26px 0 34px;
  color: #fff;
}
.ps-time {
  font:
    600 12.5px -apple-system,
    'PingFang SC',
    sans-serif;
  letter-spacing: 0.02em;
}
.ps-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* ── hero 手机 = 单视频：hero 静止显示 poster 首帧，落定第二屏起播；
   hover = 毛玻璃遮罩里**直接出二维码**（2026-08-22 用户令，无点击步骤）；
   触屏访客点按 → 新开页跳演示相册。 ── */
.phone-video {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.phone-video video {
  width: 100%;
  height: 100%;
  /* contain + 黑底：任何比例误差都落进黑边而不是裁画面 */
  object-fit: contain;
  background: #0e0f12;
  display: block;
  transition:
    filter 0.35s,
    transform 0.35s;
}
/* 🔴 模糊直接加在视频上（不用 backdrop-filter：它不吃祖先圆角裁剪、四角会方出屏幕，
   叠 <video> 还有合成层黑屏怪癖）。scale 1.06 盖住 blur 采样不到的暗边。 */
.phone.docked:hover .phone-video video {
  filter: blur(9px);
  transform: scale(1.06);
}
/* 手机封面（独立配图，压在视频上方、二维码遮罩下方）：起播淡出 / 停播淡入 */
.phone-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* 顶对齐保住分组条，裁掉的是底部 */
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.phone-cover.hide {
  opacity: 0;
}
.phone-ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 20, 30, 0.26);
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}
.phone.docked:hover .phone-ov {
  opacity: 1;
}
.phone-ov-stack {
  display: grid;
  justify-items: center;
  gap: 16px;
  /* 视觉重心略高于几何中心（下半屏是视频内容重的区域） */
  transform: translateY(-8px);
}
.phone-ov-qr {
  display: block;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 52px rgba(8, 12, 20, 0.42);
}
.phone-ov-qr img {
  width: 132px;
  height: 132px;
  display: block;
}
.phone-ov-hint {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.18em;
  text-indent: 0.18em; /* 抵消末字符字距，两行光学居中 */
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* 轮播帧条（多组共用） */
.strip {
  display: flex;
  height: 100%;
  width: 400%;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pf,
.ph-frame {
  flex: none;
  width: 25%;
  height: 100%;
}
.ph-frame {
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* 2026-08-18 真实素材：H5 实机截图满幅铺帧（截图 390×844 与屏同比例，cover 顶对齐）。 */
.ph-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* 手机内相册 mock */
.mk-head {
  display: flex;
  align-items: flex-end;
  height: 100px;
  padding: 0 0 12px 18px;
}
.mk-head span {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13.5px;
}
.mk-tabs {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: 14px;
  padding: 12px 16px;
  font-size: 11.5px;
}
.mk-tabs .on {
  color: #fff;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
}
.mk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px;
}
.mk-grid div {
  height: 112px;
}

/* 素材占位 mono 标注 */
.mono-ph {
  font: 400 10.5px var(--mono);
  color: #9aa0a9;
  letter-spacing: 0.18em;
  text-align: center;
  line-height: 2.2;
}
.mono-ph-sm {
  font: 400 9px var(--mono);
  color: #9aa0a9;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 2.2;
}

/* ── 冻结导航（首屏内透明，滚动后白底深字；批⑤对齐 pixieset 实测：
   高 72 · 链接居中 16px 全白 · CTA = emerald 实底 14/40） ─────────── */
.site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
  background: transparent;
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.site-head.scrolled {
  color: #16181c;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(28, 43, 64, 0.08);
}
.site-head.scrolled .hero-links {
  color: #5c6068;
}
.site-head.scrolled .hero-links .cur {
  color: #1c2b40;
}
/* 🔴 登录态那两个（退出登录 / 用户名）跟着**导航项**走，不跟 `.site-head` 的正文色走。
   它们写的是 `color: inherit`，首屏（透明白字）下继承到 #fff 恰好与导航项一致，但滚动后
   `.site-head.scrolled` 的正文色是 #16181c（近黑）而导航项是 #5c6068（浅灰）⇒ 两边差一档，
   看着就是「偏重」（用户 2026-08-16 实拍报到；当时只量了首屏所以没发现）。 */
.site-head.scrolled .nav-logout,
.site-head.scrolled .nav-name {
  color: #5c6068;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand-cn {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}
/* SAVORIN 字标 = pixieset logo 同款字体（实测 Times 衬线 · 24px/400/字距 8px = 0.333em），
   随 22px 中文字标等比取 20px */
.brand-en {
  font-family: 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.333em;
  margin-right: -0.333em;
  /* 🔴 2026-08-16 用户令「闪册与 SAVORIN 要上下居中对齐」。
     容器是 `align-items: baseline`（不能改 center —— 那对齐的是**行盒**，两段行高不同，
     这个项目在 H5 上已经栽过三次「行盒居中 ≠ 字形居中」）。正解是让两段的**墨迹**中心齐平，
     用 canvas `actualBoundingBoxAscent/Descent` 量出来再补位移：
       墨迹中心相对基线 = -(asc - desc)/2；实测比例常数（本页这对字体）
         中文 PingFang 600  k≈-0.3627 × 字号
         SAVORIN Times 400  k≈-0.3310 × 字号
       ⇒ SAVORIN 需要上移 = 0.3627×字号(中文) - 0.3310×字号(英文)
     三处套进去：官网导航 22/20 → 1.36 · 页脚 19/17 → 1.26 · 订阅站导航 20/18 → 1.30，
     取 **1.3px** 一档全覆盖（最大偏差 0.06px）。改字号请按上式重算。 */
  position: relative;
  top: -1.3px;
}

/* ── 导航的登录态（auth-nav.js 注入；见该文件头注释）─────────────────────────────
   🔴 两种底色都要能看清：首屏导航是透明白字，滚动后是白底深字（`.site-head.scrolled`）。
      所以这里的颜色一律 `currentColor` / 半透明，跟着 `.site-head` 的 color 走，不写死。 */
.nav-logout {
  margin-left: auto; /* 与未登录态的 `.nav-login` 同一个推手，右侧组才贴边 */
  flex: none;
  white-space: nowrap;
  font-size: 15px;
  /* 🔴 与 `.nav-login` 同为 400 不加粗 —— 两者是同一个槽位的两种态，字重必须一致，
     否则登录/退出之间切换时看得见字变粗细。
     🔴 也**不再压 opacity**（原先 0.72）：2026-08-16 用户令「退出登录、用户名都改为跟其他
     导航项一样」⇒ 字号/字重/字距/不透明度全部对齐 `.hero-links a`，hover 走全局 `a:hover`。 */
  font-weight: 400;
  letter-spacing: 0.04em;
  color: inherit;
  padding: 10px 0;
  cursor: pointer;
}
.nav-me {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 26px;
  white-space: nowrap;
  color: inherit;
}
/* 头像在名字**右边**，且只在真有头像图时才存在（见 auth-nav.js）。 */
.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(127, 127, 127, 0.22);
}
.nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 用户名与导航项同一档（2026-08-16 用户令）：500 → 400。 */
.nav-name {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 批⑥：导航贴边对齐 pixieset —— 品牌距视口左 32 / 按钮距视口右 32（不进 1360 内容壳），
   高度回落 64 */
.site-head .shell {
  max-width: none;
  padding: 0 32px;
}
.hero-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
}
.hero-links {
  position: absolute; /* 批⑤：链接组居中（pixieset 式） */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 42px;
  /* 🔴 2026-08-16 用户令：导航三件套（链接 / 登录 / 免费注册）**统一 15px**。 */
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.04em;
}
.hero-links .cur {
  color: #fff;
}
/* 登录 = pixieset「Log In」式文字链接（实测 16px/400 白，距按钮约 32px） */
.nav-login {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  /* 与 `.hero-links` / `.btn-login` 同为 15px（2026-08-16 用户令统一）。
     🔴 字重 **400 不加粗**（同日晚些用户令，推翻当天早些「与免费注册看齐取 500」那条）：
     它是**文字链**，加粗会和紧邻的实底按钮抢；订阅站的同一个槽位也是 400。 */
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  padding: 10px 0;
}
.site-head.scrolled .nav-login {
  color: #1c2b40;
}
/* 🔴 2026-08-16 用户令，两步定稿：
   ① 先从 16px / padding 14×40 收到 14px / 11×30（「免费注册」的字与背景框都抢眼一档）；
   ② 再定为**导航三件套统一 15px**（`.hero-links` / `.nav-login` / 本条），
      **唯独字重保持 500**（其余两处 400）—— 绿色实底上的字与周围同重会发虚。
   ⚠️ 订阅站的「进入工作台」**复用同一个 class**（`subscribe-web/SiteHeader.tsx`），
   改这里等于两站一起改 —— 那正是当初让订阅站复用官网 class 的目的，别再写第二份。 */
.btn-login {
  background: var(--green);
  color: #fff;
  white-space: nowrap;
  flex: none;
  margin-left: 32px;
  /* padding 走过 14×40 → 11×30 → **12×33**（2026-08-16 用户「再大一点点」，小步一档：
     盒 37 → 39 高、120 → 126 宽）。字号已定稿 15px，这一步只动背景框。 */
  padding: 12px 33px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.3s;
}
.btn-login:hover {
  background: var(--green-hover);
  opacity: 1;
}

/* ── Hero（批⑤：pixieset 式满幅背景图 + 左向遮罩；
   实测：基底 #191918 · 遮罩 linear-gradient(to right, rgb(25,25,24), transparent)） ── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark-band);
  color: #fff;
  height: max(720px, calc(100vh - 96px));
}
.hero-fx {
  position: absolute;
  inset: 0;
}
/* 🔴 2026-08-19 用户拍板：首屏不再挂实拍图，改「深灰纯色底 + 克制修饰」。
   （找不到合适的活动场景素材，AI 生成的相机稿与网点稿均已否；三张备用 key 见 tasks.md）
   修饰三层，刻意避开模板化 SaaS 那套（极光色块 / 点阵网格 / 浮动几何体一概不用）：
   ① 右侧柔光＝画外一盏柔光箱，落在手机 mockup 那一侧，给纯色底做方向感与纵深；
   ② 顶部极弱环境光，避免上缘死黑直接贴住导航条；
   ③ 斜向微渐变打底，替代死平单色。颗粒层在 .hero-fx::after。 */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      62% 66% at 79% 74%,
      rgba(120, 174, 246, 0.3) 0%,
      rgba(101, 151, 220, 0.13) 38%,
      transparent 70%
    ),
    radial-gradient(96% 74% at 88% 46%, rgba(255, 255, 255, 0.085) 0%, transparent 64%),
    radial-gradient(84% 56% at 64% -4%, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    linear-gradient(162deg, #232322 0%, #1b1b1a 46%, #131312 100%);
}
/* 遮罩层：底已是深色，不必再压满黑（会把左下压成死墨块），
   改为只给文案区做一层温和加深，右侧柔光照常透出来。 */
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 14, 0.92) 0%,
    rgba(15, 15, 14, 0.5) 36%,
    rgba(25, 25, 24, 0) 70%
  );
}
/* 胶片颗粒：内联 SVG feTurbulence，零网络请求。
   纯色底加一层极弱噪点才有「照片」的质感，否则就是一块 CSS 矩形。 */
.hero-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-ph-note {
  position: absolute;
  right: 36px;
  bottom: 22px;
  font: 400 9.5px var(--mono);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.22em;
}
.hero .shell {
  height: 100%;
}
/* 批⑤文案参数对齐 pixieset 实测（@1512）：
   眉题白字（去横线）→ 20px → H1 52px/行高 1.2 → 20px → 副句白字 → 32px → CTA；
   copy 顶 = 280（840 高 hero 内 y280，随 hero 高度近似取同值） */
.hero-copy {
  position: relative;
  padding-top: 250px; /* 批⑦：整体上移，修上下不对称 */
  max-width: 760px;
}
.eyebrow {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}
.hero h1 {
  font-weight: 500;
  margin: 20px 0 0;
  font-size: 52px;
  line-height: 1.32; /* 批⑥：两行大标题间距增大一档 */
  letter-spacing: 0.02em;
}
.hero h1 .accent {
  color: #8ab6f5; /* 批⑦：「照片直播 活动云相册」回退品牌蓝强调 */
}
.hero h1 .gap {
  display: inline-block;
  width: 28px;
}
.hero-sub {
  color: #fff;
  margin: 20px 0 0;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.cta-hero {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 32px;
  font-size: 16px;
  padding: 14px 40px; /* pixieset 实测同款；收尾带 CTA 同类名自动同尺寸 */
  line-height: 1;
  white-space: nowrap;
  transition: background 0.3s;
}
.cta-hero:hover {
  background: var(--green-hover);
  opacity: 1;
}

/* Hero 内手机锚点（起点，恒隐藏；right 与第二屏素材位中心对齐 → 垂直降落。
   对齐推导：shell 定位基 = padding box（宽 1360）；第二屏板块列 560 宽、右缘=1320，
   素材位居中于板 → 中心 x = 1040；锚点宽 292 → right = 1360 − (1040+146) = 174 */
.hero-anchor {
  visibility: hidden;
  position: absolute;
  right: 160px; /* 与第二屏素材位中心对齐：1360 − (1040 + 160) */
  width: 320px;
  /* 2026-08-23 用户定稿：手机顶与 H1 第二行「操作简单 交付更专业」**顶对齐**。
     hero 高度随视口变（max(720, 100vh-96)），固定 height 从底排必然跨视口漂移 ⇒
     改从**顶**钉：top = 文案侧算出的第二行字面顶（copy paddingTop 250 + 眉题块 28.8
     + h1 margin 20 + 首行行高 68.6 + 半行距 8.3 ≈ 376），bottom 拉到分界线，高度自适应。 */
  top: 376px;
  bottom: -1px;
  background: #0e0f12;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: none;
  border-radius: 42px 42px 0 0;
  overflow: hidden;
  box-shadow:
    0 -30px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── 通用文字/条目 ─────────────────────────────────────────────────── */
.h2 {
  font-weight: 600;
  color: var(--ink);
  font-size: 38px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.h2 .accent {
  color: var(--blue); /* 批⑦：「高端体验」回退品牌蓝 */
}

.feats {
  display: grid;
  gap: 6px;
  margin-top: 38px;
}
/* 批⑧：功能条目对勾恢复品牌蓝（用户拍板绿色只留 CTA/案例胶囊） */
.feats svg path {
  stroke: var(--blue);
}
.feat {
  display: flex;
  gap: 16px;
  margin: 0 0 0 -18px;
  padding: 14px 18px;
  border-radius: 10px;
}
/* 2026-08-22：sec2 的 hover 淡底随翻页联动一起退役（纯文案无交互）；
   sec5 仍靠 hover 切「更多功能」大图，指针与高亮只留在那边。 */
.feat svg {
  flex: none;
  margin-top: 4px;
}
.feat h3 {
  font-weight: 600;
  color: var(--ink);
  font-size: 17px;
}
.feat p {
  margin: 7px 0 0;
  line-height: 1.85;
  color: var(--body);
  font-size: 15px;
}

/* 首屏以下 CTA：圆角描边镂空，hover 填充（批⑥：品牌蓝换绿） */
.cta-ghost {
  display: inline-block;
  border: 1.5px solid rgba(26, 188, 156, 0.45); /* 批⑦：描边再浅一档 */
  border-radius: 999px;
  color: var(--green-hover);
  background: transparent;
  font-weight: 600;
  font-size: 16.5px; /* 批⑨：字大一号，按钮尺寸靠 padding 缩回不变 */
  letter-spacing: 0.12em;
  padding: 11px 39px;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s;
}
.cta-ghost:hover {
  background: var(--green);
  color: #fff;
  opacity: 1;
}
.sec2-copy .cta-ghost {
  margin-top: 40px; /* 批⑫改：间距改动撤销，回原值 */
}
.sec2-copy .feats {
  margin-top: 48px; /* 初始标题下间隔；标题下移动效终态由 home.js 对齐 CTA 上间距 */
}
.sec2-copy .h2 {
  will-change: transform; /* 批⑫动效：随副文案露出下移，home.js 驱动，可逆 */
}

/* 翻页箭头 */
.arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 10px;
  z-index: 2;
}
.arr.dim {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.arr.dim:hover {
  opacity: 1;
}

/* ── 第二屏（H5 相册分享 · 左文右机；标题贴近首屏分界线） ──────────── */
.sec2 {
  background: #fff;
  padding: 0 0 72px; /* 批⑥：素材底板直接顶到首屏分界线，无间隔 */
}
.sec2-grid {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 72px;
  align-items: center; /* 批⑥：左列相对底板上下居中 */
}
.sec2-copy {
  max-width: 600px;
}
.board {
  position: relative;
  height: 760px;
  display: grid;
  place-items: center;
}
.board-veil {
  position: absolute;
  inset: 0;
}

/* 手机素材位（第二屏锚点，居中于板内） */
.phone-slot {
  position: relative;
  width: 320px;
  height: 631px; /* 与 .phone 同步 */
  background: #0e0f12;
  border-radius: 45px;
  padding: 11px;
  box-shadow: 0 40px 84px rgba(28, 43, 64, 0.28);
  visibility: hidden; /* 锚点：真手机由 JS 定位的 .phone 覆盖 */
}
.phone-slot-screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(180deg, #f2f4f7, #e6e9ee);
  display: grid;
  place-items: center;
}

/* ── 案例展示（pic-time 式 sticky 横向滚动） ──────────────────────── */
.cases {
  position: relative;
  background: #fff;
  /* 总高 = 100vh + 轨道溢出量，由 home.js 动态设置 */
}
.cases-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 46px; /* 批⑤：标题区与卡片拉开 */
  padding-top: 56px; /* 批⑩：上间距缩小（仍让出冻结导航） */
  background: #fff;
}
.cases-h2 {
  text-align: center;
  position: relative;
  top: 0; /* 批⑪改5：终态居中偏移改由 home.js 按视口实时计算（导航底↔副题顶），不再写死 */
  will-change: transform;
  transform-origin: center center;
  /* 批⑪动效：初始态 = 放大约两号(scale 1.21) + 上移 30px；第一张案例卡上缘
     从视口底部露出→完全露出期间线性缩小下移到终态；home.js 按卡片可见度驱动，可逆 */
}
.cases-sub {
  text-align: center;
  color: #6b7280;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.9;
}
.case-pills {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}
.case-pill {
  font-size: 15px;
  color: #5c6068;
  background: #f1f3f6;
  border-radius: 999px;
  padding: 10px 28px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s;
  white-space: nowrap;
}
.case-pill:hover {
  background: #e9efec;
}
.case-pill.on {
  background: var(--green); /* 批⑥：pixieset 式 emerald 选中胶囊 */
  color: #fff;
}
.case-viewport {
  overflow: visible;
}
.case-track {
  display: flex;
  /* 2026-08-19 走查：40px 太散，卡片之间读不成一条轨道 → 24px。 */
  gap: 24px;
  padding: 0 64px;
  will-change: transform;
}
.case-slide {
  flex: none;
  width: 360px;
}
.case-card {
  background: #fff;
  border: 1px solid #e7e9ed;
  overflow: hidden;
  /* 2026-08-19 走查两轮：卡片可点却毫无反馈，与上方胶囊读不出关联 ⇒ 浮起。
     第二轮「太生硬」的三处根因与改法：
     ① 缓动太短太平 → 0.28s ease-out 换 **0.52s expo-out**（cubic-bezier(.16,1,.3,1)），
        起步快、尾段长，才有"托起来又稳住"的手感；
     ② 阴影只有一层大模糊 → 改**三层叠加**（近距实影 + 中距 + 远距大扩散），
        这才像真实光照下的投影，单层永远发脏；
     ③ 静息态零阴影 → 从"无"跳到"有"必然突兀，故静息就给一层 1px 浅影，hover 只是把它加厚。 */
  box-shadow: 0 1px 2px rgba(20, 25, 32, 0.04);
  transition:
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s ease;
  /* 2026-08-18 真实素材：卡片改 <a> 直达真实 H5 示例相册（内容稿 🔴 案例入口=点击直达）。 */
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 🔴 只给 `a.case-card`（四张真案例卡）浮起——「更多案例」那张是 <div>，整卡不可点，
   浮起会误导；它的三行各自是链接，已有 `.more-row:hover` 的背景反馈。
   🔴 必须显式 `opacity: 1` 覆盖全局 `a:hover { opacity: .85 }`，否则卡片一 hover 就整体发灰。
   🔴 包 `@media (hover: hover)`：触屏上 :hover 会「粘住」，浮起状态退不回去。 */
/* 🔴 `.is-current` = 当前胶囊对应的那张卡（home.js 随轨道进度打）。
   用户走查：点胶囊切过去时，那张卡要**自动处于抬起态**，否则看不出哪个标签对应哪张卡。
   与 hover 共用同一套视觉，故合并选择器。 */
a.case-card.is-current,
a.case-card:hover {
  opacity: 1;
  transform: translateY(-10px);
  border-color: #dfe3e9;
  box-shadow:
    0 2px 4px rgba(20, 25, 32, 0.04),
    0 10px 20px rgba(20, 25, 32, 0.07),
    0 28px 56px rgba(20, 25, 32, 0.13);
}
/* 🔴 触屏上 :hover 会「粘住」（抬起后退不回去）⇒ 只在真有指针悬停能力时启用 hover 那条；
   `.is-current` 不受影响，它是 JS 驱动的状态，触屏照常需要。 */
@media (hover: none) {
  a.case-card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(20, 25, 32, 0.04);
  }
  /* 触屏 tap 后 :hover 会粘住的其余两处：sec5 条目淡底、手机视频的模糊遮罩 */
  .sec5 .feat:not(.feat-more):hover {
    background: transparent;
  }
  .phone.docked:hover .phone-video video {
    filter: none;
    transform: none;
  }
}
.case-cover {
  position: relative;
  /* 2026-08-19 走查：删掉「照片直播/时间轴/热门」tabs 行，腾出的 44px 全给 KV
     （140 → 184），卡片总高保持 449 不变。四张真案例卡的 KV 已改纯图无文字覆盖，
     故这里的 flex/padding 只剩「更多案例」那张标签卡在用。 */
  height: 184px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 26px 20px;
}
.case-ph {
  position: absolute;
  top: 14px;
  right: 16px;
  font: 400 9px var(--mono);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.16em;
}
.case-title {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.case-meta {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.case-tabs {
  display: flex;
  gap: 16px;
  padding: 12px 18px;
  font-size: 12px;
  color: #8a8e96;
  border-bottom: 1px solid #eef0f3;
}
.case-tabs .on {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  margin-bottom: -2px;
}
/* 2026-08-19 走查两轮：
   ① 左右去内边距，让网格与满幅 KV 同宽（每格 108.7 → 116.7px，图更大）；
   ② 但**上方要留间隔**——第一版把网格直接贴到 KV 底下，KV 与缩略图糊成一块（用户报到）。
      故只补 padding-top，左右仍为 0。第三轮：12px 太宽（用户报到）→ 6px，
      与网格自身 4px 的格间距同量级，读起来是「一组图」而不是两块。 */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px 0 0;
}
.case-grid div {
  height: 78px;
}
/* 「更多案例」卡没有 KV 图，封面只是个标签块 —— 不跟着真案例卡把封面加高到 184，
   否则这张卡比其它四张高一截（实测 494 vs 450）。保持原 140。 */
.case-more .case-cover {
  height: 140px;
}

/* 案例卡⑤「更多案例」（2026-08-19）：三本相册的直达列表，替代九宫格。
   高度靠 3 行 × 74px 缩略图凑到与其它卡持平（轨道按实测宽高算位移，不必严格等高）。 */
/* 与 .case-grid 同规则：左右满幅、上方留间隔。
   高度对齐四张真案例卡（封面 140 + 列表 + 边框 2 = 440）。 */
.more-list {
  display: grid;
  gap: 8px;
  padding: 6px 0 0;
}
.more-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 5px; /* 与其它案例卡等高（449px）靠这里配平 */
  color: inherit;
  text-decoration: none;
  transition: background 0.2s;
}
.more-row:hover {
  background: #f5f6f8;
  opacity: 1;
}
.more-thumb {
  flex: none;
  width: 116px;
  height: 74px;
  background-color: #eef0f3;
}
.more-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.more-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.more-meta {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #8a8e96;
}

/* 场景小标题（.case-cap）已删：与上方胶囊重复；副文案直接跟在卡片下 */
/* 卡片标题（2026-08-19 走查三轮，位置与字体各翻过一次）：
   ① 原是「卡片下方的说明文案」→ 改为承载标题；
   ② 曾移进卡片内部底部 → **用户令移回卡片外**（框内显得局促），保持居中；
   ③ 字体走衬线（站的设计语言是 editorial，与 SAVORIN 字标的 Times 呼应）。
   🔴 **字体栈里绝不能放 Georgia**：它默认是**旧式数字**（3/4/7/9 带下降部、0 只有 x-height），
      「30 周年」渲染出来 3 沉下去、0 矮一截，与中文并排极难看（用户实拍报到）。
      改用 Times New Roman 打头 —— 等高衬线数字，且与页首 SAVORIN 字标同族。
   站内无自托管字体、不引 Google Fonts（隐私政策「数据不出境」红线），只能用系统字体栈。 */
.case-cap-p {
  margin: 18px 0 0;
  text-align: center;
  font-family:
    'Times New Roman', Times, 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', 'STSong',
    'SimSun', serif;
  /* 双保险：万一回落到带旧式数字的字体，也强制等高数字 */
  font-variant-numeric: lining-nums;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ── 3步快速上手 ──────────────────────────────────────────────────── */
.sec4 {
  background: var(--gray-band); /* 批⑤：底色对齐 pixieset 浅灰 #fafafa */
  padding: 160px 0 40px; /* 批⑫：上间距再增大 */
}
.h2-steps {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  /* 批⑦/⑧：对齐基准 =「快速上手」文字顶边（34px 字，基线随 96px 大 3 在 ~77px 处，
     文字顶 ≈ 块顶 +50px）→ 整块上提 50px，大 3 突出到视频卡上缘以上 */
  margin: -50px 0 0 -14px;
}
.big3 {
  position: relative;
  display: inline-block;
}
.big3 span {
  display: inline-block;
  line-height: 1;
  font-weight: 800;
  font-style: italic;
  font-size: 96px;
  padding: 0 8px;
}
.big3 .under {
  position: absolute;
  color: #d7e6fa;
  left: 6px;
  top: 6px;
}
.big3 .over {
  position: relative;
  background: linear-gradient(180deg, #9cc2f7 0%, #5b9bf0 48%, #2f6fd8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h2-steps .word-bu {
  font-weight: 700;
  color: var(--blue);
  font-size: 50px;
  margin: 0 10px 0 5px;
}
.h2-steps .word-rest {
  font-size: 34px;
}

/* 批③：两列底部对齐（视频底 = 左侧最后一条文案底） */
.sec4-grid {
  display: grid;
  grid-template-columns: 1fr 760px;
  gap: 64px;
  align-items: stretch; /* 批⑥：左列撑满视频卡高度，标题顶=卡顶、末条底=卡底 */
}
.steps-col {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 34px;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pill {
  font-weight: 700;
  font-style: italic;
  color: #3d7de0;
  background: #eef3fb;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-size: 12.5px;
  padding: 5px 14px 5px 12px;
}
.step-head h3 {
  font-weight: 600;
  color: var(--ink);
  font-size: 19px;
}
.step p {
  color: var(--body);
  margin: 10px 0 0 12px; /* 左移量 = .pill 左内边距，正文与「Step」文字左对齐 */
  font-size: 15px;
  line-height: 1.85;
}
.step-arrow {
  margin-left: 100px;
}
.step-arrow svg {
  animation: arrowDrift 1.6s ease-in-out infinite;
}

.video4 {
  position: relative;
  overflow: hidden;
  /* 2026-08-22 用户令：素材位比例跟随实拍视频（savorin-admin 成片 1720×1080），
     宽度仍由 sec4 网格给；直角改小圆角。 */
  aspect-ratio: 1720 / 1080;
  border-radius: 12px;
  box-shadow:
    0 3px 10px rgba(28, 43, 64, 0.1),
    0 22px 56px rgba(28, 43, 64, 0.2);
}
/* 视频封面底色 = 原型暖渐变（批③回退） */
.v4-cover {
  position: absolute;
  inset: 0;
  cursor: pointer;
  /* 2026-08-22 真实素材：封面 = 演示视频首帧（与素材位同比例，零跳变起播）。 */
  background:
    url('img/video4-poster.jpg') top center / cover no-repeat,
    linear-gradient(125deg, #f6e7c9 0%, #f2ece9 32%, #dceaf5 64%, #bcd9ee 100%);
}
.v4-play {
  position: absolute;
  inset: 0;
  background: #0e0f12;
  display: grid;
  place-items: center;
}
.v4-play video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.v4-dim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 20, 30, 0);
  transition: background 0.35s;
}
.v4-cover:hover .v4-dim {
  background: rgba(15, 20, 30, 0.38);
}
.v4-pill {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  gap: 13px;
  padding: 13px 32px 13px 17px;
  box-shadow: 0 16px 40px rgba(28, 43, 64, 0.2);
}
.v4-btn {
  border-radius: 50%;
  background: var(--blue);
  display: grid;
  place-items: center;
  animation: playPulse 1.8s ease-out infinite;
  width: 29px;
  height: 29px;
}
.v4-pill b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-size: 16.5px;
}
.hidden {
  display: none !important;
}

/* ── 更多功能 ─────────────────────────────────────────────────────── */
.sec5 {
  background: var(--gray-band); /* 批⑤：底色对齐 pixieset 浅灰 #fafafa */
  padding: 96px 0 112px;
}
.sec5 .feat:not(.feat-more) {
  cursor: pointer;
  transition: background 0.25s;
}
.sec5 .feat-more {
  cursor: default;
  color: #9aa0a9;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.45em; /* 三个点拉开间距 */
  /* 与上方条目标题左对齐：feat 内边距 18 + 图标 18 + 间距 16 = 52 */
  padding: 0 18px 6px 52px;
}
.sec5 .feat:not(.feat-more):hover {
  background: #e2e9f2; /* 批⑧：恢复蓝调（浅灰底上保持 hover 可辨） */
}
.sec5-grid {
  display: grid;
  grid-template-columns: 740px 1fr;
  gap: 64px;
  align-items: center;
}
.board5 {
  position: relative;
  height: 560px;
}
/* 底板色 = 原型暖渐变（批③回退） */
.board5-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #e8f1fb 0%, #f7eef2 38%, #fdeee8 66%, #fdf6e9 100%);
}
.pin {
  position: absolute;
  background: #c6ccd4;
  width: 7px;
  height: 7px;
}
.b5-ov {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s;
}
.board5:hover .b5-ov {
  opacity: 1;
}
.shot-card {
  overflow: hidden;
  background: #fff;
}
.shot-main {
  /* 2026-08-22 用户令：去掉局部小图卡，单张后台大图居中展示；
     比例随实拍整窗截图（1512×950），680×427 居中于 740×560 底板。 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  aspect-ratio: 1280 / 950;
  box-shadow:
    0 3px 10px rgba(28, 43, 64, 0.1),
    0 22px 56px rgba(28, 43, 64, 0.2);
}
.sec5 .feats {
  margin-top: 30px;
}

/* ── 产品说明（pixieset best-in-class 式） ────────────────────────── */
.assure {
  background: #fff; /* 批⑤：底色重排——夹在两段浅灰带之间用白，对齐 pixieset 白/灰交替节奏 */
  padding: 78px 0 86px; /* 批⑫：上下间距缩小 */
}
.assure-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 100px;
  align-items: start;
}
.assure-p {
  margin: 20px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: #54677c;
  max-width: 400px;
}
.assure-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px 64px;
  padding-top: 8px;
}
.assure-items h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.assure-items p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--body);
}

/* ── 定价（浅灰底，与 FAQ 连续） ──────────────────────────────────── */

/* 🔴 定价区那颗 CTA 跟着表格走紫（2026-08-16 用户令）。**只限 `.pricing` 内** ——
   `.cta-ghost` 在首屏、第二屏、收尾带还各有一颗，那些仍是 CTA 绿，别把基类改了。 */
.pricing .cta-ghost {
  border-color: rgba(74, 16, 56, 0.35);
  color: var(--plum);
}
.pricing .cta-ghost:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
  opacity: 1;
}

.pricing {
  background: var(--gray-band); /* 批⑤：底色对齐 pixieset 浅灰 #fafafa（与 FAQ 连续） */
}
.price-head {
  padding: 100px 0 10px;
}
.price-head .h2 {
  text-align: center;
  letter-spacing: 0.06em;
}
.price-sub {
  text-align: center;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #54677c;
}
.cta-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.price-body {
  padding: 44px 0 110px;
}
.ptable {
  display: grid;
  /* V4.4：定价四档（免费 / 单相册 / 轻量版 / 专业版）＝ 标签列 + 4 列。
     标签列权重由 1.1 收到 1.05：五列后每列约 265px，「自定义水印、logo、品牌标识」
     这条最长标签仍是一行，而价格行（¥118 / 年）也不至于换行。 */
  grid-template-columns: 1.05fr 1fr 1fr 1fr 1fr;
}
.pt-vline {
  border-left: 1px solid #dfe2e6;
}
.pt-reco {
  /* 🔴 2026-08-16 用户令：定价表整体走**紫色系**（当日先由品牌蓝改 CTA 绿、再改紫，
     以本条为准；批⑧那条「表格恢复品牌蓝」早已作废）。参照 shootproof 定价表实测色。
     🔴 只此一张表 —— CTA 按钮仍是绿、第二屏功能对勾 `.feats` 仍是品牌蓝，都别跟着改。 */
  background: var(--plum);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  padding: 12px 0;
}
.pt-head {
  border-left: 1px solid #dfe2e6;
  padding: 34px 14px 28px; /* 批⑧：表头恢复居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 走查（2026-08-15 用户定）：推荐列左右都要竖线 —— 左侧是它自己的 border-left，
   右侧由右邻的专业版列 border-left 提供；专业版列右侧不封边（表格右缘留空）。 */
.pt-head.pro {
  background: var(--plum-soft); /* 推荐列淡底（紫系，2026-08-16） */
}
.pt-head h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.pt-price {
  /* 走查：表头里版本名与价格之间再松一点（18 → 26） */
  margin: 26px 0 0;
  display: flex;
  align-items: baseline;
}
.pt-price .cny,
.pt-price .num {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.pt-price .unit {
  margin-left: 8px;
  font-size: 14.5px;
  color: #8a8e96;
}
.pt-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: #8a8e96;
}
.pt-pill {
  margin-top: 12px;
  background: #f3e9f1;
  color: var(--plum);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-label {
  border-top: 1px solid #dfe2e6;
  padding: 21px 12px 21px 0;
  font-size: 15px;
  font-weight: 400;
  color: #2c3646;
  display: flex;
  align-items: center;
}
.pt-cell {
  border-left: 1px solid #dfe2e6;
  border-top: 1px solid #dfe2e6;
  padding: 19px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #2c3646;
}
/* 表内对勾随定价表改紫（2026-08-16 用户令）。🔴 只此一处 —— 第二屏 `.feats` 的对勾仍是
   品牌蓝，别一起换。 */
.pt-cell svg path {
  stroke: var(--plum);
}
.pt-cell.pro {
  background: var(--plum-soft);
  border-top: 1px solid #ecdcea;
}
.pt-cell.col {
  flex-direction: column;
  gap: 3px;
}
.pt-cell .b {
  font-weight: 600;
}
.pt-cell .fine {
  font-size: 12.5px;
  color: #9aa0a9;
}
.dash {
  color: #c2c7ce;
}
/* 定价表移动版卡片（home.js ⑤c 运行时从 .ptable 克隆；桌面恒隐藏，样式见 ≤899 块） */
.pt-cards {
  display: none;
}
.pt-bot {
  height: 0;
  border-bottom: 1px solid #dfe2e6;
}
.pt-bot.pro {
  height: 0;
  background: none;
  border-bottom: 1px solid #ecdcea;
}

/* ── 常见问题（灰底白卡 · 细体问题 + 下拉箭头） ────────────────────── */
/* shootproof.com 实测值（2026-08-14 @1512）：底 #f6f8f8 · 左列 394/右列 686/列距 80 ·
   标题 36.7px 衬线 #002b4c · 副题 20px #607780 · 按钮 16px/700 radius 25 padding 13 35 白底描边 ·
   问题卡 #fff radius 6 padding 14 16 高 52 字 18 #607780 · 卡距 16 · 箭头 24 同灰 */
.faq {
  background: var(--gray-band); /* 批⑤：底色对齐 pixieset 浅灰 #fafafa（与定价连续） */
  padding: 84px 0;
}
.faq-grid {
  display: grid;
  grid-template-columns: 394px 686px;
  gap: 80px;
  justify-content: center;
  align-items: start;
}
.faq-side-sub {
  margin: 20px 0 32px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #5c6b7a;
}
.faq-item {
  background: none;
}
.faq-item + .faq-item {
  margin-top: 16px;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  color: #435364;
  text-align: left;
}
.faq-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #2c3e55;
}
.faq-toggle svg {
  width: 100%;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-toggle svg {
  transform: rotate(180deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-clip {
  overflow: hidden;
  min-height: 0;
}
.faq-a-main {
  margin: 22px 0 12px;
  padding: 0 16px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #5c6b7a;
}

/* ── 收尾 CTA（Pixieset 式：拼贴做实，压入页脚） ──────────────────── */
.closing {
  background: #fff;
  padding: 110px 0 0;
  text-align: center;
}
.closing-h2 {
  font-size: 42px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.closing-sub {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #6b7280;
}
.closing .cta-hero {
  margin-top: 34px;
}
.closing-visual {
  position: relative;
  width: 1240px;
  height: 520px; /* 批⑨：用户定——只比原稿 470 增高一点 */
  margin: 76px auto 0;
  overflow: hidden; /* 批⑤：拼贴在区块底缘被裁切（pixieset 的拼接方式），不压页脚 */
  text-align: left;
}
.cv-main {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 960px;
  height: 660px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(28, 43, 64, 0.1),
    0 40px 90px rgba(28, 43, 64, 0.24);
}
.cv-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  background: #f1f3f6;
  border-bottom: 1px solid #e5e8ec;
}
.cv-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d5d9df;
}
.cv-bar span {
  margin-left: 12px;
  font: 400 11px var(--mono);
  color: #9aa0a9;
  letter-spacing: 0.06em;
  background: #fff;
  border-radius: 6px;
  padding: 4px 14px;
}
/* 后台工作台 mock（侧栏骨架 + 相册卡网格） */
.cv-app {
  display: flex;
  height: calc(100% - 38px);
  background: #fff;
}
.cv-side {
  flex: none;
  width: 150px;
  background: #f7f8fa;
  border-right: 1px solid #e8eaee;
  padding: 18px 16px;
}
.cv-side-brand {
  width: 64px;
  height: 14px;
  border-radius: 7px;
  background: #cdd6e4;
  margin-bottom: 26px;
}
.cv-side i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: #e3e6eb;
  margin: 16px 0;
}
.cv-content {
  flex: 1;
  position: relative;
  padding: 22px 26px;
}
.cv-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cv-content-head b {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cv-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: var(--green); /* 批⑥：品牌蓝换绿 */
  border-radius: 6px;
  padding: 6px 13px;
}
.cv-albums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.cv-alb {
  border: 1px solid #edeff2;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.cv-alb i {
  display: block;
  height: 178px; /* 批⑨：随拼贴微增（168 → 178） */
}
.cv-alb b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 9px 11px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-alb span {
  display: block;
  font-size: 10.5px;
  color: #8a8e96;
  padding: 3px 11px 10px;
}
.cv-note {
  position: absolute;
  right: 16px;
  bottom: 10px;
  font: 400 9px var(--mono);
  color: #b0b5bc;
  letter-spacing: 0.16em;
}
/* 左手机（相册页浅色 mock） */
.cv-phone {
  position: absolute;
  left: 92px;
  top: 95px;
  width: 230px;
  height: 490px; /* 批⑨：微增（470 → 490） */
  background: #0e0f12;
  border-radius: 34px;
  padding: 7px;
  box-shadow: 0 34px 70px rgba(12, 16, 24, 0.4);
}
.cv-phone-screen {
  height: 100%;
  border-radius: 27px;
  overflow: hidden;
  background: #fff;
}
.cv-ph-head {
  padding: 36px 14px 10px;
}
.cv-ph-head b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.cv-ph-head span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #8a8e96;
}
.cv-ph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px 8px;
}
.cv-ph-grid div {
  height: 70px;
}
/* 右相册卡 */
.cv-card {
  position: absolute;
  right: 72px;
  /* 第八轮（2026-08-19 用户令）：卡底标题已删，卡片下移到缩略图贴住容器底缘。
     卡高 = KV 126 + 网格 padding-top 6 + 两行 70×2 + gap 4 = 276；容器 520 - 276 = 244。 */
  top: 244px;
  width: 300px;
  background: #fff;
  border-radius: 0; /* 第九轮用户令：相册卡改直角 */
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(28, 43, 64, 0.1),
    0 30px 70px rgba(28, 43, 64, 0.22);
}
/* 与案例卡同一套处理（2026-08-19 走查）：KV 纯图无文字覆盖、网格与 KV 同宽只留 6px 上间隔。
   第八轮用户令：卡底名称已删（DOM 一起删），缩略图直接贴卡底。 */
.cv-card-cover {
  height: 126px;
}
.cv-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px 0 0;
}
.cv-card-grid div {
  height: 70px;
}

/* ── 页脚 ──────────────────────────────────────────────────────────── */
.foot {
  background: var(--dark-band); /* 批⑤：对齐 pixieset 页脚深底 #191918 */
  color: #fff;
}
.foot .shell {
  padding-top: 76px;
  padding-bottom: 40px;
}
.foot .brand-cn {
  font-size: 19px;
}
.foot .brand-en {
  font-size: 17px;
}
.foot-cols {
  display: flex;
  gap: 110px;
  flex-wrap: wrap;
}
.foot-brand {
  flex: 1;
  min-width: 300px;
}
.foot-tag {
  color: rgba(255, 255, 255, 0.55);
  margin: 16px 0 0;
  font-size: 13.5px;
}
/* 2026-08-28 页脚公众号二维码（品牌列内，标语之下）：二维码 + 下方「公众号」两字，不放账号名（用户令）。 */
.foot-wx {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 84px;
  margin-top: 26px;
}
.foot-wx-qr {
  width: 84px;
  height: 84px;
  border-radius: 6px;
  display: block;
}
.foot-wx-h {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.16em;
}
.foot-h {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.16em;
}
.foot-links {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
}
.foot-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 60px;
  padding-top: 26px;
  gap: 8px;
  font-size: 12px;
  line-height: 1.9;
}
.foot-legal a {
  color: rgba(255, 255, 255, 0.4);
}
.foot-legal .dimmer {
  color: rgba(255, 255, 255, 0.22);
}
.foot-legal .foot-gongan {
  margin: 0 8px;
}
.foot-legal .foot-gongan img {
  display: inline-block;
  width: 14px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 4px;
}

/* ── 2026-08-18 真实素材接入：收尾 CTA 区截图 ── */
.cv-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cv-phone-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ============================================================================
   响应式层（2026-08-22 全尺寸响应式 + 移动版）
   🔴 分两带：≤1279 平板收缩带（保持桌面布局，固定列宽改流式）；
              ≤899 移动版单独排版（单列、案例区改原生横滑、收尾带素材拼贴整块不出）。
   ≥1280 桌面一个字节不动（1512 基准设计原样）。
   收尾带 .closing-visual 在 1320 以下由 home.js 等比缩放（1240 固定画布，内部全是
   绝对定位像素值，只能整体 scale），899 以下直接 display:none（用户令：手机版
   不要收尾带的图片素材）。
   🔴 订阅站 subscribe-web 构建期 import 同一份文件：导航（.site-head/.hero-links/
   .btn-login）与 FAQ 的响应式规则两站共享——这正是复用的目的，别在那边再写一份。
   ============================================================================ */

/* ── 平板收缩带（900 ~ 1279）───────────────────────────────────────── */
@media (max-width: 1279px) {
  .shell {
    padding: 0 32px;
  }
  .h2 {
    font-size: clamp(30px, 3vw, 38px);
  }
  /* 第二屏：右列 560 → 流式；素材位与降落手机等比缩一档 */
  .sec2-grid {
    grid-template-columns: 1fr minmax(360px, 46%);
    gap: 48px;
  }
  .board {
    height: 700px;
  }
  .phone-slot {
    width: 280px;
    height: 554px;
  }
  /* 收缩带手机小一档 → 下移：改与 H1 第二行「操作简单 交付更专业」**底对齐**
     （2026-08-23 用户定）：h1 顶 298.8 + 两行行高 137.3 − 半行距 8.3 ≈ 428 */
  .hero-anchor {
    top: 428px;
  }
  /* 3步：视频列 760 固定 → 流式 */
  .sec4-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 58%);
    gap: 40px;
  }
  /* 🔴 视频卡在本收缩带必须锁宽 100% + 脱离 stretch：左列比视频高时，
     stretch 会把卡高拉到行高，aspect-ratio 反推出的宽度直接撑爆列宽（右缘被视口裁掉）。 */
  .video4 {
    width: 100%;
    align-self: center;
  }
  .big3 span {
    font-size: 80px;
  }
  .h2-steps {
    margin-top: -40px;
  }
  /* 更多功能：底板 740×560 固定 → 流式等比 */
  .sec5-grid {
    grid-template-columns: minmax(0, 55%) 1fr;
    gap: 44px;
  }
  .board5 {
    height: auto;
    aspect-ratio: 740 / 560;
  }
  .shot-main {
    width: 92%;
  }
  .assure-grid {
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 56px;
  }
  .faq-grid {
    grid-template-columns: minmax(280px, 394px) minmax(0, 686px);
    gap: 48px;
  }
  /* 定价表：五列在窄视口挤不下时允许横向滑动兜底 */
  .price-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ptable {
    min-width: 820px;
  }
}

/* ── 移动版（≤899，单独排版）──────────────────────────────────────── */
@media (max-width: 899px) {
  .shell {
    padding: 0 20px;
  }
  .h2 {
    font-size: 26px;
  }

  /* 导航：中央链接组收起（页脚有全部去处），保留品牌 + 登录 + 免费注册 */
  .site-head .shell {
    padding: 0 16px;
  }
  .hero-bar {
    height: 56px;
  }
  .hero-links {
    display: none;
  }
  .brand {
    gap: 8px;
  }
  .brand-cn {
    font-size: 19px;
  }
  .brand-en {
    font-size: 15px;
    /* 墨迹居中补偿按 CLAUDE 注释公式重算：0.3627×19 − 0.3310×15 ≈ 1.9px */
    top: -1.9px;
  }
  .nav-login {
    font-size: 14px;
  }
  .btn-login {
    margin-left: 16px;
    padding: 10px 20px;
    font-size: 14px;
  }
  .nav-me {
    margin-left: 12px;
    gap: 7px;
  }
  .nav-name {
    max-width: 84px;
    font-size: 14px;
  }
  .nav-avatar {
    width: 26px;
    height: 26px;
  }
  .nav-logout {
    font-size: 14px;
  }

  /* Hero：纯文案屏（手机 mockup 常驻第二屏，不再跨屏降落） */
  .hero {
    height: auto;
  }
  .hero-copy {
    padding: 136px 0 92px;
    max-width: none;
  }
  .eyebrow {
    font-size: 13.5px;
  }
  .hero h1 {
    font-size: 33px;
    line-height: 1.45;
    margin-top: 14px;
  }
  .hero h1 .gap {
    width: 14px;
  }
  .hero-sub {
    white-space: normal;
    font-size: 15px;
    line-height: 1.9;
    margin-top: 14px;
  }
  .cta-hero {
    margin-top: 26px;
    font-size: 15px;
    padding: 13px 36px;
  }
  .hero-anchor,
  .hero-ph-note {
    display: none;
  }

  /* 第二屏：单列，文案在上、手机素材位在下 */
  .sec2 {
    padding-bottom: 56px;
  }
  .sec2-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sec2-copy {
    max-width: none;
    padding-top: 44px;
  }
  .sec2-copy .feats {
    margin-top: 30px;
  }
  .sec2-copy .cta-ghost {
    margin-top: 26px;
    /* 移动版走查（2026-08-22）：CTA 按钮居中 */
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .feat {
    margin-left: 0;
    padding: 12px 0;
    gap: 13px;
  }
  .feat h3 {
    font-size: 16px;
  }
  .feat p {
    font-size: 14.5px;
    margin-top: 6px;
  }
  .cta-ghost {
    font-size: 15px;
    padding: 10px 32px;
  }
  .board {
    height: 620px;
  }
  .phone-slot {
    width: 264px;
    height: 520px;
    border-radius: 38px;
    padding: 9px;
  }
  /* 状态栏随壳缩一档 */
  .phone-status {
    padding: 2px 22px 0 28px;
  }
  .ps-time {
    font-size: 11px;
  }
  .ps-icons {
    gap: 5px;
    transform: scale(0.88);
    transform-origin: right center;
  }
  .phone-slot-screen {
    border-radius: 29px;
  }
  /* 降落手机（JS 把它钉在素材位上，尺寸取素材位）：外壳参数跟素材位同档 */
  .phone {
    border-radius: 38px;
    padding: 9px;
    box-shadow: 0 28px 60px rgba(12, 16, 24, 0.36);
  }
  .phone-screen {
    border-radius: 29px;
  }
  .phone-ov-qr img {
    width: 116px;
    height: 116px;
  }

  /* 案例展示：sticky 滚动劫持整套退役，改原生横向滑动（JS 清掉内联驱动值，
     这里的 !important 是 JS 失效时的兜底） */
  .cases {
    height: auto !important;
  }
  .cases-pin {
    position: static;
    height: auto;
    overflow: visible;
    padding: 64px 0 8px;
    gap: 22px;
  }
  .cases-h2 {
    transform: none !important;
  }
  .cases-sub {
    font-size: 14.5px;
    margin-top: 10px;
    padding: 0 6px;
  }
  .case-pills {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 12px;
    margin-top: 20px;
  }
  .case-pill {
    font-size: 13.5px;
    padding: 8px 18px;
  }
  .case-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    padding: 14px 0 28px;
    /* 滚动条藏起来（三家写法） */
    scrollbar-width: none;
  }
  .case-viewport::-webkit-scrollbar {
    display: none;
  }
  .case-track {
    transform: none !important;
    padding: 0 20px !important;
    width: max-content;
    gap: 16px;
  }
  .case-slide {
    width: min(320px, 82vw);
    scroll-snap-align: center;
  }
  /* 触屏上抬起态只保留阴影加厚，不做位移（位移会被横滑容器竖向裁切） */
  a.case-card.is-current {
    transform: none;
  }
  .case-cap-p {
    font-size: 15px;
    margin-top: 14px;
  }

  /* 3步快速上手：单列，标题回归常规文档流 */
  .sec4 {
    padding: 72px 0 56px;
  }
  .sec4-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .steps-col {
    max-width: none;
  }
  .h2-steps {
    margin: 0;
  }
  .big3 span {
    font-size: 64px;
  }
  .big3 .under {
    left: 4px;
    top: 4px;
  }
  .h2-steps .word-bu {
    font-size: 36px;
    margin: 0 6px 0 4px;
  }
  .h2-steps .word-rest {
    font-size: 26px;
  }
  .steps {
    margin-top: 26px;
    gap: 14px;
  }
  .step p {
    font-size: 14.5px;
    margin-top: 8px;
  }
  .step-arrow {
    margin-left: 72px;
  }
  .v4-pill {
    gap: 10px;
    padding: 10px 22px 10px 13px;
  }
  .v4-pill b {
    font-size: 14.5px;
  }

  /* 更多功能：单列，文案在上、底板在下；切图箭头常显（触屏没有 hover） */
  .sec5 {
    padding: 64px 0 72px;
  }
  .sec5-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .board5 {
    order: 2;
    /* 🔴 flex 列里全绝对定位子元素的盒子必须给显式宽，否则 aspect-ratio 只能
       从 0 内容高转推出 0 宽（实测 0×0 消失） */
    width: 100%;
    height: auto;
    aspect-ratio: 740 / 560;
  }
  .shot-main {
    width: 88%;
  }
  .b5-ov {
    opacity: 1;
  }
  .sec5 .feats {
    margin-top: 24px;
  }
  .sec5 .feat-more {
    padding-left: 31px;
    font-size: 15px;
  }

  /* 产品说明：单列 */
  .assure {
    padding: 60px 0 64px;
  }
  .assure-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .assure-p {
    margin-top: 14px;
    font-size: 14.5px;
    max-width: none;
  }
  .assure-items {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 0;
  }
  .assure-items h3 {
    font-size: 17px;
  }
  .assure-items p {
    font-size: 14.5px;
    margin-top: 6px;
  }

  /* 定价：移动版改「每档一张竖排卡片」（home.js ⑤c 从表格克隆生成，单一真相源不变）；
     横滑表只作无 JS 回落（.has-cards 没挂上时才见）。 */
  .price-head {
    padding: 64px 0 6px;
  }
  .price-sub {
    font-size: 14.5px;
    margin-top: 14px;
    padding: 0 6px;
  }
  .cta-row {
    margin-top: 24px;
  }
  .price-body {
    padding: 30px 0 64px;
  }
  .ptable {
    min-width: 780px;
  }
  .price-body.has-cards {
    overflow-x: visible;
  }
  .price-body.has-cards .ptable {
    display: none;
  }
  .pt-cards {
    display: grid;
    gap: 16px;
  }
  .pt-card {
    /* 整卡是 <a>（点击跳注册/登录/订阅站深链，见 home.js ⑤c）：显式 block + 文字色还原，
       并压掉全局 a:hover 的整卡变淡（触屏 tap 会闪一下灰）。 */
    display: block;
    color: inherit;
    background: #fff;
    border: 1px solid #dfe2e6;
    border-radius: 12px;
    padding: 0 18px 6px;
    overflow: hidden;
  }
  a.pt-card:hover {
    opacity: 1;
  }
  .pt-card.pro {
    background: var(--plum-soft);
    border-color: #dcc3d8;
  }
  .pt-card-reco {
    margin: 0 -18px;
    background: var(--plum);
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em; /* 抵消末字符字距，光学居中 */
    padding: 9px 0;
  }
  /* 克隆保留 .pt-head / .pt-cell 原 class 复用字级样式，这里只清掉表格上下文的
     边框/底色/内边距并改对齐 */
  .pt-card .pt-head {
    border: 0;
    background: none;
    padding: 24px 0 20px;
  }
  .pt-card .pt-price {
    margin-top: 14px;
  }
  .pt-card .pt-price .cny,
  .pt-card .pt-price .num {
    font-size: 34px;
  }
  .pt-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #eef0f3;
    padding: 13px 0;
  }
  .pt-card.pro .pt-card-row {
    border-top-color: #ecdcea;
  }
  .pt-card-label {
    font-size: 14px;
    color: #5c6068;
  }
  .pt-card-row .pt-cell {
    border: 0;
    background: none;
    padding: 0;
    flex: none;
    max-width: 56%;
    justify-content: flex-end;
    text-align: right;
    font-size: 14px;
    color: var(--ink);
  }
  .pt-card-row .pt-cell.col {
    align-items: flex-end;
  }
  .pt-label {
    font-size: 14px;
    padding: 17px 10px 17px 0;
  }
  .pt-cell {
    font-size: 14px;
    padding: 15px 10px;
  }
  .pt-head h3 {
    font-size: 17px;
  }
  .pt-price .cny,
  .pt-price .num {
    font-size: 34px;
  }

  /* FAQ：单列；侧栏（标题/副句/联系我们）居中（2026-08-22 移动版走查） */
  .faq {
    padding: 56px 0 64px;
  }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .faq-side {
    text-align: center;
  }
  .faq-side-sub {
    margin: 14px 0 24px;
    font-size: 14.5px;
  }
  .faq-q {
    font-size: 15.5px;
  }
  .faq-a-main {
    font-size: 14.5px;
    margin: 16px 0 10px;
  }

  /* 收尾 CTA：素材拼贴整块不出（用户令），区块自己补底部留白 */
  .closing {
    padding: 76px 0 88px;
  }
  .closing-h2 {
    font-size: 28px;
    letter-spacing: 0.03em;
  }
  .closing-sub {
    font-size: 14.5px;
    margin-top: 14px;
  }
  .closing .cta-hero {
    margin-top: 28px;
  }
  .closing-visual {
    display: none;
  }

  /* 页脚：分组纵向排 */
  .foot .shell {
    padding-top: 52px;
    padding-bottom: 30px;
  }
  .foot-cols {
    flex-direction: column;
    gap: 30px;
  }
  .foot-brand {
    min-width: 0;
  }
  .foot-tag {
    margin-top: 12px;
    font-size: 13px;
  }
  .foot-wx {
    margin-top: 20px;
  }
  .foot-links {
    margin-top: 14px;
    gap: 10px;
    font-size: 14px;
  }
  .foot-legal {
    margin-top: 44px;
    padding-top: 22px;
  }
  .foot-legal .foot-copy {
    display: block;
    margin-top: 4px;
    white-space: nowrap;
  }
}

/* ── 子页（/pricing、场景落地页）专用（2026-08-27 推广批）──────────────────────────
   子页没有 hero，导航一进来就得是白底态 —— 值与 .site-head.scrolled 逐字相同（home.js 的
   onScroll 只切 .scrolled，不碰 .solid），改一处记得同步另一处。 */
.site-head.solid {
  color: #16181c;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(28, 43, 64, 0.08);
}
.site-head.solid .hero-links {
  color: #5c6068;
}
.site-head.solid .hero-links .cur {
  color: #1c2b40;
}
.site-head.solid .nav-login {
  color: #1c2b40;
}
.site-head.solid .nav-logout,
.site-head.solid .nav-name {
  color: #5c6068;
}

/* 子页收尾带：没有拼贴，自己补底部留白 */
.closing.plain {
  padding-bottom: 110px;
}

@media (max-width: 899px) {
  .closing.plain {
    padding-bottom: 88px;
  }
}

/* ── 场景落地页 / 对比页（2026-08-27 推广批，由 build-scenes.mjs 生成）──────────────
   只写这些页独有的骨架；导航 / 三步 / 功能条目 / 案例卡 / FAQ / 收尾带全部复用上面的规则。 */
.page-head {
  padding: 124px 0 56px;
  text-align: center;
}
.page-head .h2 {
  letter-spacing: 0.06em;
}
.page-head .lead {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: #54677c;
}
.page-head .cta-row {
  margin-top: 30px;
}
.h3-sec {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.scene-how {
  background: var(--gray-band);
  padding: 84px 0;
}
.scene-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.scene-how .steps {
  margin-top: 26px;
}
.scene-how .feats {
  margin-top: 16px;
}
.scene-cases {
  background: #fff;
  padding: 84px 0 96px;
}
.scene-cases .h2 {
  text-align: center;
  letter-spacing: 0.06em;
}
.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: 36px;
  margin-top: 44px;
}
.case-pair .case-cap-p {
  margin-top: 12px;
  text-align: center;
}
.shot-row {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 44px;
}
.scene-shot {
  margin: 0;
  max-width: 400px;
  text-align: center;
}
.scene-shot img {
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(20, 25, 32, 0.04),
    0 18px 40px rgba(20, 25, 32, 0.12);
}
.scene-shot figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: #6b7280;
}
.compare {
  background: #fff;
  padding: 24px 0 96px;
}
.table-scroll {
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
  border-bottom: 1px solid #e7e9ed;
  color: #5c6b7a;
}
.compare-table th {
  color: var(--ink);
  font-weight: 600;
  background: var(--gray-band);
}
.compare-table td:first-child {
  width: 130px;
  color: var(--ink);
  font-weight: 600;
}
.compare-table td.us {
  color: #1c2b40;
}
.compare .math-h {
  margin-top: 56px;
  text-align: center;
}
.compare .math-p {
  max-width: 760px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.9;
  color: #54677c;
}
.compare .cta-row {
  gap: 16px;
  margin-top: 36px;
}
@media (max-width: 899px) {
  .page-head {
    padding: 96px 0 40px;
  }
  .page-head .lead {
    font-size: 15px;
  }
  .scene-how,
  .scene-cases {
    padding: 56px 0 64px;
  }
  .scene-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .case-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .shot-row {
    flex-direction: column;
    align-items: center;
  }
  .compare-table {
    font-size: 14px;
    min-width: 560px;
  }
  .compare-table th,
  .compare-table td {
    padding: 12px 10px;
  }
  .compare-table td:first-child {
    width: auto;
  }
}