/* ==========================================================================
   离婚问题解答 + 协议起草   样式表
   设计原则：移动端优先 · 中文排版友好 · 信息层级清晰 · 法律文书要显得可靠
   类名与 index.html / draft.html / js/app.js 严格一一对应，无冗余选择器。
   页面遵守 CSP style-src 'self'：不写任何内联样式，JS 也只改 class / style 属性。

   尺度约定（动样式前先读这三行）：
     ① 颜色只写在 :root 里，规则里一律 var()。散落的色值会让配色悄悄漂移——
        改一处忘一处，肉眼很难发现。check_frontend.py 的 [6] 节会拦。
     ② 字号只用 --fs-* 九档、行高只用 --lh-* 四档、间距只用 --sp-* 七档，
        不在规则里现写 px。否则"看着差不多"的随手微调会一点点把节奏磨平。
     ③ 圆角只用 --radius / --radius-sm / --radius-xs / --radius-pill 四档。
   ========================================================================== */

:root {
  /* ── 文字：暖灰阶 ──────────────────────────────────────
     对比度实测（WCAG）：--ink 13.6/15.1、--ink-2 6.9/7.7、--ink-3 4.7/5.2，
     均达到正文 AA（≥4.5）。改这些值前请跑 _网站/check_frontend.py 的配色检查。 */
  --ink:         #262320;
  --ink-2:       #56504a;
  --ink-3:       #6f6a60;
  --line:        #e7e1d8;

  /* ── 底色：暖米白，不用纯白 ────────────────────────────
     纯白放在暖灰体系里会显得刺眼，也少了纸感；
     --card 用暖白（#fdfbf7）与页面底（#f2efe9）拉开层次。 */
  --bg:          #f2efe9;
  --card:        #fdfbf7;
  --panel:       #f8f5ef;

  /* ── 主色：暖炭灰 ────────────────────────────────────── */
  --brand:       #3e3933;
  --brand-dark:  #2a2622;
  --brand-deep:  #1b1815;
  --brand-mid:   #4a443c;
  --brand-soft:  #ece6dd;
  --brand-line:  #ddd5c8;

  /* ── 点缀：哑光古铜。整站只有灰会显得冷硬，用一个低饱和暖色做强调 */
  --accent:      #7a5c33;

  /* ── 深色底上的文字：暖白，与纯白相比更贴纸感 ───────── */
  --on-dark:     #fbf9f4;
  --on-dark-gold:#e3c48d;

  --warn:        #a35a10;
  --warn-ink:    #7a4108;
  --warn-soft:   #faf1e2;
  --warn-line:   #ecd9b4;

  --danger:      #a83232;
  --danger-dark: #8d2828;
  --danger-ink:  #8a2b2b;
  --danger-soft: #f9eeea;
  --danger-line: #eccac2;

  --ok:          #3f6b45;
  --ok-dark:     #33573a;
  --ok-ink:      #375c3c;
  --ok-soft:     #eef3ec;
  --ok-line:     #cfdcc8;

  --pay:         #b0562a;
  --pay-dark:    #8d4320;
  --pay-ink:     #7a3f18;
  --pay-bg-1:    #faf1e6;
  --pay-bg-2:    #f4e6d3;
  --pay-line:    #e6cfae;

  --code-bg:     #eee9e1;

  /* ── 通道值：给 rgba() 用，避免在规则里写死 rgb 三元组 ── */
  --shade:       60,50,38;
  --on-dark-rgb: 251,249,244;

  /* ── 字号阶梯：全站只用这九档 ────────────────────────── */
  --fs-hero:     30px;   /* 首页主标题 */
  --fs-hero-sm:  25px;   /* 窄屏主标题 */
  --fs-h2:       21px;   /* 内页主标题 */
  --fs-h3:       17px;   /* 卡片 / 区块标题、统计数字 */
  --fs-body:     16px;   /* 正文基准 */
  --fs-text:     15px;   /* 长文正文与列表（比正文略收，行高放宽） */
  --fs-note:     14px;   /* 辅助说明、表单标签、小字（原 13.5：手机上偏小） */
  --fs-meta:     13px;   /* 徽标、来源、脚注（原 12.5） */
  --fs-micro:    12px;   /* 条件必填徽标（原 11） */
  --fs-price:    34px;   /* 价格数字 */

  /* ── 行高：四档够用，中文行高要比西文松 ─────────────── */
  --lh-tight:    1.4;
  --lh-snug:     1.6;
  --lh-body:     1.75;
  --lh-loose:    1.85;

  /* ── 间距阶梯：8 / 12 / 16 / 22 / 28 / 40 / 56 ──────── */
  --sp-1:        8px;
  --sp-2:       12px;
  --sp-3:       16px;
  --sp-4:       22px;
  --sp-5:       28px;
  --sp-6:       40px;
  --sp-7:       56px;

  --radius:      14px;
  --radius-sm:   10px;
  --radius-xs:   6px;
  --radius-pill: 999px;
  /* 阴影也换成暖色投影，冷蓝阴影压在暖底上会发灰发脏 */
  --shadow:      0 1px 2px rgba(var(--shade),.06), 0 4px 16px rgba(var(--shade),.07);
  --shadow-lg:   0 4px 8px rgba(var(--shade),.07), 0 12px 32px rgba(var(--shade),.12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: .01em;
  /* 身份证号、订单号这类长串在窄屏上会把版面撑破 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--sp-3); }

b { font-weight: 600; }
code {
  background: var(--code-bg); padding: 1px 5px; border-radius: var(--radius-xs);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em;
  word-break: break-all;
}

/* 正文里的裸链接（页脚「前往 →」这类）。
   刻意限定 :not([class])：.dl / .value-link / .back 是按钮型链接，
   它们的浅色文字是压在实色底上的，若被这条规则染成深色，对比度会不足。 */
a:not([class]) {
  color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color .15s;
}
a:not([class]):hover { color: var(--warn-ink); }

/* ── 可访问性 ───────────────────────────────────────── */
/* 只给屏幕阅读器看的文字（视觉隐藏但可被朗读） */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

button:focus-visible, a:focus-visible, .examples button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── 页头 Hero ──────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand) 62%, var(--brand-mid) 100%);
  color: var(--on-dark);
  padding: var(--sp-6) 0 var(--sp-6);
}
.hero-slim { padding: var(--sp-4) 0 var(--sp-3); }
.hero-slim h1 { font-size: var(--fs-h2); margin: 0 0 var(--sp-1); line-height: var(--lh-tight); }
.hero-slim .hero-sub { margin: 0; font-size: var(--fs-note); }

