/* 计算器页样式(rmd / ss / ss-couple / roth 共用)。
   ⚠️ index / privacy / born-1959 三页仍是各自的内联样式,**有意没合过来**。
      合并是能做的,但隐私政策那一页是 App 里那条法务链接的落点 ——
      为了省几行 CSS 去动它,换来的风险和收益完全不成比例。 */

/* ⚠️⚠️ 改任何颜色之前:跑 dataviz skill 的 scripts/validate_palette.js,
   以及文字色的 WCAG 对比度。**别靠眼睛。**
   (site.css 以前写的是「跑 scripts/validate_palette.js」,但那个路径
    在本仓库里不存在 —— 它属于 dataviz skill,不是这个项目。)

   分类色的命令(浅色面):
     node <dataviz>/scripts/validate_palette.js "#00876a,#c05621,#1060c0" \
          --mode light --surface "#faf9f6"
   深色面把 --mode dark、--surface "#15130f" 换上,并且**重新挑值**,
   不要把浅色那组调亮 —— 深色的亮度带更窄([0.48,0.67])。 */
:root {
  color-scheme: light dark;
  /* ⚠️⚠️ 底色是**暖白**不是纯白,正文是**带绿调的深墨**不是近黑。
     这两个不是审美偏好:纯白 + 近黑在长文上晃眼,而这个站的读者是
     准备退休的人。同时这也是把 app 图标那套颜色穿到网站上 ——
     在此之前,社交分享卡是深绿+金+米白,网站本体是纯白+近黑+通用蓝,
     从社交点进来的人看到的是两个牌子。 */
  --ink: #1c2622;   /* 14.78:1 on --bg */
  --bg: #faf9f6;
  --dim: #66706b;   /* 4.87:1 */
  --line: #e3ded4;
  --card: #f3f1ea;
  /* ⚠️ 链接**保持蓝色**,不要改成品牌绿。「蓝色 = 可点」是这个年龄段
     读者最牢固的习惯,而我们要移动的指标恰恰是点击率。
     ⚠️ 以前 --link 和 --cat-irs 是同一个值,现在拆开了:一个是界面
     affordance,一个是图表里"IRS 那一类"的身份色,不该被绑在一起。 */
  --link: #0b6bcb;  /* 5.01:1 */
  --green: #0f2f25; /* 品牌绿,取自 app 图标。13.72:1 */
  /* ⚠️ 旧值 #b4703a 在**旧白底上就已经不达标**(3.95:1,文字需 4.5)——
     这是既有缺陷,不是换底色带来的。加深到 5.12:1。 */
  --warn: #9c5a1c;
  /* ⚠️⚠️ 图表填充**单独一个 token**,不复用 --green。
     --green 是**文字**色,为文字对比度挑的,深到接近黑;当条形填充会读成
     一块黑板而不是数据色。校验器实测:#0f2f25 的 OKLCH 亮度远在
     标记带 [0.43, 0.77] 之外。 */
  --fill: #00876a;
  /* 三家机构的分类配色(图表用,和文字色分开)。
     ⚠️⚠️ 这一组是 2026-08-07 重挑的,起因是发现旧注释在撒谎:
        旧值绿↔橙在 protan 下只有 ΔE 6.4,注释说"靠三条独立泳道做第二编码"
        —— 但**那张泳道图早就被删了**,现在这三个色只用作时间线列表里的
        圆点,绿点和橙点在同一列里相邻。理由没了,数值却没跟着改。
     新值 ΔE 10.1,四项全过,不再依赖任何第二编码。
     (识别本身仍由每条的标题和正文承担,圆点只是加强 —— 这一条别丢。) */
  --cat-ssa: #00876a;
  --cat-medicare: #c05621;
  --cat-irs: #1060c0;
  /* 「你在这里」。⚠️ 用 app 图标上那个金色 —— 全站别处没有第二处用它,
     所以它一出现就只可能是「你」。
     ⚠️ 图标原色 #e2b660 当文字用不合格(暖白底上 1.9:1);
     这是加深到 5.35:1 的一步(WCAG 文字 4.5:1)。深色面才用回原色。
     ⚠️ 不能用 --warn:那是 Medicare 那一类的颜色,混在一起读者会以为
     「现在」也是一种机构。 */
  --now: #8a5f10;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* ⚠️ 深色面也是暖的(#15130f 不是中性 #141414),和浅色面同源;
       两面一冷一暖会让切换主题像换了个网站。 */
    --ink: #ece9e2;   /* 15.30:1 */
    --bg: #15130f;
    --dim: #9a978f;   /* 6.36:1 */
    --line: #332f28;
    --card: #1e1b16;
    --link: #6cb2ff;  /* 8.35:1 */
    --green: #6fd3a6; /* 10.20:1 */
    --warn: #e09a62;  /* 7.92:1 —— 深色面上本来就达标,不用动 */
    /* 深色面上重新挑过的一步,不是把浅色那个翻过来 —— 校验器对深色
       面的亮度带更窄([0.48, 0.67]),浅色那个值在这边不过。 */
    --fill: #3aa886;
    /* ⚠️ 深色面的三个是**重新挑的**,不是把浅色那组调亮。
       浅色那组直接搬过来时,亮度带(深色更窄)和 protan 分离度双双不过;
       实测 ΔE 5.4,肉眼看是"橙和绿在红色盲下会糊"。这组三项全过。 */
    /* ⚠️ 2026-08-07 换暖黑底之后**重新验过**:四项全过,CVD ΔE 10.0。
       试着按浅色面那样再提高分离度,反而掉出深色的亮度带 —— 所以
       这三个值**不动**。校验器说不用改的时候就别改。 */
    --cat-ssa: #3aa886;
    --cat-medicare: #b8762f;
    --cat-irs: #4f7fe8;
    --now: #e2b660;   /* 深色面上直接用图标原色,9.80:1 */
  }
}

