/* ==========================================================================
   Shadowrocket官方下载 · components.css
   首屏装置 / tab / iOS 分组列表 / FAQ / 术语卡 / App Store 按钮 /
   事实胶囊行 / 官方截图 / 设备入口卡 / 文章卡 / callout / dl-fab /
   徽章 / 表格 / 深色大卡 / 文末引导卡
   ========================================================================== */

/* ==========================================================================
   首屏装置:深森林绿画布 + iPhone 竖屏轮廓 + App Store 商品信息卡
   ========================================================================== */
.hero{
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--head-h) - var(--peek-h));
  padding-top:40px;
  padding-bottom:56px;
}

@supports (height:100svh){
  .hero{min-height:calc(100svh - var(--head-h) - var(--peek-h))}
}

.hero-inner{
  display:flex;
  align-items:center;
  gap:clamp(40px,5vw,76px);
}

.hero-copy{
  flex:1 1 0;
  min-width:0;
  max-width:660px;
}

.hero-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}

.lock-logo{
  display:block;
  width:26px;
  height:26px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  object-fit:contain;
}

.lock-name{
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--text);
}

.lock-sep{
  width:1px;
  height:14px;
  background:var(--border);
  flex:0 0 auto;
}

.lock-note{
  font-size:12.5px;
  color:var(--text-muted);
}

.hero-title{
  margin:0 0 20px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px,3.4vw,48px);
  line-height:1.06;
  letter-spacing:-.035em;
  color:var(--text);
  text-wrap:balance;
}

.hero-title .accent{color:var(--accent-dark)}

@supports (background-clip:text){
  .hero-title .accent{
    background-image:linear-gradient(96deg,var(--accent-dark) 6%,var(--accent) 94%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.hero-lede{
  margin:0 0 30px;
  max-width:600px;
  font-size:17px;
  line-height:1.75;
  color:var(--text-muted);
}

.hero-lede strong{font-weight:700;color:var(--accent-dark)}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}

.hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}

.fact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:7px 13px;
  border:1px solid var(--accent-38);
  border-radius:var(--r-pill);
  background:var(--accent-06);
  box-shadow:var(--halo-chip);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--accent-dark);
  white-space:nowrap;
}

.fact svg{
  width:13px;
  height:13px;
  color:var(--accent-mid);
}

.hero-devices{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 28px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.dev{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--text-muted);
  transition:color .18s ease;
}

.dev svg{
  width:18px;
  height:18px;
  color:var(--accent-dark);
  opacity:.85;
  flex-shrink:0;
  transition:color .18s ease,opacity .18s ease;
}

.dev:hover{color:var(--text)}
.dev:hover svg{color:var(--accent);opacity:1}

.hero-visual{flex:0 0 auto}

.hero-canvas{
  position:relative;
  height:clamp(420px,62vh,600px);
  aspect-ratio:5 / 6;
  border-radius:var(--r-canvas);
  background:var(--accent-dark);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-canvas);
}

.canvas-grid{
  position:absolute;
  inset:-25%;
  z-index:1;
  background-image:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 30px);
  transform:rotate(-11deg);
}

.canvas-glow{
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(118% 76% at 76% 12%,var(--accent-18) 0%,transparent 62%);
}

.canvas-sweep{
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:-70%;
  width:70%;
  z-index:3;
  background:linear-gradient(100deg,transparent 0%,var(--sweep-band) 48%,transparent 100%);
  filter:blur(10px);
  animation:canvas-sweep 9s ease-in-out infinite alternate;
}

@keyframes canvas-sweep{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(300%,0,0)}
}

.phone{
  position:absolute;
  right:7%;
  top:50%;
  z-index:4;
  height:74%;
  aspect-ratio:1 / 2.02;
  border-radius:34px;
  background:linear-gradient(158deg,var(--accent-lite) 0%,var(--accent) 24%,var(--accent-mid) 58%,var(--accent-dark) 100%);
  box-shadow:var(--shadow-phone);
  transform:translateY(-50%);
}

.card-slot{
  position:absolute;
  left:6%;
  top:50%;
  z-index:5;
  width:60%;
  transform:translateY(-50%);
}

.store-card{
  padding:16px 18px;
  border-radius:var(--r-card);
  background:var(--bg);
  color:var(--text);
  box-shadow:var(--shadow-card);
  animation:card-float 6s ease-in-out infinite;
}

@keyframes card-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.store-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

.store-logo{
  display:block;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:var(--r-mark);
  object-fit:contain;
}

.store-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.store-name{
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text);
}

.store-kind{
  font-size:11.5px;
  line-height:1.4;
  color:var(--text-muted);
}

.store-rows{margin:0;padding:0}

.store-row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}