.hero-badge {
  display: inline-block; font-size: var(--fs-meta); letter-spacing: .05em;
  background: rgba(var(--on-dark-rgb),.14); border: 1px solid rgba(var(--on-dark-rgb),.28);
  padding: 4px var(--sp-2); border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
  line-height: var(--lh-tight);
}
.hero h1 {
  font-size: var(--fs-hero); margin: 0 0 var(--sp-2); font-weight: 700;
  letter-spacing: .02em; line-height: var(--lh-tight);
}
.hero-sub {
  font-size: var(--fs-text); opacity: .93; max-width: 640px;
  margin: 0 0 var(--sp-4); line-height: var(--lh-loose);
  /* 中文标题/长句交给浏览器做「不断头」换行，避免末行只剩一两个字 */
  text-wrap: pretty;
}
.hero-sub b { color: var(--on-dark-gold); font-weight: 600; }

/* 首屏费用说明：把"问答免费 / 协议书 88 元"放在第一屏就说清楚。
   为什么必须放这儿：原来全站到付款那一步才第一次出现价格，客户填完表才知道要花钱，
   是投诉率最高的一类体验（审查里明确点出来的）。 */
/* JS 没加载时的提示（<noscript> 里用）：CSP 禁内联样式，所以样式必须在这里定义。
   为什么值得留：app.js 一旦被拦，按钮点下去毫无反应，客户只会以为"网站坏了"。 */
.js-warn {
  max-width: 640px; margin: var(--sp-3) auto; padding: var(--sp-3) var(--sp-4);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius); font-size: var(--fs-text); line-height: var(--lh-loose);
}

/* 三项统计：用等宽栅格而不是随内容伸缩的行内胶囊——
   长度不一时行内胶囊会参差不齐，等宽栅格才有机构页的整齐感。 */
/* 首屏「两项服务」入口：站点身份要一眼看出提供哪两件事，
   但协议起草仍标注为「增值服务」且排在问答之后，不与问答并列成同级导航。 */
.hero-services {
  display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr;
  margin: 0 0 var(--sp-4);
}
@media (max-width: 640px) { .hero-services { grid-template-columns: 1fr; } }
.hero-svc {
  display: block; text-decoration: none; color: inherit;
  background: rgba(var(--on-dark-rgb),.10); border: 1px solid rgba(var(--on-dark-rgb),.22);
  border-radius: var(--radius); padding: var(--sp-3);
  transition: background .15s, border-color .15s;
}
.hero-svc:hover { background: rgba(var(--on-dark-rgb),.16); border-color: rgba(var(--on-dark-rgb),.4); }
.svc-no {
  display: block; font-size: var(--fs-micro); font-weight: 600;
  color: var(--on-dark-gold); letter-spacing: .06em; margin-bottom: 4px;
}
.svc-name { display: block; font-size: var(--fs-h3); font-weight: 600; margin-bottom: 4px; }
.svc-desc { display: block; font-size: var(--fs-meta); color: rgba(var(--on-dark-rgb),.78); line-height: var(--lh-snug); }

