/* ═════════════════════════════════════════
   SNSUC — SEO/GEO 落地页 & 问答页 专用样式
   复用主设计体系变量（style.css :root），仅作扩展
   ═════════════════════════════════════════ */

/* ── 落地页 Hero（比首页 hero 更紧凑）── */
.seo-hero {
  position: relative;
  padding: 9.5rem 0 4.5rem;
  text-align: center;
  overflow: hidden;
}
.seo-hero .container { position: relative; z-index: 2; }
.seo-hero-kicker {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-main);
  margin-bottom: 1rem;
}
.seo-hero h1 {
  font-family: var(--font-display), 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  color: var(--ink-deep);
  line-height: 1.35;
  margin-bottom: 1rem;
}
.seo-hero-sub {
  max-width: 720px; margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.02rem;
}
.seo-hero-rule {
  width: 72px; height: 3px; margin: 1.4rem auto 0;
  background: linear-gradient(90deg, transparent, var(--ink-main), var(--gold), transparent);
  border-radius: 2px;
}

/* ── 面包屑 ── */
.seo-breadcrumb {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem; color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.seo-breadcrumb a { color: var(--ink-main); }
.seo-breadcrumb span.sep { margin: 0 .45rem; opacity: .5; }

/* ── 通用内容卡片 ── */
.seo-card {
  background: #fff;
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 2rem 2.2rem;
}
.seo-card + .seo-card { margin-top: 1.4rem; }
.seo-card h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  color: var(--ink-dark);
  margin-bottom: .9rem;
}
.seo-card h3 { color: var(--ink-core); margin: 1.1rem 0 .5rem; font-size: 1.15rem; }
.seo-card p { margin-bottom: .85rem; }
.seo-card ul.seo-list { list-style: none; margin: .6rem 0 1rem; }
.seo-card ul.seo-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .5rem;
}
.seo-card ul.seo-list li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ink-main), var(--ink-mint));
}

/* ── 数据/公式高亮块 ── */
.seo-formula {
  background: var(--ink-frost);
  border-left: 3px solid var(--ink-main);
  border-radius: var(--radius-sm);
  padding: 1rem 1.3rem;
  margin: 1rem 0;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  font-size: .95rem;
  color: var(--ink-dark);
}

/* ── 关键数据条 ── */
.seo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0;
}
.seo-stat {
  background: var(--paper-warm);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  text-align: center;
}
.seo-stat .num {
  font-family: var(--font-ui);
  font-size: 1.45rem; font-weight: 700;
  color: var(--ink-main);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.01em;
}
.seo-stat .lbl { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }

/* ── 简易数据表 ── */
.seo-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.seo-table th, .seo-table td {
  border: 1px solid var(--border-ink);
  padding: .6rem .9rem; text-align: left;
}
.seo-table th {
  background: var(--ink-frost); color: var(--ink-dark);
  font-family: 'Inter', 'Noto Serif SC', sans-serif; font-weight: 600;
}
.seo-table tr:nth-child(even) td { background: var(--ink-mist); }
.seo-table td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── FAQ 块 ── */
.faq-item {
  background: #fff;
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.1rem;
  transition: box-shadow .25s ease, transform .25s ease;
}
.faq-item:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.faq-item h3 {
  font-size: 1.12rem; color: var(--ink-dark);
  margin-bottom: .6rem;
  padding-left: 1.1rem; position: relative;
}
.faq-item h3::before {
  content: ''; position: absolute; left: 0; top: .28em;
  width: 4px; height: 1.1em; border-radius: 2px;
  background: linear-gradient(180deg, var(--ink-main), var(--gold));
}
.faq-item > div { color: var(--text-body); font-size: .96rem; }
.faq-item > div p { margin-bottom: .6rem; }
.faq-item > div p:last-child { margin-bottom: 0; }
.faq-item a { border-bottom: 1px dashed var(--ink-light); }

