/* 轮播：竖向滚动交还浏览器，横向手势交给 JS 做触摸滑动 */
.carousel-track-wrap{ touch-action:pan-y; }

/* ============================================================================
   首页专属样式（仅 index.html / en/index.html / ko/index.html 引用，最后加载）
   目的：修「窄屏轮播文案被裁掉」。

   成因（headless 实测：轮播轨道高 = 容器宽 × 0.375，即 16/6 硬比例；
   hero 文案是绝对定位浮在图上的，被 .carousel-track-wrap 的 overflow:hidden 裁掉；
   .carousel-caption 用 justify-content:center 居中，所以标题切在顶部、正文切在底部）：
       视口 620 → 轨道 191px，文案实际需要 202px  ✗ 裁 11px
       视口 480 → 轨道 156px，文案实际需要 272px  ✗ 裁 116px
       视口 375 → 轨道 117px，文案实际需要 305px  ✗ 裁 188px
   （标题 30px + 正文 22px 是 clamp 的最小值，窄屏不再缩小，而横带越来越矮 → 必然裁切。）

   策略：只做一个断点。
     ≤700px  文案移到图下方堆叠（图裁成 16/9），彻底消除裁切，图片同时变大变清楚；
     >700px  保持原有 16/6 横带外观 —— 实测 700px 时文案需要 200px、横带 221px，装得下，
             所以不需要再对中窄屏缩字号（少一层改动，也避免小窗里文字过小）。
   仅覆盖轮播；删除本文件的 link 即完全回退，不动 css/components.css 等共享基础表。
   ========================================================================== */

@media (max-width:700px){
  .carousel{padding:24px 0 14px}

  /* 轨道高度交给内容撑开。js/carousel.js 在窄屏不再写 --carousel-h，
     否则内联自定义属性会压过这里的 height:auto（同断点值须保持一致）。 */
  .carousel-track{height:auto}
  .carousel-slide{height:auto;display:flex}
  .carousel-link{display:flex;flex-direction:column;height:auto}
  /* 原图是 16/6 的宽横图，手机上只剩 ~180px 高；裁成 16/9 让芯片/产品主体更大更清楚 */
  .carousel-slide img{height:auto;aspect-ratio:16/9;object-fit:cover;flex:0 0 auto}

  /* 文案从「浮在图上」改为「排在图下」，父级 .carousel-slide 的深蓝底就是它的背景。
     注意：5 张幻灯片文案行数不同（实测 375px 下 hero 文案 114px、最长的一张 177px），
     轨道高度取最高的一张 —— 这样切页时卡片高度稳定，不会每 5.5s 呼吸一次；
     代价是较短的幻灯片底部会多出一截底色。文案保持顶部对齐（紧贴图片），
     那截底色留在底部，比垂直居中（文案悬在中间）更像一张正常的卡片。 */
  .carousel-caption,
  .carousel-slide--hero .carousel-caption{
    position:static;inset:auto;top:auto;bottom:auto;
    display:block;padding:18px 22px 20px;
    background:#0D1B2A;text-align:left;
  }
  .carousel-slide--hero .carousel-caption h3{font-size:clamp(20px,5.4vw,26px);line-height:1.22}
  /* 标题下方有一条蓝色强调条（components.css 的 h3::after：bottom:-14px、高 4px，
     即占标题底边下 10–14px）。窄屏原来 margin-top:8px，正文首行的行盒顶在标题底边下 8px，
     蓝条直接压在正文首行上。这里给足间距，让强调条落在标题与正文之间。 */
  .carousel-slide--hero .carousel-caption p{font-size:clamp(14px,3.4vw,16px);line-height:1.55;margin-top:22px}
  .carousel-caption h3{font-size:clamp(18px,4.6vw,23px);line-height:1.25}
  .carousel-caption p{font-size:clamp(13px,3.2vw,15px);line-height:1.55}
  .carousel-cta{margin-top:9px}

  /* 窄屏指示器收窄一点，5 个点到不了两行 */
  .carousel-dots{gap:9px;margin-top:14px;margin-bottom:12px}
  .carousel-dot{width:28px}
  .carousel-dot.active{width:46px}
}

/* ============================================================
   ps-stack v2 · finch 式全屏堆叠（无 tab 纯滚动）· 2026-10-02 00:10
   仅首页加载。上一版 v1（浅底+tab 混搭）被用户否决，本版按 demo
   忠实还原：整屏饱和色面板逐张上滑覆盖、被盖面板缩放压暗、
   右下角 01/05 进度。tab 栏已从 HTML 移除。
   回退：cp backup/home.css.ps-stack-20261001-2358.bak css/home.css
         cp backup/index.html.ps-stack-20261001-2358.bak index.html
         重跑 build-i18n-pages → onq-fallback → hygiene → search
   ============================================================ */