.hero-stats {
  display: grid; gap: var(--sp-1);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hero-stats span {
  background: rgba(var(--on-dark-rgb),.12); border: 1px solid rgba(var(--on-dark-rgb),.2);
  border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-note); line-height: var(--lh-tight);
}
.hero-stats b {
  font-size: var(--fs-h3); margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

main { padding: var(--sp-4) 0 var(--sp-7); }

/* ── 卡片 ───────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.card h2 {
  font-size: var(--fs-h3); margin: 0 0 var(--sp-2);
  font-weight: 600; line-height: var(--lh-snug); text-wrap: pretty;
}
.card.answer { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card.loading { color: var(--ink-3); font-size: var(--fs-text); }
.card.loading::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: var(--sp-1);
  border: 2px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -2px;
}
@keyframes sp { to { transform: rotate(360deg); } }

.card.warn { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.card.warn h2 { color: var(--brand-dark); }

/* 本机校验未通过：缺项/填错的汇总卡 */
.card.invalid {
  background: var(--danger-soft); border-color: var(--danger-line);
  border-left: 3px solid var(--danger);
}
.card.invalid h2 { color: var(--danger-ink); font-size: var(--fs-body); }

.disclaimer {
  background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-note);
  color: var(--warn-ink); line-height: var(--lh-body);
  margin-bottom: var(--sp-3);
}

.tip { font-size: var(--fs-note); color: var(--ink-3); line-height: var(--lh-body); margin: var(--sp-2) 0 0; }
.hint { font-size: var(--fs-note); color: var(--ink-3); margin-top: var(--sp-2); line-height: var(--lh-body); }
.muted { color: var(--ink-3); }
.hidden { display: none !important; }

/* ── 答案块 ─────────────────────────────────────────── */
.qhead { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.qid {
  display: inline-block; background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-meta); padding: 2px 9px; border-radius: var(--radius-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.qid.ob { background: var(--danger-soft); color: var(--danger); }
.domain { font-size: var(--fs-meta); color: var(--ink-3); }
.card.answer h2 { margin-top: var(--sp-1); }

.sec { margin-top: var(--sp-3); }
.sec .label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3);
  letter-spacing: .06em; margin-bottom: var(--sp-1);
}
.sec p { margin: 0 0 var(--sp-1); font-size: var(--fs-text); line-height: var(--lh-loose); text-wrap: pretty; }
.sec ul { margin: var(--sp-1) 0 0; padding-left: 0; list-style: none; }
.sec ul li {
  position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-2);
  font-size: var(--fs-text); line-height: var(--lh-loose);
}
.sec ul li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}

/* 时效提醒：本产品的核心差异点，必须显眼 */
.timeliness {
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); color: var(--warn-ink);
}
.timeliness .label {
  font-weight: 700; color: var(--warn); font-size: var(--fs-note); margin-bottom: var(--sp-1);
}
.timeliness p { margin: 0 0 var(--sp-1); font-size: var(--fs-text); line-height: var(--lh-loose); }
.timeliness ul { margin: 4px 0 0; padding-left: 20px; font-size: var(--fs-text); line-height: var(--lh-loose); }

.src { margin-top: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-3); }

.foot-note {
  font-size: var(--fs-meta); color: var(--ink-3); line-height: var(--lh-loose);
  border-top: 1px dashed var(--line); padding-top: var(--sp-2); margin-top: 4px;
}
.foot-note p { margin: 0 0 var(--sp-1); }

/* 过时说法纠正块 */
.card.obsolete {
  background: var(--danger-soft); border-color: var(--danger-line);
  border-left: 3px solid var(--danger);
}
.card.obsolete h2 { color: var(--danger-ink); font-size: var(--fs-body); }
.card.obsolete .sec .label { color: var(--danger); }
.card.obsolete .sec p, .card.obsolete .sec ul li { color: var(--danger-ink); font-size: var(--fs-text); }
.card.obsolete .sec ul li::before { background: var(--danger); }

ul.sections, ol.notes { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
ul.sections li { margin-bottom: var(--sp-1); font-size: var(--fs-text); line-height: var(--lh-body); }
ol.notes li { margin-bottom: var(--sp-2); font-size: var(--fs-text); line-height: var(--lh-loose); }

/* ── 输入区 ─────────────────────────────────────────── */
textarea, input, select {
  width: 100%; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--card); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* hover 给一点反馈：否则鼠标掠过时看不出这是可填的框 */
textarea:hover, input:hover, select:hover { border-color: var(--brand-line); }
textarea:focus, input:focus, select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--card);
}
textarea { resize: vertical; line-height: var(--lh-body); }
/* 不要 appearance:none —— 那会连下拉箭头一起去掉，用户看不出这是选择框。
   保留原生箭头，只自定义边框与底色。 */
select { cursor: pointer; }
/* 占位文字各浏览器默认色深浅不一，统一到 --ink-3（对比度 4.7，达 AA） */
::placeholder { color: var(--ink-3); opacity: 1; }

