/* ============================================================================
   Signeve 落地页
   ---------------------------------------------------------------------------
   读之前先知道三件事：

   1. **这个文件里没有一处写死的色值或像素级字号。** 颜色全部走 tokens.css
      的语义令牌（--surface-* / --text-* / --border-* / --brand-* / --accent-*），
      间距与圆角走 --radius-* 与一套 4px 基准的步进。改色板只改 tokens.css。
      README 把这条列为三份约定之一 —— 落地页没有豁免权。

   2. **香槟（--accent-*）只出现在「需要人动手」的地方**：主按钮、空字段框、
      步骤序号。它不作大面积铺色。这是从签署页延续下来的语义 —— 用户在
      签署页学会「香槟=该我做」，到落地页看到同样的颜色就知道哪里要动。

   3. **没有渐变、没有玻璃拟态、没有大面积投影。** 一个做电子签署的产品
      靠「安静」建立可信度，不靠炫技。整页唯一的"重"视觉是演示卡片下面
      那层阴影，它的作用是把白纸从灰底上托起来 —— 和签署页用同一个令牌，
      所以两边看上去是同一个产品。
   ========================================================================== */

/* ── 基准 ─────────────────────────────────────────────────────────────── */

.lp {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp img { max-width: 100%; height: auto; display: block; }

.lp a { color: inherit; text-decoration: none; }

.lp-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 中文正文的行长控制在 34-38 个汉字。再宽眼睛回行会找不到下一行的开头 ——
   这是中文排版比西文更容易出问题的地方（汉字是等宽方块，一行挤太多会变成
   板砖）。标题不受此限。 */
.lp-lede,
.lp-body,
.lp-caption,
.lp-aside {
  max-width: 38em;
}

.lp-lede--narrow { max-width: 30em; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.lp-nav-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.lp-brand img { border-radius: 7px; }

.lp-nav-links {
  display: flex;
  gap: 24px;
  margin-left: 8px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lp-nav-links a {
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.lp-nav-links a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent-500);
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── 按钮 ─────────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--size-control-md);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.lp-btn--lg { min-height: var(--size-control-lg); padding: 0 24px; font-size: var(--text-md); }
.lp-btn--block { width: 100%; }

.lp-btn--primary {
  background: var(--surface-brand);
  color: var(--text-inverse);
  box-shadow: var(--shadow-xs);
}

.lp-btn--primary:hover {
  background: var(--brand-700);
  box-shadow: var(--shadow-sm);
}

.lp-btn--primary:active { transform: translateY(1px); }

.lp-btn--outline {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.lp-btn--outline:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.lp-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.lp-btn--ghost:hover { color: var(--text-primary); background: var(--surface-hover); }

.lp-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── 标题与文字 ───────────────────────────────────────────────────────── */

.lp-h1 {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.022em;
  max-width: 16em;
}

.lp-h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -0.018em;
}

.lp-h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.008em;
}

.lp-center { text-align: center; }
.lp-center.lp-lede, .lp-lede.lp-center { margin-left: auto; margin-right: auto; }

.lp-lede {
  margin: 16px 0 0;
  font-size: var(--text-lg);
  line-height: 1.72;
  color: var(--text-secondary);
}

.lp-body {
  margin: 0;
  color: var(--text-secondary);
}

.lp-body strong, .lp-lede strong, .lp-a strong { color: var(--text-primary); font-weight: 600; }

.lp-body code,
.lp-caption code,
.lp-a code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-primary);
}

.lp-note {
  margin: 14px 0 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.lp-aside {
  margin: 16px 0 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-tertiary);
}

.lp-caption {
  margin: 22px 0 0;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-tertiary);
}

/* ── 首屏 ─────────────────────────────────────────────────────────────── */

.lp-hero { padding: 68px 0 48px; }

.lp-badge {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--accent-200);
  border-radius: var(--radius-full);
  background: var(--accent-50);
  color: var(--accent-800);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.lp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* ── 演示卡片（这一页的主视觉） ───────────────────────────────────────── */

.lp-demo-sec { padding: 40px 0 72px; }

.lp-demo {
  margin-top: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.lp-demo-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--signer-toolbar-border);
  background: var(--signer-toolbar-bg);
}

.lp-demo-back { display: inline-flex; color: var(--text-tertiary); }

