/* ==========================================================================
   pages/treap.css — TREAP 萃谱页面（Aurora 风格）
   --------------------------------------------------------------------------
   风格来源：Hallmark · Aurora（atmospheric 主题族）
   要点：冷调深色画布 + 两团柔光 + 等宽小标签 + 超大标题 + 终端式信息块；
        单一强调色（品牌橙，用量克制）；卡片用细描边而不是重投影。
   共享组件（.glow-field / .spot-card / .outline-word）见 css/blocks.css；
   页眉 / 页脚 / 业务线标识带 / FAQ 沿用全站外壳。
   ========================================================================== */

.page--treap {
  --tp-paper: #0b0704; /* 暖调近黑（贴品牌橙一侧） */
  --tp-ink: #f8f2ea;
  --tp-body: rgba(238, 228, 216, 0.74);
  --tp-muted: rgba(226, 208, 188, 0.46);
  --tp-line: rgba(255, 236, 214, 0.1);
  --tp-panel: rgba(255, 236, 214, 0.03);
  --tp-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  position: relative;
  background: var(--tp-paper);
  color: var(--tp-body);
}

/* 两团柔光：参考 Aurora 演示页的色块位置——右侧一大团（画面主体光）、左上角一小团；
   固定不随滚动、不闪烁，色相全部落在品牌橙一侧 */
.page--treap::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(820px 640px at 88% 46%, rgb(var(--c-accent-rgb) / 0.13), transparent 64%),
    radial-gradient(700px 560px at 4% 6%, rgba(255, 168, 76, 0.09), transparent 62%);
}

/* 跟随鼠标的暖光：--mx / --my 由 js/pointer.js 写在 <body data-pointer> 上；
   触屏与 prefers-reduced-motion 下不绑定，退化为静止的默认位置 */
.page--treap::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    560px 560px at var(--vx, 50%) var(--vy, 50%),
    rgba(255, 168, 76, 0.1),
    transparent 66%
  );
}

/* 触屏没有指针：跟随光会静止成一团，直接不显示 */
@media (hover: none) {
  .page--treap::after {
    display: none;
  }
}

/* 页脚原本是不透明底色，会挡住跟随光；在 TREAP 页改成透明，让暖光贯穿整页 */
.page--treap .site-footer {
  background: transparent;
}

.page--treap > main,
.page--treap > .site-footer {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ 首屏 */
.tp-hero {
  /* 首屏贴近页眉；底部留白收窄，让业务线标识带紧跟其后（与首页节奏一致） */
  padding-top: clamp(72px, 8vw, 140px);
  padding-bottom: clamp(20px, 2.6vw, 44px);
}

/* 桌面端首屏高度对齐设计常量（首页 .home-hero 同为 706px），
   让下方业务线标识带与首页落在同一位置 */
@media (min-width: 981px) {
  .tp-hero {
    min-height: 706px;
  }
}

.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tp-muted);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.tp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 12px rgb(var(--c-accent-rgb) / 0.85);
}

.tp-display {
  margin-top: 26px;
  max-width: 900px;
  color: var(--tp-ink);
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.tp-hero__sub {
  margin-top: 28px;
  max-width: 620px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.9;
  letter-spacing: var(--ls-body);
}

.tp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.tp-status {
  padding: 9px 16px;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-pill);
  color: var(--tp-muted);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

/* ------------------------------------------------------------ 编号章节 */
.tp-section {
  padding-block: clamp(64px, 8vw, 128px);
  border-top: 1px solid var(--tp-line);
}

.tp-section__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: start;
}

.tp-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--tp-muted);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
}

.tp-num {
  color: var(--c-accent);
  font-size: 13px;
}

.tp-title {
  max-width: 760px;
  color: var(--tp-ink);
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.tp-title--big {
  font-size: clamp(34px, 4.6vw, 68px);
}

.tp-text {
  margin-top: 24px;
  max-width: 680px;
  font-size: var(--fs-lead);
  line-height: 1.95;
  letter-spacing: var(--ls-body);
}

/* 三步 */
.tp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.tp-step {
  padding: 26px;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-lg);
  background: var(--tp-panel);
}