/* 校验标红（.bad 由 JS 加在出错字段上） */
input.bad, textarea.bad, select.bad {
  border-color: var(--danger); background: var(--danger-soft);
}
input.bad:focus, textarea.bad:focus, select.bad:focus {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}

.ask-row { display: flex; gap: var(--sp-1); align-items: flex-start; }
.ask-row textarea { flex: 1; min-height: 104px; }
.ask-row button { flex: 0 0 auto; padding: 13px 26px; }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4);
  background: var(--brand); color: var(--on-dark); transition: background .15s, transform .05s;
  white-space: nowrap;
}
button:hover { background: var(--brand-dark); }
button:active { transform: translateY(1px); }
button:disabled {
  /* 禁用态不能用「浅底 + 白字」：实测那种组合对比度只有 1.8，几乎读不出来。
     而按钮恰恰是在「查询中…／生成中…」这类**需要用户看清状态**的时刻被禁用的
     （app.js 的 busy() 会改文字并 disable），所以这里用暖浅底 + 深字，对比度 6.4。
     WCAG 对非活动控件有豁免，但状态文字读不清是实打实的可用性问题。 */
  background: var(--brand-soft); color: var(--ink-2);
  cursor: not-allowed; transform: none;
}
button.danger { background: var(--danger); }
button.danger:hover { background: var(--danger-dark); }

.examples-label { font-size: var(--fs-note); color: var(--ink-3); margin-top: var(--sp-2); }
.examples { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.examples button {
  background: var(--card); color: var(--ink-2); border: 1px solid var(--line);
  font-weight: 400; font-size: var(--fs-note); padding: 7px 13px;
  border-radius: var(--radius-pill);
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.examples button:hover {
  background: var(--brand-soft); color: var(--brand); border-color: var(--brand);
  transform: translateY(-1px);
}
.examples button:active { transform: translateY(0); }

/* ── 「这个站怎么回答你」信任区 ─────────────────────── */
.feat { margin: var(--sp-5) 0 var(--sp-1); }
.feat-title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); font-weight: 600; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.feat-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3); box-shadow: var(--shadow);
}
.feat-no {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 700; font-size: var(--fs-note);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-1);
}
.feat-item h3 { font-size: var(--fs-text); margin: 0 0 var(--sp-1); font-weight: 600; }
.feat-item p { font-size: var(--fs-note); color: var(--ink-2); margin: 0; line-height: var(--lh-body); }

/* ── 表单 ───────────────────────────────────────────── */
.grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.grid .full { grid-column: 1 / -1; }
.grid label {
  display: block; font-size: var(--fs-note); font-weight: 500;
  color: var(--ink-2); line-height: var(--lh-snug);
}
.grid label input, .grid label select, .grid label textarea { margin-top: var(--sp-1); }

/* 必填星号 与 条件必填徽标 */
.req { color: var(--danger); font-style: normal; margin-left: 2px; }
.req-if {
  display: inline-block; font-size: var(--fs-micro); font-weight: 400; color: var(--warn);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius-xs); padding: 0 5px; margin-left: var(--sp-1); vertical-align: 1px;
}

/* ── 填写进度条（吸顶，随时可见） ────────────────────── */
#meter {
  /* top 只留一点余量：导航栏已经取消了，没有吸顶元素需要让位 */
  position: sticky; top: var(--sp-1); z-index: 8;
  display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(var(--on-dark-rgb),.94); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px var(--sp-2); margin-bottom: var(--sp-3); box-shadow: var(--shadow);
}
.meter-bar { flex: 1; height: 6px; background: var(--panel); border-radius: var(--radius-pill); overflow: hidden; }
.meter-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: var(--radius-pill); transition: width .3s ease;
}
.meter-txt {
  font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap;
  /* 数字会随填写跳动，等宽数字才不会让后面的文字左右抖 */
  font-variant-numeric: tabular-nums;
}

/* ── 价格、步骤与支付 ───────────────────────────────── */
.pay-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.price-box {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: linear-gradient(135deg, var(--pay-bg-1) 0%, var(--pay-bg-2) 100%);
  border: 1px solid var(--pay-line); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-4);
}
.price-box .amount { font-size: var(--fs-text); font-weight: 600; color: var(--pay); line-height: var(--lh-tight); }
.price-box .amount span { font-size: var(--fs-price); font-variant-numeric: tabular-nums; }
.price-box .txt {
  flex: 1; min-width: 200px; font-size: var(--fs-note);
  color: var(--pay-ink); line-height: var(--lh-body);
}