.store-row dt{
  font-size:11.5px;
  line-height:1.4;
  color:var(--text-muted);
}

.store-row dd{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  color:var(--text);
  overflow-wrap:anywhere;
}

.buy-pill{
  display:inline-flex;
  align-items:center;
  margin-top:13px;
  padding:6px 13px;
  border:1.5px solid var(--accent-55);
  border-radius:var(--r-pill);
  background:var(--accent-06);
  font-size:12.5px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--accent-dark);
}

.canvas-caption{
  position:absolute;
  left:6%;
  bottom:6.5%;
  z-index:5;
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.08em;
  color:var(--on-dark-72);
}

.canvas-caption svg{
  width:13px;
  height:13px;
  color:var(--success);
}

/* 下一区块边缘 */
.peek{
  padding-top:36px;
  padding-bottom:80px;
  border-top:1px solid var(--border);
}

.peek-eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px;
  font-size:12.5px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--text-muted);
}

.peek-dot{
  width:6px;
  height:6px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-10);
}

.peek-title{
  margin:0;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--text);
}

/* ==========================================================================
   Tab 组件(通用)
   ========================================================================== */
.tabs{min-width:0}

.tab-rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text-muted);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.tab:hover{
  color:var(--text);
  border-color:var(--accent-55);
  box-shadow:var(--halo-chip);
}

.tab[aria-selected="true"]{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:var(--bg);
  box-shadow:var(--shadow-btn);
}

.tab-panel{
  min-width:0;
}

.tab-panel[hidden]{display:none!important}

.tab-panels{margin-top:24px;min-width:0}

/* ==========================================================================
   能力清单:设置页清单 × 深绿详情卡
   ========================================================================== */
.feature-switch{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  align-items:start;
}

.ios-panel{
  min-width:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.ios-list{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.ios-row{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:62px;
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:transparent;
  color:var(--text);
  text-align:left;
  transition:background .18s ease;
}

.ios-row:first-child{border-top:0}

.ios-row:hover{background:var(--bg-panel)}

.ios-row[aria-selected="true"]{background:var(--accent-06)}

.ios-row-label{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0;
  color:var(--text);
}

.ios-row[aria-selected="true"] .ios-row-label{color:var(--accent-dark)}

.ios-row-hint{
  flex:1 1 auto;
  min-width:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-muted);
  text-align:right;
}

.ios-row-chev{
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:var(--text-muted);
  transition:color .18s ease,transform .18s ease;
}

.ios-row[aria-selected="true"] .ios-row-chev{
  color:var(--accent-dark);
  transform:translateX(2px);
}

.feature-detail{min-width:0}

.detail-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  aspect-ratio:5 / 4;
  padding:clamp(24px,3vw,38px);
  border-radius:var(--r-canvas);
  background:var(--accent-dark);
  color:var(--on-dark-72);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-canvas);
}

.detail-panel .detail-grid{
  position:absolute;
  inset:-25%;
  z-index:0;
  background-image:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 30px);
  transform:rotate(-11deg);
  pointer-events:none;
}

.detail-panel > *{position:relative;z-index:1}

.detail-tag{
  margin:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-60);
}

.detail-title{
  margin:0;
  color:var(--bg);
  font-size:clamp(20px,2vw,26px);
}

.detail-text{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--on-dark-72);
}

.detail-code{
  margin-top:auto;
  padding:10px 14px;
  border:1px solid var(--on-dark-16);
  border-radius:var(--r-card-sm);
  background:var(--on-dark-06);
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.6;
  color:var(--success);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

.detail-panel code{
  background:none;
  color:var(--success);
  padding:0;
}

/* ==========================================================================
   长页分类跳转导航
   ========================================================================== */
.toc{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 32px;
  padding:0;
  list-style:none;
  min-width:0;
}

.toc a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 15px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.toc a:hover{
  color:var(--accent-dark);
  border-color:var(--accent-55);
  box-shadow:var(--halo-chip);
}

/* 窄屏:长目录项(ja/ko 等)允许折行,避免胶囊撑破内容列 */
@media (max-width:640px){
  .toc a{
    max-width:100%;
    padding:8px 15px;
    line-height:1.45;
    white-space:normal;
  }
}

/* ==========================================================================
   FAQ 折叠项
   ========================================================================== */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.faq-item{
  min-width:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card-sm);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.faq-q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  min-height:52px;
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  color:var(--text);
  cursor:pointer;
  list-style:none;
  transition:background .18s ease;
}

.faq-q::-webkit-details-marker{display:none}

.faq-q:hover{background:var(--bg-panel)}

.faq-q::after{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 auto;
  margin-top:8px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform .2s ease,border-color .2s ease;
}

