/* ============================================================
 * landing-seo.css · shared styles for competitor-comparison
 * (intercom-alternative, …) and industry scenario (for-shopify, …)
 * SEO landing pages. Reuses design tokens + .lc-* utilities from style.css.
 * Prefix: .seo-* (shared), .cmp-* (comparison table).
 * Pop Paper: 纯白底 + 描边/硬阴影; 安静版页面由 body wrapper 的
 * .theme-quiet (style.css) 降噪, 本文件默认保持 quiet 兼容 (1px 描边为主).
 * ============================================================ */

/* ---------- Hero ---------- */
.seo-hero { position: relative; overflow: hidden; padding: 84px 0 56px;
  background: var(--bg); }
.seo-hero__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto;
  padding: 0 24px; text-align: center; }
.seo-hero__pill { display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--ink-accent);
  background: var(--bg); border: 1px solid var(--border-mid);
  border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 22px; }
.seo-hero__title { font-size: 54px; line-height: 1.06; letter-spacing: -1.6px;
  color: var(--ink); margin: 0 0 18px; max-width: 820px; margin-inline: auto; }
.seo-hero__title em { font-family: var(--font-display); font-style: normal; font-weight: 800;
  color: var(--coral); }
.seo-hero__sub { font-size: 19px; line-height: 1.6; color: var(--ink-sub);
  max-width: 640px; margin: 0 auto 30px; }
.seo-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.seo-hero__note { margin-top: 16px; font-size: 13px; color: var(--ink-sub); }

/* ---------- Comparison table (competitor pages) ---------- */
.cmp { padding: 56px 0; }
.cmp__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.cmp__scroll { overflow-x: auto; border: 1px solid var(--border-mid); border-radius: var(--r-lg);
  background: var(--bg-card); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.cmp-table thead th { font-size: 13px; letter-spacing: .3px; color: var(--ink-sub);
  font-weight: 700; background: rgba(35, 32, 29, .03); border-bottom: 1px solid var(--border-mid); }
.cmp-table thead th.is-us { color: var(--ink-accent); }
.cmp-table tbody, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-table td.feat { font-weight: 600; color: var(--ink); }
.cmp-table td.us { font-weight: 600; color: var(--ink); background: var(--coral-soft); }
.cmp-yes { color: #1f9d55; font-weight: 700; }
.cmp-no  { color: rgba(35, 32, 29, .38); }
.cmp-note { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-sub); font-weight: 400; }

/* ---------- Cards (advantages / features) ---------- */
.seo-cards { padding: 56px 0; }
.seo-cards__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.seo-card { background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: var(--r-lg); padding: 26px 24px; }
.seo-card__icon { width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--butter); border: 2px solid var(--line-ink);
  margin-bottom: 14px; }
.seo-card__icon svg { width: 20px; height: 20px; stroke: var(--ink); }
.seo-card__title { font-size: 18px; color: var(--ink); margin: 0 0 8px; }
.seo-card__desc { font-size: 14px; line-height: 1.6; color: var(--ink-sub); margin: 0; }

/* ---------- Steps (migration / how it works) ---------- */
.seo-steps { padding: 56px 0; background: var(--bg-hover); }
.seo-steps__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.seo-steplist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; counter-reset: step; }
.seo-step { position: relative; padding: 24px 22px; background: var(--bg-card);
  border: 1px solid var(--border-mid); border-radius: var(--r-lg); }
.seo-step::before { counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--coral); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.seo-step__title { font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.seo-step__desc { font-size: 14px; line-height: 1.6; color: var(--ink-sub); margin: 0; }

/* ---------- FAQ ---------- */
.seo-faq { padding: 56px 0; }
.seo-faq__inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.seo-faq__item { border-bottom: 1px solid var(--border-mid); padding: 20px 0; }
.seo-faq__q { font-size: 17px; color: var(--ink); margin: 0 0 8px; }
.seo-faq__a { font-size: 15px; line-height: 1.65; color: var(--ink-sub); margin: 0; }

/* ---------- CTA band ---------- */
.seo-cta { position: relative; overflow: hidden; padding: 72px 0; text-align: center;
  background: var(--bg); border-top: 1px solid var(--border); }
.seo-cta__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 24px; }
.seo-cta__title { font-size: 38px; line-height: 1.12; letter-spacing: -1px; color: var(--ink); margin: 0 0 14px; }
.seo-cta__sub { font-size: 17px; color: var(--ink-sub); margin: 0 0 26px; }

@media (max-width: 860px) {
  .seo-grid, .seo-steplist { grid-template-columns: 1fr; }
  .seo-hero__title { font-size: 38px; letter-spacing: -1px; }
  .seo-cta__title { font-size: 30px; }
}