/* ============================================================
   文搭文书铺 · 官网样式
   品牌规范来源：docs/brand/BRAND.md v1.0
   色值：印章红 #C8371D / 墨黑 #1A1A1A / 宣纸米白 #F7F3EA
   比例 红:黑:白 ≈ 1:3:6，红色面积 ≤10%
   ============================================================ */

:root {
  /* 品牌三原色 */
  --lt-red: #C8371D;
  --lt-red-deep: #A82D18;
  --lt-ink: #1A1A1A;
  --lt-paper: #F7F3EA;

  /* 派生色（BRAND §2.2） */
  --lt-red-10: #F2E0D6;
  --lt-red-20: #EECDC1;
  --lt-gray-60: #72716D;
  --lt-gray-40: #9F9C97;
  --lt-line: #DCD9D1;

  /* 纸感卡底（米白提亮，禁用纯白） */
  --lt-card: #FCFAF3;
  --lt-card-deep: #F3EFE3;

  /* 字体（BRAND §3.1） */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* 字号（BRAND §3.2，16px 基准） */
  --fs-display: 40px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 12px;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 4px 16px rgba(26, 26, 26, 0.05);
  --nav-h: 60px;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--lt-ink);
  background: var(--lt-paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.serif { font-family: var(--font-serif); }
.kai { font-family: var(--font-kai); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* ---------- 演示标识 ---------- */
.demo-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lt-ink); color: var(--lt-paper);
  font-size: var(--fs-caption); line-height: 1.4;
  box-shadow: var(--shadow);
}
.demo-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lt-red); flex: none;
}
.tag-demo {
  display: inline-block; padding: 1px 7px; margin-left: 6px;
  border: 1px solid var(--lt-line); border-radius: 4px;
  font-size: 11px; color: var(--lt-gray-60); background: var(--lt-card);
  vertical-align: 1px;
}
.tag-live {
  display: inline-block; padding: 1px 7px; margin-left: 6px;
  border: 1px solid var(--lt-red); border-radius: 4px;
  font-size: 11px; color: #fff; background: var(--lt-red);
  vertical-align: 1px;
}

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 80;
  height: var(--nav-h);
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lt-line);
}
.nav-inner {
  height: var(--nav-h); display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-family: var(--font-kai); font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.brand-sub { font-size: 11px; color: var(--lt-gray-60); letter-spacing: 1px; margin-top: -2px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 7px 12px; border-radius: 8px; font-size: 14px;
  color: var(--lt-ink); transition: background 0.15s;
}
.nav-links a:hover { background: var(--lt-card-deep); }
.nav-links a.active { color: var(--lt-red); font-weight: 600; }
.nav-cta {
  margin-left: 8px; flex: none;
  padding: 8px 18px; border-radius: 8px;
  background: var(--lt-red); color: var(--lt-paper);
  font-size: 14px; font-weight: 600;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--lt-red-deep); }
.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; border: 1px solid var(--lt-line); border-radius: 8px;
  background: var(--lt-card); align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--lt-ink);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--lt-ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--lt-paper); border-bottom: 1px solid var(--lt-line);
    padding: 8px 20px 16px; display: none;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; border-radius: 8px; }
  .nav-cta { margin: 8px 0 0; text-align: center; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 26px; border-radius: 9px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  transition: all 0.15s;
}
.btn-primary { background: var(--lt-red); color: var(--lt-paper); }
.btn-primary:hover { background: var(--lt-red-deep); }
.btn-ghost { background: transparent; border-color: var(--lt-ink); color: var(--lt-ink); }
.btn-ghost:hover { background: var(--lt-card-deep); }
.btn-line { background: transparent; border-color: var(--lt-line); color: var(--lt-ink); }
.btn-line:hover { border-color: var(--lt-ink); }
.btn-sm { padding: 7px 16px; font-size: 13px; border-radius: 7px; }
.btn-block { width: 100%; }