.steps { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.steps .step {
  flex: 1; min-width: 108px; text-align: center; font-size: var(--fs-note); color: var(--ink-3);
  padding: 9px var(--sp-1); border-radius: var(--radius-xs);
  background: var(--card); border: 1px solid var(--line);
}
.steps .step.on { background: var(--brand); color: var(--on-dark); border-color: var(--brand); font-weight: 600; }
.steps .step.done { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }

#paybox { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
#paybox > button { padding: var(--sp-2) var(--sp-5); font-size: var(--fs-body); background: var(--pay); }
#paybox > button:hover { background: var(--pay-dark); }

.demo-warn {
  background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--radius-sm);
  padding: 11px var(--sp-2); font-size: var(--fs-note);
  color: var(--danger-ink); line-height: var(--lh-body); width: 100%;
}
.demo-warn p { margin: 0; }

/* 真实支付二维码块。演示模式下走不到这个分支，
   但样式必须提前写好——否则接入真实支付那天页面会是裸的。 */
.qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); width: 100%; text-align: center;
}
.qr img { width: 200px; height: 200px; object-fit: contain; }
.qr p { margin: 0; font-size: var(--fs-text); color: var(--ink-2); }

.done {
  background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-text);
  color: var(--ok-ink); line-height: var(--lh-loose); width: 100%;
}
a.dl {
  display: inline-block; background: var(--ok); color: var(--on-dark); text-decoration: none;
  font-weight: 600; padding: 13px 26px; border-radius: var(--radius-sm); font-size: var(--fs-text);
  transition: background .15s;
}
a.dl:hover { background: var(--ok-dark); }

/* ── 答案卡：一句话回答 + 可展开的详尽解答 ──────────────
   当事人多数只想知道"我这种情况怎么办"，一句话就够；要拿去谈判、应诉的，
   再点开看条文原文与依据来源。所以结论在上、详版折叠，而不是一上来堆满正文。 */
.brief {
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.brief-tag {
  display: block; font-size: var(--fs-meta); font-weight: 700;
  color: var(--brand); letter-spacing: .08em; margin-bottom: 4px;
}
.brief p { margin: 0; font-size: var(--fs-text); line-height: var(--lh-loose); color: var(--ink); }

button.more {
  background: var(--card); color: var(--brand); border: 1px solid var(--brand-line);
  font-weight: 600; font-size: var(--fs-note); padding: 10px 18px;
  border-radius: var(--radius-pill); margin-bottom: var(--sp-2);
}
button.more:hover { background: var(--brand-soft); border-color: var(--brand); }
.detail[hidden] { display: none; }
.detail { border-top: 1px dashed var(--line); padding-top: var(--sp-3); }
.detail-extra:empty { display: none; }
.loading-inline { font-size: var(--fs-note); color: var(--ink-3); padding: var(--sp-2) 0; }

/* 法条原文：要与"转述"在视觉上明确区分，用户才知道这是可直接引用的原文 */
.law {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.law-name {
  font-size: var(--fs-meta); font-weight: 700; color: var(--brand);
  margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.law-text { font-size: var(--fs-text); line-height: var(--lh-loose); color: var(--ink-2); }
.law-text p { margin: 0 0 6px; }
.law-miss { color: var(--warn-ink); font-style: normal; }

ul.src-list { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
ul.src-list li {
  font-size: var(--fs-note); line-height: var(--lh-body); color: var(--ink-2);
  margin-bottom: 4px; word-break: break-all;
}
.note-plain {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--panel); border-radius: var(--radius-sm);
  font-size: var(--fs-note); line-height: var(--lh-body); color: var(--ink-2);
}

/* ── 主页「真实方案」──────────────────────────────────────
   由 highlights.py 从知识库实时生成后注入（见 server.py 的 inject_highlights）。
   定位：进站先看到实货，而不是只有一个输入框。
   样式上要与 .card.answer（用户提问后的结果）区分开——
   这是"展示"，不是"可交互结果"，所以底色更淡、无阴影、字号小一档。 */
.cases { margin-top: var(--sp-6); }
.cases-title { font-size: var(--fs-h2); margin: 0 0 var(--sp-2); font-weight: 600; }
.cases-lead {
  font-size: var(--fs-note); color: var(--ink-2); line-height: var(--lh-loose);
  margin: 0 0 var(--sp-4);
}
.cases-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .cases-grid { grid-template-columns: 1fr; } }

.case {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.case-head { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.case-q {
  font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-snug);
  margin: var(--sp-2) 0 var(--sp-2);
}
.case-label {
  font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3);
  letter-spacing: .06em; margin-bottom: var(--sp-1);
}
.case-a { font-size: var(--fs-note); line-height: var(--lh-body); color: var(--ink-2); }
.case-a p { margin: 0; }
.case-points { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.case-points li { font-size: var(--fs-note); line-height: var(--lh-body); color: var(--ink-2); margin-bottom: 4px; }
/* 新旧法差异：本产品的核心差异点，在这一区块里也要显出来 */
.case-change {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--warn-ink);
}
.case-change .tag {
  display: inline-block; margin-right: 6px; font-weight: 700; color: var(--warn);
}
.case-src {
  margin-top: auto; padding-top: var(--sp-2);
  font-size: var(--fs-meta); color: var(--ink-3);
}

/* ── 增值服务（协议起草）─────────────────────────────────
   刻意不做成顶部导航的平级标签：问答是本站主体，协议起草是正文之后
   才用到的服务，用一块独立区域呈现，视觉上明确从属于页面而非与问答并列。
   因此它比 .card 更"退"一层：底色用 --panel、不上阴影、标题小一档，
   让答案卡始终是这个页面上最实、最抢眼的块。 */
.value-add {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-4);
  background: var(--panel); border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand); border-radius: var(--radius);
}
.value-title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); font-weight: 600; }
.value-lead {
  font-size: var(--fs-text); line-height: var(--lh-loose);
  color: var(--ink-2); margin: 0 0 var(--sp-2); text-wrap: pretty;
}
.value-points { margin: 0 0 var(--sp-4); padding-left: 0; list-style: none; }
.value-points li {
  position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-1);
  font-size: var(--fs-text); line-height: var(--lh-loose); color: var(--ink-2);
}
.value-points li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.value-link {
  display: inline-block; background: var(--brand); color: var(--on-dark); text-decoration: none;
  font-weight: 600; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm); font-size: var(--fs-text);
  transition: background .15s;
}
.value-link:hover { background: var(--brand-dark); }