.faq-item[open] .faq-q::after{
  transform:rotate(-135deg);
  border-color:var(--accent-dark);
}

.faq-a{
  padding:0 18px 18px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--text-muted);
}

.faq-a p{margin:0 0 .8em}

/* ==========================================================================
   术语卡
   ========================================================================== */
.term-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:20px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.term-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent-38);
}

.term-en{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--accent-dark);
  overflow-wrap:anywhere;
}

.term-card p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ==========================================================================
   App Store 按钮组件(自绘,不用官方徽章位图)
   ========================================================================== */
.store-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:10px 24px;
  border-radius:var(--r-pill);
  background:var(--accent-dark);
  color:var(--bg);
  box-shadow:var(--shadow-btn);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.store-btn:hover{
  background:var(--accent-dark-hi);
  transform:translateY(-2px);
  box-shadow:var(--shadow-btn-hi);
}

.store-btn svg{
  width:22px;
  height:22px;
  flex:0 0 auto;
}

.store-btn-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  text-align:left;
}

.store-btn-top{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--on-dark-72);
}

.store-btn-main{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.005em;
}

.store-btn--light{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}

.store-btn--light:hover{
  background:var(--bg);
  border-color:var(--accent-60);
  box-shadow:var(--halo-chip);
}

.store-btn--light .store-btn-top{color:var(--text-muted)}

/* ==========================================================================
   官方截图
   ========================================================================== */
.official-shot{
  margin:0;
  width:100%;
  max-width:280px;
  flex-shrink:0;
  min-width:0;
}

.official-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--border);
}

.official-shot figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

.shot-row{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}

/* ==========================================================================
   设备入口卡
   ========================================================================== */
.device-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:24px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.device-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent-38);
}

.device-icon{
  width:40px;
  height:40px;
  color:var(--accent-dark);
}

.device-name{
  margin:0;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--text);
}

.device-card p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

.device-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:8px;
  font-size:14.5px;
  font-weight:700;
  color:var(--accent-dark);
}

.device-link svg{
  width:15px;
  height:15px;
  transition:transform .18s ease;
}

.device-card:hover .device-link svg{transform:translateX(3px)}

/* ==========================================================================
   博客文章卡
   ========================================================================== */
.post-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:22px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.post-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent-38);
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  color:var(--text-muted);
}

.post-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.015em;
  color:var(--text);
}

.post-card p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.post-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  padding-top:6px;
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
}

.post-more svg{width:14px;height:14px}

/* ==========================================================================
   引用块 / 提示块
   ========================================================================== */
.callout{
  display:flex;
  gap:12px;
  min-width:0;
  padding:16px 18px;
  border:1px solid var(--accent-38);
  border-left:3px solid var(--accent);
  border-radius:var(--r-card-sm);
  background:var(--accent-06);
  color:var(--text);
  font-size:15.5px;
  line-height:1.7;
}

.callout svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin-top:4px;
  color:var(--accent-mid);
}

.callout p{margin:0 0 .7em;min-width:0;overflow-wrap:anywhere}
.callout p:last-child{margin-bottom:0}

.callout--warn{
  border-color:var(--border-strong);
  border-left-color:var(--warn);
  background:var(--bg-panel);
}

.callout--warn svg{color:var(--warn)}

/* ==========================================================================
   右下角常驻下载浮层(仅博客文章页按抽签使用)
   ========================================================================== */
.dl-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:30;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:var(--r-pill);
  background:var(--accent-dark);
  color:var(--bg);
  font-size:14.5px;
  font-weight:700;
  box-shadow:var(--shadow-btn);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.dl-fab:hover{
  background:var(--accent-dark-hi);
  transform:translateY(-2px);
  box-shadow:var(--shadow-btn-hi);
}

.dl-fab svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

/* ==========================================================================
   徽章 / 标签
   ========================================================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow:hidden;
  padding:4px 11px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  white-space:nowrap;
}

.badge--accent{
  border-color:var(--accent-38);
  background:var(--accent-06);
  color:var(--accent-dark);
}

.badge--mono{font-family:var(--font-mono)}

.badge svg{
  width:12px;
  height:12px;
  flex:0 0 auto;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  min-width:0;
}

/* ==========================================================================
   表格
   ========================================================================== */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}

.data-table th{
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--text);
  font-weight:700;
  text-align:left;
  white-space:nowrap;
}

.data-table td{
  padding:12px 14px;
  border:1px solid var(--border);
  color:var(--text-muted);
  vertical-align:top;
  overflow-wrap:anywhere;
}

/* ==========================================================================
   正文排版
   ========================================================================== */
.prose{
  min-width:0;
  max-width:74ch;
}

.prose h2{
  margin:2.2em 0 .6em;
  font-size:clamp(24px,2.4vw,30px);
}

