/* 九清国内站 · 首页
   ⚠️ 铁律：本文件是首页 CSS 的唯一副本。不要在页面正文、页脚 widget 或 Customizer 再放一份。
      英文站就是因为两处各存一份、后加载的覆盖先加载的，白改三轮。
   版本号由 joeqing-home.php 用 filemtime 生成，改完即时生效，不吃缓存。 */.jq-home{
  --ink:#0b0f17; --body:#3f4856;
  --line:#e3e8ef; --bg-alt:#f5f7fa; --blue:#1b69f5;
  color:var(--body); font-size:16px; line-height:1.75;
}.jq-home *{box-sizing:border-box}/* 用全站统一变量 --jq-shell/--jq-gutter（定义在 footer.css :root）
   ⚠️ 不要在这里另定一套宽度 —— 2026-08-18 就是因为自定义 1280 导致
   页头页脚 106px、正文 126px 三条左边线错开 20px。 */.jqh-shell{width:100%;max-width:var(--jq-shell,1224px);margin-inline:auto}/* 通用排版 */.jqh-h2{font-size:clamp(24px,3vw,34px);line-height:1.3;color:var(--ink);margin:0 0 14px;font-weight:700;text-wrap:balance}.jqh-lead{margin:0;max-width:60ch;color:var(--body)}/* ⚠️ 首页正文被 Astra 的 .entry-content 限制在 --jq-shell(1224) 内。
   深色/浅灰区块的背景必须铺满整屏，否则色块夹在中间很难看。
   用 calc 负边距顶出容器，再把内边距补回来。 */.jqh-sec{padding:clamp(56px,7vw,96px) 0}.jqh-hero{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
}.jqh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}/* —— 首屏轮播（3 张）——
   控件规格按 tesla.cn 实测：
   箭头 40×40 / 圆角 4px / rgba(255,255,255,.75) / 投影 0 4px 4px rgba(0,0,0,.25) / 图标 24px / 距边 48px
   圆点 12×12 圆 / 白色 / 当前 opacity 1，其余 .5 / 间距 8px / 过渡 .3s
   手动切换，**不自动播放**（自动轮播会打断正在读文字的人）。 *//* Banner 高度（2026-08-19 修正）：
   原来固定 760px，比常见笔记本视口（710px）还高 7%，第一屏看不全、底部圆点被挤出屏幕。
   改为「满一屏减去导航栏 65px」，并加上下限防止超宽屏过高、矮屏过挤。 */.jqh-hero{
  position:relative;overflow:hidden;background:#f2f4f7;
  /* 用 JS 量出的实际页头高度（--jq-hd）而不是写死 65px：
     登录态有 32px 管理栏、页头高度以后也可能再调，写死会让底部圆点被挤出屏幕。 */
  /* 2026-08-19 改：原来是 clamp(520px,100vh,820px)，实测在 1440×712 的笔记本上取到 712px，
     加上 56px 页头 = 768px，比视口还高 8% —— 第一屏除了 banner 什么都看不到。
     tesla.cn 实测是内联变量 `--tcl-dynamic-section--height: 80svh`，但它同时有 max-height:100%，
     被父容器按页头高度裁了一刀 —— 同样 712px 视口下，80svh=569.594px，它实际渲染成 509.594px，
     正好差一个 56px 页头。所以真正等效的写法是 **80svh 减去页头高度**，直接写 80svh 会高出 60px。
     结果：页头+首屏占视口 79.5%，下面故意露约 142px 的下一块内容勾着人往下滚。
     用 --jq-hd 而不是写死 56：这个变量由 home.js 量出真实页头高度，登录态还含 32px 管理栏。
     单位必须是 svh 不是 vh：手机上 vh 把地址栏高度算进去，滚动时地址栏一收一放高度就跳。
     上一行 vh 是给不认识 svh 的老浏览器兜底，认识的会用下面那行覆盖掉。 */
  height:clamp(480px, calc(80vh - 56px), 820px);
  height:clamp(480px, calc(80svh - var(--jq-hd, 56px)), 820px);
}.jqh-slides{position:absolute;inset:0}.jqh-slide{
  position:absolute;inset:0;display:flex;align-items:center;
  /* tesla 实测：.tcl-flex-module-carousel__slide 的过渡是 opacity 1s ease-out。
     原来 .5s ease 切得偏硬，看不出"画面在动"。 */
  opacity:0;visibility:hidden;transition:opacity 1s ease-out,visibility 0s linear 1s;
}.jqh-slide.is-active{opacity:1;visibility:visible;transition:opacity 1s ease-out,visibility 0s}/* overflow:hidden 是给下面的缓推镜头用的，图放大后不能溢出到别的区块上 */.jqh-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}/* —— 缓推镜头（tesla 那个"画面动作"）——
   tesla 的 .tcl-react-image 自带 transition:all .8s，切图时画面本身也在动，不只是淡入。
   我们原来图上那条 transition 写的是 `all`（没有时长）＝ 完全不生效。
   这里做成：新进来的一张从 1.06 倍缓推到 1 倍，1.6 秒，比淡入(1s)略长，收得住不晃眼。 */.jqh-slide .jqh-hero-media img{transform:scale(1.06);transition:transform 1.6s ease-out}.jqh-slide.is-active .jqh-hero-media img{transform:scale(1)}.jqh-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center}.jqh-hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--jq-shell,1224px);
  margin-inline:auto;padding:40px 0;
}.jqh-hero-copy{max-width:560px;margin-top:-40px}/* 文案排版（沿用 joeqing.com 首屏规格） *//* 2026-08-19：改白字。
   原因：现有 banner 素材左侧文字区杂乱度 47-72（雪山/塔身/天空满画面），
   黑字压上去糊；而特斯拉零蒙版零阴影靠的是「车图背景天然干净」，我们没有这种图。
   白字 + 极轻投影在杂乱背景上可读性远好于黑字，且不用给图片加蒙版。 */.jqh-hero .jqh-h1{
  font-size:clamp(30px,3.6vw,46px);line-height:1.08;font-weight:800;
  color:#fff;letter-spacing:-.02em;
  /* margin-bottom 由 18px 改 0：副标题第一行已经搬进 h1 里（见下方 .jqh-h1-sub），
     间距改由那个 span 的 margin-top 承担。不改的话第二行副标题会比原来低 18px，按钮跟着往下掉。 */
  margin:0;
  text-shadow:0 2px 16px rgba(6,10,18,.62),0 1px 3px rgba(6,10,18,.5);
}.jqh-hero .jqh-sub{font-size:16.5px;color:#f0f3f8;line-height:1.6;margin:0 0 8px;text-shadow:0 1px 10px rgba(6,10,18,.6)}.jqh-hero .jqh-sub span{color:#c9d3e0;font-size:15.5px}/* —— 副标题第一行搬进 h1/h2（2026-08-20）——
   目的：让 H1 里的文字量从 5 个字变成 25 个字左右，而页面显示一个字都不多。
   做法是把本来就在显示的那行副标题改用 <span> 包进标题标签，不是塞隐藏文字
   （隐藏文字是百度清风算法直接打的作弊项，整站降权，不做）。
   这个 span 要把 h1 的 46px/800/-.02em 全部重置掉，还原成原来 .jqh-sub 第一行的样子。 */.jqh-hero .jqh-h1 .jqh-h1-sub{
  display:block;margin-top:18px;
  font-size:16.5px;font-weight:400;line-height:1.6;letter-spacing:normal;
  color:#fff;opacity:.94;text-shadow:none;
}/* <picture> 包住 img 后的保险：img 本身是 absolute，picture 不该产生行内盒 */.jqh-hero-media picture{display:block}/* 按钮（特斯拉规格：200×40 / 圆角 4px / 14px / 500 / hover 只变色不位移） */.jqh-hero .jqh-cta{display:flex;gap:12px;flex-wrap:wrap;max-width:560px;margin-top:28px}.jqh-hero .jqh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:200px;height:40px;min-height:40px;padding:0 20px;
  font-size:14px;font-weight:500;line-height:1;
  border-radius:4px;border:0;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color .33s,color .33s;
}.jqh-hero .jqh-btn-primary{background:#3E6AE1;color:#fff!important}.jqh-hero .jqh-btn-primary:hover{background:#3457C5;color:#fff!important}.jqh-hero .jqh-btn-ghost{background:#fff;color:#393C41!important}.jqh-hero .jqh-btn-ghost:hover{background:#f4f4f4;color:#393C41!important}/* 左右箭头 *//* ⚠️ 2026-08-19：Astra 给 button 设了 min-width/padding，箭头被撑成 64 宽，
   必须显式清零 padding 并锁死 flex 尺寸，否则不是 40×40 方形。
   另外浅色墙面项目图上 .75 白底几乎看不见，加深到 .92 + 描边。 *//* 箭头规格 1:1 抄 tesla（2026-08-20 读它 .tcl-carousel__nav-button 的实际值）：
   40×40 / 圆角 4px / 无边框 / 背景 rgba(255,255,255,.75) / backdrop-filter: blur(4px)
   / 阴影 0 4px 4px rgba(0,0,0,.25) / 图标 #393C41 / 过渡 .33s
   首屏和产品轨道共用这一套，全站只有这一处定义。 */.jqh-nav,.jqh-rnav{
  position:absolute;z-index:5;
  width:40px!important;height:40px!important;min-width:40px!important;
  flex:0 0 40px;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  border:0!important;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.75);color:#393C41;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  transition:color .33s,background-color .33s,box-shadow .33s;
}.jqh-nav{top:50%;transform:translateY(-50%)}/* ⚠️ Astra 有全局规则 button:hover{color:#fff}，会把箭头图标刷成白色 → 白底上消失。
   必须显式锁死 color，:hover/:focus 都要写。 */.jqh-nav,.jqh-nav:hover,.jqh-nav:focus,.jqh-nav:active,