body {
  /* ⚠️ 18px 不是 17px:读者是准备退休的人,而这个站几乎全是要读的正文。
     一个像素的差别在这个年龄段上是真的。 */
  font: 18px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ⚠️⚠️ 标题用**系统衬线**,正文用无衬线。
   理由不是好看:这个站的内容是带法条引证的文章体(1959 年队列的歧义、
   联合寿命表、各州征税),衬线标题给的是"这是有出处的东西"那种分量,
   而满屏系统无衬线看起来和任何一个免费计算器没有区别。
   ⚠️ 全部是系统自带字体 —— **零加载成本**,不引入任何外部字体请求。
      这个站没有构建步骤,也不该为了字体去加一个。 */
h1, h2, h3 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .4rem; }
h2 { font-size: 1.3rem; margin: 2.4rem 0 .6rem; }
.sub { color: var(--dim); margin: 0 0 2rem; font-size: .95rem; }
a { color: var(--link); }

/* 输入 */
.field {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line);
  /* ⚠️⚠️ 必须能换行(2026-08-03,子代理量出来的)。
     输入框有 min-width: 9.5rem(152px),下拉框有 max-width: 14rem ——
     在 320px 宽的屏上(iPhone SE、便宜 Android),标签 + 输入框放不下一行,
     于是**整个页面**被撑出横向滚动条:/ss 实测 350 > 320,
     /ss-couple 353,/roth 345。表现是金额被切掉一截、整页能左右拖。
     375px 上六个页面都是干净的,所以这个问题只在更窄的屏上出现 ——
     而那正是最可能从社交广告点进来的那批设备。
     换行让输入框在挤不下时掉到第二行,而不是把页面顶开。 */
  flex-wrap: wrap;
}
.field:last-child { border-bottom: 0; }
.field label { flex: 1 1 12rem; }
/* 掉到第二行时占满宽度 —— 半宽的输入框贴在左边看起来像出了错。 */
.field > input, .field > select { flex: 1 1 9.5rem; }
.field .hint { display: block; font-size: .85rem; color: var(--dim); margin-top: .15rem; }
input[type="date"], input[type="text"] {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  /* ⚠️ 高度做到 44px(Apple 的最小触控尺寸)。原先 .4rem 的内边距量出来是
     42px —— 只差 2px,但这批读者是准备退休的人,而且这几个框是**必须**
     碰到的东西,不是可选的装饰。
     ⚠️ 字号继承 17px,不能降到 16px 以下:iOS Safari 会在聚焦小于 16px 的
     输入框时把整页放大,那一下跳动比框矮 2px 难受得多。 */
  padding: .55rem .6rem; min-height: 44px; min-width: 9.5rem; text-align: right;
}
input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .4rem 1.2rem; margin: 1.2rem 0;
}

