/* ============================================================
   估值预估页 /valuation（scripts/build-valuation.mjs 生成）
   主线：首屏 → 曲线（进场画出来，悬停看每个月）→ 三个时间点 → 怎么读 → 加入我们
   与首页、定价页同一套语言：白底、Geist、单一信号橙；标题、FAQ、收尾沿用 home.css 的 .hd-* 契约。
   类名一律 vl- 开头，只作用于 .vl 容器；颜色只用 site.css 的令牌（深色主题自动跟随）。
   ============================================================ */
.vl { --vl-r: 22px; --vl-ink-12: color-mix(in srgb, var(--ink-strong) 12%, transparent); }
.vl .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vl .vl-now, .vl .vl-m-v, .vl .vl-tbl { font-feature-settings: "tnum" 1; }
/* site.css 给 p a / li a 加了橙色下划线，这页的链接自己管 */
.vl p a, .vl li a { border-bottom: 0; }

/* ============ 首屏：标题在左，曲线在右（打开页面就能看到曲线画出来） ============ */
.vl-hero { padding-top: clamp(36px, 5vw, 72px); }
.vl-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.vl-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 0.8125rem; font-weight: 500; color: var(--mut); }
.vl-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.vl-hero h1 { margin-top: 22px; font-size: clamp(2.7rem, 4.9vw, 4.7rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.055em; }
.vl-hero h1 em { font-style: normal; color: var(--signal); white-space: nowrap; }
.vl .vl-nw { white-space: nowrap; }
.vl .vl-hero-sub { margin: 22px 0 0; max-width: 30em; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.65; color: var(--mut); }
.vl-hero .btn-row { margin-top: 30px; }

/* ============ 曲线 ============ */
.vl-card { margin: 0; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--vl-r); background: var(--bg); box-shadow: var(--hd-shadow); }
.vl-card-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.vl-now-k { display: block; font-size: 0.875rem; color: var(--mut); }
.vl .vl-now { display: block; margin-top: 2px; font-size: clamp(2.5rem, 4.4vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.055em; color: var(--ink-strong); }
.vl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; }
.vl-when { margin-right: 6px; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--ink-strong); font-feature-settings: "tnum" 1; }
.vl-chip { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 0.8125rem; font-weight: 500; color: var(--mut); }
.vl-chip--sig { border-color: color-mix(in srgb, var(--signal) 35%, transparent); background: var(--signal-soft); color: var(--signal); }

.vl-plot { position: relative; margin-top: 18px; aspect-ratio: 16 / 9.6; min-height: 300px; }
.vl-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vl-nojs { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 0.9375rem; color: var(--mut); }
.vl-svg text { fill: var(--mut); font-family: var(--font-mono); font-size: 11px; font-feature-settings: "tnum" 1; }
.vl-svg .g { stroke: var(--vl-ink-12); stroke-width: 1; }
.vl-svg .g0 { stroke: var(--ink-strong); stroke-width: 1.25; }
.vl-svg .tk { stroke: var(--ink-strong); stroke-width: 1; }
.vl-svg .brk { fill: none; stroke: var(--ink-strong); stroke-width: 1.5; stroke-linecap: round; }
.vl-svg .area { fill: url(#vlGrad); }
.vl-svg .curve { fill: none; stroke: var(--signal); stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round; }
.vl-svg .curve--a { stroke-width: 2.25; }
.vl-svg .curve--gap { stroke-width: 2.25; stroke-dasharray: 0.5 6; }
.vl-svg .pt { fill: var(--bg); stroke: var(--signal); stroke-width: 2; }
.vl-svg .pt--end { fill: var(--signal); stroke: var(--bg); stroke-width: 2.5; }
.vl-svg .stem { stroke: var(--mut-2); stroke-width: 1; stroke-dasharray: 3 3; }
.vl-svg .mdot { fill: var(--ink-strong); stroke: var(--bg); stroke-width: 2; }
.vl-svg .ms text, .vl-svg .val { fill: var(--ink-strong); font-family: var(--hd-font); font-size: 13px; font-weight: 600; }
.vl-svg .val { font-size: 12.5px; }
.vl-svg .mul rect { fill: var(--bg); stroke: color-mix(in srgb, var(--signal) 40%, transparent); stroke-width: 1; }
.vl-svg .mul text { fill: var(--signal); font-size: 11.5px; font-weight: 500; }
.vl-svg .xh { stroke: var(--ink-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.vl-svg .xr { fill: var(--bg); stroke: var(--ink-strong); stroke-width: 2; }

.vl-scrub { position: absolute; inset: 0; z-index: 1; cursor: crosshair; touch-action: pan-y; }
.vl-tip { position: absolute; z-index: 2; left: 0; top: 0; display: grid; gap: 2px; min-width: 132px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: var(--hd-shadow); pointer-events: none; white-space: nowrap; }
.vl-tip[hidden] { display: none; }
.vl-tip-m { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--mut); }
.vl-tip-v { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-strong); }
.vl-tip-g { font-size: 0.8125rem; color: var(--mut); }

/* 曲线顶端的 Adis：曲线画完之后才出现，站在终点上 */
.vl-bot { position: absolute; left: 0; top: 0; z-index: 1; width: var(--bw, 92px); height: auto; pointer-events: none; opacity: 0; transform-origin: 50% 94%; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 94%)); filter: drop-shadow(0 12px 12px rgba(60, 40, 20, 0.14)); }
.vl-card.is-done .vl-bot { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .vl-card.is-done .vl-bot { animation: vlPop 0.7s var(--hd-ease) both; }
  @keyframes vlPop { from { opacity: 0; scale: 0.86; } to { opacity: 1; scale: 1; } }
}