.lp-demo-doc {
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30%;
}

.lp-demo-progress {
  flex: 1;
  height: 5px;
  min-width: 60px;
  border-radius: var(--radius-full);
  background: var(--signer-progress-track);
  overflow: hidden;
}

.lp-demo-progress i {
  display: block;
  height: 100%;
  /* 演示里甲方两个字段已经签好了，乙方两个还没有 —— 进度就是 2/4。
     宽度写在 CSS 里而不是元素的行内 style 上，因为这一页的 CSP 是
     `style-src 'self'`，行内样式会被直接丢掉（丢掉之后进度条是空的，
     看起来像"没填任何东西"，与旁边的"还有 2 项待填"自相矛盾）。 */
  width: 50%;
  border-radius: inherit;
  background: var(--signer-progress-fill);
  transition: width var(--duration-slow) var(--ease-decelerate);
}

/* 演示区两个字段都填完时加上这个类（由 landing.js 切换） */
.lp-demo.is-full .lp-demo-progress i { width: 100%; }

.lp-demo-left {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.lp-demo-finish { min-height: var(--size-control-sm); padding: 0 13px; font-size: var(--text-xs); }

/* 画布：中性灰把白纸「托」起来 —— 与签署页同一个令牌，同一个观感 */
.lp-demo-canvas {
  position: relative;
  padding: 44px 28px;
  background: var(--signer-canvas-bg);
}

.lp-paper {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 46px 44px 38px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--signer-page-shadow);
}

/* 纸上的假正文。用横线而不是灰块 —— 灰块读起来像"加载中"，
   横线读起来像"一页文字"，这正是想要的第一眼印象。 */
.lp-paper-lines {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 26px;
}

.lp-paper-lines span {
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--ink-100);
}

.lp-paper-lines .w1 { width: 46%; }
.lp-paper-lines .w2 { width: 92%; }
.lp-paper-lines .w3 { width: 78%; }
.lp-paper-lines .w4 { width: 84%; }

.lp-paper-lines--short { margin: 22px 0 26px; }

.lp-paper-line--h {
  height: 16px;
  width: 38%;
  margin-bottom: 24px;
  border-radius: var(--radius-sm);
  background: var(--ink-200);
}

.lp-fields {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
}

.lp-field-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.lp-field-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.lp-field-label b { color: var(--signer-field-required); font-weight: 500; margin-left: 2px; }

.lp-field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: center;
}

/* 未填：香槟色虚线。已填：墨蓝实线。两种状态同时靠**颜色与线型**区分 —— */
.lp-field--empty {
  background: var(--signer-field-bg);
  border: 1.5px dashed var(--signer-field-border);
  color: var(--accent-700);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.lp-field--empty:hover { background: var(--signer-field-active); }

.lp-field--empty:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.lp-field--done {
  background: var(--signer-field-done-bg);
  border: 1.5px solid var(--signer-field-done-bd);
  color: var(--text-primary);
  cursor: default;
}

.lp-field-icon { display: inline-flex; opacity: 0.75; }

.lp-hand-img {
  display: block;
  /* 高度按字段框的可用高度定死。不写死的话图片会按自己的像素尺寸渲染 ——
     手写板画布是 640 宽，一路铺满整个字段框，看起来像有人把签名放大了十倍。 */
  height: 34px;
  width: auto;
}

.lp-hand {
  font-family: var(--font-signature);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-900);
}

/* ── 手写板 ───────────────────────────────────────────────────────────── */

.lp-pad {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--surface-overlay);
}

.lp-pad[hidden] { display: none; }

.lp-pad-in {
  width: 100%;
  max-width: 460px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-modal);
}

.lp-pad-title {
  margin-bottom: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

#lp-pad-canvas {
  display: block;
  width: 100%;
  height: 150px;
  border: 1.5px dashed var(--signer-field-border);
  border-radius: var(--radius-signature-pad);
  background: var(--surface-raised);
  cursor: crosshair;
  touch-action: none;
}

.lp-pad-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.lp-pad-hint {
  margin: 10px 0 0;
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text-tertiary);
}

/* ── 「容易出错的地方」 ───────────────────────────────────────────────── */

.lp-why { padding: 24px 0 72px; }
.lp-why .lp-lede { margin-bottom: 34px; }