/* 结果 */
.headline { font-size: 2.6rem; font-weight: 700; color: var(--green); line-height: 1.1; }
.headline .unit { font-size: 1rem; font-weight: 400; color: var(--ink); }
.eyebrow {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--warn); margin-bottom: .5rem;
}
.step { padding: .8rem 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step .row { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.step .why { font-size: .93rem; color: var(--dim); margin-top: .25rem; }
.step a { font-size: .85rem; }

.warn {
  border-left: 3px solid var(--warn); padding-left: .9rem; margin: 1.2rem 0;
}
.warn strong { color: var(--warn); }

.note {
  font-size: .92rem; color: var(--dim);
  border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.2rem;
}
ul { padding-left: 1.2rem; } li { margin: .4rem 0; }


/* ── 顶部导航 ──────────────────────────────────────────────
   ⚠️⚠️ 这个站原先**一条导航都没有**(2026-08-03 开发者指出)。
      每一页都是死胡同:除了页脚一段交叉链接,从社交广告落到某一页的人
      既不知道这是什么站,也没有办法去别的计算器。
      推广要开始了,深度落地的比例只会更高。
   ⚠️ 做得很矮、字很小,是**故意**的:第一屏归内容,不归导航。
      站名一行 + 计算器一行,在 320px 上也只占两行。
   ⚠️ 当前页不给链接(aria-current),避免读者点一个回到原地的链接。 */
.nav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  padding-bottom: .9rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.nav-home {
  font-weight: 700; color: var(--ink); text-decoration: none;
  margin-right: .3rem;
}
.nav a { color: var(--link); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav [aria-current] { color: var(--dim); }

/* ── 社保页 ────────────────────────────────────────────── */

select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  /* ⚠️ 下拉框量出来只有 37px,是全站最矮的触控目标 —— 比输入框还差 7px,
     而它偏偏是「筛报税身份」这种必须点的东西。同样补到 44px。 */
  padding: .55rem .6rem; min-height: 44px; max-width: 14rem;
}

/* 滑块。
   ⚠️ 拇指做到 28px —— 远大于默认值,也大于 Apple 建议的 44pt 触控区的一半。
      这个站的读者是准备退休的人,默认那个细拇指在 iPhone 上按不准。
   ⚠️ 整条滑块**独占一行**(.field--slider 把 flex 改成竖排):挤在标签右边时
      可拖的行程只剩几十像素,而这个滑块的全部价值就在拖动的过程。 */
.field--slider { display: block; }
.field--slider label { display: block; margin-bottom: .5rem; }
.field--slider output {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--green); margin-left: .15rem;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; margin: 0;
  /* ⚠️ 高度给 44px 是**触控区**,不是外观。轨道只有 6px,而 input 自己的盒子
     就是可点区域 —— 不撑到 44px 的话,手指要精准命中那 6px 的带子才能拖动。
     44 是 Apple 的最小触控尺寸,对这个站的读者(准备退休的人)只多不少。 */
  height: 44px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--line);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px;
  border-radius: 50%; background: var(--green);
  border: 2px solid var(--bg); cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border: 2px solid var(--bg);
  border-radius: 50%; background: var(--green); cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"]:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.range-ends {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--dim); margin-top: .15rem;
}

/* ── 时间轴 ──────────────────────────────────────────────
   ⚠️⚠️ 这一页原先渲染成一串项目符号。一个叫 "timeline" 的页面排成列表,
      不是克制,是没做完 —— 而冷流量分不出「朴素」和「半成品」的区别。
   ⚠️ 但**什么都不折叠**。这个项目有过教训:把说明藏进点击深度,
      会被读成「按点击深度配给披露」。层次靠排版和颜色给,不靠隐藏。 */
.tl { list-style: none; padding: 0; margin: 1.5rem 0 0; position: relative; }

/* 换生日时,里程碑依次浮上来。
   ⚠️ 这个动效有**一个**目的:让「刚才重算过了」这件事被看见。
      换了日期而屏幕静止不动,读者不确定它有没有反应 —— 尤其是
      只改了月份、大部分日期只挪一格的时候。
   ⚠️ 总时长压在 400ms 以内(10 条 × 22ms 错开 + 180ms 动画)。
      这是给准退休人群的金融工具,慢吞吞的入场动画会削掉可信度,
      而这个站的可信度是它唯一的资产。 */
