/* ==========================================================================
   广告设计页专属样式 · ad-design.css
   --------------------------------------------------------------------------
   【命名与作用范围】—— 唯一真相源
     文件      ：ad-design.css               放在子主题根目录（与 style.css / cases.css
                                             / event.css / contact.css 同级）
     句柄      ：tianshun-ad-design          functions.php 1h 段入队
     入队方式  ：wp_enqueue_scripts / 优先级 25 / 依赖 array()
                 （原因同 1c-1g：generate-child-css 在本服务器注册晚于
                  wp_print_styles，声明依赖会被调度层静默跳过、永不输出 <link>）
     作用域根  ：#tsAdDesignMain             只染这个 id 容器内的元素
     类前缀    ：.ts-ad-*                    ★避开 style.css 里已有的 .ts-cases-*（案例中心）
                                             与 .ts-case*（首页 S7）三套命名，零冲突
     全站令牌  ：var(--ts-*) 引用（style.css :root 单一真相源，本文件零重声明；
                 字体族不在本文件重设，继承 style.css body 的 -apple-system 栈）
   --------------------------------------------------------------------------
   【设计基准：全部取自官网既有母题，不新造风格】
     · 色彩      墨蓝 #0B1F3A + 橙 #F26B21 双色系，rgba 三元组做光晕/阴影
     · 圆角      --ts-radius 8px 为全页统一点（含卡片，本轮不再用 12px 混排）
     · 眉标      药丸：navy 底白字 + 橙点，12px/700/字距 .16em
     · 节头      居中，max-width 700，H2 clamp(28,3.5vw,42)/800/-0.03em
     · 出血      width:100vw + 负 margin
     · 悬浮      0.4-0.5s cubic-bezier(.25,.8,.4,1) translateY(-6~8px)
   --------------------------------------------------------------------------
   【2026-09-16 全面重构要点】
     R1 交付物：4×3 均质卡 → 3 主卡 + 9 项双列紧凑清单（信息密度不变、首屏重量下降）
     R2 深色段：原「流程 / 确认单 / 同步」三段并作一个连续深色区，用分隔线分组；
                全页深色段由 3 处（Hero+数据条 / 流程 / CTA）收敛为节奏更稳的分布
     R3 计价区：栏宽权重翻转 —— 价格表升为左主栏（1.62fr），4 块说明降为右副栏（1fr）
     R4 案例：严格等高 Bento —— 上排 2 张 span 6 / 下排 3 张 span 4，行高由内容锁死
     R5 FAQ：20 条 → 4 个主题分组，组标题为静态 h3，组内折叠
     R6 排版：区块纵向内边距分三级 96 / 72 / 56；标题上间距 40、标题下间距 14；
                正文 15px / 行高 1.75；触控目标 ≥44px；移动端两级降级
   --------------------------------------------------------------------------
   【背景纪律】全页零灰色底（需求硬性要求）：
     浅色区一律 #FFFFFF；深色区一律墨蓝/橙色系渐变；区块之间用 1px 墨蓝系细线分隔，
     不使用 #F4F5F7 / #F8F9FA / #F9FAFB 等任何灰底令牌。
   --------------------------------------------------------------------------
   【两条硬纪律】
     1. 零 !important / 零内联 style / 零 emoji / 零外链静态资源 / 零脚本。
        （2026-09-16：案例区去深底时一并撤掉了打印块里最后一条 min-height:0!important ——
          卡片改「图在上 + 文字在下」后不再锁定 min-height，深色区整块与卡片对齐规则也随之取消，
          故本文件当前 !important 声明数为 0。）
     2. 组件规则一律带 #tsAdDesignMain 前缀（特异性 1-1-0 > 本文件重置 1-0-1）。
        唯一例外：body.page:has(#tsAdDesignMain) 与 html:has(#tsAdDesignMain)。
   --------------------------------------------------------------------------
   【组织】1 根与重置  2 页面级对齐  3 通用件  4 Hero+数据条  5 交付物
           6 设计流程  7 案例  8 计价与合规  9 常见问题  10 CTA
           11 响应式  12 动效与无障碍
   ========================================================================== */