/* ---------- 页面头 ---------- */
.page-head { padding: 56px 0 36px; }
.page-head h1 {
  font-family: var(--font-serif); font-size: var(--fs-h1);
  font-weight: 700; letter-spacing: 1px;
}
.page-head .lead { margin-top: 12px; color: var(--lt-gray-60); font-size: 16px; max-width: 640px; }
.page-head .rule {
  width: 46px; height: 3px; background: var(--lt-red); margin-bottom: 18px; border-radius: 2px;
}
section.block { padding: 40px 0; }
.sec-title {
  font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 8px;
}
.sec-sub { color: var(--lt-gray-60); font-size: 14px; margin-bottom: 24px; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 48px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--lt-gray-60); letter-spacing: 2px; margin-bottom: 18px;
}
.hero .kicker::before { content: ""; width: 22px; height: 2px; background: var(--lt-red); }
.hero h1 {
  font-family: var(--font-kai); font-size: var(--fs-display); line-height: 1.25;
  font-weight: 700; letter-spacing: 2px;
}
.hero h1 .red { color: var(--lt-red); }
.hero .sub { margin-top: 16px; font-size: 16px; color: var(--lt-gray-60); max-width: 520px; }
.hero .ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .facts { margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; }
.hero .facts div { font-size: 13px; color: var(--lt-gray-60); display: flex; align-items: center; gap: 7px; }
.hero .facts b { color: var(--lt-ink); font-size: 15px; }
.hero .facts .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lt-red); flex: none; }

/* Hero 右侧：交付卡（模拟文书交付凭证） */
.deliver-card {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 24px; position: relative;
}
.deliver-card .doc-no {
  font-size: 11px; color: var(--lt-gray-60); display: flex; justify-content: space-between;
  border-bottom: 1px dashed var(--lt-line); padding-bottom: 10px; margin-bottom: 14px;
}
.deliver-card .doc-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; text-align: center; }
.deliver-card .doc-rule { width: 60%; height: 2px; background: var(--lt-red); margin: 10px auto 14px; opacity: 0.85; }
.deliver-card .doc-body { font-size: 13px; color: #4a4844; line-height: 1.9; }
.deliver-card .doc-body .pending { color: var(--lt-gray-60); background: var(--lt-red-10); padding: 0 4px; border-radius: 3px; font-size: 12px; }
.deliver-card .doc-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--lt-line);
  font-size: 11px; color: var(--lt-gray-60); display: flex; justify-content: space-between;
}
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lt-red-10); color: var(--lt-red-deep);
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lt-red); }

@media (max-width: 860px) {
  .hero { padding: 44px 0 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 32px; }
}

/* ---------- 承诺条 ---------- */
.commit { padding: 28px 0; border-top: 1px solid var(--lt-line); border-bottom: 1px solid var(--lt-line); background: var(--lt-card); }
.commit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.commit-item { display: flex; gap: 14px; align-items: flex-start; }
.commit-item .ic {
  flex: none; width: 42px; height: 42px; border-radius: 10px;
  border: 1.5px solid var(--lt-red); color: var(--lt-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-family: var(--font-serif);
}
.commit-item h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.commit-item p { font-size: 13px; color: var(--lt-gray-60); line-height: 1.6; }
@media (max-width: 760px) { .commit-grid { grid-template-columns: 1fr; } }

/* ---------- 客群卡 ---------- */
.seg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 1100px) { .seg-grid { grid-template-columns: repeat(4, 1fr); } }
.seg-card {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--radius);
  padding: 24px; transition: border-color 0.15s, box-shadow 0.15s;
}
.seg-card:hover { border-color: var(--lt-red-20); box-shadow: var(--shadow); }
.seg-card h3 { font-family: var(--font-serif); font-size: 18px; margin-bottom: 4px; }
.seg-card .who { font-size: 12px; color: var(--lt-gray-60); margin-bottom: 12px; }
.seg-card ul { margin-bottom: 16px; }
.seg-card li {
  font-size: 13.5px; padding: 5px 0; color: #45433f;
  display: flex; gap: 8px; align-items: baseline;
}
.seg-card li::before { content: "·"; color: var(--lt-red); font-weight: 700; }
.seg-card .more { font-size: 13px; color: var(--lt-red); font-weight: 600; }
.seg-card .more::after { content: " →"; }
@media (max-width: 760px) { .seg-grid { grid-template-columns: 1fr; } }