.lp-card {
  padding: 26px 26px 28px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.lp-card--wide {
  padding: 32px 32px 30px;
  margin-bottom: 18px;
}

.lp-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.lp-proof-label {
  margin: 22px 0 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lp-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.lp-fig { margin: 0; }

.lp-fig img {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.lp-fig figcaption {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 9px;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-secondary);
}

.lp-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.lp-tag--bad { background: var(--red-500); color: #fff; }
.lp-tag--ok { background: var(--green-500); color: #fff; }

/* ── 三步 ─────────────────────────────────────────────────────────────── */

.lp-how { padding: 24px 0 72px; }

.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.lp-step { border-top: 1px solid var(--border-subtle); padding-top: 20px; }

.lp-step-n {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-500);
  font-variant-numeric: tabular-nums;
}

/* ── 定价 ─────────────────────────────────────────────────────────────── */

.lp-pricing { padding: 24px 0 72px; }

.lp-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 720px;
  margin-top: 32px;
}

.lp-plan {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* 专业版用一道品牌色细边 + 稍重的投影区分，不写「最受欢迎」的角标 ——
   那句推销话在只有两个档位的时候只会显得心虚。 */
.lp-plan--pro {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}

.lp-plan-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
}

.lp-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 12px 0 4px;
}

.lp-amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.lp-period { font-size: var(--text-sm); color: var(--text-tertiary); }

.lp-plan-note { margin: 0 0 20px; font-size: var(--text-xs); color: var(--text-tertiary); }

.lp-feats {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-feats li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 用 CSS 画勾，不引图标字体 —— 一个勾换一次外网请求不值得 */
.lp-feats li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.55em;
  width: 5px;
  height: 9px;
  border: solid var(--brand-600);
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.lp-plan .lp-btn { margin-top: auto; }

/* ── 常见问题 ─────────────────────────────────────────────────────────── */

.lp-faq { padding: 24px 0 88px; }

.lp-faq-list {
  margin-top: 26px;
  max-width: 44em;
  border-top: 1px solid var(--border-subtle);
}

.lp-q { border-bottom: 1px solid var(--border-subtle); }

.lp-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 550;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.lp-q summary::-webkit-details-marker { display: none; }

.lp-q summary::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border: solid var(--text-tertiary);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.lp-q[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.lp-q summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.lp-a {
  padding: 0 2px 20px;
  max-width: 40em;
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ── 页脚 ─────────────────────────────────────────────────────────────── */

.lp-foot {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

.lp-foot-in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 34px;
}

.lp-foot-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
}

.lp-foot-brand img { border-radius: 6px; }

.lp-foot-tag {
  flex-basis: 100%;
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.lp-foot-col { display: flex; flex-direction: column; gap: 9px; }

.lp-foot-col h4 {
  margin: 0 0 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lp-foot-col a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.lp-foot-col a:hover { color: var(--text-primary); }

.lp-foot-base {
  padding-top: 16px;
  padding-bottom: 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ── 响应式 ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .lp-hero { padding: 56px 0 40px; }
  .lp-grid3 { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr; gap: 20px; }
  .lp-plans { grid-template-columns: 1fr; max-width: 420px; }
  .lp-foot-in { grid-template-columns: 1fr 1fr; }
  .lp-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .lp-wrap { padding: 0 18px; }
  .lp-h1 { font-size: var(--text-3xl); }
  .lp-h2 { font-size: var(--text-2xl); }
  .lp-lede { font-size: var(--text-md); }

  /* 窄屏把次要导航收起来：三个入口挤在两个按钮旁边，点起来会互相误触 */
  .lp-nav-links { display: none; }

  .lp-demo-doc { max-width: 42%; }
  .lp-demo-left { display: none; }
  .lp-demo-canvas { padding: 22px 12px; }
  .lp-paper { padding: 28px 20px 24px; }
  .lp-fields { grid-template-columns: 1fr; gap: 16px; }
  .lp-proof { grid-template-columns: 1fr; }
  .lp-card--wide { padding: 24px 20px; }
  .lp-pad-in { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-demo-progress i,
  .lp-q summary::after,
  .lp-btn { transition: none; }
}

@media print {
  .lp-nav, .lp-demo-canvas, .lp-pad, .lp-foot { display: none; }
}