/* ---------- 1. 根与作用域内重置 ---------- */
#tsAdDesignMain{
  width:100%;
  position:relative;
  color:var(--ts-body,#1F2937);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* —— 本页私有令牌：挂在容器上、不进 :root，零泄漏 —— */
  --ad-shadow:0 1px 2px rgba(11,31,58,.04),0 12px 26px -16px rgba(11,31,58,.18);
  --ad-shadow-hover:0 2px 4px rgba(11,31,58,.05),0 24px 48px -20px rgba(11,31,58,.24);
  --ad-ease:cubic-bezier(.25,.8,.4,1);
  --ad-line:var(--ts-line,#E5E7EB);
}
#tsAdDesignMain *,#tsAdDesignMain *::before,#tsAdDesignMain *::after{box-sizing:border-box;margin:0;padding:0}
#tsAdDesignMain ul,#tsAdDesignMain ol{list-style:none}
#tsAdDesignMain a{color:inherit;text-decoration:none}
#tsAdDesignMain img{max-width:100%;display:block}
#tsAdDesignMain :focus-visible{outline:3px solid rgba(var(--ts-accent-rgb),.5);outline-offset:2px}
html:has(#tsAdDesignMain){scroll-behavior:smooth}

/* ---------- 2. 页面级对齐（仅广告设计页，作用目标在本页容器之外，不加前缀） ----------
   做法同 contact.css / cases.css：解除 GP 的 40px 左右内边距，水平留白统一交给 --ts-gutter。
   特异性：body.page:has(#tsAdDesignMain) .inside-article = (0,3,1) > GP 的 (0,2,0)。 */
body.page:has(#tsAdDesignMain) .site-content,
body.page:has(#tsAdDesignMain) .content-area,
body.page:has(#tsAdDesignMain) .site-main,
body.page:has(#tsAdDesignMain) .inside-article,
body.page:has(#tsAdDesignMain) .entry-content{
  padding-left:0;
  padding-right:0;
  max-width:100%;
}

/* ---------- 3. 通用件：出血 / 版心 / 区块 / 眉标 / 节头 / 按钮 ---------- */
/* 出血宽度 = 视口宽 − 滚动条宽。
   --ts-sbw 由 functions.php 里的 12 行内联脚本写入 <html>（window.innerWidth −
   documentElement.clientWidth，桌面恒为 15px，移动端叠层滚动条为 0）。
   纯 CSS 拿不到这个值：100vw 永远含滚动条；@property 注册 <length> 时
   calc(100vw - 100%) 的百分比不合法会被判无效、回退成 0；不注册则自定义属性是纯
   token 替换，100% 到了这里会变成父级宽度，算出 160px 直接毁版式。所以只能 JS 测。
   裸 100vw 的后果：出血区比真实内容区宽 15px，居中后左右各溢出 7.5px。
   溢出本身被 html/body{overflow-x:clip} 吃掉看不出来，但会让出血区内的
   .ts-ad-container 比非出血区同款容器左移 7.5px —— 实测 1280 视口：
   出血容器 left=-7.5，非出血 left=0，英雄区/数据条/CTA 的文案与下方各区块错开。
   var() 第二参数 0px 是 JS 未执行时的回退，等价于改版前行为，不会更差。 */
#tsAdDesignMain .ts-ad-bleed{
  width:calc(100vw - var(--ts-sbw, 0px));
  margin-left:calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
  margin-right:calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
#tsAdDesignMain .ts-ad-container{
  max-width:var(--ts-container,1280px);
  margin:0 auto;
  padding:0 var(--ts-gutter,24px);
}
/* 区块纵向节奏分三级：主节 96 / 次节 72 / 收束节 56。
   区块之间无 margin —— 视觉空白 = 相邻两块 padding 之和，改疏密只动这里。 */
#tsAdDesignMain .ts-ad-section{
  padding:clamp(56px,7.0vw,96px) 0;
  background:#FFFFFF;
  border-top:1px solid var(--ad-line);
}
#tsAdDesignMain .ts-ad-section--lead{padding-top:clamp(48px,6.0vw,80px)}
/* 流程区（2026-09-16 二次定案：老周要求去掉极浅墨蓝底，改纯白）。
   去底后这里与上方「交付物」白区同色，不能再靠底色分块，改用三处结构手段接住：
     1) 区块上缘保留 --ad-line 细线 —— 与上下白区之间留一道可辨分界，成本最低；
     2) 四张步骤卡由「白卡 + 细边框」改为「浅墨蓝微底 + 无阴影」——
        白卡放白底上会只剩一圈边线，卡片体积感消失；
     3) 去掉卡外的虚线连接线（白底上它比卡片本身更抢眼，且四卡各自已有 01–04 圆号，
        序号本身就承担了「顺序」的表达，虚线是重复叙事）。
   保留唯一的极浅墨蓝倾向只落在卡片内（.025 叠白），仍守本页零灰底纪律。 */
#tsAdDesignMain .ts-ad-section--light{
  padding:clamp(56px,7.0vw,96px) 0;
  background:#FFFFFF;
  border-top:1px solid var(--ad-line);
  color:var(--ts-body,#374151);
}

/* 眉标：浅底 = navy 药丸白字橙点；深底 = 白描底变体 */
#tsAdDesignMain .ts-ad-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 18px;
  border-radius:999px;
  background:var(--ts-primary,#0B1F3A);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#tsAdDesignMain .ts-ad-eyebrow::before{
  content:"";
  flex-shrink:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-eyebrow--ondark{background:rgba(255,255,255,.10)}
/* 浅色流程区里的眉标：回落到标准 navy 药丸（与其它浅底区块一致） */
#tsAdDesignMain .ts-ad-eyebrow--onlight{background:var(--ts-primary,#0B1F3A)}

/* 节头：眉标 → H2 间距 16，H2 → 描述 14（标题与正文收紧，标题与上一元素拉开） */
#tsAdDesignMain .ts-ad-head{
  max-width:700px;
  margin:0 auto clamp(28px,3.4vw,40px);
  text-align:center;
}
#tsAdDesignMain .ts-ad-head h2{
  margin-top:16px;
  font-size:clamp(28px,3.5vw,42px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.22;
  color:var(--ts-primary,#0B1F3A);
  text-wrap:balance;
}
#tsAdDesignMain .ts-ad-head__desc{
  margin-top:14px;
  font-size:clamp(15px,1.4vw,16.5px);
  line-height:1.75;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}
/* 流程区节头描述只有一句 43 字，700px 容器在字号到 clamp 上限（16.5px）时会折出
   一个两三字的尾行，看着像没对齐。这一条把节头容器放宽到 820px，让整句一行走完。
   注意必须改父容器 .ts-ad-head —— 子元素单独设 max-width 突破不了父级的 700px。
   用 :has() 只命中含 --wide 的这一个节头，其余节头（长段落）仍守 700px 收窄行长。 */
#tsAdDesignMain .ts-ad-head:has(.ts-ad-head__desc--wide){max-width:820px}
#tsAdDesignMain .ts-ad-head__desc--wide{text-wrap:pretty}
/* 深底节头 → 浅底节头（跟随 .ts-ad-section--light） */
#tsAdDesignMain .ts-ad-section--light .ts-ad-head h2{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-section--light .ts-ad-head__desc{color:var(--ts-text-soft,#4B5563)}

/* 正文内链 */
#tsAdDesignMain .ts-ad-link{
  color:var(--ts-accent-text,#C2410C);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(var(--ts-accent-rgb),.45);
  transition:text-decoration-color .2s ease;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-link:hover{text-decoration-color:var(--ts-accent-text,#C2410C)}
}

/* 按钮：触控目标统一 ≥44px */
#tsAdDesignMain .ts-ad-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:14px 30px;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  background:var(--ts-accent,#F26B21);
  color:var(--ts-primary,#0B1F3A);
  border:2px solid var(--ts-accent,#F26B21);
  border-radius:var(--ts-radius,8px);
  box-shadow:0 8px 24px rgba(var(--ts-accent-rgb),.3);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-btn:hover{
    background:var(--ts-accent-dark,#E0631A);
    border-color:var(--ts-accent-dark,#E0631A);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(var(--ts-accent-rgb),.4);
  }
}
#tsAdDesignMain .ts-ad-btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
  box-shadow:none;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-btn--ghost:hover{
    background:#fff;
    color:var(--ts-primary,#0B1F3A);
    border-color:#fff;
    box-shadow:0 12px 28px rgba(11,31,58,.28);
  }
}
#tsAdDesignMain .ts-ad-btn--outline{
  background:transparent;
  color:var(--ts-primary,#0B1F3A);
  border-color:rgba(var(--ts-primary-rgb),.22);
  box-shadow:none;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-btn--outline:hover{
    background:var(--ts-primary,#0B1F3A);
    border-color:var(--ts-primary,#0B1F3A);
    color:#fff;
  }
}
#tsAdDesignMain .ts-ad-btn--sm{min-height:44px;padding:11px 22px;font-size:14.5px}


/* ---------- 4. Hero / 数据条 + 信任保证（合并深色带） ---------- */
#tsAdDesignMain .ts-ad-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  padding:clamp(40px,4.8vw,68px) 0 clamp(34px,4.0vw,54px);
  background:
    radial-gradient(circle at 88% 8%,rgba(var(--ts-accent-rgb),.30),transparent 46%),
    radial-gradient(circle at 4% 96%,rgba(var(--ts-accent-rgb),.14),transparent 44%),
    linear-gradient(155deg,#0E2A4F 0%,var(--ts-primary,#0B1F3A) 56%,#091832 100%);
}
/* 网格纹理：纯 CSS 点阵层，不引入外部图片 */
#tsAdDesignMain .ts-ad-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 82% 72% at 42% 30%,#000 26%,transparent 82%);
          mask-image:radial-gradient(ellipse 82% 72% at 42% 30%,#000 26%,transparent 82%);
}
/* 橙色光斑 */
#tsAdDesignMain .ts-ad-hero::after{
  content:"";
  position:absolute;
  top:-140px;
  right:-120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ts-accent-rgb),.42) 0%,transparent 70%);
  filter:blur(46px);
  pointer-events:none;
  z-index:0;
  animation:tsAdGlow 14s ease-in-out infinite alternate;
}
@keyframes tsAdGlow{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-34px,44px) scale(1.14)}
}
#tsAdDesignMain .ts-ad-hero__inner{position:relative;z-index:1}

/* 面包屑 */
#tsAdDesignMain .ts-ad-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  font-size:13px;
  color:rgba(255,255,255,.62);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-crumb a:hover{color:#fff}
}
#tsAdDesignMain .ts-ad-crumb__sep{color:rgba(255,255,255,.28)}
/* 面包屑链接触控区 26×22 → 26×44：padding 撑开、等量负 margin 抵消，
   视觉位置不变（父级 .ts-ad-crumb 是 flex + gap:8px，纵向 gap 不受影响）。
   只补纵向：横向再加会把 flex 的列间距吃掉，导致相邻项视觉重叠。
   宽度仍为文字宽（26px），对内联文字链接属固有形态，WCAG 2.5.8 的 24×24 已满足。 */
#tsAdDesignMain .ts-ad-crumb a{
  padding:11px 0;
  margin:-11px 0;
}

#tsAdDesignMain .ts-ad-hero__title{
  margin-top:16px;
  max-width:22em;
  /* 下限 31px → 27px：≤390 视口下 em 加了 nowrap 后整句放不进两行会被挤成三行，
     标题从 105px 高变 61px，多出的 44px 把英雄区下方 4 条 bullet 整体抬高一截。
     实测 m390(844 高)：bullet4 底边 799 → 790，让到拨号条顶边 792 之上，四条全部可见；
     m360(780 高)：由「四条全在条后」改善为「前两条可见」。
     只在 <756px 生效（4.1vw ≥31px 之后取值不变），768 及以上、桌面端字号完全不受影响。 */
  font-size:clamp(27px,4.1vw,50px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.13;
  color:#fff;
  text-wrap:balance;
}
#tsAdDesignMain .ts-ad-hero__title em{
  font-style:normal;
  background:linear-gradient(120deg,var(--ts-accent,#F26B21) 0%,#FFA868 58%,var(--ts-accent,#F26B21) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;        /* 窄屏（≤390）下禁止 CJK 在高亮短语内部逐字换行 */
}
#tsAdDesignMain .ts-ad-hero__lead{
  max-width:760px;
  margin-top:16px;
  font-size:clamp(15px,1.6vw,17.5px);
  line-height:1.8;
  color:rgba(255,255,255,.82);
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:28px;
}
#tsAdDesignMain .ts-ad-hero__note{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:22px;
  font-size:13px;
  color:rgba(255,255,255,.58);
}
#tsAdDesignMain .ts-ad-hero__note span{display:inline-flex;align-items:center;gap:7px}
#tsAdDesignMain .ts-ad-hero__note span::before{
  content:"";
  flex-shrink:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
  opacity:.9;
}

/* 数据条 + 信任保证：同一深色带内，上数据 / 下保证，中间细线分隔。
   这样把原「深色数据条 + 浅色信任条」两段合成一段，少一次背景切换。 */
#tsAdDesignMain .ts-ad-statsbar{
  background:
    linear-gradient(90deg,rgba(var(--ts-accent-rgb),.10) 0%,transparent 30%),
    #091832;
  border-top:1px solid rgba(255,255,255,.10);
  padding:clamp(26px,3.0vw,36px) 0 clamp(28px,3.2vw,38px);
}
#tsAdDesignMain .ts-ad-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
#tsAdDesignMain .ts-ad-stat{
  position:relative;
  padding-left:20px;
}
#tsAdDesignMain .ts-ad-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--ts-accent,#F26B21),rgba(var(--ts-accent-rgb),.15));
}
#tsAdDesignMain .ts-ad-stat b{
  display:block;
  font-size:clamp(26px,2.8vw,36px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
#tsAdDesignMain .ts-ad-stat b em{
  font-style:normal;
  margin-left:2px;
  font-size:.5em;
  font-weight:700;
  color:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-stat span{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.65;
  color:rgba(255,255,255,.66);
}

/* 保证条（原白底信任条的深底版） */
#tsAdDesignMain .ts-ad-facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px 26px;
  margin-top:clamp(24px,2.8vw,32px);
  padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.10);
}
#tsAdDesignMain .ts-ad-fact{position:relative;padding-top:14px}
#tsAdDesignMain .ts-ad-fact::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:22px;
  height:2px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-fact b{display:block;font-size:14.5px;font-weight:700;color:#fff}
#tsAdDesignMain .ts-ad-fact span{display:block;margin-top:5px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.64)}


/* ---------- 5. 交付物（3 主卡 + 9 项紧凑清单） ---------- */
#tsAdDesignMain .ts-ad-deliverables{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
/* 主卡：整卡居中版式（2026-09-16 按老周要求）。
   图标、标题、描述、交付项药丸全部走居中对齐轴；原「图标左 + 序号右」的
   space-between 两端布局随之取消 —— 标题居中后图标行若仍两端分布，
   会与标题形成两条互相打架的轴线。序号一并去掉：三张主卡是并列推荐，
   本无先后，编号在此不承载信息，居中版式下也无处安放。 */
#tsAdDesignMain .ts-ad-deliv{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  padding:clamp(24px,2.3vw,30px);
  background:#FFFFFF;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  box-shadow:var(--ad-shadow);
  text-align:center;
  transition:transform .35s var(--ad-ease),box-shadow .35s var(--ad-ease),border-color .35s var(--ad-ease);
}
/* 主卡左侧竖条：与后续清单项的左边线呼应，形成同一条视觉轴 */
#tsAdDesignMain .ts-ad-deliv::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--ts-accent,#F26B21),rgba(var(--ts-accent-rgb),.14));
  transform:scaleY(.001);
  transform-origin:top;
  transition:transform .45s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-deliv:hover{
    transform:translateY(-6px);
    box-shadow:var(--ad-shadow-hover);
    border-color:rgba(var(--ts-accent-rgb),.30);
  }
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-deliv:hover::before{transform:scaleY(1)}
}
#tsAdDesignMain .ts-ad-deliv__icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:var(--ts-radius,8px);
  color:var(--ts-accent,#F26B21);
  background:linear-gradient(135deg,rgba(var(--ts-accent-rgb),.14),rgba(var(--ts-accent-rgb),.04));
}
#tsAdDesignMain .ts-ad-deliv h3{
  margin-top:16px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-deliv__desc{
  margin-top:12px;
  font-size:15px;
  line-height:1.75;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-deliv__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px dashed var(--ad-line);
}
#tsAdDesignMain .ts-ad-deliv__list li{
  padding:5px 11px;
  border:1px solid rgba(var(--ts-primary-rgb),.09);
  border-radius:6px;
  background:rgba(var(--ts-primary-rgb),.028);
  font-size:12.5px;
  line-height:1.55;
  color:var(--ts-text-soft,#4B5563);
}