@keyframes tlIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.tl-item, .tl-gap, .tl-now { animation: tlIn .18s ease-out both; }

/* ⚠️⚠️ 前庭敏感的人会被入场动画和呼吸光晕弄得不适,而这批读者里
   这种情况不罕见。系统开了「减少动态效果」就**全部关掉** ——
   不是减速,是不放。 */
@media (prefers-reduced-motion: reduce) {
  .tl-item, .tl-gap, .tl-now, .tl-now::before { animation: none; }
}
/* 竖脊。⚠️ 用伪元素而不是真元素 —— 它不该被读屏软件念出来。 */
.tl::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding: 0 0 1.7rem 2.1rem; }
.tl-item:last-child { padding-bottom: .3rem; }
.tl-item::before {          /* 脊上的点 */
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--dot, var(--dim));
  box-sizing: border-box;
}
/* 三家机构三个颜色。⚠️ 颜色是**辅助**,不是唯一信号 —— 每一行的文字里
   本来就写着是社保、Medicare 还是 IRS 的规则,色盲读者不会丢信息。 */
.tl-item[data-cat="ssa"]      { --dot: var(--cat-ssa); }
.tl-item[data-cat="medicare"] { --dot: var(--cat-medicare); }
.tl-item[data-cat="irs"]      { --dot: var(--cat-irs); }

.tl-when {
  font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.tl-age { font-size: .85rem; font-weight: 400; color: var(--dim); margin-left: .5rem; }
.tl-title { font-weight: 600; margin: .15rem 0 .3rem; }
.tl-item p { margin: 0 0 .4rem; font-size: .95rem; }
.tl-rule { font-size: .85rem; color: var(--dim); font-style: italic; }

/* 已经过去的里程碑压暗 —— 但**不隐藏**:它们是这条时间轴的一部分,
   而且读者常常是在回头核对自己有没有错过什么。 */
/* 空档。⚠️ 这是这一页从「列表」变成「时间轴」的唯一一处改动 ——
   不是另画一张图,而是把**过了多久**写进同一条脊上。
   上一版试过在列表上面加一张三泳道图,失败了:点上没标签,要读懂
   得在图和列表之间来回对照。信息应该在一处,不是两处。

   ⚠️ 空档的**高度按年数缩放**(行内 style 给的 --gap),而不是固定值。
      固定高度的话,4 年和 15 年的空档长得一样 —— 那就又把时间的形状抹平了,
      而那正是加这个东西的全部理由。
   ⚠️ 上限卡在 5.5rem:一个 30 岁的人到 RMD 之间可以空二十几年,
      按比例画会撑出半屏空白,读者以为页面到底了。

   ⚠️ aria-hidden:读屏软件会逐条念出日期,间隔对它是冗余的。 */
.tl-gap {
  position: relative;
  padding: 0 0 0 2.1rem;
  height: var(--gap, 2.6rem);
  display: flex; align-items: center;
}
/* 实线脊在这一段盖掉,换成虚线 —— 虚线读作「时间在过,但什么都没发生」,
   而断开的实线读作「这里少了点东西」。 */
.tl-gap::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--bg);
}
.tl-gap::after {
  content: ""; position: absolute; left: 7px; top: 2px; bottom: 2px;
  border-left: 2px dashed var(--line);
}
/* ⚠️ 第一版把这里从 .8rem 提到 .92rem,量出来 14.72px —— 仍然比正文(17px)
   还小,是全页最小的字。我当时把它描述成一个改进,而开发者一眼就说
   「没看出来变大」。他是对的:比正文小的字,不管怎么调都读作附注。
   数字现在比里程碑的日期还大一档,因为它才是要被扫到的那个东西。 */
.tl-gap span {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: var(--bg); padding: .2rem .6rem .2rem .55rem;
  position: relative; left: -1.5rem;
  font-size: 1rem; color: var(--dim);
}
.tl-gap b {
  font-size: 1.5rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}

