/* page.css · v1.2 · 2026-11-06 · 楼层头统一为「序号 + 楼层名」同行；版面只保留楼层发丝线 */
:root {
  --ink: #1d2023;
  --body: #5b6066;
  --muted: #8b8f94;
  --accent: #b23a34;
  --accent-dark: #98302b;
  --line: rgba(15, 23, 42, 0.12);
  --line-soft: rgba(15, 23, 42, 0.06);
  --wash: #faf8f6;
  --paper: #ffffff;
  --max: 1200px;

  /* 字号阶梯：全站只用这 5 档，1rem = 16px（2026-11-06 整体下压一档） */
  --fs-display: clamp(2.125rem, 4.1vw, 3.25rem);   /* 34–52px 首屏主标题 */
  --fs-h2: 1.5rem;                                 /* 24px 楼层名 */
  --fs-h3: 1rem;                                   /* 16px 条目标题（与正文同号，靠字重分层） */
  --fs-body: 1rem;                                 /* 16px 正文 */
  --fs-small: 0.875rem;                            /* 14px 次级文字 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
h3,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

.shell {
  --gutter: 32px;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 56px;
}

/* ---------------- hero ---------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 48px;
  padding: 52px 0;
}

.hero-copy {
  min-width: 0;
  align-self: start; /* 左栏文字贴顶；下方空出的高度由右栏截图块撑出，留给后续内容 */
}

.overline {
  color: var(--muted);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
}

.hero h1 {
  margin: 14px 0 0;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
}

/* 两行标题：小字在上、大字在下，各占一行（两个 span，不用 <br>） */
.hero-line {
  display: block;
}

.hero-line--small {
  margin-bottom: 0.5em; /* 行间距随字号等比（≈大字的 0.275：1440≈16px / 1024≈12.4px / 390≈8.8px） */
  color: var(--body);
  font-size: 0.55em; /* 恒为大字的 55%，跟随 .hero h1 的字号档位 */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.hero-line--big {
  font-size: 1em; /* 跟随 .hero h1 的 --fs-display 与窄屏覆盖 */
  line-height: 1.04;
}

.hero-lead {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
}

.hero-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.ph {
  color: var(--muted);
  white-space: normal;
}

.hero-shot {
  min-width: 0;
}

.shot figcaption {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 6px;
  padding-top: 6px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* 首屏右栏：产品演示视频（HLS，1600×900，16:9）。
   容器按同一比例固定，视频用 contain，不裁边、不拉伸、不出黑边；
   高度由容器撑出，视频元数据加载前后不会引起布局跳动。 */
.hero-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
}

.hero-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}

/* ---------------- sections ---------------- */

.section {
  padding: 14px 0 0; /* 楼层间距：只留下一层的上边距，去掉上下叠加的 64+64 */
}

.sec-head {
  max-width: 760px;
  margin-bottom: 26px;
}

/* 楼层头（01）：与 02–04 一样整行铺满内容容器 */
.sec-head--floor {
  max-width: none;
}

/* 楼层头与内容的间距三档统一为 32px（覆盖窄屏 .sec-head 的 26px） */
.sec-head.sec-head--floor {
  margin-bottom: 26px;
}

/* 楼层头：01–06 共用这一处定义（参考主站 help-center 的 .help-sec-num + h2）
   序号与楼层名同一行、垂直居中；下方一条通栏发丝线 */
.floor-label {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.floor-label .num {
  display: inline-block;
  vertical-align: text-bottom; /* 文字基线变了以后，用文底对齐把红块稳回原位 */
  margin-right: 12px;
  padding: 4px 12px;
  background: var(--accent);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
}

.floor-label .floor-name {
  display: inline-block;
  vertical-align: baseline; /* 与标题按文字基线对齐（CJK 视觉上即底部齐平） */
  color: #0f172a;
  font-size: var(--fs-h2); /* 24px，走变量，不再硬编码 */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* 楼层标题：并入楼层头同一行（序号 → 楼层名 → 标题），字号小于楼层名、常规字重、颜色淡一档 */
.floor-label h2 {
  display: inline-block;
  vertical-align: baseline; /* 与楼层名同基线，不靠 margin/translate 凑 */
  max-width: 100%;
  margin: 0 0 0 10px;
  color: var(--body);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

/* 窄屏放不下一行时，标题换到下一行、与楼层头左边界对齐 */
@media (max-width: 600px) {
  .floor-label h2 {
    display: block;
    margin: 6px 0 0;
  }
}

.lead {
  margin-top: 12px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ---------------- audience ---------------- */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
}

.fit-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: baseline;
  padding: 13px 0 15px;
}

.fit-item .idx {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.fit-item h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}

.fit-item p {
  grid-column: 1 / -1; /* 说明段与序号同一条左边界，不额外缩进 */
  grid-row: 2;
  max-width: 46ch;
  margin-top: 3px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* ---------------- pillars ---------------- */

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  grid-template-rows: auto auto;
  column-gap: 60px;
  padding: 14px 0 0;
}

/* 楼层头独立成行，横跨整行；间隔由这里负责，内容不再叠 margin-top */
.pillar-head {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  margin-bottom: 26px;
}

.pillar-media {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center; /* 图文两栏高度不等时，图片块在文字块内垂直居中，上下留白相等 */
}

.pillar-features {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.pillar.is-flipped .pillar-media {
  grid-column: 2;
}

.pillar.is-flipped .pillar-features {
  grid-column: 1;
}

/* 04：左侧配图轮播移除后，六条要点改三列卡片（两行三列，正好排满）。
   白底、无阴影、无边框；卡片自身不带线，只在两行之间放一条通栏虚线。 */
#convenient .pillar-features {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
}

#convenient .feature {
  align-content: start;
  padding: 16px 0 20px;
}

/* 行间分隔：占满整行的空网格项，高度 0，只有一条虚线边框，因此不会断成三截 */
#convenient .conv-divider {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  border-top: 1px dashed var(--line);
  list-style: none;
}

