/* ==========================================================================
   Shadowrocket 官方下载站 · 首页专属样式
   只放首页独有的收尾行、界面预览与窄屏收紧规则,
   base.css / components.css 里已有的组件样式一律不重复定义。
   ========================================================================== */

/* --------------------------------------------------------------------------
   设备与商店入口:补充说明行 + App Store 按钮 + 获取步骤链接
   -------------------------------------------------------------------------- */

.device-foot{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px 28px;
  flex-wrap:wrap;
}

.device-foot-note{
  margin:0;
  max-width:560px;
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-on-light-muted);
}

.device-more{margin:20px 0 0;}

/* --------------------------------------------------------------------------
   界面预览(官方截图两枚,满幅显示,不改动 official-shot 内部规则)
   -------------------------------------------------------------------------- */

.home-shots{
  margin-top:46px;
  padding-top:30px;
  border-top:1px solid var(--border-light);
}

.home-shots-label{
  margin:0 0 22px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-on-light-muted);
}

/* --------------------------------------------------------------------------
   正版与事实区:胶囊行 / 提示块 / 事实卡片的纵向节奏
   -------------------------------------------------------------------------- */

.facts-row{margin-top:30px;}
.callout-row{margin-top:24px;}
.verify-grid{margin-top:30px;}

/* --------------------------------------------------------------------------
   收尾两个分区的"查看全部"链接
   -------------------------------------------------------------------------- */

.faq-more,
.blog-more{margin:26px 0 0;}

/* --------------------------------------------------------------------------
   窄屏收紧:首屏纵向留白压缩,装饰装置等比缩小避免被 hero 裁切
   -------------------------------------------------------------------------- */

@media (max-width:1023px){
  .hero{
    padding-top:28px;
    padding-bottom:36px;
  }
}

@media (max-width:430px){
  .stage-wrap{height:322px;}
  .stage{transform:scale(.56);}
}

@media (max-width:350px){
  .stage-wrap{height:284px;}
  .stage{transform:scale(.49);}
}