.tl-item.is-past .tl-when,
.tl-item.is-past .tl-title { opacity: .55; }
/* ⚠️ 压暗用**透明度**,不要改 border-color(2026-08-03 线上一看就发现)。
   原先把过去的点改成灰色,而一个 66 岁的人 10 条里有 6 条已经过去 ——
   于是刚加的类别配色对大多数行根本看不见。
   同一个元素上有两个信号(过去/未来、哪家机构),
   用颜色表一个、用透明度表另一个,两个才都活得下来。 */
.tl-item.is-past::before { opacity: .4; }

/* 「你在这里」。⚠️ 只精确到**年**,见 timeline.html 里的说明。 */
.tl-now { position: relative; padding: 0 0 1.7rem 2.1rem; }
.tl-now::before {
  content: ""; position: absolute; left: -1px; top: .5rem;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--now); border: 3px solid var(--bg); box-sizing: border-box;
  /* 一圈会呼吸的光晕。⚠️ 动的是 box-shadow 的扩散半径,不是 width/height ——
     后者会触发布局重排,整条时间轴每帧抖一下。 */
  animation: nowPulse 2.6s ease-in-out infinite;
}
@keyframes nowPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--now) 55%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--now) 0%, transparent); }
}
.tl-now span {
  font-size: .88rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--now);
}

/* ── 横向条:比较三种状态 ────────────────────────────────
   形式的依据(dataviz:比较量级 → 条形;类别名很长 → 横向)。
   ⚠️ **颜色不编码任何东西。** 三条同一个色相,数值由**长度**承载 ——
      这不是三个需要区分身份的实体,是同一个家庭的三种状态。
      给它们三种颜色会让读者去找"绿色代表什么",而那里没有含义。
   ⚠️ 单序列**不要图例**。一个色块的图例只是把标题重说一遍。 */
.bars { margin: 1.2rem 0 0; }
.bar-row { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.bar-row:last-child { border-bottom: 0; }
.bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .4rem;
}
.bar-label { font-weight: 600; }
/* 值标在条的末端(dataviz:bars → value at the tip)。这里放在标题行右侧,
   因为窄屏上条内放不下 —— 规范说放不下就移到外面,绝不裁切。 */