/* ---------- 流程 ---------- */
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: step; }
.flow-step {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--radius);
  padding: 20px; position: relative;
}
.flow-step .no {
  font-family: var(--font-serif); font-size: 13px; color: var(--lt-red); font-weight: 700;
  letter-spacing: 1px;
}
.flow-step h3 { font-size: 15.5px; margin: 8px 0 6px; font-weight: 700; }
.flow-step p { font-size: 13px; color: var(--lt-gray-60); line-height: 1.65; }
.flow-step .tech {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--lt-line);
  font-size: 11.5px; color: var(--lt-gray-40); font-family: var(--font-mono);
}
@media (max-width: 900px) { .flow-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } }

/* ---------- 卡片网格（服务/样例等通用） ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.card:hover { border-color: var(--lt-red-20); box-shadow: var(--shadow); }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.card h3 { font-size: 16px; font-weight: 700; line-height: 1.4; }
.card .desc { font-size: 13.5px; color: var(--lt-gray-60); line-height: 1.65; margin-bottom: 14px; flex: 1; }
.card .meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--lt-gray-60); margin-bottom: 14px; flex-wrap: wrap; }
.card .price { font-size: 20px; font-weight: 700; color: var(--lt-red); font-variant-numeric: tabular-nums; }
.card .price small { font-size: 12px; color: var(--lt-gray-60); font-weight: 400; }
.card .actions { display: flex; gap: 10px; align-items: center; }

/* 档位徽章 */
.tier {
  flex: none; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 5px;
  letter-spacing: 1px; line-height: 1.6;
}
.tier-a { background: var(--lt-red-10); color: var(--lt-red-deep); }
.tier-b { background: #E9E5D8; color: #5d594e; }
.tier-c { background: var(--lt-ink); color: var(--lt-paper); }
.tier-m { background: var(--lt-red); color: var(--lt-paper); }
.tier-b2 { background: var(--lt-card-deep); color: var(--lt-gray-60); border: 1px solid var(--lt-line); }
.tier-soon { background: var(--lt-card-deep); color: var(--lt-gray-60); border: 1px dashed var(--lt-line); }

/* ---------- 对比表（vs 免费 AI） ---------- */
.vs-table { width: 100%; border-collapse: collapse; background: var(--lt-card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--lt-line); }
.vs-table th, .vs-table td { padding: 13px 16px; font-size: 14px; text-align: left; border-bottom: 1px solid var(--lt-line); vertical-align: top; }
.vs-table th { font-size: 13px; color: var(--lt-gray-60); font-weight: 600; background: var(--lt-card-deep); }
.vs-table tr:last-child td, .vs-table tr:last-child th { border-bottom: none; }
.vs-table td:first-child { font-weight: 600; white-space: nowrap; }
.vs-table .ok { color: var(--lt-red-deep); font-weight: 600; }
.vs-table .no { color: var(--lt-gray-40); }
.vs-wrap { overflow-x: auto; border-radius: var(--radius); }
@media (max-width: 700px) { .vs-table td:first-child { white-space: normal; } }

/* ---------- 数据表（价格页） ---------- */
.price-table-wrap { overflow-x: auto; border: 1px solid var(--lt-line); border-radius: var(--radius); background: var(--lt-card); }
table.data { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data th, table.data td { padding: 12px 14px; font-size: 13.5px; text-align: left; border-bottom: 1px solid var(--lt-line); }
table.data th { background: var(--lt-card-deep); font-size: 12.5px; color: var(--lt-gray-60); white-space: nowrap; }
table.data tr:last-child td { border-bottom: none; }
table.data td.name { font-weight: 600; white-space: nowrap; }
table.data td.price { color: var(--lt-red); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data a { color: var(--lt-red); font-weight: 600; }
table.data a:hover { text-decoration: underline; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field label .req { color: var(--lt-red); margin-left: 2px; }
.field label .opt { color: var(--lt-gray-40); font-weight: 400; font-size: 12px; margin-left: 6px; }
.field .hint { font-size: 12px; color: var(--lt-gray-60); margin-top: 6px; }
.field input[type=text], .field input[type=tel], .field input[type=number],
.field input[type=date], .field select, .field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--lt-line); border-radius: 8px;
  background: var(--lt-card); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--lt-red-20); box-shadow: 0 0 0 3px var(--lt-red-10);
}
.field textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.field .check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #45433f; }
.field .check input { margin-top: 4px; accent-color: var(--lt-red); width: 15px; height: 15px; flex: none; }
.field .check label { font-weight: 400; margin: 0; }
.checks-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checks-row label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--lt-line); border-radius: 7px; padding: 7px 12px;
  font-size: 13px; background: var(--lt-card); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.checks-row label:has(input:checked) { border-color: var(--lt-red); background: var(--lt-red-10); }