/* —— 其余九项：双列紧凑清单 —— */
#tsAdDesignMain .ts-ad-delivmini{
  margin-top:clamp(28px,3.2vw,40px);
  padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid var(--ad-line);
}
#tsAdDesignMain .ts-ad-delivmini__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-delivmini__head::before{
  content:"";
  flex:none;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-delivmini__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 40px;
}
#tsAdDesignMain .ts-ad-delivmini__list > li{
  position:relative;
  padding:18px 0 18px 16px;
  border-bottom:1px solid var(--ad-line);
  border-left:2px solid transparent;
  transition:border-left-color .3s var(--ad-ease),background-color .3s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-delivmini__list > li:hover{
    border-left-color:var(--ts-accent,#F26B21);
    background:rgba(var(--ts-accent-rgb),.028);
  }
}
#tsAdDesignMain .ts-ad-delivmini__list b{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:16px;
  font-weight:800;
  line-height:1.4;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-delivmini__list b em{
  font-style:normal;
  flex:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(var(--ts-accent-rgb),.85);
  font-variant-numeric:tabular-nums;
}
#tsAdDesignMain .ts-ad-delivmini__list b span{font-size:16px}
#tsAdDesignMain .ts-ad-delivmini__list p{
  margin-top:7px;
  font-size:14px;
  line-height:1.72;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}

#tsAdDesignMain .ts-ad-deliverables__note{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;            /* 窄屏下项目换行，避免被 flex 挤压成单字符竖排 */
  gap:10px;
  width:fit-content;
  max-width:100%;
  margin:28px auto 0;
  padding:10px 22px;
  border:1px solid rgba(var(--ts-accent-rgb),.18);
  border-radius:999px;
  background:rgba(var(--ts-accent-rgb),.05);
  font-size:13.5px;
  line-height:1.7;
  color:var(--ts-text-soft,#4B5563);
}
/* 上述提示条里的链接：禁止被挤压成单字符宽度，文本保持完整不被逐字换行 */
#tsAdDesignMain .ts-ad-deliverables__note .ts-ad-link{
  flex:0 0 auto;
  white-space:nowrap;
  /* 触控区 56×23 → 56×45：padding 撑开、等量负 margin 抵消，
     视觉位置与所占空间完全不变，只放大可点区域（父级 align-items:center 下上下对称外扩）。 */
  padding:11px 0;
  margin:-11px 0;
}
#tsAdDesignMain .ts-ad-deliverables__note::before{
  content:"";
  flex-shrink:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
  box-shadow:0 0 0 3px rgba(var(--ts-accent-rgb),.16);
}


/* ---------- 6. 设计流程（4 步，纯白区块，内含确认单与同步四则） ---------- */
#tsAdDesignMain .ts-ad-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
/* 卡外虚线连接线已删除（2026-09-16 去底色时同步移除）。
   原因：白底上这条 rgba(墨蓝,.22) 的虚线横贯四卡区域，比卡片自身边框更抢眼；
   而圆号 01–04 本身已表达顺序，虚线属重复叙事。删掉后四卡靠 24px 间距成组，
   视线自然从左到右，反而更干净。 */
/* 步骤卡：整卡居中版式（2026-09-16 按老周要求，与三张主卡统一）。
   去底色后由「白卡 + 阴影」改为「极浅墨蓝微底 + 无阴影」：
   白卡放白底上只剩一圈 1px 边线，卡片体积感会全部消失；
   换成 .025 墨蓝微底后，卡片与白底之间恢复可辨的前后关系，
   同时不再需要阴影（阴影在白底白卡上本就是冗余的重量）。 */
#tsAdDesignMain .ts-ad-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(24px,2.4vw,30px);
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  background:rgba(var(--ts-primary-rgb),.025);
  text-align:center;
  transition:background-color .35s var(--ad-ease),border-color .35s var(--ad-ease),transform .35s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-step:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--ts-accent-rgb),.42);
    background:#FFFFFF;
  }
}
#tsAdDesignMain .ts-ad-step__num{
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  margin-bottom:18px;
  border-radius:50%;
  border:2px solid var(--ts-accent,#F26B21);
  background:#FFFFFF;
  color:var(--ts-accent-text,#C2410C);
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 8px rgba(var(--ts-accent-rgb),.07);
}
#tsAdDesignMain .ts-ad-step h3{
  font-size:18px;
  font-weight:800;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-step p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-step__out{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  padding:6px 13px;
  border-radius:999px;
  background:rgba(var(--ts-accent-rgb),.10);
  font-size:12px;
  font-weight:700;
  color:var(--ts-accent-text,#C2410C);
}

/* 区块内的分组块：上细线分隔。白底区块上去掉底色后，这条线是唯一的分块手段，
   因此保留并略提对比（.22 墨蓝 → 比 --ad-line 更明确），避免与区块自身
   border-top 读成同一条线。 */
#tsAdDesignMain .ts-ad-block{
  margin-top:clamp(38px,4.2vw,54px);
  padding-top:clamp(32px,3.6vw,44px);
  border-top:1px solid rgba(var(--ts-primary-rgb),.14);
}
/* 确认单区块内三行文本各自居中（2026-09-16 老周要求）。
   注意 .ts-ad-minihead / .ts-ad-confirm__lead / __foot 这三个类在计价区也在用，
   计价区那两处保持左对齐 —— 所以这里必须用 .ts-ad-block 收窄作用域
   （全页只有确认单这一个分组块包在 .ts-ad-block 里），不能改公共类。
   下方双列清单本身居中后左边缘会随字数浮动，故只居中文本行，清单仍走左对齐。 */
#tsAdDesignMain .ts-ad-block > .ts-ad-minihead,
#tsAdDesignMain .ts-ad-block > .ts-ad-confirm__lead,
#tsAdDesignMain .ts-ad-block > .ts-ad-confirm__foot{
  text-align:center;
}
/* lead 与 foot 居中后断句不再贴边，各自收窄行长避免一行拉得过长。
   2026-09-16 二次校正（老周：脚注要一行）：
   · foot 全文 66 字、字号 14px，实际需约 924px —— 原 900px 恰好差 24px，
     会把「独核算。」三个字挤到第二行。版心可用 1232px，单行放得下，
     故放宽到 1000px（留 76px 余量吸收粗体与字体渲染差异）。
   · lead 全文 100 字、字号 15px，实际需约 1470px，超出版心 → 无论如何都会两行，
     保持 900px 让两行长度接近，不做无意义的放宽。 */
