/* =========================================================
   Intro Page (Page-specific layout only)
========================================================= */

/* 仅此页需要滚动：避免用 body!important 污染其他交互页 */
.page--scroll {
  min-height: 100dvh;
}

/* 如果你全站是 body 不滚动、page 内滚动：用这一条更安全 */
.page--scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* topbar 右侧占位区域（未来放按钮） */
.topbar__right {
  width: 40px;
  flex: 0 0 40px;
}

/* main container */
.intro {
  max-width: 800px;
  margin: 0 auto;
  padding: 90px 24px 60px 24px; /* 避开 Topbar */
}

/* hero */
.hero--center {
  text-align: center;
  margin-bottom: 60px;
}
.hero__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 2px;
}
.hero__subtitle {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* title strength helper (if not exist in ui.css) */
.title--strong { font-weight: 700; }

/* mobile */
@media (max-width: 600px) {
  .intro { padding-top: 80px; }
  .hero__title { font-size: 26px; }
}
/* =========================================================
   Hard unlock for intro page (fix cut-off / no scroll)
========================================================= */

html, body {
  height: auto;
}

/* 若 base.css 锁了 body 滚动，这里只对 intro 页解锁 */
body.intro-page {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 很多项目会把 .page 做成 position: fixed + overflow:hidden 用于桌面交互
   这会导致介绍页内容被裁切。intro 页强制改回文档流。 */
body.intro-page .page {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
}

/* 如果你的 topbar 是 fixed，页面会被遮住一截
   intro.css 本来就用 padding-top 让开，这里再稳一点 */
body.intro-page .intro {
  padding-bottom: 80px; /* 防止 footer/底部被安全区或容器裁切 */
}

/* intro: use document-flow footer, centered like ICP text */
body.intro-page .footer-icp {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 14px auto calc(10px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  z-index: auto;
}