.bar-value { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.bar-track { background: var(--line); border-radius: 2px; height: 14px; }
.bar-fill {
  height: 14px; background: var(--fill);
  /* ⚠️ 数据端 4px 圆角,基线端方角 —— 圆角两头会让人以为条是浮着的,
     而条必须看得出是从 0 长出来的。 */
  border-radius: 0 4px 4px 0;
  min-width: 2px;   /* 极小值也要看得见,否则读者以为是 0 */
}
.bar-why { font-size: .93rem; color: var(--dim); margin-top: .45rem; }

/* 逐岁阶梯。⚠️ 宽表在窄屏必须自己横向滚,不能让整个页面横滚。 */
.scroller { overflow-x: auto; margin: 1.2rem 0; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .55rem .5rem; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th {
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--line);
}
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:last-child { border-bottom: 0; }
tbody tr.is-fra td { font-weight: 700; }
tbody tr.is-fra td:first-child::after {
  content: " — full retirement age"; font-weight: 400; color: var(--dim); font-size: .85rem;
}

/* 终身累计曲线。
   ⚠️⚠️ 纵轴**不从 0 起** —— 不放大就看不出形状。但放大必然夸大,
      所以图边必须同时摆着真实跨度(见 .spread),否则这张图在撒谎。 */
figure { margin: 1.2rem 0; }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .curve { fill: none; stroke: var(--green); stroke-width: 2.5; }
.chart .tick { fill: var(--dim); font-size: 11px; }
.chart .zero-note { fill: var(--dim); font-size: 10px; font-style: italic; }
figcaption { font-size: .9rem; color: var(--dim); margin-top: .5rem; }
.spread { font-weight: 600; color: var(--ink); }

/* ── Explain 演示块 ────────────────────────────────────────
   ⚠️⚠️ 这一块是**引用真人机器的真实输出**,视觉上必须一眼看出是引文,
      不能读成我们自己写的宣传语 —— 左边那道竖线就是干这个的。
   ⚠️ 回答正文用 --ink 而不是 --dim:它是这一块的主角。旁边的
      「On screen / Asked / Excerpt」才是辅助信息,那些用 --dim。
      反过来配色会让人只看见框架,看不见内容。 */
.xd { margin: 2.6rem 0 1.5rem; }
.xd h2 { margin-bottom: .3rem; }
.xd-lede { color: var(--dim); margin: 0 0 1rem; font-size: .95rem; }

.xd-card {
  border-left: 3px solid var(--fill);
  background: var(--card);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.1rem;
}
.xd-screen, .xd-q {
  font-size: .9rem; color: var(--dim);
  padding-bottom: .5rem;
}
.xd-q { border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.xd-screen strong, .xd-q strong { color: var(--ink); font-weight: 600; }

.xd-a p { margin: 0 0 .8rem; }
.xd-a p:last-child { margin-bottom: 0; }

/* ⚠️ 出处行必须留着,而且不能藏 —— 「这是节选、这是真实录制」这两件事
      一旦不说,就成了拿节选冒充全文、拿演示冒充产品。 */
.xd-src {
  margin: .9rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--dim); font-style: italic;
}

/* ⚠️ 演示块的去处。整站在 2026-08-05 之前**一个 App Store 链接都没有** ——
      演示得再好,不给去处等于没做。这一行必须显眼,但不做成大按钮:
      这个站的说服力来自克制,一个跳眼的 CTA 会把前面那段真实输出的
      可信度一起拉低。 */
.xd-cta { margin: .9rem 0 0; font-size: .95rem; }
.xd-cta a { font-weight: 600; text-decoration: none; }
.xd-cta a:hover { text-decoration: underline; }

/* ── 遗属缺口留资 ──────────────────────────────────────────
   ⚠️⚠️ 这是全站唯一的转化入口,但它**不该长得像广告**。
      这个站能让人填表,靠的是前面那些数字算得准、出处写得清 ——
      一个跳眼的营销块会把那份信任一起拉低。所以:和 .card 同一套
      边框圆角,只用左边一道 --now(金)把它和计算结果区分开。
   ⚠️ 金色在全站只有两个用途:「你在这里」和这里。都是「和你有关」。 */
.lead {
  margin: 2.4rem 0 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--now);
  border-radius: 0 12px 12px 0;
  background: var(--card);
  padding: 1.3rem 1.4rem;
}
.lead h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.lead-lede { color: var(--dim); margin: 0 0 1.1rem; font-size: .95rem; }

/* ⚠️ 两列在窄屏必须塌成一列 —— 320px 上并排放不下,而这个站的读者
      有相当比例在手机上,塌不下去等于表单填不了。 */
.lead-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .8rem; }
.lead-row label { flex: 1 1 12rem; display: flex; flex-direction: column; gap: .3rem;
                  font-size: .9rem; color: var(--dim); }
.lead input[type="text"], .lead input[type="email"], .lead input:not([type]), .lead select {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
  min-height: 44px;   /* ⚠️ Apple 最小触控尺寸,读者是准备退休的人 */
  box-sizing: border-box; width: 100%;
}
.lead-check { display: flex; align-items: center; gap: .55rem;
              font-size: .95rem; margin: .2rem 0 1rem; min-height: 44px; }
.lead-check input { width: 20px; height: 20px; }

.lead-note { font-size: .85rem; color: var(--dim); margin: 0 0 1rem; line-height: 1.5; }

.lead button {
  font: inherit; font-weight: 600; font-size: 1rem;
  background: var(--green); color: #faf9f6;
  border: 0; border-radius: 9px; padding: .8rem 1.4rem;
  min-height: 48px; cursor: pointer; width: 100%;
}
.lead button:hover { filter: brightness(1.15); }
.lead button:disabled { opacity: .55; cursor: default; }

#lead-status { margin-top: .7rem; font-size: .92rem; min-height: 1.4em; }
#lead-status.is-error { color: var(--warn); }
#lead-status.is-ok { color: var(--fill); font-weight: 600; }

/* ⚠️ 披露不做成灰色小字里的小字。它比 --dim 稍暗一点点、和正文同宽,
      是**能读的**大小 —— 藏起来的披露等于没披露,而且被自己发现更伤。 */
.lead-disc { font-size: .85rem; color: var(--dim); line-height: 1.5;
             margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }

@media (prefers-color-scheme: dark) {
  .lead button { color: #15130f; background: var(--green); }
}