#tsAdDesignMain .ts-ad-block > .ts-ad-confirm__lead{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-block > .ts-ad-confirm__foot{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-minihead{
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-minihead--onlight{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-minihead--center{
  margin-top:clamp(38px,4.2vw,54px);
  padding-top:clamp(30px,3.4vw,42px);
  border-top:1px solid var(--ad-line);
  text-align:center;
}
/* 白区内的 minihead：自带分隔线（深色区版本由 .ts-ad-block 提供分隔） */
#tsAdDesignMain .ts-ad-panel--side .ts-ad-minihead{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--ad-line);
  font-size:15.5px;
}

/* 同步四则：带图标的自包含卡
   2026-09-16 两次调整：
   ① 从「纯文字平铺 + 橙条白底」改为「左图标 + 右文字横排卡」，加四枚线性图标做识别锚点；
   ② 本页区块去底色后，白卡在白底上只剩边线，且会与上方步骤卡的白卡撞成同一种块。
      改为「无底色 + 上边线」的分栏式：四条按 2×2 排，每条靠一道上边线起手，
      不画外框、不用阴影 —— 与步骤卡（有框有底）在结构上彻底分开，
      也和确认单（双列序号 + 下边线）区分开：三者分别是「框卡 / 起线栏 / 序号行」。 */
#tsAdDesignMain .ts-ad-sync{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,2.6vw,34px);
  margin-top:clamp(30px,3.4vw,44px);
}
#tsAdDesignMain .ts-ad-sync__item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:clamp(20px,2.2vw,26px) 0 0;
  border-top:2px solid rgba(var(--ts-primary-rgb),.12);
  transition:border-color .35s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-sync__item:hover{
    border-top-color:var(--ts-accent,#F26B21);
  }
}
#tsAdDesignMain .ts-ad-sync__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:var(--ts-radius,8px);
  color:var(--ts-accent,#F26B21);
  background:linear-gradient(135deg,rgba(var(--ts-accent-rgb),.14),rgba(var(--ts-accent-rgb),.04));
}
#tsAdDesignMain .ts-ad-sync__text{flex:1;min-width:0}
#tsAdDesignMain .ts-ad-sync__text b{
  display:block;
  font-size:15.5px;
  font-weight:700;
  line-height:1.45;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-sync__text span{
  display:block;
  margin-top:7px;
  font-size:13.5px;
  line-height:1.72;
  color:var(--ts-text-soft,#4B5563);
}


/* ---------- 7. 案例展示（白底卡片栅格） ---------- */
/* 2026-09-16 第三次定案：区块由深底改纯白，卡片由「图铺满 + 深遮罩 + 白字压底」
   改「图在上 + 文字在下」的浅色卡。改动理由（据实拍截图判断）：
   · 深底 + 六张深色遮罩卡，整块读作一大片深蓝，区块与卡片之间没有层次；
   · 原 shade 层把实拍图均匀压暗 34%，案例图自身的色彩与细节被吃掉 ——
     对一个「看案例」的区块，这是本末倒置；
   · 原版描述白字 13.5px 压在深底上偏小，长描述读起来吃力。
   改后：图片按原始色彩完整呈现（不再有整幅压暗层），文字移到白底上，
   深字浅底的长文本阅读效率更高；整块不再有深色底面，深色只留在图片自身。
   网格：由原「2 张宽 + 3 张窄 + 1 张落单」的 12 栏 bento 改为规整两列。
   原版 2 张 span6 + 4 张 span4 在 12 栏里必然剩一张单独落行、右侧空出 2/3 ——
   实拍截图里第 6 张「门头字字号控制」正是这样悬在末行，是原设计的版式缺陷。
   两列均分后 6 张成 3 行 2 列，全页无落单卡；行内由 grid stretch 自然等高。
   图片比例统一 16/10，避免相邻行出现两种图片高度。 */
#tsAdDesignMain .ts-ad-works{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

#tsAdDesignMain .ts-ad-work{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  background:#FFFFFF;
  box-shadow:var(--ad-shadow);
  transition:transform .45s var(--ad-ease),box-shadow .45s var(--ad-ease),border-color .45s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-work:hover{
    transform:translateY(-6px);
    border-color:rgba(var(--ts-accent-rgb),.45);
    box-shadow:var(--ad-shadow-hover);
  }
}

/* 图片区：底色用墨蓝 4% 而非灰，图片未加载完时不出现灰块（守零灰底纪律） */
#tsAdDesignMain .ts-ad-work__media{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  background:rgba(var(--ts-primary-rgb),.04);
}
#tsAdDesignMain .ts-ad-work__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transition:transform 1s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-work:hover .ts-ad-work__img{transform:scale(1.045)}
}

/* 分类角标：压图片左下角，墨蓝 82% 微透底 + 白字 + 背景模糊。
   从橙底改为深底，原因有二：六张图上重复出现橙胶囊会盖过图片本身；
   橙色要留给悬停反馈（角标区若也是橙，悬停时橙对橙就失去信号）。
   82% 不透明度是为兜住浅色图 —— 角标可能压在接近白色的画面上。 */
#tsAdDesignMain .ts-ad-work__tag{
  position:absolute;
  left:14px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(var(--ts-primary-rgb),.82);
  color:#fff;
  /* 11px 在手机端低于 12px 可读下限（实测 8 种视口全部命中），提到 12px；
     同步把左右内边距收到 12px，避免角标比原来明显变宽压到案例图。 */
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
}
/* 进入箭头：白底圆 + 墨蓝箭头（深底版是深底圆 + 白箭头，白底上必须反转）。
   卡片整体已是链接，此圆为装饰，故 40px 不受 44px 触控目标约束。 */