.jqh-rnav,.jqh-rnav:hover,.jqh-rnav:focus,.jqh-rnav:active{color:#393C41!important}.jqh-nav svg,.jqh-rnav svg{color:inherit}.jqh-nav:hover,.jqh-rnav:hover{background:rgba(255,255,255,.95)!important}.jqh-nav:focus-visible,.jqh-rnav:focus-visible{outline:2px solid #3E6AE1;outline-offset:2px}.jqh-prev{left:48px}.jqh-next{right:48px}/* 底部圆点 */.jqh-dots{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:5;
  display:flex;gap:8px;align-items:center;
}.jqh-dot{
  width:12px;height:12px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:#fff;opacity:.55;box-shadow:0 1px 4px rgba(0,0,0,.45);
  transition:opacity .3s,background-color .3s,box-shadow .3s;
}.jqh-dot.is-active{opacity:1}.jqh-dot:hover{opacity:.85}.jqh-dot:focus-visible{outline:2px solid #3E6AE1;outline-offset:3px}@media(max-width:920px){/* 手机端保持 height:auto（内容比 hero 高时要能撑开），下限 80svh。
     ⚠️ **手机端不能再减去页头高度**：2026-08-20 把手机页头改成了 position:absolute
     浮在图上（对齐 tesla），它已经不占文档流高度了，再减一次等于凭空少 64px。
     实测：我们 611px、tesla 约 675px（= 80svh 不减），差的正好是一个页头。
     桌面端页头仍是 sticky 占位的，所以上面那条 calc(80svh - --jq-hd) 保持不变。
     max() 是防止横屏矮视口被压得太扁。 */.jqh-hero{height:auto;min-height:max(460px, 80svh)}/* 桌面横图靠 78% 偏右裁（主体在右）；移动端换成了专门的竖图，主体已居中，改回 center。 */.jqh-hero-media img{object-position:center}.jqh-hero .jqh-h1 .jqh-h1-sub{margin-top:14px;font-size:15.5px}.jqh-slide{position:relative;display:none}.jqh-slide.is-active{display:flex}.jqh-hero-inner{padding:38px 0 64px}.jqh-hero-copy{margin-top:0}.jqh-hero .jqh-h1{font-size:34px}.jqh-prev{left:16px}.jqh-next{right:16px}/* 手机端产品轨道不要箭头，只留圆点 */.jqh-rnav{display:none!important}.jqh-rail-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}.jqh-dots{bottom:18px}}@media(max-width:560px){.jqh-hero .jqh-cta{flex-direction:column}.jqh-hero .jqh-btn{width:100%}}@media(prefers-reduced-motion:reduce){.jqh-slide{transition:none}/* 开了「减弱动画」的用户不做缓推，也不自动轮播（自动轮播的开关在 home.js 里） */.jqh-slide .jqh-hero-media img,
  .jqh-slide.is-active .jqh-hero-media img{transform:none;transition:none}.jqh-nav,.jqh-dot{transition:none}}/* ② 产品滑动轮播 *//* —— 产品轨道左右滑动按钮（2026-08-20）——
   tesla 的产品轮播也有（首张时只出右箭头，滑动后左箭头才出现），我们照做。
   垂直位置用 --jqh-nav-top：卡片高度随容器宽变，纯 CSS 算不出图片区的中心
   （top 的百分比是按【高度】解析的，不是宽度），所以由 home.js 量完写进变量。 *//* 轨道通栏 —— 箭头才能和首屏那对落在同一条线上（都距屏幕边 48px，tesla 就是这样）。
   之前轨道被关在 1224px 容器里，箭头贴的是容器边：1990px 屏上首屏箭头距右 48、轨道箭头距右 395，差 347。
   写法沿用本文件已有的通栏套路（.jqh-sec-alt/.jqh-hero 那几个就是这么写的）：
     外层负 margin 撑满视口 → 内层用等量 padding 把内容推回容器位置。
   效果：第一张卡的左边缘仍和「六条产品线…」标题对齐，但卡片可以一直滑到屏幕边缘，
   箭头压在卡片上而不是飘在空白里。scroll-padding 保证吸附时卡片停在容器边而不是屏幕边。 */.jqh-rail-wrap{
  margin-top:4px;position:relative;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}.jqh-rnav{top:var(--jqh-nav-top,50%);transform:translateY(-50%)}.jqh-rnav-prev{left:48px}.jqh-rnav-next{right:48px}.jqh-rnav[hidden]{display:none!important}/* —— 产品轨道的圆点：只在手机端出现 ——
   手机上不显示箭头（手指直接滑更自然，箭头还会压住卡片上的按钮），改用圆点指示进度，
   和首屏是同一套逻辑。桌面反过来：有箭头、不要圆点（站长 2026-08-20 定）。
   尺寸沿用首屏圆点的 12px，但这里背景是浅色，白点会看不见，改成深色。 *//* ⚠️ 这里必须用 min-width 媒体查询来隐藏，不能只写 .jqh-rail-dots{display:none}。
   手机端那条 display:flex 在本文件里的位置比这里**靠前**（约 184 行的 @media 块），
   同权重时后写的赢 —— 直接写 display:none 会把手机端的圆点一起藏掉（2026-08-20 实测踩到）。
   这个文件里同类顺序坑已经第三次了，加规则前先确认自己在第几行。 */@media(min-width:921px){.jqh-rail-dots{display:none}}.jqh-rdot{
  width:12px;height:12px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:#171a20;opacity:.22;
  transition:opacity .3s,transform .3s;
}.jqh-rdot.is-active{opacity:1}.jqh-rdot:focus-visible{outline:2px solid #3E6AE1;outline-offset:3px}.jqh-rail{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  /* 把内容推回 1224 容器的位置。
     ⚠️ 不能写 calc(50vw - 50%)：padding 里的 % 是按**父元素宽度**算的，而父元素
     .jqh-rail-wrap 刚被改成通栏（= 视口宽），50vw - 50% 直接等于 0，第一张卡会跑到屏幕最左边
     （2026-08-20 实测：卡左边 0、标题左边 383，差 383）。
     正确写法是拿父元素宽度减去容器宽度的一半；用 % 而不是 vw，可以避开滚动条宽度带来的偏差。 */
  padding:4px max(18px, calc(50% - var(--jq-shell,1224px)/2)) 20px;
  scroll-padding-left:max(18px, calc(50% - var(--jq-shell,1224px)/2));
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}.jqh-rail::-webkit-scrollbar{height:6px}.jqh-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}/* —— 产品卡：文案与按钮压在图上（2026-08-20 第二版，1:1 抄 tesla 首页产品卡）——
   tesla 实测（卡片 1024×580，圆角 0，卡上无蒙版）：
     图 position:absolute 铺满整张卡；内容层压在上面
     标题「Model Y」 x=40 y=420  →  48px / 500 / 纯白 / 无 text-shadow
     按钮           x=40 y=500  →  160×40 两个，间距 8px，圆角 4px，14px/500
       立即订购 = #3E6AE1 白字 ／ 了解更多 = 白底 #393C41 字
     即：内容锚在左下角，左边距和下边距都是 40（卡宽的 3.9%）。
   我们的卡是 539 宽（一屏 2.2 张），按比例缩：内边距 24 / 标题 26px / 按钮 140×40。
   ⚠️ 图比例从 16:9 放宽到 **3:2** —— tesla 那张 580px 高，文字块只占 26%；
      我们 539×303 的话文字块要占 45%，太挤。3:2（539×359）把占比压回 38%。
   ⚠️ tesla 卡上没有蒙版（它的图暗部正好在文字位置）；我们是实拍图，
      和首屏一样得加一层**由下往上**的渐变，否则白字压在亮处看不清。 */.jqh-card{
  flex:0 0 clamp(280px,44%,560px);scroll-snap-align:start;
  border:0;border-radius:0;background:transparent;overflow:visible;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
}/* 圆角 8px：tesla 自己 --rounded-corners 那类卡片就是把 8px 加在图片上的
   （它主产品卡是 0，次级卡片是 8px；按钮统一 4px）。overflow:hidden 让图和渐变一起被裁。 */.jqh-card-media{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:8px;background:var(--bg-alt)}.jqh-card-img{position:absolute;inset:0;display:block;line-height:0}.jqh-card-img img{width:100%;height:100%;object-fit:cover;display:block}/* 2026-08-20：站长要求去掉蒙版 —— tesla 的产品卡上确实一层蒙版都没有。
   它不需要，是因为图本身在文字位置就是暗的。
   **所以新图必须留出暗区**，安全区见下（否则白色标题会消失在亮背景里）：
     横向 0~60%、纵向 55~100% 的那块左下角要暗、要干净。
   哪天又换成亮图，把这段注释下面的 ::after 恢复即可。
.jqh-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,
    rgba(8,12,20,.74) 0%, rgba(8,12,20,.46) 30%, rgba(8,12,20,.12) 52%, rgba(8,12,20,0) 68%);
}
*/.jqh-card-over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px}/* 「主打」在图上改成白片深字，蓝底在实拍图上会脏 */.jqh-tag{
  display:inline-block;margin-bottom:10px;padding:3px 9px;border-radius:3px;
  background:rgba(255,255,255,.92);color:#171a20;font-size:11px;font-weight:700;
}.jqh-card-name{
  margin:0 0 16px!important;padding:0!important;
  font-size:26px;font-weight:500;line-height:1.2;color:#fff;
}/* 按钮规格和首屏 CTA 同源：40px 高 / 圆角 4px / 14px·500 / 只变色不位移 */.jqh-card-btns{display:flex;gap:8px;margin:0!important;padding:0!important}.jqh-cbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:140px;height:40px;padding:0 16px;border-radius:4px;
  font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background-color .33s ease,color .33s ease;
}.jqh-cbtn-primary{background:#3E6AE1;color:#fff!important}.jqh-cbtn-primary:hover{background:#3457C5;color:#fff!important}.jqh-cbtn-ghost{background:#fff;color:#393C41!important}.jqh-cbtn-ghost:hover{background:#f4f4f4;color:#393C41!important}/* 子型号那行放到卡片下面当图注 —— 压在图上会占掉一半卡片，
   但它是首页少有的关键词载体（滑轨的 6 个子型号等），不能删也不能藏。 */.jqh-card-note{
  display:block;font-style:normal;margin-top:14px;
  font-size:14px;color:#5C5E62;line-height:1.6;
}/* 响应式 */@media(max-width:820px){.jqh-card{flex-basis:78%}}@media(max-width:560px){.jqh-cta{flex-direction:column;align-items:stretch}.jqh-btn{text-align:center}}@media(prefers-reduced-motion:reduce){.jqh-card{transition:none}.jqh-card:hover{transform:none}}.jq-home a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}/* Astra 的 .content-area 默认 margin-top:60px，会在页头与 Banner 之间留白缝。
   首页 Banner 必须紧贴导航栏，这里清零；页脚下方留白同理。 */body.home .site-content .content-area{margin-top:0!important;margin-bottom:0!important}body.home .site-content .ast-container{padding-top:0!important;padding-bottom:0!important}/* Astra 默认给正文链接加下划线，案例卡/产品卡整卡是 <a>，标题会带下划线，很难看。 */.jq-home a,.jq-home a:hover,.jq-home a:focus,