.ps-stack{position:relative;--nav-h:73px} /* .nav 实测高度，见 components.css .nav-inner */
.ps-stack .ps-panel:last-of-type{margin-bottom:0}
/* 面板底色：沿用 5 个产品主题色，统一压暗保证白字对比度 */
/* 底色：蓝色系渐进（深→浅），替代 5 彩 */
#ps-panel-1{--st:#FFFFFF}
#ps-panel-2{--st:#F7F9FC}
#ps-panel-3{--st:#FFFFFF}
#ps-panel-4{--st:#F7F9FC}
#ps-panel-5{--st:#FFFFFF}
/* 主题色 --t 显式按 id 定义：components.css 用 .ps-panel:nth-child(N) 分配，
   但 section 首子元素是 sr-only h2，nth-child 整体错位一位（面板1吃到面板2的橙）。
   取值与 components.css 288-292 行一致 */
#ps-panel-1{--t:var(--blue)}
#ps-panel-2{--t:#FF7F00}
#ps-panel-3{--t:#303f9f}
#ps-panel-4{--t:#512da8}
#ps-panel-5{--t:#00796b}

.ps-stack .ps-panel{
  /* 钉在导航栏下方而非视口顶：卡片上边缘始终可见，内边距无需为导航留白 */
  position:sticky;top:var(--nav-h,73px);
  /* 高度随内容自适应（2026-10-08 用户要求去掉钉死一屏高）：兄弟 sticky 覆盖不依赖卡高，
     内容少的卡不再出现底部大片空白；覆盖时点随卡高自然变化 */
  overflow:hidden;display:flex;align-items:flex-start; /* 顶部对齐：居中会让标题离卡片上边随视口高度漂移 */
  /* 与导航/页脚同宽：container 1680 + 左右留白，面板收缩为居中圆角卡片 */
  width:calc(min(100%, 1680px) - 2 * var(--container-pad, 48px)); /* 与导航栏「内容」同宽：卡边对齐 logo 外缘与右侧按钮外缘，用同一变量随断点自动跟随 */
  margin:0 auto 24px;border:0;padding:0; /* 卡片间 24px 滚动间隔（用户选）；末张排除，避免与区块底部间距叠加 */ /* components.css 的 .ps-panel 自带 padding，会把内容整体下推 25px */
  background:var(--st);
  /* finch 签名：四角全圆 + 上抛阴影 */
  border-radius:26px;
  /* 边框跟卡的主题色（--t 各卡已定义）：35% 调色与 ps-params 描边同约定，避免纯色过跳 */
  border:1px solid color-mix(in srgb, var(--t, var(--line)) 35%, #fff);
  box-shadow:none; /* 用户要求去掉投影：白底浓投影显脏，靠圆角+描边界定卡片 */
}
/* B'方案雾化蒙层（2026-10-08）：白雾叠整卡（区别于内容层），覆盖比例由脚本写 --ps-fog（0→0.45）。
   内容被雾罩但始终清晰；pointer-events:none 不挡交互；panel 自带 sticky 定位 + overflow:hidden，
   ::after 以卡为定位基准、圆角自动裁切 */
.ps-stack .ps-panel::after{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--st,#fff);opacity:var(--ps-fog,0);
}
.ps-stack .ps-panel-inner{
  width:100%;max-width:1680px;margin:0 auto;
  /* 顶部对齐（非居中）：居中会让标题离卡片上边随视口高度漂移（1080 高时 ~250px）。
     上内边距 = 导航底边 73px + 呼吸，标题位置与视口高度无关 */
  padding:40px clamp(20px,2vw,32px) clamp(24px,4vh,48px); /* 顶部 40px（用户指定，原 24px） */
  display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(14px,2.2vh,24px);
  transform-origin:center top;will-change:transform,filter;
}
/* —— 原版内容布局回归（2026-10-02 01:09，用户要求保留原版排版）：
   ps-grid/ps-features/ps-params/ps-cta 沿用 components.css 原样式，
   此处仅做 100vh 适配压缩与纵向编排 —— */
.ps-stack .ps-panel-title{font-size:clamp(22px,2.6vw,36px);line-height:1.14;letter-spacing:-.02em;font-weight:500;color:var(--ink);margin:0}
/* 防裁切三件套：inner 子块禁收缩（否则 flex 压缩 + feature overflow:hidden 会裁字） */
.ps-stack .ps-panel-inner > *{flex-shrink:0}
.ps-stack .ps-features{min-height:0;align-self:stretch} /* components.css ≤900 设了 align-self:start，会阻止右列拉伸到画框高度 */
.ps-stack .ps-feature{flex:1 1 auto;overflow:visible} /* 拉伸填满画框高度；字号/内边距全部沿用 components.css 原版（p 14px、h4 clamp16-20、num 13px），不再压缩 */
/* 标题行：标题居左 + CTA 居右同一行（2026-10-02 用户要求） */
.ps-stack .ps-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,2vw,32px);flex-wrap:wrap}
.ps-stack .ps-panel-head .ps-panel-title{margin:0}
.ps-stack .ps-panel-head .ps-cta{margin:0;justify-content:flex-end;flex:0 0 auto}
.ps-stack .ps-panel-title span{display:block}
.ps-stack .ps-panel-title b{display:block;font-weight:800;font-style:italic;letter-spacing:-.015em}
.ps-stack .ps-panel-title::after{display:none}
/* ps-grid 沿用 components.css 双列（1.1fr .9fr）；画框高度改视口比例 */
.ps-stack .ps-board{
  /* 原版比例 4/3（components.css 301 行），限宽不限高：高度由比例算出，
     图片/视频 object-fit 沿用原版（图1/4/5 contain、图2/3 cover、视频 contain 深色底），
     不再出现 2:1 裁切。420px = 标题+参数带+CTA+间距+内边距 的纵向预算 */
  aspect-ratio:4/3;height:auto;width:100%;align-self:stretch;min-height:100%; /* 行高被右列文字撑高时画框跟随，保证等高 */
  max-width:calc((100vh - 420px) * 4 / 3);margin-inline:auto;
}
.ps-stack .ps-params,.ps-stack .ps-cta{margin:0}
/* —— 右下角进度 —— */
.ps-stack .ps-progress{display:none}