.tp-step__num {
  color: var(--c-accent);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.tp-step h3 {
  margin-top: 16px;
  color: var(--tp-ink);
  font-size: var(--fs-h5);
}

.tp-step p {
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 四格 */
.tp-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.tp-grid2 li {
  padding: 26px 28px;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-lg);
  background: var(--tp-panel);
}

.tp-grid2 b {
  display: block;
  color: var(--tp-ink);
  font-size: var(--fs-h5);
  font-weight: 500;
}

.tp-grid2 span {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 技术与服务：左右两栏 */
.tp-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-top: 44px;
}

.tp-duo__title {
  color: var(--c-accent);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
}

.tp-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.tp-list b {
  display: block;
  color: var(--tp-ink);
  font-size: var(--fs-lead);
  font-weight: 500;
}

.tp-list span {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.8;
}

/* FAQ */
.tp-faq {
  max-width: 900px;
  margin-top: 44px;
}

/* 收尾 */
.tp-section--cta .tp-text {
  max-width: 620px;
}

/* ------------------------------------------------- 06 · 运行方式（六张图） */
.tp-flows__intro {
  max-width: 760px;
}

.tp-flows {
  margin-top: clamp(28px, 3.6vw, 48px);
}

.tp-flows__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-flows__tab {
  padding: 10px 16px;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tp-muted);
  font-family: var(--tp-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.tp-flows__tab:hover {
  color: var(--tp-ink);
  border-color: rgb(var(--c-accent-rgb) / 0.45);
}

.tp-flows__tab.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.tp-flows__panels {
  margin-top: 22px;
}

.tp-flows__panel {
  display: none;
  margin: 0;
}

.tp-flows__panel.is-active {
  display: block;
}

.tp-flows__frame {
  display: block;
  width: 100%;
  /* 初始高度；js/treap-flows.js 会按图内实际内容把它改成真实高度，避免内部滚动条 */
  height: 880px;
  min-height: 480px;
  border: 1px solid var(--tp-line);
  border-radius: var(--r-lg);
  background: var(--tp-paper);
}

/* TREAP 专属 · 免责声明与法律条款入口（页脚上方独立区域）
   说明：用户协议 / 隐私政策 / 未成年人保护条款围绕 TREAP 项目制定，
   因此入口只在 TREAP 页展示（移动端抽屉另有同名入口），不在其他页面重复出现。 */
.tp-legal-note {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--tp-line);
  border-bottom: 1px solid var(--tp-line);
  background: linear-gradient(180deg, rgba(255, 236, 214, 0.035), rgba(255, 236, 214, 0.012));
}

.tp-legal-note__label {
  margin-bottom: 14px;
  color: var(--tp-muted);
  font-family: var(--tp-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
}

.tp-legal-note__text {
  /* 桌面端整行显示（不设 max-width）；窄屏由容器宽度自然换行 */
  max-width: none;
  color: var(--tp-ink);
  font-size: var(--fs-lead);
  line-height: 1.9;
  text-wrap: pretty;
}

.tp-legal-note__meta {
  max-width: none;
  margin-top: 14px;
  color: var(--tp-muted);
  font-size: var(--fs-label);
  line-height: 1.8;
  text-wrap: pretty;
}

.tp-legal-note__meta a {
  color: var(--c-accent-soft, var(--tp-ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- 响应式 */
@media (max-width: 980px) {
  .tp-section__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tp-steps,
  .tp-grid2,
  .tp-duo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .tp-hero {
    padding-top: 88px;
  }

  .tp-section {
    padding-block: 64px;
  }

  /* 窄屏：不做横向滑块，交给 iframe 内部自适应 + 页面纵向滚动 */
  .tp-flows__frame {
    min-height: 520px;
  }
}