#tsAdDesignMain .ts-ad-work__go{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(var(--ts-primary-rgb),.10);
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(var(--ts-primary-rgb),.14);
  transition:background-color .3s var(--ad-ease),border-color .3s var(--ad-ease),transform .3s var(--ad-ease);
}
#tsAdDesignMain .ts-ad-work__go::before{
  content:"";
  width:7px;
  height:7px;
  margin-left:-2px;
  border-top:2px solid var(--ts-primary,#0B1F3A);
  border-right:2px solid var(--ts-primary,#0B1F3A);
  transform:rotate(45deg);
  transition:border-color .3s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-work:hover .ts-ad-work__go{
    background:var(--ts-accent,#F26B21);
    border-color:var(--ts-accent,#F26B21);
    transform:translateX(3px);
  }
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-work:hover .ts-ad-work__go::before{border-color:#fff}
}

/* 文字区：flex:1 撑满剩余高度，meta 用 margin-top:auto 贴底，
   使同行卡片（grid stretch 等高）的文字基线彼此对齐。
   2026-09-22 客户要求：标题 / 描述 / meta 三块各自水平居中 ——
   text-align:center 管块内文字；desc 受 max-width:46ch 限制，须补
   margin-inline:auto 让块本身也居中；meta 是 inline-flex，
   text-align 对其主轴无效，须用 justify-content:center。 */
#tsAdDesignMain .ts-ad-work__body{
  display:flex;
  flex:1;
  flex-direction:column;
  text-align:center;
  padding:18px 20px 20px;
}
#tsAdDesignMain .ts-ad-work__title{
  font-size:clamp(16px,1.5vw,18px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.4;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-work__desc{
  margin-top:7px;
  margin-inline:auto;
  max-width:46ch;
  font-size:13.5px;
  line-height:1.68;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-work__meta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:auto;
  padding-top:13px;
  font-size:12.5px;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-work__meta::before{
  content:"";
  flex-shrink:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-works__more{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:clamp(30px,3.4vw,42px);
}

/* 案例区两条说明：并成一组，去掉原来的负上边距（避免与节头描述挤压） */
#tsAdDesignMain .ts-ad-worknotes{
  display:grid;
  gap:12px;
  margin:0 0 clamp(26px,3.0vw,36px);
}
#tsAdDesignMain .ts-ad-works__note{
  padding:14px 18px;
  border-left:3px solid var(--ts-accent,#F26B21);
  border-radius:0 var(--ts-radius,8px) var(--ts-radius,8px) 0;
  background:rgba(var(--ts-accent-rgb),.05);
  font-size:14px;
  line-height:1.75;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-works__note strong{color:var(--ts-body,#374151)}
#tsAdDesignMain .ts-ad-works__note--alt{
  border-left-color:var(--ts-primary,#0B1F3A);
  background:rgba(11,31,58,.03);
}
#tsAdDesignMain .ts-ad-works__note--alt strong{color:var(--ts-primary,#0B1F3A)}


/* ---------- 8. 计价口径与合规提示（左主栏价格表 · 右副栏说明） ---------- */
#tsAdDesignMain .ts-ad-cols{
  display:grid;
  grid-template-columns:1.62fr 1fr;
  gap:clamp(24px,2.8vw,38px);
  align-items:start;
}
#tsAdDesignMain .ts-ad-panel{
  padding:clamp(24px,2.5vw,34px);
  background:#FFFFFF;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  box-shadow:var(--ad-shadow);
}
#tsAdDesignMain .ts-ad-panel--side{
  background:linear-gradient(170deg,rgba(var(--ts-primary-rgb),.022),rgba(var(--ts-accent-rgb),.022));
}
/* 左主栏（价格表）：白底、无内衬渐变，与右副栏的极浅底形成主次区分。
   该钩子只做显式声明，实际版式由 .ts-ad-panel 与 .ts-ad-price 承担。 */
#tsAdDesignMain .ts-ad-panel--price{background:#FFFFFF}
#tsAdDesignMain .ts-ad-panel__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-panel__title::before{
  content:"";
  flex-shrink:0;
  width:4px;
  height:20px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--ts-accent,#F26B21),rgba(var(--ts-accent-rgb),.2));
}
#tsAdDesignMain .ts-ad-panel__sub{
  margin-top:8px;
  font-size:14px;
  line-height:1.72;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-panel--side .ts-ad-panel__sub{font-size:13.5px;line-height:1.7}

/* 参考价表：左主栏，行高加大、数字用等宽数字、三项主推项加浅橙底 */
#tsAdDesignMain .ts-ad-price{
  margin-top:20px;
  border-top:1px solid var(--ad-line);
}
#tsAdDesignMain .ts-ad-price__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:15px 2px;
  border-bottom:1px solid var(--ad-line);
  transition:background-color .25s var(--ad-ease),padding-left .25s var(--ad-ease);
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-price__row:hover{background:rgba(var(--ts-primary-rgb),.025);padding-left:8px}
}
#tsAdDesignMain .ts-ad-price__row--hi{
  background:rgba(var(--ts-accent-rgb),.045);
  box-shadow:inset 3px 0 0 rgba(var(--ts-accent-rgb),.55);
  padding-left:12px;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-price__row--hi:hover{background:rgba(var(--ts-accent-rgb),.075)}
}
#tsAdDesignMain .ts-ad-price__name{font-size:15.5px;font-weight:700;color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-price__name span{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.6;color:var(--ts-muted,#6B7280)}
#tsAdDesignMain .ts-ad-price__val{
  flex:none;
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ts-accent-text,#C2410C);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#tsAdDesignMain .ts-ad-price__val em{
  font-style:normal;
  font-size:12.5px;
  font-weight:700;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-price__foot{
  margin-top:14px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-price__foot--hi{
  margin-top:12px;
  padding:14px 16px;
  border-left:3px solid var(--ts-accent,#F26B21);
  border-radius:0 var(--ts-radius,8px) var(--ts-radius,8px) 0;
  background:rgba(var(--ts-accent-rgb),.05);
  color:var(--ts-body,#374151);
}
#tsAdDesignMain .ts-ad-price__foot--hi strong{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-price__foot + .ts-ad-price__foot{margin-top:12px}

/* 右副栏：清单更细、更轻 */
#tsAdDesignMain .ts-ad-check{margin-top:16px}
#tsAdDesignMain .ts-ad-check li{
  position:relative;
  padding-left:26px;
  font-size:14px;
  line-height:1.75;
  color:var(--ts-text-soft,#4B5563);
}
#tsAdDesignMain .ts-ad-check li + li{margin-top:12px}
#tsAdDesignMain .ts-ad-check li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:14px;
  height:8px;
  border-left:2px solid var(--ts-accent,#F26B21);
  border-bottom:2px solid var(--ts-accent,#F26B21);
  transform:rotate(-45deg);
  border-radius:1px;
}

/* 引言与脚注：引言用于流程区确认单区块，脚注用于流程区与计价区。
   2026-09-16：原「我们做 / 不承接 / 可配合」三行已改为 .ts-ad-scope 卡片，
   随之删除了 ts-ad-confirm 的 li 规则组；__lead 与 __foot 仍在用，保留。 */
#tsAdDesignMain .ts-ad-confirm__lead{
  margin:14px 0 0;
  font-size:15px;
  line-height:1.78;
  color:var(--ts-text-soft,#4B5563);
}
#tsAdDesignMain .ts-ad-confirm__lead strong{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-confirm__foot{
  margin:16px 0 0;
  font-size:14px;
  line-height:1.78;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-confirm__foot strong{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-confirm__foot--light{color:var(--ts-muted,#6B7280);font-size:13.5px}
#tsAdDesignMain .ts-ad-confirm__foot--light strong{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-panel__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

/* 交付确认单：双列序号清单（2026-09-16 重做）
   改前是 5 条通栏「浅橙底 + 左橙竖条」，在浅色流程底上形成五道色带，
   且条目内容长短悬殊、通栏布局后右侧留大片空。重做要点：
   · 去掉通栏色块，改为「序号 + 标题 / 描述」两段式，靠序号建立节奏；
   · 双列网格，把 5 条压进 3 行，纵向长度缩短约 40%；
   · 序号与上方步骤卡的圆号同一套语言（白底 + 橙描边 + 深橙数字），
     只是尺寸按层级缩小（60px → 32px），形成「大步骤 / 小核对项」的从属关系；
   · 条目之间用极细横向分隔（只在下边框），而不是每条包一个盒子。 */
#tsAdDesignMain .ts-ad-checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,44px);
  margin:18px 0 0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
#tsAdDesignMain .ts-ad-checklist li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--ad-line);
}
/* 第 5 条跨两列，避免右下角空一格 */
#tsAdDesignMain .ts-ad-checklist li:last-child{grid-column:1 / -1}
#tsAdDesignMain .ts-ad-checklist__num{
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin-top:1px;
  border-radius:50%;
  border:1.5px solid rgba(var(--ts-accent-rgb),.55);
  background:#FFFFFF;
  color:var(--ts-accent-text,#C2410C);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
#tsAdDesignMain .ts-ad-checklist__body{flex:1;min-width:0}
#tsAdDesignMain .ts-ad-checklist__body b{
  display:block;
  font-size:14.5px;
  font-weight:700;
  line-height:1.5;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-checklist__body span{
  display:block;
  margin-top:3px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ts-text-soft,#4B5563);
}


/* 委托前话术清单（纯静态，复制即用；不依赖脚本） */
#tsAdDesignMain .ts-ad-brief{
  margin-top:0;
  padding:22px 24px;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  background:#FFFFFF;
  box-shadow:var(--ad-shadow);
}
/* 引言居中（2026-09-16 老周要求）。下方五句话清单仍保持左对齐 ——
   清单是扫读型内容，左对齐时序号能形成一条垂直轴线，居中后每条起止位置不定反而更难扫。 */
#tsAdDesignMain .ts-ad-brief__lead{
  margin:0 0 4px;
  font-size:14px;
  line-height:1.75;
  color:var(--ts-body,#374151);
  text-align:center;
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-brief__lead strong{color:var(--ts-primary,#0B1F3A)}
/* 五句话清单：改双列网格（2026-09-16）。原为单列 5 段竖排、每条上下贴在一起，
   在整宽容器里读起来像一列票据。双列后压成 3 行，横向铺开；
   第 5 条跨两列（与确认单 checklist 同一手法，保持奇数条不留空格）。 */
#tsAdDesignMain .ts-ad-brief__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,40px);
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
#tsAdDesignMain .ts-ad-brief__list li{
  padding:14px 0;
  border-bottom:1px solid var(--ad-line);
  font-size:13.5px;
  line-height:1.72;
  color:var(--ts-text-soft,#4B5563);
}
#tsAdDesignMain .ts-ad-brief__list li:last-child{grid-column:1 / -1}
#tsAdDesignMain .ts-ad-brief__list b{
  display:block;
  margin-bottom:3px;
  font-size:14px;
  font-weight:700;
  color:var(--ts-accent-text,#C2410C);
}
#tsAdDesignMain .ts-ad-brief__list span{display:block;text-wrap:pretty}
#tsAdDesignMain .ts-ad-brief__foot{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed var(--ad-line);
  font-size:13px;
  line-height:1.72;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-brief__foot strong{color:var(--ts-primary,#0B1F3A)}

/* 计价逻辑说明 */
#tsAdDesignMain .ts-ad-quote-logic{
  margin:16px 0 0;
  padding:16px 18px;
  border-left:3px solid var(--ts-accent,#F26B21);
  border-radius:0 var(--ts-radius,8px) var(--ts-radius,8px) 0;
  background:rgba(var(--ts-accent-rgb),.05);
  font-size:14px;
  line-height:1.75;
  color:var(--ts-body,#374151);
}
#tsAdDesignMain .ts-ad-quote-logic strong{color:var(--ts-primary,#0B1F3A)}


/* ---------- 8b. 计价区下段：主题块 + 横向网格 ---------- */
/* 2026-09-16 重构。原结构是「1.62fr 左栏价格表 + 1fr 右栏说明」，但右栏实际塞了约 2000 字、
   高度达到左栏的 2.5 倍 —— 实拍截图里左栏在区块 1/4 处就结束、下方大片空白，
   右栏则拖成一根几乎无分块的长文本柱（版权/源文件/改稿 + 业务边界 + 开工备料 + 五句话 + 工商信息
   全用相似的段落样式堆叠）。根因是我把主内容放进了副栏。
   现在把其中三个主题移出副栏，在下方按主题分块、块内横向铺开 —— 让内容占用宽度而非高度。
   分隔手段：块与块之间一道墨蓝细线 + 块标题，取代原来的连续段落堆叠。 */
#tsAdDesignMain .ts-ad-blocks{
  display:grid;
  gap:clamp(30px,3.4vw,44px);
  margin-top:clamp(38px,4.2vw,54px);
}
#tsAdDesignMain .ts-ad-tblock{
  padding-top:clamp(28px,3.0vw,40px);
  border-top:1px solid rgba(var(--ts-primary-rgb),.14);
}
/* 块标题与引言居中（2026-09-16 老周要求，两处 tblock 同改）。
   lead 原为 max-width:860px 左对齐，居中后须补 auto 左右边距 ——
   只写 text-align:center 而不给 auto，块仍是左边贴齐的窄栏，文字在栏内居中但整体偏左。 */
#tsAdDesignMain .ts-ad-tblock__head{
  font-size:clamp(17px,1.5vw,18.5px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.45;
  color:var(--ts-primary,#0B1F3A);
  text-align:center;
}
#tsAdDesignMain .ts-ad-tblock__lead{
  max-width:860px;
  margin:8px auto 0;
  font-size:14px;
  line-height:1.75;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
  text-align:center;
}

/* 业务边界三卡：卡顶一道 3px 色条承担分类信号 —— 橙「我们做」/ 中性灰「不承接」/
   淡墨蓝「可配合」。三件事本就只是「能 / 不能 / 部分能」，用色条比配三枚图标更省认知，
   也不必让读者先解读图标含义。 */
#tsAdDesignMain .ts-ad-scope{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
#tsAdDesignMain .ts-ad-scope__item{
  position:relative;
  overflow:hidden;
  padding:22px 24px 24px;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  background:#FFFFFF;
  box-shadow:var(--ad-shadow);
}
#tsAdDesignMain .ts-ad-scope__item::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  background:var(--ts-accent,#F26B21);
}
#tsAdDesignMain .ts-ad-scope__item--no::before{background:var(--ts-muted,#6B7280)}
#tsAdDesignMain .ts-ad-scope__item--ok::before{background:rgba(var(--ts-primary-rgb),.32)}
#tsAdDesignMain .ts-ad-scope__item b{
  display:block;
  font-size:15.5px;
  font-weight:800;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-scope__item p{
  margin-top:9px;
  font-size:13.8px;
  line-height:1.74;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}

/* 开工备料四项：四列横排。
   底色用墨蓝 2.5% 而非灰 —— 这四张是「待办」性质，比白卡略沉一档即可，
   不需要阴影，避免与同区的 scope 卡（带阴影）形成两种卡感。 */
#tsAdDesignMain .ts-ad-need{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
#tsAdDesignMain .ts-ad-need__item{
  padding:18px 20px;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  background:rgba(var(--ts-primary-rgb),.025);
}
#tsAdDesignMain .ts-ad-need__item b{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--ts-accent-text,#C2410C);
}
#tsAdDesignMain .ts-ad-need__item p{
  margin-top:8px;
  font-size:13.3px;
  line-height:1.72;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}

/* 工商与到店信息：区块收尾（2026-09-16 重新设计）。
   改前是一整段 87 字的小字居中，13px 下实测需 1346px、超版心 1232px，必然折出「咨询费"这一项。」
   这样只剩两三个字的尾行 —— 小字 + 居中 + 折行，三者叠加后末行像排版事故。
   改后：
   · 拆成 6 组独立信息，用一道细分隔竖线串联，整体一行居中（实测 1158px，余 74px）；
   · 逗号句号改为分隔线 —— 逗号是「一句话」的节奏，分隔线是「并列条目」的节奏，
     六组事实本就是并列的，改成条目后可以单独扫读，不必通读整句；
   · 信用代码用 tabular-nums 等宽数字 + 稍深字色，便于抄录与核对（这是这条里最该被抄下来的信息）；
   · 仍保持小字、灰字、居中 —— 备案登记信息属「备查」而非卖点，不该抢占区块收尾的注意力。
   窄屏由 flex-wrap 兜底，另在 ≤780px 改为竖排并去掉分隔线，避免行首出现孤立竖线。 */
#tsAdDesignMain .ts-ad-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 0;
  margin:0;
  padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--ad-line);
  font-size:13px;
  line-height:1.7;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-legal__item{display:inline-flex;align-items:center}
#tsAdDesignMain .ts-ad-legal__item + .ts-ad-legal__item::before{
  content:"";
  flex:none;
  width:1px;
  height:11px;
  margin:0 8px;
  background:rgba(var(--ts-primary-rgb),.18);
}
#tsAdDesignMain .ts-ad-legal b{
  font-weight:600;
  color:var(--ts-text-soft,#4B5563);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
/* 分隔竖线只在「确定能排成一行」的宽度显示。
   容器内容宽 = min(视口 − 48px, 1232px)，本行实测需 1158px → 视口需 ≥ 1206px。
   取 1240px 作阈值留 34px 余量：低于此宽度时隐藏分隔线、改用较大的词间距，
   让内容自然折成整齐的 2–3 行 —— 否则折行后行首会孤零零挂着一道竖线。 */
@media (max-width:1240px){
  #tsAdDesignMain .ts-ad-legal{gap:6px 20px}
  #tsAdDesignMain .ts-ad-legal__item + .ts-ad-legal__item::before{display:none}
}


/* ---------- 9. 常见问题（4 主题分组） ---------- */
#tsAdDesignMain .ts-ad-faq{
  max-width:920px;
  margin:0 auto;
}
#tsAdDesignMain .ts-ad-faqgroup + .ts-ad-faqgroup{margin-top:clamp(30px,3.4vw,42px)}
#tsAdDesignMain .ts-ad-faqgroup__title{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--ad-line);
}
#tsAdDesignMain .ts-ad-faqgroup__title span{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-faqgroup__title span::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
  vertical-align:2px;
}
#tsAdDesignMain .ts-ad-faqgroup__title em{
  font-style:normal;
  font-size:13px;
  font-weight:400;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-faq details{
  margin-bottom:10px;
  background:#FFFFFF;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  box-shadow:var(--ad-shadow);
  transition:border-color .25s var(--ad-ease),box-shadow .25s var(--ad-ease);
}
#tsAdDesignMain .ts-ad-faq details[open]{
  border-color:rgba(var(--ts-accent-rgb),.40);
  box-shadow:var(--ad-shadow-hover);
}
#tsAdDesignMain .ts-ad-faq summary{
  position:relative;
  display:flex;
  align-items:center;
  min-height:56px;
  padding:16px 58px 16px 24px;
  font-size:16px;
  font-weight:700;
  line-height:1.55;
  color:var(--ts-primary,#0B1F3A);
  cursor:pointer;
  list-style:none;
  user-select:none;
  border-radius:var(--ts-radius,8px);
}
#tsAdDesignMain .ts-ad-faq summary::-webkit-details-marker{display:none}
/* 折叠标记：用 SVG 描边箭头（比 CSS 边框三角在缩放与深色背景下更稳，
   也避免线上方框感） */
#tsAdDesignMain .ts-ad-faq summary::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:18px;
  height:18px;
  margin-top:-9px;
  background:
    linear-gradient(45deg,transparent 46%,var(--ts-muted,#6B7280) 46%,var(--ts-muted,#6B7280) 58%,transparent 58%),
    linear-gradient(-45deg,transparent 46%,var(--ts-muted,#6B7280) 46%,var(--ts-muted,#6B7280) 58%,transparent 58%);
  background-size:12px 12px,12px 12px;
  background-position:0 5px,0 -3px;
  background-repeat:no-repeat;
  transition:transform .25s var(--ad-ease),opacity .25s var(--ad-ease);
}
#tsAdDesignMain .ts-ad-faq details[open] summary::after{
  transform:rotate(180deg);
  opacity:.85;
}
#tsAdDesignMain .ts-ad-faq__body{
  padding:0 24px 20px;
  font-size:14.5px;
  line-height:1.82;
  color:var(--ts-text-soft,#4B5563);
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-faq__body p + p{margin-top:10px}
#tsAdDesignMain .ts-ad-faq__body strong{color:var(--ts-primary,#0B1F3A)}

/* 场景预设 */
#tsAdDesignMain .ts-ad-scene__lead{
  max-width:880px;
  margin:14px auto 0;
  font-size:15px;
  line-height:1.78;
  color:var(--ts-body,#374151);
  text-align:center;
}
#tsAdDesignMain .ts-ad-scene{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:32px;
}
/* 场景卡：整卡居中（2026-09-16 老周要求，与三张主卡 / 四张步骤卡同一处理）。
   改前只有卡片左对齐，而本节的 __lead 与 __foot 早已居中 —— 顶部居中、卡片左对齐，
   同一节里两套轴线，读起来就是「没对齐」。
   只居中 h4 也不行：tag 在左、正文在左、只有标题在中，三条轴线打架。
   故整卡统一居中，tag 的 align-self:flex-start 一并改为中心。 */
#tsAdDesignMain .ts-ad-scene__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px 24px 24px;
  background:#fff;
  border:1px solid var(--ad-line);
  border-radius:var(--ts-radius,8px);
  border-top:3px solid var(--ts-accent,#F26B21);
  text-align:center;
}
#tsAdDesignMain .ts-ad-scene__tag{
  display:inline-block;
  align-self:center;
  margin:0 0 12px;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(var(--ts-accent-rgb),.08);
  color:var(--ts-accent-text,#C2410C);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.6;
}
#tsAdDesignMain .ts-ad-scene__title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  line-height:1.42;
  color:var(--ts-primary,#0B1F3A);
}
#tsAdDesignMain .ts-ad-scene__desc{
  margin:0;
  font-size:14.5px;
  line-height:1.78;
  color:var(--ts-body,#374151);
}
#tsAdDesignMain .ts-ad-scene__desc strong{color:var(--ts-primary,#0B1F3A)}
#tsAdDesignMain .ts-ad-scene__hint{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed var(--ad-line);
  font-size:13.5px;
  line-height:1.7;
  color:var(--ts-muted,#6B7280);
}
#tsAdDesignMain .ts-ad-scene__foot{
  max-width:1020px;
  margin:26px auto 0;
  font-size:14.5px;
  line-height:1.78;
  color:var(--ts-body,#374151);
  text-align:center;
  text-wrap:pretty;
}
#tsAdDesignMain .ts-ad-scene__foot strong{color:var(--ts-primary,#0B1F3A)}


/* ---------- 10. CTA ---------- */
#tsAdDesignMain .ts-ad-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 50% -26%,rgba(var(--ts-accent-rgb),.30),transparent 56%),
    linear-gradient(160deg,var(--ts-primary,#0B1F3A) 0%,#0E2A4F 100%);
}
#tsAdDesignMain .ts-ad-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 50%,#000 28%,transparent 82%);
          mask-image:radial-gradient(ellipse 72% 62% at 50% 50%,#000 28%,transparent 82%);
}
#tsAdDesignMain .ts-ad-cta__inner{
  position:relative;
  z-index:1;
  padding:clamp(50px,6.2vw,88px) 0;
}
#tsAdDesignMain .ts-ad-cta__title{
  max-width:800px;
  margin:0 auto;
  font-size:clamp(26px,3.4vw,38px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
  color:#fff;
  text-wrap:balance;
}
/* 主题 style.css 的 `#content .entry-content h2{margin-left:0}`（特异性 1,1,1）
   会吃掉 auto 左边距使盒子贴左；用 1,2,0 的子选择器把居中拿回来。 */
#tsAdDesignMain .ts-ad-cta__inner > .ts-ad-cta__title{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#tsAdDesignMain .ts-ad-cta__inner > .ts-ad-eyebrow{margin-bottom:clamp(22px,2.4vw,30px)}
#tsAdDesignMain .ts-ad-cta__desc{
  max-width:680px;
  margin:16px auto 0;
  font-size:15.5px;
  line-height:1.78;
  color:rgba(255,255,255,.78);
}
#tsAdDesignMain .ts-ad-cta__btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:26px;
}
#tsAdDesignMain .ts-ad-cta__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
  margin-top:20px;
  font-size:13px;
  color:rgba(255,255,255,.6);
}
#tsAdDesignMain .ts-ad-cta__wechat{
  max-width:680px;
  margin:20px auto 0;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(255,255,255,.72);
}
#tsAdDesignMain .ts-ad-cta__wechat strong{color:#fff}
#tsAdDesignMain .ts-ad-link--ondark{
  color:var(--ts-accent,#F26B21);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
@media (hover: hover){
  #tsAdDesignMain .ts-ad-link--ondark:hover{color:#FFB27A}
}
#tsAdDesignMain .ts-ad-link--ondark:focus-visible{
  outline:2px solid var(--ts-accent,#F26B21);
  outline-offset:3px;
  border-radius:4px;
}
#tsAdDesignMain .ts-ad-cta__meta span{display:inline-flex;align-items:center;gap:7px}
#tsAdDesignMain .ts-ad-cta__meta svg{flex:none;color:var(--ts-accent,#F26B21)}


/* ---------- 11. 响应式（两级降级：≤1024 双列 → ≤640 单列） ---------- */
@media (max-width:1180px){
  #tsAdDesignMain .ts-ad-deliverables{grid-template-columns:repeat(3,1fr);gap:20px}
  #tsAdDesignMain .ts-ad-delivmini__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  #tsAdDesignMain .ts-ad-cols{grid-template-columns:1fr;gap:22px}
}
@media (max-width:1024px){
  #tsAdDesignMain .ts-ad-flow{grid-template-columns:repeat(2,1fr)}
  /* 案例区桌面端已是两列，1024 无需改列数，仅收紧间距 */
  #tsAdDesignMain .ts-ad-works{gap:20px}
  #tsAdDesignMain .ts-ad-facts{grid-template-columns:repeat(2,1fr)}
  #tsAdDesignMain .ts-ad-stats{grid-template-columns:repeat(2,1fr);gap:22px}
  #tsAdDesignMain .ts-ad-scene{grid-template-columns:repeat(2,1fr)}
  /* 计价区下段：备料四项降两列（四列时每张仅约 230px，60 字要折 5-6 行） */
  #tsAdDesignMain .ts-ad-need{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
  #tsAdDesignMain .ts-ad-deliverables{grid-template-columns:repeat(2,1fr);gap:18px}
  #tsAdDesignMain .ts-ad-deliv h3{font-size:18px}
  #tsAdDesignMain .ts-ad-deliv__desc{font-size:14.5px}
  #tsAdDesignMain .ts-ad-sync{grid-template-columns:1fr}
  #tsAdDesignMain .ts-ad-checklist{grid-template-columns:1fr;gap:0}
  #tsAdDesignMain .ts-ad-checklist li:last-child{grid-column:auto}
  #tsAdDesignMain .ts-ad-deliverables__note{
    border-radius:var(--ts-radius,8px);
    padding:12px 18px;
    text-align:left;
  }
  #tsAdDesignMain .ts-ad-scene{grid-template-columns:1fr}
  #tsAdDesignMain .ts-ad-worknotes{gap:10px}
}
@media (max-width:640px){
  #tsAdDesignMain .ts-ad-section{padding:56px 0}
  #tsAdDesignMain .ts-ad-section--lead{padding-top:44px}
  #tsAdDesignMain .ts-ad-section--light{padding:52px 0}
  /* 英雄区：底部 padding 与 bullets 行距同步收紧，
     保证 4 条 bullet 全部位于视口内、不被底部 .ts-dial-bar 拨号条（高 52px，贴底 fixed）遮挡。
     实测 m360/m390 首屏：bullet 1~3 正常显示，bullet 4（单项物料…）原版 top=808 bottom=831
     落在拨号条 top=792..844 区域内。下方数值经核算能将 bullet 4 抬高 ≥46px，使其底部 ≤ bar.top。 */
  #tsAdDesignMain .ts-ad-hero{padding:40px 0 20px}
  #tsAdDesignMain .ts-ad-hero__note{gap:10px;margin-top:14px}
  #tsAdDesignMain .ts-ad-hero__actions .ts-ad-btn{width:100%}
  #tsAdDesignMain .ts-ad-cta__btns .ts-ad-btn{width:100%}
  #tsAdDesignMain .ts-ad-deliverables{grid-template-columns:1fr;gap:16px}
  #tsAdDesignMain .ts-ad-delivmini__list{grid-template-columns:1fr;gap:0}
  #tsAdDesignMain .ts-ad-delivmini__list > li{padding:16px 0 16px 14px}
  #tsAdDesignMain .ts-ad-flow{grid-template-columns:1fr;gap:18px}
  #tsAdDesignMain .ts-ad-step__num{width:54px;height:54px;font-size:18px}
  #tsAdDesignMain .ts-ad-works{grid-template-columns:1fr;gap:16px}
  #tsAdDesignMain .ts-ad-work__body{padding:16px 18px 18px}
  #tsAdDesignMain .ts-ad-work__desc{font-size:13px}
  #tsAdDesignMain .ts-ad-panel{padding:22px}
  #tsAdDesignMain .ts-ad-price__row{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 2px}
  #tsAdDesignMain .ts-ad-price__row--hi{padding-left:12px}
  #tsAdDesignMain .ts-ad-price__val{font-size:18px}
  #tsAdDesignMain .ts-ad-faq summary{font-size:15px;min-height:52px;padding:14px 48px 14px 18px}
  #tsAdDesignMain .ts-ad-faq summary::after{right:16px}
  #tsAdDesignMain .ts-ad-faq__body{padding:0 18px 18px}
  #tsAdDesignMain .ts-ad-cta__meta{gap:14px}
  #tsAdDesignMain .ts-ad-cta__wechat{font-size:13px}
  #tsAdDesignMain .ts-ad-scene__card{padding:22px 20px}
  #tsAdDesignMain .ts-ad-quote-logic{padding:14px 16px;font-size:13.5px}
  /* 计价区下段：三卡与四卡全部降单列 */
  #tsAdDesignMain .ts-ad-scope{grid-template-columns:1fr;gap:14px}
  #tsAdDesignMain .ts-ad-need{grid-template-columns:1fr;gap:14px}
  #tsAdDesignMain .ts-ad-scope__item{padding:18px 20px 20px}
  #tsAdDesignMain .ts-ad-need__item{padding:16px 18px}
  /* 五句话清单降单列，末条不再跨列 */
  #tsAdDesignMain .ts-ad-brief__list{grid-template-columns:1fr}
  #tsAdDesignMain .ts-ad-brief__list li:last-child{grid-column:auto}
  /* 工商信息条：窄屏改竖排，逐条成行比挤成锯齿状更易读 */
  #tsAdDesignMain .ts-ad-legal{flex-direction:column;gap:4px;font-size:12.5px}
  #tsAdDesignMain .ts-ad-works__note{padding:12px 15px}
  #tsAdDesignMain .ts-ad-brief{padding:18px 16px}
  #tsAdDesignMain .ts-ad-facts{gap:18px}
}
@media (hover:none){
  #tsAdDesignMain .ts-ad-deliv:hover,
  #tsAdDesignMain .ts-ad-step:hover,
  #tsAdDesignMain .ts-ad-work:hover{transform:none}
  #tsAdDesignMain .ts-ad-work:hover .ts-ad-work__img{transform:none}
  #tsAdDesignMain .ts-ad-price__row:hover{padding-left:2px;background:transparent}
  #tsAdDesignMain .ts-ad-price__row--hi:hover{padding-left:12px;background:rgba(var(--ts-accent-rgb),.045)}
}