/* ── 问答页目录 ── */
.qa-toc {
  display: flex; flex-wrap: wrap; gap: .55rem;
  justify-content: center;
  margin: 0 auto 2.4rem; max-width: 860px;
}
.qa-toc a {
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  font-size: .82rem;
  padding: .38rem .9rem;
  border: 1px solid var(--border-ink);
  border-radius: 999px;
  background: #fff; color: var(--ink-core);
  transition: all .25s ease;
}
.qa-toc a:hover { background: var(--ink-main); color: #fff; border-color: var(--ink-main); }

/* ── CTA 区块 ── */
.seo-cta {
  background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-core) 60%, var(--ink-main) 100%);
  border-radius: var(--radius-lg);
  padding: 3rem 2.4rem;
  text-align: center;
  color: #fff;
  position: relative; overflow: hidden;
}
.seo-cta::after {
  content: '信'; position: absolute; right: -1rem; bottom: -2.4rem;
  font-family: var(--font-display), serif;
  font-size: 11rem; color: rgba(255,255,255,.05);
  pointer-events: none;
}
.seo-cta h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: .7rem;
}
.seo-cta p { color: var(--ink-pale); max-width: 640px; margin: 0 auto 1.6rem; font-size: .98rem; }
.seo-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.seo-btn {
  display: inline-block;
  font-family: 'Inter', 'Noto Serif SC', sans-serif;
  font-size: .92rem; font-weight: 600;
  padding: .78rem 2rem;
  border-radius: 999px;
  transition: all .25s ease;
}
.seo-btn-primary { background: var(--gold); color: var(--ink-deep); }
.seo-btn-primary:hover { background: var(--gold-light, #f0dca0); color: var(--ink-deep); transform: translateY(-2px); }
.seo-btn-ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.seo-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── 相关链接条 ── */
.seo-related {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.6rem;
}
.seo-related a {
  font-size: .84rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: var(--ink-frost);
  color: var(--ink-core);
  border: 1px solid var(--border-ink);
  transition: all .25s ease;
}
.seo-related a:hover { background: var(--ink-pale); color: var(--ink-deep); }

/* ── 免责声明 ── */
.seo-disclaimer {
  font-size: .78rem; color: var(--text-muted);
  border-top: 1px dashed var(--border-ink);
  padding-top: 1rem; margin-top: 2rem;
}

@media (max-width: 768px) {
  .seo-hero { padding: 7.5rem 0 3rem; }
  .seo-card { padding: 1.4rem 1.2rem; }
  .faq-item { padding: 1.2rem 1.1rem; }
  .seo-cta { padding: 2.2rem 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   I18N — 英文排版适配（.lang-en）
   本表服务 geo-qa 与 4 篇长文，是全站唯一的"长文阅读"场景，
   核心是把英文正文行宽收进 66–75ch，并给化学品长名加断词保护。
   字栈统一引用 style.css :root 的 --font-latin* / --font-ui。
   ═══════════════════════════════════════════════════════════ */

/* 1) Hero */
html.lang-en .seo-hero h1 {
  font-family: var(--font-latin-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
  line-height: var(--lh-display);
  letter-spacing: .005em;
  overflow-wrap: break-word;
  hyphens: auto;
}
html.lang-en .seo-hero-kicker { letter-spacing: .12em; }
html.lang-en .seo-hero-sub {
  font-family: var(--font-latin);
  max-width: min(var(--measure), 100%);
  line-height: var(--lh-body-en);
  font-size: .98rem;
}

/* 2) 正文卡片标题 */
html.lang-en .seo-card h2,
html.lang-en .seo-card h3,
html.lang-en .faq-item h3 {
  font-family: var(--font-latin-head);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
  hyphens: auto;
}
html.lang-en .seo-card h2 { font-size: clamp(1.28rem, 2.2vw, 1.65rem); }
html.lang-en .seo-card h3 { font-size: 1.08rem; }
html.lang-en .faq-item h3 { font-size: 1.06rem; }

/* 3) 长文正文：约束行宽到 66–75ch，这是本表最重要的一条 */
html.lang-en .seo-card p,
html.lang-en .seo-card ul.seo-list li,
html.lang-en .faq-item > div,
html.lang-en .faq-item > div p,
html.lang-en .seo-disclaimer {
  font-family: var(--font-latin);
  line-height: var(--lh-body-en);
  letter-spacing: .008em;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: min(var(--measure), 100%);
}
/* 中文下 .96rem 密排刚好，英文同尺寸偏小，微调到 .94rem 并放松段距 */
html.lang-en .faq-item > div { font-size: .94rem; }
html.lang-en .faq-item > div p { margin-bottom: .75rem; }
html.lang-en .seo-card p { margin-bottom: .95rem; }

/* 4) 公式块 / 数据条 / 表格 */
html.lang-en .seo-formula {
  font-family: var(--font-ui);
  line-height: 1.7;
  overflow-wrap: anywhere;   /* 公式与长化学式必须能断 */
}
html.lang-en .seo-stat .lbl {
  font-family: var(--font-latin);
  line-height: 1.4;
  overflow-wrap: break-word;
  hyphens: auto;
}
html.lang-en .seo-table { font-size: .88rem; }
html.lang-en .seo-table th {
  font-family: var(--font-ui);
  letter-spacing: .01em;
  line-height: 1.4;
  overflow-wrap: break-word;
}
html.lang-en .seo-table td {
  font-family: var(--font-latin);
  line-height: 1.55;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 5) 目录 chip / 相关链接 / 面包屑：英文条目长得多，允许折行 */
html.lang-en .qa-toc a,
html.lang-en .seo-related a {
  font-family: var(--font-ui);
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.35;
  max-width: 100%;
}
html.lang-en .qa-toc { row-gap: .5rem; }
html.lang-en .seo-breadcrumb { overflow-wrap: break-word; line-height: 1.5; }

/* 6) CTA */
html.lang-en .seo-cta h2 {
  font-family: var(--font-latin-head);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: .005em;
  overflow-wrap: break-word;
}
html.lang-en .seo-cta p {
  font-family: var(--font-latin);
  max-width: min(64ch, 100%);
  line-height: var(--lh-body-en);
}
html.lang-en .seo-btn {
  font-family: var(--font-ui);
  letter-spacing: .01em;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
}
/* 装饰性「信」字保留毛笔体 */
html.lang-en .seo-cta::after { font-family: var(--font-display); }

/* 7) 360px */
@media (max-width: 380px) {
  html.lang-en .seo-hero h1 { font-size: clamp(1.5rem, 7.5vw, 1.95rem); }
  html.lang-en .seo-card h2 { font-size: 1.18rem; }
  html.lang-en .faq-item h3 { font-size: .98rem; padding-left: .9rem; }
  html.lang-en .qa-toc a,
  html.lang-en .seo-related a { font-size: .76rem; padding: .34rem .7rem; }
  html.lang-en .seo-btn { font-size: .84rem; padding: .7rem 1.2rem; }
  html.lang-en .seo-formula { font-size: .86rem; padding: .8rem .9rem; }
}