.vl .vl-cap { margin-top: 18px; max-width: 52em; font-size: 0.8125rem; line-height: 1.6; color: var(--mut-2); }

/* 逐月数值 */
.vl-data { margin-top: 20px; border-top: 1px solid var(--line); }
.vl-data summary { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; font-size: 0.9375rem; font-weight: 500; color: var(--ink-strong); cursor: pointer; list-style: none; }
.vl-data summary::-webkit-details-marker { display: none; }
.vl-data summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.vl-data summary i { position: relative; width: 14px; height: 14px; color: var(--mut); transition: color 0.2s ease; }
.vl-data summary:hover i { color: var(--signal); }
.vl-data summary i::before, .vl-data summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--hd-ease); }
.vl-data summary i::after { transform: rotate(90deg); }
.vl-data[open] summary i::after { transform: rotate(0deg); }
.vl-data-body { padding-top: 12px; }
.vl-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.vl-tbl { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9375rem; }
.vl-tbl th, .vl-tbl td { padding: 11px 18px; text-align: left; white-space: nowrap; border: 0; border-bottom: 1px solid var(--line-soft); }
.vl-tbl thead th { background: var(--bg-2); font-family: var(--hd-font); font-size: 0.8125rem; font-weight: 500; color: var(--mut); }
.vl-tbl tbody th { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--ink-strong); }
.vl-tbl td { color: var(--mut); }
.vl-tbl td:nth-child(2) { font-weight: 600; color: var(--ink-strong); }
.vl-tbl tbody tr:last-child > * { border-bottom: 0; }
.vl-tbl tbody tr:last-child td:nth-child(2) { color: var(--signal); }
.vl .vl-fine { margin-top: 12px; font-size: 0.8125rem; line-height: 1.6; color: var(--mut-2); }
.vl .vl-formula { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mut); }

/* ============ 三个时间点 ============ */
.vl-moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.vl-m { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 28px; border: 1px solid var(--line); border-radius: var(--vl-r); background: var(--bg); }
.vl-m > :not(.vl-m-art) { margin-left: 14px; margin-right: 14px; }
.vl-m--now { border-color: color-mix(in srgb, var(--signal) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 60%, transparent), var(--hd-shadow); }
.vl-m-art { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.vl-m-art img { width: 90%; height: 90%; object-fit: contain; }
.vl-m-k { margin-top: 22px; font-size: 0.8125rem; font-weight: 500; color: var(--mut); }
.vl .vl-m-t { margin-top: 4px; font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.vl .vl-m-v { display: block; margin-top: 16px; font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.05em; color: var(--ink-strong); }
.vl-m--now .vl-m-v { color: var(--signal); }
.vl .vl-m-d { margin-top: 10px; font-size: 1rem; color: var(--mut); }

/* ============ 响应式 ============ */
@media (max-width: 1100px) {
  .vl-hero-grid { grid-template-columns: 1fr; }
  .vl-hero-copy { text-align: center; }
  .vl .vl-hero-sub { margin-left: auto; margin-right: auto; }
  .vl-hero .btn-row { justify-content: center; }
  .vl-plot { aspect-ratio: 16 / 8.4; }
}
@media (max-width: 900px) {
  .vl-moments { grid-template-columns: 1fr; }
  .vl-m-art { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .vl-hero-sub br { display: none; }
  .vl-card { padding: 16px 14px 20px; }
  .vl-plot { aspect-ratio: 1 / 1.02; min-height: 0; }
  .vl-meta { padding-bottom: 0; }
  .vl-tbl th, .vl-tbl td { padding: 10px 14px; }
}