/* ---------- 12. 动效与无障碍 ---------- */
/* 锚点跳转为站点顶栏留出安全间距（topbar 36 + header ≈72，取 96 留余量） */
#tsAdDesignMain [id]{scroll-margin-top:96px}

@media (prefers-reduced-motion:reduce){
  #tsAdDesignMain .ts-ad-hero::after,
  #tsAdDesignMain .ts-ad-btn,
  #tsAdDesignMain .ts-ad-deliv,
  #tsAdDesignMain .ts-ad-deliv::before,
  #tsAdDesignMain .ts-ad-step,
  #tsAdDesignMain .ts-ad-work,
  #tsAdDesignMain .ts-ad-work__img,
  #tsAdDesignMain .ts-ad-work__go,
  #tsAdDesignMain .ts-ad-faq details,
  #tsAdDesignMain .ts-ad-faq summary::after,
  #tsAdDesignMain .ts-ad-link,
  #tsAdDesignMain .ts-ad-delivmini__list > li{animation:none;transition:none}
}

/* 打印：去装饰、保内容、保对比 */
@media print{
  #tsAdDesignMain .ts-ad-hero::before,
  #tsAdDesignMain .ts-ad-hero::after,
  #tsAdDesignMain .ts-ad-cta::before{display:none}
  #tsAdDesignMain .ts-ad-hero,
  #tsAdDesignMain .ts-ad-section--light,
  #tsAdDesignMain .ts-ad-statsbar,
  #tsAdDesignMain .ts-ad-cta{
    background:#FFFFFF;
    color:#0B1F3A;
  }
  #tsAdDesignMain .ts-ad-hero__title,
  #tsAdDesignMain .ts-ad-hero__lead,
  #tsAdDesignMain .ts-ad-hero__note,
  #tsAdDesignMain .ts-ad-stat b,
  #tsAdDesignMain .ts-ad-stat span,
  #tsAdDesignMain .ts-ad-fact b,
  #tsAdDesignMain .ts-ad-fact span,
  #tsAdDesignMain .ts-ad-cta__title,
  #tsAdDesignMain .ts-ad-cta__desc{color:#0B1F3A}
  /* 流程区现为纯白区块（2026-09-16 去底色），打印时无需特殊处理，
     只需保证卡片与分栏在无背景的纸面上仍有边线可辨。
     注意同步四则已由「带框卡」改为「上边线分栏」，这里跟着改边线方向，
     否则打印时会出现「上边线 2px + 四周边框 1px」的重复描边。 */
  #tsAdDesignMain .ts-ad-step{
    background:#FFFFFF;
    border:1px solid #C7CDD6;
  }
  #tsAdDesignMain .ts-ad-step__num{background:#FFFFFF;box-shadow:none}
  #tsAdDesignMain .ts-ad-sync__item{
    padding-top:12px;
    border-top:1.5px solid #C7CDD6;
  }
  #tsAdDesignMain .ts-ad-checklist__num{background:#FFFFFF;border-color:#C2410C}
  #tsAdDesignMain .ts-ad-sync__icon{background:#FFFFFF}
  #tsAdDesignMain .ts-ad-hero__title em{-webkit-text-fill-color:#C2410C;color:#C2410C}
  /* 案例区现为白底浅色卡（2026-09-16 去深底），打印时无需反白处理；
     只需把卡片边线固定成可打印的深灰，并给图片角标一个实底
     （原本是 82% 半透 + 背景模糊，纸面上半透底会随底色变化而失真）。 */
  #tsAdDesignMain .ts-ad-work{border:1px solid #C7CDD6;box-shadow:none}
  #tsAdDesignMain .ts-ad-work__go{display:none}
  #tsAdDesignMain .ts-ad-work__tag{
    background:#0B1F3A;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
  /* 计价区下段：三类卡在纸面上统一给一道深灰边线，去掉阴影 */
  #tsAdDesignMain .ts-ad-scope__item,
  #tsAdDesignMain .ts-ad-need__item{
    border:1px solid #C7CDD6;
    box-shadow:none;
  }
  /* 备料卡底色是墨蓝 2.5%，打印时转白避免弱底色不可控 */
  #tsAdDesignMain .ts-ad-need__item{background:#FFFFFF}
}