.checks-row input { accent-color: var(--lt-red); width: 14px; height: 14px; }
.form-msg { font-size: 13px; color: var(--lt-red-deep); background: var(--lt-red-10); border-radius: 8px; padding: 10px 14px; display: none; }
.form-msg.show { display: block; }

/* ---------- 订单页 ---------- */
.order-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } }
.order-form-card, .order-side {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 14px; padding: 26px;
}
.order-side { position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .order-side { position: static; } }
.order-side h2 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 4px; }
.order-side .sku-sla { font-size: 12.5px; color: var(--lt-gray-60); margin-bottom: 18px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed var(--lt-line); }
.sum-row b { font-variant-numeric: tabular-nums; }
.sum-row.total { border-bottom: none; padding-top: 14px; font-size: 15px; font-weight: 700; }
.sum-row.total .val { color: var(--lt-red); font-size: 24px; font-weight: 700; }
.promo-strip {
  margin: 16px 0; padding: 10px 14px; border: 1px dashed var(--lt-red-20);
  border-radius: 8px; background: var(--lt-red-10);
  font-size: 13px; color: var(--lt-red-deep);
}
.disc-box {
  margin-top: 18px; padding: 12px 14px; background: var(--lt-card-deep);
  border-radius: 8px; font-size: 12px; color: var(--lt-gray-60); line-height: 1.7;
}
.disc-box b { color: var(--lt-ink); }