/* —— 窄桌面窗/预览面板（769~900px）：双列压缩 —— */
@media (min-width:769px) and (max-width:900px){
  /* components.css ≤900 把 ps-grid 改单列（内容超高必裁），ps-stack 内保持双列 */
  .ps-stack .ps-grid{grid-template-columns:1.1fr .9fr;gap:14px}
  .ps-stack .ps-panel-inner{padding-top:80px;padding-bottom:20px;gap:12px}
  .ps-stack .ps-panel-title{font-size:clamp(19px,2.6vw,26px)}
  .ps-stack .ps-param span{font-size:11px}
}
/* —— 矮窗口：压缩纵向 —— */
@media (max-height:780px) and (min-width:769px){
  /* 中间压缩档：880x660 复现内容 744 > 视口 660 溢出 84px（上下居中裁切），
     压 feature 卡 + 收窄左右内边距让文字少换行 */
  .ps-stack .ps-panel-inner{padding:40px 20px 16px;gap:10px}
  .ps-stack .ps-panel-title{font-size:clamp(17px,2.2vw,23px)}
  .ps-stack .ps-board{max-width:calc((100vh - 300px) * 4 / 3)}
}
@media (max-height:700px) and (min-width:769px){
  /* 极矮窗口兜底：只轻压字号与间距（原版 14px 需 ~711px 高） */
  .ps-stack .ps-panel-inner{padding:30px 20px 12px;gap:8px}
  .ps-stack .ps-panel-title{font-size:clamp(16px,2vw,20px)}
  .ps-stack .ps-features{gap:8px}
  .ps-stack .ps-feature{padding:13px 18px}
  .ps-stack .ps-feature-num{font-size:12px;padding:2px 8px;margin-bottom:3px}
  .ps-stack .ps-feature h4{font-size:15px;margin-bottom:2px}
  .ps-stack .ps-feature p{font-size:13px;line-height:1.55}
  .ps-stack .ps-board{max-width:calc((100vh - 270px) * 4 / 3)}
  .ps-stack .ps-params{padding:14px 20px}
  .ps-stack .ps-param strong{font-size:19px}
  .ps-stack .ps-param span{font-size:12px}
  .ps-stack .ps-cta .btn{padding:10px 18px;font-size:14px}
}
/* —— 手机：回普通文档流，保留饱和色区块 —— */
@media (max-width:768px){
  .ps-stack .ps-panel{position:static;height:auto;min-height:0}
  .ps-stack .ps-panel-head{flex-direction:column;align-items:flex-start;gap:14px}
  .ps-stack .ps-panel-head .ps-cta{justify-content:flex-start}
  .ps-stack .ps-panel-inner{padding:48px 24px;gap:18px}
  .ps-stack .ps-board{aspect-ratio:4/3;height:auto}
}
@media (prefers-reduced-motion: reduce){
  .ps-stack .ps-progress{transition:none}
}

/* —— sticky 杀手修复（2026-10-02 00:20）：components.css 给
   section.product-showcase 设了 overflow:hidden（原横向滑轨防溢出用），
   父容器非 visible 会让子级 position:sticky 直接失效（实测面板普通流滚过、
   毫无堆叠感——file:// 与 http:// 行为一致，与协议无关）。—— */
section.ps-stack{overflow:visible;padding:0}

/* sticky 杀手修复：components.css 给 section.product-showcase 设了 overflow:hidden（旧横向滑轨防溢出），父级非 visible 会让子级 sticky 失效——2026-10-02 用户 file:// 截图实锤 */
.ps-stack{overflow:visible;margin-bottom:clamp(40px,6vh,64px)} /* 卡片被顶出时与下个 section 的呼吸间隙。注意必须用 margin 不能用 padding：sticky 约束实测为 padding box，padding-bottom 会被面板压住不显形（2026-10-02 用户截图+实测 gap=0） */