/* 场景介绍页（SEO 落地页）· 沿用 DESIGN.md 的 Airbnb 规范：
   top-nav 80px + hairline；listing-detail 式双栏；photo-first 卡片；平铺无阴影，hairline 分隔 */
body.lp { background: var(--bg); }

.lp-top {
  height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 48px; border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
.lp-brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -0.2px;
}
.lp-top-cta {
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none;
  padding: 10px 16px; border-radius: 9999px; transition: background 0.2s var(--ease);
}
.lp-top-cta:hover { background: var(--soft); }

.lp-main { max-width: 1080px; margin: 0 auto; padding: 24px 48px 64px; }
.lp-crumb { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.lp-crumb a { color: var(--text); text-decoration: none; }
.lp-crumb a:hover { text-decoration: underline; }

.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 32px 0 48px; }
.lp-hero h1 { font-size: 28px; font-weight: 700; line-height: 1.43; margin: 0; }
.lp-lead { font-size: 16px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; max-width: 30em; }
.lp-cta { margin-top: 24px; text-decoration: none; }
.lp-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.lp-figure { margin: 0; }
.lp-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--paper-2); }
.lp-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

.lp-section { padding: 48px 0; border-top: 1px solid var(--line); }
.lp-section h2 { font-size: 22px; font-weight: 500; line-height: 1.18; letter-spacing: -0.44px; margin-bottom: 24px; }

.lp-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-steps li { counter-increment: step; display: grid; gap: 4px; }
.lp-steps li::before {
  content: counter(step); width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--text); color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 8px;
}
.lp-steps strong { font-size: 16px; font-weight: 600; line-height: 1.25; }
.lp-steps span { font-size: 14px; line-height: 1.43; color: var(--muted); }

.lp-faq dt { font-size: 16px; font-weight: 600; line-height: 1.25; padding-top: 16px; }
.lp-faq dd { font-size: 16px; line-height: 1.5; color: var(--ink-2); padding: 4px 0 16px; border-bottom: 1px solid var(--line-soft); }
.lp-faq dd:last-child { border-bottom: none; }

.lp-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 16px; }
.lp-other { display: grid; gap: 8px; text-decoration: none; color: var(--text); font-size: 16px; font-weight: 600; }
.lp-other img, .lp-ph {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--paper-2);
  transition: transform 0.4s var(--ease);
}
.lp-other:hover img { transform: scale(1.03); }

.lp-foot { border-top: 1px solid var(--line); padding: 24px 48px 32px; text-align: center; font-size: 13px; color: var(--muted); }
.lp-foot a { color: var(--text); text-decoration: none; }

.lp-404 { text-align: center; padding-top: 20vh; }

/* ---------- 平板 ---------- */
@media (max-width: 1128px) {
  .lp-top, .lp-main { padding-left: 24px; padding-right: 24px; }
  .lp-hero { gap: 32px; }
}

/* ---------- 手机：单栏；CTA 变底部固定条 ---------- */
@media (max-width: 743px) {
  .lp-top { height: 64px; padding: 0 16px; }
  .lp-top-cta { display: none; }
  .lp-main { padding: 16px 16px 120px; }
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 0 32px; }
  .lp-figure { order: -1; }
  .lp-hero h1 { font-size: 26px; }
  .lp-cta {
    position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
    margin: 0; width: auto;
  }
  .lp-section { padding: 32px 0; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}