/* 从服务页返回主站的链接（导航栏移除后，这是唯一的回程入口） */
.back {
  display: inline-block; margin-bottom: var(--sp-2); font-size: var(--fs-note);
  color: var(--on-dark); opacity: .9; text-decoration: none;
  border-bottom: 1px solid rgba(var(--on-dark-rgb),.45);
  transition: opacity .15s;
}
.back:hover { opacity: 1; color: var(--on-dark); }

/* ── 页脚 ───────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); margin-top: var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-6);
  font-size: var(--fs-note); color: var(--ink-3); line-height: var(--lh-loose);
}
footer p { margin: 0 0 var(--sp-2); }

/* ── 浮层提示 ───────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  background: var(--ink); color: var(--on-dark); padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-text); box-shadow: var(--shadow-lg); z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.bad { background: var(--danger); }

/* ── 窄屏（≤640px）────────────────────────────────────
   一行一列、按钮通栏、留白收紧。每个断点只解决"会不会挤/会不会溢出"。 */
@media (max-width: 640px) {
  .wrap { padding: 0 var(--sp-2); }
  .hero { padding: var(--sp-5) 0 var(--sp-4); }
  .hero h1 { font-size: var(--fs-hero-sm); }
  .hero-sub { font-size: var(--fs-body); margin-bottom: var(--sp-3); }
  .hero-stats { grid-template-columns: 1fr; }

  .card { padding: var(--sp-3); }
  .feat-grid { grid-template-columns: 1fr; }

  /* 提问框与按钮并排在窄屏上会把输入框挤成一条缝，改成上下通栏 */
  .ask-row { flex-direction: column; }
  .ask-row button { width: 100%; padding: var(--sp-2) var(--sp-3); }
  .examples button { font-size: var(--fs-note); }

  .grid { grid-template-columns: 1fr; }
  .price-box { padding: var(--sp-3); gap: var(--sp-2); }
  .price-box .amount span { font-size: var(--fs-hero); }

  .value-add { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-3); }
  .qr img { width: 160px; height: 160px; }
  .toast { bottom: var(--sp-3); }
}

/* ════════════════════════════════════════════════════════════════
   「先看协议书、下载才付费」流程用到的样式
   设计意图（人定的产品要求）：
     · 客户是来解决问题的，**支付在过程中不该显得明显**——
       全站只有 .pay-line 一处出现价格，且只在客户主动点「下载」后渲染；
     · 正文本身要清爽，法律要点默认折叠（.fold）；
     · 支付渠道按钮做成平级、等宽，不刻意突出某一个。
   ════════════════════════════════════════════════════════════════ */

/* 折叠块：法律要点默认收起，客户想深究再点开。
   用原生 <details> 而不是自己写 JS 开关——少一段会坏的代码，
   而且键盘与读屏软件天然可用。 */
.fold {
  margin: 14px 0 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 0 14px;
}
.fold > summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "▸ ";
  color: var(--accent);
}
.fold[open] > summary::before { content: "▾ "; }
.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold > ol { margin: 10px 0 14px; }

/* 协议书正文：像一张纸，行距放宽便于通读 */
.agreement {
  margin-top: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  line-height: 1.95;
  font-size: .97rem;
  max-height: 60vh;
  overflow: auto;
}
.agreement h1 { font-size: 1.15rem; margin: 0 0 14px; }
.agreement h2 {
  font-size: 1rem;
  margin: 20px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.agreement h2:first-of-type { border-top: none; padding-top: 0; }
.agreement p { margin: 8px 0; }

/* 下载入口：独立一块，与正文分开，避免打断阅读 */
/* 页脚的法律文本入口（隐私政策 / 用户协议 / 免责声明） */
.legal-links {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--ink-3);
}
.legal-links a { color: var(--ink-3); text-decoration: underline; }
.legal-links a:hover { color: var(--brand); }