/* 弹窗（演示支付） */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; background: rgba(26, 26, 26, 0.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.open { display: flex; }
.modal {
  background: var(--lt-paper); border-radius: 16px; max-width: 420px; width: 100%;
  padding: 28px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.modal .x { position: absolute; top: 14px; right: 16px; border: none; background: none; font-size: 20px; color: var(--lt-gray-40); }
.modal h3 { font-family: var(--font-serif); font-size: 19px; margin-bottom: 4px; text-align: center; }
.modal .m-sub { text-align: center; font-size: 13px; color: var(--lt-gray-60); margin-bottom: 18px; }
.qr-box {
  width: 200px; height: 200px; margin: 0 auto 16px;
  border: 2px solid var(--lt-ink); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(45deg, var(--lt-card) 0 10px, var(--lt-card-deep) 10px 20px);
}
.qr-box .fake-qr {
  width: 110px; height: 110px;
  background:
    linear-gradient(var(--lt-ink) 2px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--lt-ink) 2px, transparent 2px) 0 0 / 22px 22px;
  border: 4px solid var(--lt-paper); outline: 2px solid var(--lt-ink);
}
.qr-box p { font-size: 12px; color: var(--lt-gray-60); }
.pay-amount { text-align: center; font-size: 14px; margin-bottom: 14px; }
.pay-amount b { font-size: 26px; color: var(--lt-red); font-variant-numeric: tabular-nums; }

/* 支付成功 */
.success-box { text-align: center; padding: 8px 0 4px; }
.success-box .ok-ic {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--lt-red); color: var(--lt-paper);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.success-box .ord-no {
  margin: 12px 0; font-family: var(--font-mono); font-size: 15px;
  background: var(--lt-card-deep); display: inline-block; padding: 7px 16px; border-radius: 8px;
  letter-spacing: 1px;
}
.success-box ol { text-align: left; margin: 14px 0 4px; }
.success-box li { font-size: 13.5px; color: #45433f; padding: 5px 0 5px 22px; position: relative; }
.success-box li::before { content: attr(data-n); position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lt-red-10); color: var(--lt-red-deep); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- 文档预览（样例页公文样式，模拟交付文书） ---------- */
.doc-preview {
  background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: var(--radius);
  padding: 34px 30px 26px; position: relative;
}
.doc-preview .doc-no { position: absolute; top: 16px; right: 20px; font-size: 10.5px; color: var(--lt-gray-60); font-family: var(--font-mono); }
.doc-preview h4 { font-family: "SimHei", "Heiti SC", var(--font-sans); font-size: 21px; font-weight: 700; text-align: center; letter-spacing: 2px; }
.doc-preview .d-rule { width: 70%; height: 2px; background: var(--lt-red); margin: 12px auto 18px; }
.doc-preview .d-body { font-family: "FangSong", "STFangsong", var(--font-serif); font-size: 14.5px; line-height: 2; color: #2c2a26; }
.doc-preview .d-body p { text-indent: 2em; margin-bottom: 6px; }
.doc-preview .d-body h5 { text-indent: 0; font-family: "SimHei", "Heiti SC", var(--font-sans); font-size: 14.5px; margin: 10px 0 4px; }
.doc-preview .d-foot { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--lt-line); font-size: 11px; color: var(--lt-gray-60); text-align: center; }
.pdf-frame { width: 100%; height: 520px; border: 1px solid var(--lt-line); border-radius: var(--radius); background: var(--lt-card-deep); }

/* ---------- 资料包卡 ---------- */
.pack-card { display: flex; flex-direction: column; gap: 0; }
.pack-card .cover {
  background: var(--lt-card-deep); border-radius: 8px 8px 0 0;
  padding: 30px 24px 24px; text-align: center; border-bottom: 1px solid var(--lt-line);
}
.pack-card .cover img { width: 54px; margin: 0 auto 10px; }
.pack-card .cover h3 { font-family: var(--font-serif); font-size: 21px; letter-spacing: 3px; }
.pack-card .cover .c-rule { width: 44px; height: 2px; background: var(--lt-red); margin: 10px auto 8px; }
.pack-card .cover p { font-size: 12.5px; color: var(--lt-gray-60); }
.pack-card .body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.pack-card .toc { margin: 10px 0 16px; }
.pack-card .toc li { font-size: 13px; color: #45433f; padding: 6px 0; border-bottom: 1px dashed var(--lt-line); display: flex; gap: 10px; }
.pack-card .toc li:last-child { border-bottom: none; }
.pack-card .toc li .no { font-family: var(--font-mono); font-size: 11px; color: var(--lt-gray-40); flex: none; width: 22px; }

/* ---------- 二维码占位 ---------- */
.qr-slot {
  width: 150px; height: 150px; border: 1.5px dashed var(--lt-line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--lt-gray-40); font-size: 12px; text-align: center; padding: 12px;
  background: var(--lt-card);
}
.qr-slot img { width: 44px; opacity: 0.5; }

/* ---------- 页脚 ---------- */
.footer { border-top: 1px solid var(--lt-line); margin-top: 56px; background: var(--lt-card); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 44px 0 36px; }
.footer .f-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer .f-brand img { width: 38px; }
.footer .f-slogan { font-family: var(--font-kai); font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.footer p, .footer li { font-size: 13px; color: var(--lt-gray-60); line-height: 1.9; }
.footer h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; letter-spacing: 1px; }
.footer li a:hover { color: var(--lt-red); }
.footer .commit-line { font-size: 12px; color: var(--lt-gray-60); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--lt-line); }
.footer-bottom { border-top: 1px solid var(--lt-line); padding: 16px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--lt-gray-40); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 杂项 ---------- */
.band-red {
  background: var(--lt-ink); color: var(--lt-paper);
  padding: 36px 0;
}
.band-red h2 { font-family: var(--font-serif); font-size: 24px; letter-spacing: 1px; margin-bottom: 6px; }
.band-red p { font-size: 14px; color: #b8b4ab; margin-bottom: 20px; max-width: 560px; }
.band-red .btn-primary { background: var(--lt-red); }
.band-red .btn-ghost { border-color: #6b6862; color: var(--lt-paper); }
.band-red .btn-ghost:hover { background: rgba(247,243,234,0.08); }

.note {
  font-size: 12.5px; color: var(--lt-gray-60); background: var(--lt-card);
  border: 1px solid var(--lt-line); border-radius: 8px; padding: 12px 16px; line-height: 1.7;
}
.note b { color: var(--lt-ink); }
.note + .note { margin-top: 10px; }

.tabbar { display: flex; gap: 8px; margin: 26px 0 20px; flex-wrap: wrap; }
.tabbar button {
  border: 1px solid var(--lt-line); background: var(--lt-card); color: var(--lt-gray-60);
  padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.tabbar button.active { background: var(--lt-ink); color: var(--lt-paper); border-color: var(--lt-ink); }

.toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-16px);
  background: var(--lt-ink); color: var(--lt-paper); padding: 11px 22px;
  border-radius: 10px; font-size: 14px; z-index: 120; opacity: 0; pointer-events: none;
  transition: all 0.25s; box-shadow: var(--shadow); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 立牌 mockup */
.standee {
  width: 250px; margin: 0 auto; background: var(--lt-paper);
  border: 3px solid var(--lt-red); border-radius: 12px; padding: 26px 20px;
  text-align: center; box-shadow: var(--shadow);
}
.standee img { width: 52px; margin: 0 auto 8px; }
.standee .s-name { font-family: var(--font-kai); font-size: 17px; letter-spacing: 3px; }
.standee .s-main { font-family: var(--font-serif); font-size: 21px; font-weight: 700; margin: 18px 0 6px; line-height: 1.5; }
.standee .s-main .red { color: var(--lt-red); }
.standee .s-sub { font-size: 12px; color: var(--lt-gray-60); line-height: 1.8; }
.standee .s-qr { margin: 18px auto 8px; width: 110px; height: 110px; border: 1.5px solid var(--lt-ink); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; color: var(--lt-gray-60); }
.standee .s-foot { font-size: 10.5px; color: var(--lt-gray-60); margin-top: 12px; line-height: 1.7; }

/* ---------- K12 儿童模式（家长+孩子均可填：大字号/大控件/大按钮） ---------- */
.order-form-card.k12 .field label { font-size: 16px; }
.order-form-card.k12 .field input[type=text], .order-form-card.k12 .field input[type=tel],
.order-form-card.k12 .field select, .order-form-card.k12 .field textarea {
  font-size: 16px; padding: 13px 14px; border-radius: 10px;
}
.order-form-card.k12 .field textarea { min-height: 110px; }
.order-form-card.k12 button[type=submit] { font-size: 16px; min-height: 50px; border-radius: 12px; }
.order-form-card.k12 #order-title { font-size: 26px; }

/* 语音录入按钮（.field 右上角；录音中红点呼吸） */
.voice-btn {
  position: absolute; top: 32px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--lt-line); background: var(--lt-card);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--lt-gray-60); transition: all 0.15s;
}
.field { position: relative; }
.voice-btn:hover { border-color: var(--lt-red-20); color: var(--lt-red); }
.voice-btn.rec { background: var(--lt-red); border-color: var(--lt-red); color: #fff; animation: voice-pulse 1.2s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* 语音按钮不挡输入：K12 表单文本控件右侧留位 */
.order-form-card.k12 .field textarea { padding-right: 46px; }
.order-form-card.k12 .field input[type=text], .order-form-card.k12 .field input[type=tel] { padding-right: 44px; }

/* ---------- 对客示例（v0.4.0）：大概的提示词 + 样例范文 ---------- */
.example-box {
  margin-top: 22px; padding: 16px 18px;
  border: 1px dashed var(--lt-line); border-radius: 12px;
  background: var(--lt-bg, #faf8f5);
}
.example-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.example-head b { font-size: 14px; }
.example-form { display: grid; grid-template-columns: 1fr; gap: 7px; }
.ex-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; align-items: baseline; }
.ex-row span { flex: 0 0 84px; color: var(--lt-gray-60); }
.ex-row b { font-weight: 500; white-space: pre-line; word-break: break-all; }
.example-doc { margin-top: 14px; }
.example-doc summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--lt-red); padding: 6px 0; }
.ex-doc-body {
  margin: 10px 0; padding: 14px;
  border: 1px solid var(--lt-line); border-radius: 10px; background: #fff;
  font-size: 13px; line-height: 1.9; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; max-height: 460px; overflow: auto;
}
.order-form-card.k12 .example-box { font-size: 15px; }
.order-form-card.k12 .ex-row { font-size: 14px; }
.order-form-card.k12 .ex-row span { flex-basis: 96px; }

/* ---------- 三线 tab 面板（samples/services 共用） ---------- */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* 范文画廊卡片节选 */
.ex-doc-clamp {
  font-size: 13px; line-height: 1.8; color: #45433f; margin: 8px 0 4px;
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}