.jq-home .jqh-btn,.jq-home .jqh-btn:hover{text-decoration:none!important}/* 2026-08-19 站长要求：去掉 banner 白色蒙版（特斯拉没有）。 *//* —— 首页：页头叠在 banner 上（2026-08-19）——
   特斯拉的透明页头是**盖在**首屏图上的，能透出图片；
   我们的页头原本占据文档流，banner 从它下面开始，透明后只透出白色页底，等于没效果。
   做法：首页把页头脱离文档流上浮，banner 顶到页面最上方并补足顶部内边距。
   ⚠️ 只在首页生效（body.home），其他页页头仍占位，否则内容会被盖住。 */body.home #masthead{position:absolute!important;top:0;left:0;right:0;z-index:99}body.home.admin-bar #masthead{top:32px}body.home .site-content .content-area{margin-top:0!important}body.home .jqh-hero{margin-top:calc(-1 * var(--jq-hd, 65px));padding-top:var(--jq-hd, 65px)}/* 滚动后页头改为固定吸顶并带浅底 */body.home.jq-scrolled #masthead{position:fixed!important;top:0}body.home.admin-bar.jq-scrolled #masthead{top:32px}/* ================================================================
   首屏：1:1 对齐 tesla.cn（2026-08-19 站长给图对比后定稿）

   特斯拉的做法（截图逐项核对）：
   · 页头 **白底不透明**，深色 logo 与深色菜单，不叠在图上
   · 首屏文案 **水平居中**，位置靠上（不是左对齐）
   · 两个按钮居中并排
   · ~~**图片零蒙版零阴影** —— 站长会提供类似特斯拉的干净图~~
     → 2026-08-20 修正：到手的是展会实拍，不是干净图，已加回顶部渐变蒙版（见下方 ::after）
   · 左右箭头白底深色箭头，圆点在底部居中
   ================================================================ *//* —— 页头：白底，不叠图（首页与其他页一致）—— */body.home #masthead{position:sticky!important;top:0}body.home.admin-bar #masthead{top:32px}body.home #masthead .main-header-bar,