/* 三列放不下时逐级降列：≤1080 收紧列间距，≤960 两列，≤760（含 390）单列 */
@media (max-width: 1080px) {
  #convenient .pillar-features {
    column-gap: 32px;
  }
}

@media (max-width: 960px) {
  #convenient .pillar-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 两列时通栏元素会占掉一整行、把卡片挤散，改为每行首尾各自由条目自身分隔 */
  #convenient .conv-divider {
    display: none;
  }

  #convenient .feature:nth-child(n+3) {
    border-top: 1px dashed var(--line);
  }
}

@media (max-width: 760px) {
  #convenient .pillar-features {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 单列：每两条之间一条虚线（共 5 条），不再有半截线 */
  #convenient .feature:nth-child(n+2) {
    border-top: 1px dashed var(--line);
  }
}

.shot {
  margin-bottom: 10px;
}

.shot:last-child {
  margin-bottom: 0;
}

.shot img {
  width: 100%;
  border-radius: 4px;
  background: var(--paper);
}

/* ---------------- 截图轮播 ---------------- */

.carousel {
  width: 100%;
}

.carousel-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
}

/* 02 仍用轮播：素材统一 2880×1800（16:10），容器按同一比例固定，切换时高度不变 */
#secure .carousel-frame {
  aspect-ratio: 16 / 10;
}

/* 交叉过渡：新图带 .is-incoming 压在上层，等它 decode 完成、透明度淡到 1 之后
   才撤掉旧图的 .is-active，所以任何一帧都至少有一张是不透明的。
   z-index：普通 1 < 当前 2 < 正在淡入的 3，13→01 这类 DOM 顺序回绕也不会盖反。 */
.carousel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.carousel-slide.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.carousel-slide.is-incoming {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-slide {
    transition: none;
  }
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding-top: 4px;
}

.carousel-cap {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-cap > span:first-child {
  margin-right: 8px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.carousel-dots {
  display: flex;
  flex: none;
  gap: 2px;
}

.dot {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-body);
  cursor: pointer;
}

.dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.34);
  transition: background 0.2s ease;
}

.dot:hover::after {
  background: rgba(15, 23, 42, 0.62);
}

.dot.is-active::after {
  background: var(--ink);
}

.dot:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -6px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-slide {
    transition: none;
  }
}

.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
  padding: 12px 0 14px;
}

.feature > div {
  display: contents; /* 拆掉包裹层，让 h3 与说明段直接参与网格 */
}

.feature .num {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.feature h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}

.feature p {
  grid-column: 1 / -1; /* 说明段与序号同一条左边界，不额外缩进 */
  max-width: 52ch;
  margin-top: 3px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* ---------------- faq ---------------- */

/* 主站 base 给 details 带了 1px 底线，这里显式归零 */
.faq-item {
  border: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
  padding: 15px 2px;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "−";
  color: var(--muted);
}

.faq-item summary:focus-visible {
  outline: 2px solid rgba(15, 23, 42, 0.24);
  outline-offset: 2px;
}

.faq-body {
  max-width: 76ch;
  padding: 0 24px 12px 2px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
}


/* ---------------- responsive ---------------- */

@media (max-width: 1080px) {
  .hero {
    gap: 36px;
  }

  .pillar {
    column-gap: 44px;
  }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 40px 0 44px;
  }

  .hero-copy {
    max-width: 640px;
  }

  .hero-shot {
    max-width: 760px;
  }

  .pillar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 0;
    padding: 14px 0 0;
  }

  .pillar-head,
  .pillar-media,
  .pillar-features,
  .pillar.is-flipped .pillar-head,
  .pillar.is-flipped .pillar-media,
  .pillar.is-flipped .pillar-features {
    grid-column: 1;
  }

  .pillar-head {
    grid-row: 1;
  }

  .pillar-media {
    grid-row: 2;
    max-width: 720px;
  }

  .pillar-features {
    grid-row: 3;
    margin-top: 20px;
  }

}

@media (max-width: 760px) {
  .shell {
    --gutter: 24px;
    padding-bottom: 48px;
  }

  .dot {
    width: 40px;
    height: 40px;
  }

  .hero {
    padding-top: 32px;
  }

  .hero h1 {
    font-size: clamp(1.875rem, 8vw, 2.375rem);
  }

  .section {
    padding: 10px 0 0;
  }

  .pillar {
    padding: 10px 0 0;
  }

  .fit-grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .sec-head {
    margin-bottom: 22px;
  }

  .faq-item summary {
    min-height: 48px;
  }

  .faq-body {
    padding-right: 12px;
  }
}

@media (max-width: 420px) {
  .shell {
    --gutter: 18px;
    padding-bottom: 44px;
  }

  .hero {
    padding-top: 26px;
  }

  .hero h1 {
    font-size: 1.875rem;
  }

}

/* ===== 主站页眉/页脚衔接（2026-11-06） ===== */
.page-wrapper {
  background: var(--paper);
}

/* 页眉 sticky 高 60px：锚点跳转不被页眉盖住 */
.shell [id] {
  scroll-margin-top: calc(var(--header-h, 60px) + 16px);
}

/* ===== 图标字体同源（主站 webfonts 无 CORS 头，跨域会被浏览器拦截） ===== */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(webfonts/fa-solid-900.woff2) format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(webfonts/fa-regular-400.woff2) format("woff2");
}

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(webfonts/fa-brands-400.woff2) format("woff2");
}