.dl-card { margin-top: 16px; }

/* 下单前的同意勾选（用户协议 + 隐私政策 + 境外存储单独同意）。
   按钮在勾选前是 disabled，所以这里要让客户一眼看懂"为什么点不动"。 */
.consent {
  display: block;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.consent input { margin-right: 6px; vertical-align: -1px; }
.consent a { color: var(--brand); text-decoration: underline; }
.consent-more { display: block; margin-top: 6px; color: var(--ink-3); font-size: .88rem; }
.dl-card button[disabled] { opacity: .5; cursor: not-allowed; }

/* 价格行——**全站唯一出现价格的地方** */
.pay-line {
  font-size: 1.02rem;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.pay-line b { font-size: 1.5rem; color: var(--brand); }
.pay-sub { color: var(--ink-3); font-size: .9rem; margin-left: 6px; }

/* 支付渠道按钮：等宽平级，不突出某一家 */
.chan {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 12px 16px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: var(--card);
  color: var(--brand);
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}
.chan:hover { background: var(--brand-soft); }
.chan:disabled { opacity: .55; cursor: default; }

/* 「选填」徽标：与「必填」的红色星号形成对照。
   个人信息（姓名/身份证号/住址/电话/证号）都是选填——
   填了写进正文，不填就留格式空位手写。 */
.opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--ink-3);
  font-size: .76rem;
  font-weight: 400;
  vertical-align: 1px;
}

/* 表单顶部的"什么都不用填完整"说明块 */
.always-ok { border-left: 4px solid var(--brand-line); }
.always-ok .tip { margin: 0; }

/* 法条区块里的时效变化提醒：与条文贴在一起，用左侧色条区分开 */
.timeliness.in-law {
  margin-top: 12px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
}
.timeliness.in-law .label { color: var(--accent); }

/* 主页「常见问题我们是怎么答的」：默认折叠，保持首屏简洁。
   内容仍在页面里，只是不占第一屏。 */
.cases-fold {
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 0 18px;
}
.cases-fold > summary {
  cursor: pointer;
  padding: 15px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.cases-fold > summary::-webkit-details-marker { display: none; }
.cases-fold > summary::before { content: "▸ "; color: var(--accent); }
.cases-fold[open] > summary::before { content: "▾ "; }
.cases-fold[open] > summary { border-bottom: 1px solid var(--line); }
.cases-title { font-size: 1.05rem; font-weight: 600; color: var(--brand); }
.cases-hint { font-size: .86rem; color: var(--ink-3); }
.cases-body { padding-bottom: 16px; }

/* 计划书预览：每节标题 + 开头一句。
   为什么不做成完整正文——完整正文是付费后才能下载的成品；
   页面上只给"包含哪些节、每节怎么写"，客户据此判断质量。 */
.plan-head {
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: .95rem;
}
.plan-sec { margin: 14px 0; }
.plan-title { font-weight: 600; color: var(--brand); margin-bottom: 5px; }
.plan-excerpt { color: var(--ink-2); line-height: 1.8; }
.plan-more {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: var(--ink-3); font-size: .9rem;
}

/* ── 变通回答卡 ─────────────────────────────────────────────────────────
   排在最前面的一张卡：结论 + 你可以这样做 + 已核验依据 + 常见误区。
   它比语料条目卡更"实体"，所以底色与左侧色条都略重一点，
   让客户一眼看到"这段是针对我这个问题的答案"。 */
.flex-card { border-left: 4px solid var(--brand); }
.flex-tag {
  display: inline-block; margin-bottom: .5rem; padding: .1rem .5rem;
  font-size: .78rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--ink-2);
}
.flex-brief { background: var(--brand-soft); }
.flex-steps { margin: .2rem 0 .2rem 1.1rem; padding: 0; }
.flex-steps li { margin: .35rem 0; line-height: 1.75; }
.flex-myth { border-left: 3px solid var(--danger); padding-left: .7rem; }
.rel-head { margin: 1.1rem 0 .2rem; color: var(--ink-3); font-size: .9rem; }

/* 订单恢复卡：客户刷新/回来时告诉他"上次那份还在" */
.restore-card { border-left: 4px solid var(--ok); }
.restore-card .dl-link {
  display: inline-block; margin: .4rem .5rem .1rem 0;
  padding: .35rem .8rem; border-radius: 6px;
  background: var(--ok); color: var(--on-dark); text-decoration: none; font-size: .92rem;
}

/* 内置浏览器里"下载被拦"的兜底：可预览 + 可长按复制的链接 */
.dl-copy { margin: 10px 0 0; font-size: var(--fs-note); line-height: var(--lh-loose); }
.copy-link {
  display: inline-block; margin-top: 4px; padding: 6px 8px; border-radius: 8px;
  background: var(--card); color: var(--ink-3); word-break: break-all;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
}