body.home #masthead .ast-primary-header-bar{
  background:#fff!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}body.home #masthead .custom-logo{filter:none}body.home #masthead .main-header-menu>.menu-item>.menu-link{color:#171a20!important}body.home #masthead .main-header-menu>.menu-item>.menu-link:hover{
  background:#f4f4f4!important;color:#171a20!important;
}body.home #masthead .main-header-menu>.menu-item.current-menu-item>.menu-link{color:#171a20!important}body.home .site-content .content-area{margin-top:0!important}body.home .jqh-hero{margin-top:0;padding-top:0}/* —— 幻灯片：顶部渐变蒙版 ——
   2026-08-20 加。原来是「零蒙版」（8/19 定的，前提是"站长会提供类似特斯拉的干净图"）。
   实际到手的是展会实拍，画面又亮又碎，白字压上去看不清。实测白字在标题区的 WCAG 对比度：
     滑轨屏 2.33:1（最亮处 1.06:1，等于隐形）/ 多层旋转屏 3.90:1 / 伸缩矩阵屏 6.56:1
   AA 大字号要求 3:1，前两张不达标。

   ⚠️ tesla.cn 本身**没有蒙版也没有 text-shadow**（2026-08-20 读它 DOM 确认：h1 是纯白、
   text-shadow: none、首屏区内零 gradient）。它不需要，因为 Homepage-Promo-* 那批图是按
   "文字位置留干净"的前提拍/修的。这条是我们**故意偏离**特斯拉的地方，前提变了而已。
   哪天换成干净的图，把这一段删掉即可回到零蒙版。

   透明度是按对比度倒推的，不是拍脑袋：黑色蒙版 α 时白字对比度 ≈ 1.05/(L(c·(1-α))+0.05)。
   最糟的一张（标题区平均 rgb(170,170,169)、最亮处近纯白）要过 AA 需要 α≈0.55，
   所以顶部给到 .62，到 82% 处收干净，不影响下半张图和底部圆点。 */.jqh-slide .jqh-hero-media::before{content:none!important}.jqh-slide .jqh-hero-media::after{
  content:""!important;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,12,20,.62) 0%,
    rgba(8,12,20,.52) 28%,
    rgba(8,12,20,.34) 50%,
    rgba(8,12,20,.10) 68%,
    rgba(8,12,20,0)   82%);
}/* .jqh-hero-media 自身 z-index:0 会开一个层叠上下文，所以这层 ::after 只压在图上面，
   压不到 .jqh-hero-inner（z-index:2，是 .jqh-slide 那一层的兄弟）—— 文字永远在蒙版之上。 *//* —— 文案居中靠上（tesla 版式）—— */.jqh-slide{align-items:flex-start!important}.jqh-hero-inner{padding:64px 0 0!important}.jqh-hero-copy{max-width:760px!important;margin:0 auto!important;text-align:center!important}.jqh-hero .jqh-cta{justify-content:center!important;max-width:none!important;margin-top:24px!important}/* 文字白色（tesla 首屏就是白字，靠图本身干净，不加蒙版） */.jqh-slide .jqh-h1{color:#fff!important;text-shadow:none!important}.jqh-slide .jqh-sub{color:#fff!important;text-shadow:none!important;opacity:.94}.jqh-slide .jqh-sub span{color:#fff!important;opacity:.8}.jqh-slide .jqh-btn-ghost{background:#fff!important;color:#393C41!important}
/* ⚠️ 上面那条为了在深色首屏图上压住底色用了 !important，连带把
   .jqh-btn-ghost:hover 的浅灰底也压死了 —— 首屏「了解更多」鼠标悬停毫无反应，
   而产品卡上的同款按钮(.jqh-cbtn-ghost)没有这条覆盖，hover 是正常的，两处对不上。
   站长 2026-08-26 发现。修法是补一条同等强度的 hover，而不是去掉上面那条 !important
   （去掉的话按钮在深色图上会被 Astra 的默认样式带跑）。 */
.jqh-slide .jqh-btn-ghost:hover{background:#f4f4f4!important;color:#393C41!important}/* —— 箭头 ——
   2026-08-20：这里原本写着 `background:#fff; color:#171a20; box-shadow:none`，
   是 8/19 **还没量特斯拉之前**按「白底深色箭头」猜的，会把上面那条统一规则整个盖掉，
   导致首屏箭头和产品轨道箭头长得不一样（不透明白底 / 无阴影 / 图标色也差）。
   实测值已在文件上方 `.jqh-nav,.jqh-rnav` 那条里定死，这里只保留仍然需要的一件事：
   压掉浏览器默认聚焦框，再用 :focus-visible 换成品牌蓝。 */.jqh-nav,.jqh-nav:hover,.jqh-nav:focus,.jqh-nav:active{outline:none!important}.jqh-nav:focus-visible{outline:2px solid #3E6AE1!important;outline-offset:2px}/* ================================================================
   移动端首屏修正（2026-08-20）
   用 iframe 强制 390×844 视口实测出来的三个真问题（之前一直没能在真手机尺寸下看过）。
   ⚠️ 这一段必须放在文件最末尾 —— 上面那个「1:1 对齐 tesla.cn」覆盖块里
   `.jqh-hero-inner{padding:64px 0 0!important}` 带 !important，
   写在前面的移动端块（约 128 行）会被它盖掉。同权重看顺序，最后一个赢。
   ================================================================ */@media(max-width:920px){/* ① 图片没铺满首屏（最明显的一个）
     实测：.jqh-hero 565px、.jqh-slides 565px(absolute)，但 .jqh-slide 只有 282px。
     因为手机端 .jqh-slide 是 position:relative，高度只跟着内容走；
     .jqh-hero-media 是 absolute inset:0，只能撑到 slide 那 282px，
     结果图只盖住文案区，下面 283px 露出浅灰底色。 */.jqh-slide.is-active{min-height:100%}/* ② 按钮通栏贴到屏幕边缘
     .jqh-hero-inner 的 max-width 是 1224px，在 390px 屏上等于满宽，
     而它的 padding 被上面那条 !important 设成了左右 0。
     ≤560px 时按钮又是 width:100%，于是「立即定制」从屏幕最左顶到最右。
     注意 .jqh-hero 自己的 0 18px padding 不起作用 ——
     .jqh-slides 是 absolute inset:0，定位参照的是 padding 盒，会盖掉这层内边距。 */.jqh-hero-inner{padding-left:20px!important;padding-right:20px!important}/* ③ 左右箭头压在「了解更多」按钮上
     实测箭头 y=373-413、按钮 y=352-392，重叠 20px，点按钮边缘会误触翻页。
     tesla 手机版本来就没有左右箭头，只有圆点 + 手指滑动。
     home.js 的 touchstart/touchend 滑动已经实现，功能不丢。 */.jqh-prev,.jqh-next{display:none!important}}/* ================================================================
   移动端首屏：透明页头 + 白 logo + 并排按钮（2026-08-20）
   依据：站长给的 tesla.cn 手机版截图 + 它 CSS 里的原文规则
     .tds-menu-header-transparent--light #tds-site-header-wrapper{
        position:absolute;                                   ← 页头浮在图上，不占高度
        --tds-icon-fill-secondary: var(--tds-color--white);  ← logo / 图标 白色
        --tds-theme-foreground:    var(--tds-color--white);
     }
     .tds-site-header--sticky.tds-site-header--stuck{background-color:var(--tds-theme-background)}
                                                             ← 滚动后变实底
   ⚠️ 必须在文件最末尾：上面「1:1 对齐 tesla.cn」块里 body.home #masthead 是 sticky!important。
   ================================================================ */@media(max-width:920px){/* —— 页头浮在首屏图上 ——
     absolute 会让页头脱离文档流，首屏图自动顶到最上面，不需要再给 hero 负 margin。 */body.home #masthead{position:absolute!important;top:0!important;left:0;right:0;z-index:99!important}/* 不要再给 absolute 状态补管理栏高度：WP 已经给 <html> 加了 margin-top:46px，
     absolute 的包含块就是从 46 起算的，再写 top:46px 会把页头多推 46px 进首屏里
     （2026-08-20 实测：页头 y=92、首屏 y=46，中间空出一条）。访客没有管理栏，看不到这个错。 */body.home #masthead .ast-primary-header-bar,
  body.home #masthead .main-header-bar{
    background:transparent!important;border-bottom:0!important;box-shadow:none!important;
  }/* logo 变纯白：brightness(0) 先压黑、invert(1) 再翻白。对任何 SVG/PNG 都有效，不用另出白色素材。
     ⚠️ `:not(.ast-main-header-nav-open)` 不能省：菜单面板是白底，白 logo 会整个消失。
     一开始是在后面另写一条 `filter:none!important` 去盖，**盖不掉** —— 同一条覆盖规则
     桌面 logo 生效、移动 logo 不生效（2026-08-20 反复实测，:has() 和普通 body 类都一样）。
     与其跟层叠较劲，不如让"白 logo"这条本身在菜单打开时就不匹配。 */body.home:not(.ast-main-header-nav-open) #masthead .custom-logo{filter:brightness(0) invert(1)}/* 汉堡：去掉白底白框，图标转白 */body.home #masthead [data-section="section-header-mobile-trigger"] .menu-toggle{
    background:transparent!important;border:0!important;   /* tesla 手机版没有方框，就是个白图标 */
  }body.home:not(.ast-main-header-nav-open) #masthead .menu-toggle svg{fill:#fff!important;color:#fff!important}/* 滚动过首屏后变实底（tesla 的 --stuck 状态）。.jq-scrolled 由 home.js 的
     IntersectionObserver 打在 body 上，哨兵在首屏 72% 处。 */body.home.jq-scrolled #masthead{position:fixed!important;top:0!important}body.home.admin-bar.jq-scrolled #masthead{top:46px!important}body.home.jq-scrolled #masthead .ast-primary-header-bar,
  body.home.jq-scrolled #masthead .main-header-bar{background:#fff!important}body.home.jq-scrolled #masthead .custom-logo{filter:none!important}body.home.jq-scrolled #masthead .menu-toggle svg{fill:#171a20!important;color:#171a20!important}body.home.jq-scrolled #masthead [data-section="section-header-mobile-trigger"] .menu-toggle{
    border-color:#e1e5ec!important;background:#fff!important;
  }/* 菜单打开时：面板是白的，白 logo 会消失，所以整条栏切回白底深色。
     钩子用 Astra 自己往 body 上打的 `ast-main-header-nav-open`。
     ⚠️ 原来写的是 `#masthead:has(.menu-toggle[aria-expanded="true"])`，浏览器支持 :has()、
     选择器也确实命中，但**移动端那个 logo 的样式没被重算**（同一条规则桌面 logo 生效、
     移动 logo 不生效，2026-08-20 实测）—— 是 :has() 动态失效在被 display 切换的子树上的坑。
     用普通 body 类没有这个问题。 */body.ast-main-header-nav-open.home #masthead .ast-primary-header-bar{background:#fff!important}/* —— 文案往下让出页头高度 ——
     tesla 手机版：页头 56px，大标题顶边约 138px，即页头底下再留 ~82px。 */.jqh-hero-inner{padding-top:124px!important}/* —— 两个按钮并排（tesla 手机版是「订购 Model 3 | 订购 Model Y」左右并排，不是上下堆叠）——
     实测它左右外边距约 24px、中间间距约 8px、每个约 167px 宽、高 40px。 */.jqh-hero .jqh-cta{
    flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;
    justify-content:center!important;
  }.jqh-hero .jqh-btn{
    width:auto!important;flex:1 1 0!important;min-width:0!important;padding:0 8px!important;
  }/* 产品卡在手机上接近整屏宽（tesla 手机版卡片约占视口 89%），标题相应收小 *//* 卡片宽度 86% → 93%：tesla 手机卡是 330/354 ≈ 容器的 93%。
     加宽后同比例下卡片也变高（4:3 时 228 → 247），是不额外裁图就能再高一点的唯一办法。 */.jqh-card{flex:0 0 93%!important}/* 手机端图比例 3:2 → 4:3，卡片高 12%（304×203 → 304×228）。
     站长嫌手机卡片偏矮 —— tesla 手机卡是 330×520（0.635，很竖），但**它给手机单独出了竖版裁切**。
     我们这批素材全是横图（多为 16:9），靠裁两侧撑高度：3:2 裁 13%、4:3 裁 23%、
     1:1 要裁 42%、4:5 要裁 54%（产品直接被切掉）。4:3 是"高一些但不伤画面"的位置。
     再想更高就得单独出竖版图，靠裁横图做不到。 */.jqh-card-media{aspect-ratio:4/3}.jqh-card-over{padding:18px}.jqh-card-name{font-size:22px;margin-bottom:14px!important}/* 手机上卡片约 287px 宽，两个 140px 的按钮放不下（140×2+8=288），改成等分 */.jqh-cbtn{min-width:0!important;flex:1 1 0!important;padding:0 8px!important}.jqh-card-note{font-size:13.5px}}/* 上面 @media(max-width:560px) 里那条「按钮竖排 + width:100%」已被这里覆盖 —— 
   tesla 在小屏也是并排，中文四个字比 "订购 Model 3" 还短，171px 够放。 *//* ============================================================================
   ③ 数字 + 两个入口（2026-08-21 替掉原「机械能力」四条清单）

   参考 tesla.cn/megapack：它的 B2B 页不写"我们能力强"，只摆可核对的数字，
   再用几张入口卡分流。数字全部经站长确认，**不许在这里凭空加单位或量级**
   —— 之前拿行业通用值套动态产品出过 4.6 倍误差。

   2026-08-21 二改，以下数值全部是从 tesla.cn 页面里量出来的原值，不是估的：

   【数字带 = tesla 的 .tcl-badge-group】
     桌面：display:flex; justify-content:center; gap:80px —— **整组居中**，
           不是三等分铺满容器（1400 视口里它组宽 819，左右各余 290）。
           两两之间夹一条 1px × 100px 的竖线，颜色 #d0d1d2。
     数字：64px / 500 / line-height 64   颜色 #171a20
     单位：28px / 500 / line-height 36   跟数字**共基线**（tesla 用 align-items:flex-end，
           我们用行内 span 走基线对齐，效果一样但少一层盒子）
     标签：20px / 500 / line-height 28   颜色 #5C5E62
     手机（390 实测）：改 .tcl-badge-group--vertical —— flex-direction:column、gap:40、
           整组居中但每条左对齐（三条左边都在 x=123）、分隔线转成横线；数字降到 48px。
           所以下面手机段用 width:fit-content + margin-inline:auto 来"整组居中、内部左对齐"。

   【入口卡 = tesla 首页「金融服务 / Tesla 商店」那两张】
     卡：640×220，背景 #f4f4f4，圆角 8px，overflow hidden
     按钮：180×40，白底 #fff / 字 #393C41 / 圆角 4px / 14px·500
     ⚠️ hover 只有**按钮自己**变 #eee（tesla 的 --tds-color--tertiary-highlight），
        **整张卡的背景不变**。之前写成「整卡 hover 变 #ececec + 鼠标碰卡片任意处按钮就亮」
        是错的，2026-08-21 站长指出后按 tesla 实测值改回来。
        我们的卡整张是 <a>（手机上整卡可点更好用），但 :hover 照样能只作用在按钮上
        —— 指针在按钮上时 .jqh-entry-btn:hover 会命中，跟外层是不是链接无关。
   ============================================================================ *//* 上留白单独收窄。.jqh-sec 通用值是 96px，上面「产品」区还有自己的 96px 下留白，
   叠起来数字离产品卡 192px+，站长指出"距离上面板块太高"。
   tesla.cn/megapack 实测：数字带距上一屏底 168px。这里 96(产品下) + 64 = 160，最接近。 */#jqh-proof{padding-top:clamp(36px,4.5vw,64px)}/* —— 数字带 —— *//* 选择器带上 .jq-home 是为了压过 Astra 的 .entry-content ul{padding-left:20px}
   ——(0,2,0) > (0,1,1)。只写 .jqh-stats{padding:0} 会被它顶掉，数字整体右移 20px。
   ⚠️ 下面所有媒体查询里改 .jqh-stats 的规则也必须带 .jq-home，否则优先级更低不生效。 */.jq-home .jqh-stats{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;align-items:stretch;
}.jq-home .jqh-stats li{position:relative;padding:0 80px}.jq-home .jqh-stats li:first-child{padding-left:0}.jq-home .jqh-stats li:last-child{padding-right:0}/* 竖分隔线：绝对定位在 li 的左边缘，正好落在两个 80px 间距的正中 */.jq-home .jqh-stats li + li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:100px;background:#d0d1d2;
}.jqh-stat-n{
  margin:0!important;padding:0!important;
  font-size:64px;font-weight:500;line-height:64px;
  color:#171a20;letter-spacing:-.01em;white-space:nowrap;
}/* 单位走行内基线对齐，自然比数字矮一截且底边齐平 */.jqh-stat-u{font-size:28px;font-weight:500;line-height:36px;margin-left:8px;letter-spacing:0}.jqh-stat-l{margin:0!important;padding:0!important;font-size:20px;font-weight:500;line-height:28px;color:#5C5E62}/* 这一行相当于 tesla 第三枚 badge「经过现实世界验证」的作用 —— 说明数字是什么来路。
   放在数字下面而不是上面：站长明确要求全站不要小标题(kicker)。跟数字带一起居中。 */.jqh-stat-note{
  margin:28px auto clamp(44px,5vw,72px)!important;padding:0!important;
  max-width:64ch;text-align:center;text-wrap:balance;
  font-size:15px;line-height:1.7;color:#7b8697;
}/* —— 两张入口卡 —— */.jqh-entry{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}/* 整卡是一个 <a>：卡内不能再嵌 <a>（嵌套锚点非法），所以"了解更多"是 <span> 装成按钮。
   min-height 220 是 tesla 卡的原值；不设的话卡高由文字撑出来，600×195（0.33）太扁。 */.jqh-entry-card{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:220px;
  background:#f4f4f4;border-radius:8px;overflow:hidden;
  text-decoration:none!important;color:inherit;
}.jqh-entry-text{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,2.4vw,32px);
}.jqh-entry-title{
  margin:0 0 8px!important;padding:0!important;
  font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.3;color:#171a20;
}.jqh-entry-desc{display:block;font-size:15px;line-height:1.65;color:#5C5E62;margin-bottom:16px}/* 1:1 抄 tesla 的 .tds-btn--tertiary：180×40 / 圆角 4px / 14px·500 /
   白底 #fff、字 #393C41，hover 只换底色到 #eee，过渡 .33s（它的原值）。 */.jqh-entry-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:auto;min-width:180px;height:40px;padding:0 18px;
  border-radius:4px;background:#fff;color:#393C41;
  font-size:14px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color .33s ease;
  /* 2026-08-26：整卡不再是链接，改成只有这个按钮是 <a>（tesla 首页实测大面积可点元素为 0）。
     它变成真链接后会吃到 Astra 给正文 <a> 的下划线，这里关掉。 */
  text-decoration:none!important;
}.jqh-entry-btn:hover{background:#eee;color:#171a20}/* ⚠️ color 不能省。Astra 有一条全站 `a:hover,a:focus{color:var(--ast-global-color-1)}`（实际值 #045cb4 深蓝），我们这里只写 background 的话，hover 时文字颜色就被它接管变蓝 —— 站长 2026-08-30 指出：「特斯拉可不是这样的」。tesla 的次级按钮 hover 只换底色，字始终是 #171a20。全站凡是 <a> 做的按钮，:hover 里都必须显式写 color。 */.jqh-entry-media{display:block;line-height:0}.jqh-entry-media img{width:100%;height:100%;object-fit:cover;display:block}@media(max-width:1024px){/* 80px 间距在窄屏会把三条数字挤出容器，收到 40 */.jq-home .jqh-stats li{padding:0 40px}.jqh-entry{grid-template-columns:1fr}}@media(max-width:720px){/* 手机：对齐 tesla 的 .tcl-badge-group--vertical —— 竖排、gap 40、横线分隔。
     width:fit-content + margin-inline:auto 让**整组**居中，
     align-items:stretch 让三条等宽、内部一律左对齐（tesla 三条左边线也是同一条）。 */.jq-home .jqh-stats{
    flex-direction:column;align-items:stretch;
    width:fit-content;margin-inline:auto;gap:40px;
  }.jq-home .jqh-stats li{padding:0}.jq-home .jqh-stats li + li::before{
    left:0;right:0;top:-20px;transform:none;width:100%;height:1px;
  }.jqh-stat-n{font-size:48px;line-height:48px}.jqh-stat-u{font-size:22px;line-height:28px;margin-left:6px}.jqh-stat-l{font-size:17px;line-height:24px}.jqh-stat-note{font-size:14.5px}}@media(max-width:640px){/* 手机版 1:1 对齐 tesla.cn 首页「金融服务 / Tesla 商店」那两张灰卡（390 视口实测原值）：
       卡  366×380，圆角 8px，背景 #f4f4f4
       图  在**顶部**、通栏 366×200、object-fit:cover、贴卡边（x=0,y=0）
       标题 28px / 500 / line-height 36 @ (24, 224)
       描述 17px / 400 / line-height 20 @ (24, 260)
       按钮 180 × 40 @ (24, 316) —— **定宽，不是满宽**
       间距推导：图底 200 →(24)→ 标题 →(0)→ 描述 →(16)→ 按钮 →(24)→ 卡底 = 380
     我们原来是「文字在上 / 图在下 / 按钮满宽 / 标题 20px·600」，四处都不一样，
     2026-08-22 站长指出后按实测值改。桌面端不动（站长早前说过桌面就这样）。 */.jqh-entry-card{grid-template-columns:1fr;min-height:0}/* 图挪到顶部。桌面是「左文右图」，手机翻成「上图下文」跟 tesla 一致 */.jqh-entry-media{order:-1}.jqh-entry-media img{aspect-ratio:16/9}.jqh-entry-text{padding:24px}.jqh-entry-title{
    font-size:28px!important;font-weight:500!important;line-height:36px!important;
    margin-bottom:0!important;
  }.jqh-entry-desc{font-size:17px;line-height:20px;margin-bottom:16px}/* 满宽按钮是我一开始想当然写的，tesla 手机版一直是 180 定宽 */.jqh-entry-btn{width:auto;min-width:180px}}/* 轨道通栏 —— 和第②块产品轨道同一套写法，第一张卡的左边缘仍和 H2 标题对齐，
   但卡片能一直滑到屏幕边缘。scroll-padding 保证吸附时停在容器边而不是屏幕边。 */.jqh-drail{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:4px max(18px, calc(50% - var(--jq-shell,1224px)/2)) 20px;
  scroll-padding-left:max(18px, calc(50% - var(--jq-shell,1224px)/2));
}.jqh-drail::-webkit-scrollbar{display:none}/* ⚠️ flex-basis 的百分比是按**轨道的内容宽**算的（1400 视口下是 1224），不是视口宽。
   36% → 441px；(1400-88)/(441+24) = 2.8 张可见，和站长稿子上「三张多一点」一致。 */.jqh-dcard{
  flex:0 0 clamp(300px, 36%, 460px);scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:#f4f4f4;border-radius:8px;overflow:hidden;
}/* 图片区做成正方形：站长要补的是竖构图的机构图，1:1 容得下竖图又不至于把卡拉得太长。
   contain 不能换成 cover —— 工程图一旦被裁掉标注就废了；机构渲染图裁掉也会缺件。 *//* 8:7 是从站长稿子的卡片比例反推的：他画的卡是 600×765（0.784）。
   我们卡宽 441，文字区（标题34+8+副标2行50+24+按钮40+下内边距24）约 180，
   要让 441/卡高 = 0.784，图区得是 ≈386 高 → 441:386 ≈ 8:7。
   1:1 试过，卡高 571、比例 0.686，比稿子瘦一截。 */.jqh-dcard-media{flex:0 0 auto;aspect-ratio:8/7;padding:24px 24px 4px}/* ⚠️ 不要写 width:auto;height:auto;max-*:100% —— 图片**加载完成前**那样写的盒子是 0×0，
   图一到就"弹"一下（2026-08-21 实测量到 0×0）。固定撑满、靠 contain 留白，尺寸从头到尾不变。 */.jqh-dcard-media img{width:100%;height:100%;object-fit:contain;display:block}/* 图纸缩到卡片尺寸后小标注读不出来，点图开原图（新窗口）。不占按钮位，也不改版式。
   卡片本身不是 <a>，所以这层 <a> 不构成嵌套锚点。 */.jqh-dcard-zoom{display:block;width:100%;height:100%}/* body 用 flex:1 + margin-top:auto 把按钮压到卡底 ——
   轨道是 flex 行，五张卡默认等高，这样五张卡的按钮会落在同一条水平线上，
   哪怕副标题有的两行有的三行。 */.jqh-dcard-body{flex:1 1 auto;display:flex;flex-direction:column;padding:0 24px 24px}.jqh-dcard-name{
  margin:0 0 8px!important;padding:0!important;
  font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.3;color:#171a20;
}.jqh-dcard-sub{
  margin:0 0 24px!important;padding:0!important;
  font-size:15px;font-weight:400;line-height:1.65;color:#5C5E62;
}/* 窄卡放不下两个 160px 定宽按钮（160×2+8=328 > 448-48=400 勉强够，但 300px 断点就爆了），
   改成等宽平分，跟站长稿子一致。 *//* margin-top:auto 才能把按钮真正压到卡底。原来写死 24px，结果副标题只有一行的
   「垂直升降」那张卡按钮比其余四张高 25px（2026-08-21 实测 btnTop 2733 vs 2758）。
   最小间距靠上面 .jqh-dcard-sub 的 margin-bottom:24 保证。 */.jqh-dcard-btns{display:flex;gap:10px;margin:auto 0 0!important;padding:0!important}.jqh-dcard-btns .jqh-cbtn{flex:1 1 0;min-width:0;padding:0 8px}@media(max-width:720px){.jqh-dcard{flex:0 0 82vw}/* 手机上 1:1 会把卡拉得过长（一屏放不下按钮），收成 4:3 */.jqh-dcard-media{aspect-ratio:4/3;padding:16px 16px 4px}.jqh-dcard-body{padding:0 16px 16px}.jqh-dcard-sub{margin-bottom:18px!important}}