/* ============================================================
   2026-09-22 响应式审计补丁（/ad-design/）
   问题 1：内联文字链接 .ts-ad-link 触控区实测高 17-20px，
           低于 WCAG 2.5.8 AA 下限 24×24，移动端难命中。
   修法：padding 撑开可点区域，等量负 margin 抵消占位，
        视觉与排版零变化（与交付条内链接既有手法一致）；
        inline 元素纵向 padding 只扩命中区、不影响行盒。
   问题 2：1024 视口「计价口径」链接跨行折断（计价/口径）。
   修法：white-space:nowrap（全部 5 处用例 ≤4 字，无溢出风险）。
   ============================================================ */
#tsAdDesignMain .ts-ad-link{
  padding:.45em .25em;
  margin:0 -.25em;
  white-space:nowrap;
}

/* ==========================================================================
   2026-09-23 终检落地（依据：05-说明与存档/广告设计页-终检报告与优化方案-20260923.md）
   ① 交付卡下方的「延伸阅读」链接行
      此前全页 0 条指向知识文章的正文内链，18 篇文章只能从首页摸进来，
      抓取深度浅 → 长尾问题排不上去、AI 也读不到这批语料。
   ② 「最后核对日期」行
      此前更新时间只写在看不见的 og:updated_time 里，人和 AI 都无从核对。
   对比度实测：#4B5563/白 = 7.57:1；#6B7280/白 = 4.77:1，均过 WCAG AA（4.5:1）。
   备份：_备份_ad-design-广告设计页整改前-20260923-2349.css
   ========================================================== */