.prose h3{
  margin:1.8em 0 .5em;
}

.prose ul,.prose ol{
  margin:0 0 1.2em;
  padding-left:1.35em;
}

.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:.4em 0}

.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

.prose figure{margin:1.6em 0}

/* ==========================================================================
   深色大卡(近黑 / 深森林绿)
   ========================================================================== */
.slab{
  position:relative;
  min-width:0;
  padding:clamp(28px,4vw,56px);
  border-radius:var(--r-canvas);
  background:var(--bg-panel2);
  color:var(--on-dark-72);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-canvas);
}

.slab--green{background:var(--accent-dark)}

.slab > *{position:relative;z-index:1}

.slab h2,.slab h3{color:var(--bg)}

.slab p{color:var(--on-dark-72)}

.slab .eyebrow{color:var(--on-dark-60)}

.slab code{
  background:var(--on-dark-06);
  color:var(--on-dark-72);
  padding:2px 6px;
  border-radius:6px;
}

.slab-grid{
  position:absolute;
  inset:-25%;
  z-index:0;
  background-image:
    repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px 30px);
  transform:rotate(-11deg);
  pointer-events:none;
}

.slab-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.slab-list li{
  display:flex;
  gap:12px;
  min-width:0;
  font-size:15.5px;
  line-height:1.7;
}

.slab-list svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  margin-top:6px;
  color:var(--success);
}

/* ==========================================================================
   文末 App Store 引导卡
   ========================================================================== */
.endcap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-width:0;
  padding:clamp(24px,3vw,40px);
  border-radius:var(--r-canvas);
  background:var(--accent-dark);
  color:var(--on-dark-72);
  box-shadow:var(--shadow-canvas);
}

.endcap h2{
  margin:0 0 8px;
  color:var(--bg);
  font-size:clamp(22px,2.2vw,28px);
}

.endcap p{
  margin:0;
  max-width:52ch;
  font-size:15.5px;
  line-height:1.7;
  color:var(--on-dark-72);
}

.endcap .store-btn{
  background:var(--bg);
  color:var(--text);
}

.endcap .store-btn:hover{
  background:var(--bg);
}

.endcap .store-btn-top{color:var(--text-muted)}

/* ==========================================================================
   响应式:首屏装置与能力区
   ========================================================================== */
@media (max-width:1120px){
  .feature-switch{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
}

@media (max-width:960px){
  .hero{
    min-height:0;
    padding-top:32px;
    padding-bottom:48px;
  }

  .hero-inner{
    flex-direction:column;
    align-items:stretch;
    gap:44px;
  }

  .hero-copy{max-width:none}

  .hero-visual{
    display:flex;
    justify-content:center;
  }

  .hero-canvas{
    height:auto;
    width:100%;
    max-width:440px;
  }

  .hero-title{font-size:clamp(26px,7.4vw,30px);letter-spacing:-.03em}

  .peek{padding-top:32px;padding-bottom:64px}
  .peek-title{font-size:20px}

  .feature-switch{grid-template-columns:minmax(0,1fr)}

  .detail-panel{
    aspect-ratio:auto;
    min-height:340px;
  }

  .ios-row-hint{display:none}
}

@media (max-width:640px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-facts{gap:8px}
  .fact{font-size:11.5px;padding:6px 11px}
  .hero-devices{gap:10px 18px}

  .card-slot{width:64%;left:5%}
  .store-card{padding:14px 15px}
  .store-name{font-size:15px}
  .store-row dd{font-size:11.5px}
  .buy-pill{font-size:11.5px;padding:5px 11px}

  .endcap{flex-direction:column;align-items:flex-start}

  .dl-fab{right:14px;bottom:14px;font-size:13.5px;padding:0 15px}
}

@media (prefers-reduced-motion:reduce){
  .store-card,
  .canvas-sweep{animation:none}
}

/* ==========================================================================
   design-preview 专用(site 页面不使用)
   ========================================================================== */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}

.swatch{
  min-width:0;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card-sm);
}

.swatch-chip{height:64px}

.swatch-meta{
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.6;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

.swatch-name{
  display:block;
  color:var(--text);
  font-weight:600;
}

.demo-block{
  min-width:0;
  margin-bottom:20px;
  padding:24px;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-card);
  background:var(--bg);
}

.demo-label{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.demo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.shot-ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:280px;
  aspect-ratio:750 / 1334;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r-shot);
  background:linear-gradient(160deg,var(--bg-panel),var(--bg));
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.6;
  text-align:center;
}

.logo-ph{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  border:1px dashed var(--border-strong);
}

.logo-ph--sm{width:26px;height:26px}
.logo-ph--md{width:38px;height:38px;border-radius:var(--r-mark)}