/* 内置浏览器（小红书/抖音/微博/QQ）里的一句救命提示：不打扰、可关闭 */
.inapp-tip {
  position: relative; max-width: 640px; margin: 0 auto; padding: 12px 44px 12px 16px;
  background: var(--warn-soft); border-bottom: 1px solid var(--warn-line);
  color: var(--ink-2); font-size: var(--fs-note); line-height: var(--lh-loose);
}
.inapp-close {
  position: absolute; top: 6px; right: 10px; border: 0; background: transparent;
  color: var(--ink-3); font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer;
}

/* 微信 + 支付宝两张收款码并排（窄屏自动堆叠）：客户钱包里有钱的那种可能不是微信 */
.qr-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.qr-pair { flex: 0 1 auto; }
.qr-label { font-size: var(--fs-note); color: var(--ink-3); margin: 0 0 6px; text-align: center; }
@media (max-width: 480px) { .qr-row { flex-direction: column; align-items: center; } }

/* ── 店主复核台（/admin.html）：读协议全文 → 必要时改 → 放行 ──
   为什么用等宽字体、而且给足高度：店主是**逐条核对条款**，
   等宽 + 18 行能一眼看出"金额、日期、探望时间"这类关键数字有没有写错。 */
.rv { border-left: 3px solid var(--accent, var(--brand-line)); }
.rv-text {
  width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-note); line-height: 1.7; white-space: pre-wrap;
}

/* 店主联系方式：客服入口要一眼看到（客户在等复核/取不回文件时最需要它） */
.contact-box {
  margin: var(--sp-2) 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--brand-soft); color: var(--ink);
  font-size: var(--fs-body); font-weight: 600; word-break: break-all;
}
.contact-line { display: block; }
footer .contact-box {
  background: transparent; padding: 0; margin: var(--sp-1) 0 0;
  font-weight: 500; color: var(--ink-3); font-size: var(--fs-note);
}

/* 后台"记住口令"勾选：行内布局，手机上也好点 */
.remember { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.remember input { width: auto; margin: 0; }

/* ══ P1 首屏与可读性（DSH 2026-09-29，实测依据见 git 注释）══ */
*/

/* ④ 服务卡对比度（桌面与手机都受益） */
.hero-svc {
  background: rgba(var(--on-dark-rgb), .15);
  border-color: rgba(var(--on-dark-rgb), .32);
}
.hero-svc:hover { background: rgba(var(--on-dark-rgb), .22); }

@media (max-width: 640px) {
  /* ① 手机首屏收紧 */
  .hero { padding: var(--sp-4) 0 var(--sp-3); }
  .hero-badge { font-size: var(--fs-meta); padding: 3px var(--sp-2); margin-bottom: var(--sp-2); }
  .hero h1 { font-size: var(--fs-hero-sm); }
  .hero-sub { font-size: var(--fs-text); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }

  .hero-services { gap: var(--sp-1); margin-bottom: var(--sp-3); }
  .hero-svc { padding: var(--sp-2); }
  .svc-no { margin-bottom: 2px; }
  .svc-name { font-size: var(--fs-text); margin-bottom: 2px; }
  .svc-desc { font-size: var(--fs-meta); line-height: var(--lh-tight); }

  /* 统计条：三行盒子 → 一行文字（省 ~95px，且更像"机构页"的一句话） */
  .hero-stats { display: block; font-size: var(--fs-meta); line-height: var(--lh-snug); }
  .hero-stats span {
    display: inline; background: none; border: 0; padding: 0;
    color: rgba(var(--on-dark-rgb), .9);
  }
  .hero-stats span + span::before { content: " · "; color: rgba(var(--on-dark-rgb), .55); }
  .hero-stats b { font-size: var(--fs-text); margin-right: 2px; }

  /* ③ 可点元素 ≥44px：手机上"点不中"比"不好看"更致命 */
  .examples button, .examples .chip, .examples a { min-height: 44px; }
  .back, .dl-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* 起草前须知：默认收起（手机上原来一整段四项挤在一起，一眼扫不完）。
   用原生 <details> —— 不引入 JS、键盘可用、读屏可读。 */
details.disclaimer { padding: 0; }
details.disclaimer > summary {
  cursor: pointer; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-note);
  color: var(--warn-ink); list-style: none;
}
details.disclaimer > summary::-webkit-details-marker { display: none; }
details.disclaimer > summary::before { content: "▸ "; }
details.disclaimer[open] > summary::before { content: "▾ "; }
details.disclaimer[open] > summary { border-bottom: 1px solid var(--warn-line); }
.disc-list { margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3) 2.2em;
  font-size: var(--fs-note); line-height: var(--lh-loose); color: var(--warn-ink); }
.disc-list li { margin: 0 0 6px; }
.disc-list li:last-child { margin-bottom: 0; }