#tsAdDesignMain .ts-ad-deliv__more{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.7;
  color:#4B5563;
}
#tsAdDesignMain .ts-ad-updated{
  margin:10px 0 0;
  font-size:13px;
  color:#6B7280;
}

/* =========================================================
   广告设计页三处居中 v17（2026-09-24）
   ---------------------------------------------------------
   反馈：用户截图指出广告设计页三处应该是居中的：
     ①「常见设计项目参考价」价格面板的标题
     ②「我们做 / 不承接 / 可配合」三个 scope 卡的标签
     ③「设计流程」四步卡的内容（h3 + p + 交付标签）

   改法（仅这三处，其它 panel / step / 价格表行不受影响）：
     · 价格面板标题是 flex 容器（单 item），用 justify-content:center
       让文字在 panel 内居中（不会影响下面价格表行的数字左对齐）；
     · scope item 是普通卡片，text-align:center 让 b 和 p 都居中；
     · step 是流程卡，text-align:center 让内部文字居中（编号圆本身已居中）。
   ========================================================= */
#tsAdDesignMain .ts-ad-panel--price .ts-ad-panel__title{ justify-content:center; }
#tsAdDesignMain .ts-ad-scope__item{ text-align:center; }
#tsAdDesignMain .ts-ad-step{ text-align:center; }

/* =========================================================
   补齐：开工备料四项 .ts-ad-need__item（2026-09-24）
   ---------------------------------------------------------
   上一轮只改了 .ts-ad-scope__item（我们做 / 不承接 / 可配合），
   漏了同构的 .ts-ad-need__item（文字内容 / 图片素材 / 已有品牌资料 /
   尺寸与用途）—— 两者都是「卡片 + 粗体标签 + 说明段落」，版式应一致。

   同页另两个 __item 类经核对不需要改：
     · .ts-ad-sync__item 是「左图标 + 右文字」的 flex 横排卡，
       居中会打乱 icon/text 结构，且其设计本就是左对齐分栏；
     · .ts-ad-legal__item 是行内标签，原样式注释已写明「整体一行居中」。
   ========================================================= */
#tsAdDesignMain .ts-ad-need__item{ text-align:center; }

/* ==========================================================================
   18. 「其余九项」小标题居中（2026-09-25）
   --------------------------------------------------------------------------
   客户截图反馈：交付清单上方的小标题「其余九项，同样按项报价、同样交付源文件」
   （含左侧橙色短横线）靠左，要求居中。
   该元素 .ts-ad-delivmini__head 是 flex 容器（::before 画橙色横线 + 文字），
   故用 justify-content:center 让「横线 + 文字」整体水平居中；
   只加这一条，不动字号、颜色、与下方清单的间距。
   同页仅此一处 __head（已核对），无遗漏同类。
   ========================================================================== */
#tsAdDesignMain .ts-ad-delivmini__head{
  justify-content:center;
}