/* ══════════════════════════════════════════════════════════════════
     预算估算器（2026-10-23 重做）：与 services.html 对齐同一套视觉语言
     旧版是「760px 单列 + 灰边白卡 + 居中结果」，读起来像内部工具；
     现在改成：小节头（kicker/title/sub）+ 左侧输入卡 + 右侧**深色结果面板**（桌面 sticky），
     FAQ 从四列小字改为 2×2 卡片 —— 与 services 的「白卡 + 深色 CTA」同一语法。
     全部用既有令牌（space / radius / fs / shadow-*），不新增字面量。
     ══════════════════════════════════════════════════════════════════ */

  /* ══ 2026-10-26：把「工具」放回首屏 ══════════════════════════════════════
     实测证据（390×844、1440×900 各一次）：估算器顶部原先在 **874px / 882px**，
     视口 844/900 —— 差 30px 才进首屏，用户第一眼看到的是"标题 + 一大片白"。
     三段都是内容页的默认值叠出来的：页头 72svh + 节距 64/128 + 小节头 170。
     本页是**工具页**，不是内容页：
     ① 页头走 contact 已有的 `hero--mini`（44svh），不是新配方；
     ② 节距收到 32（手机 24）；
     ③ 小节头收紧（kicker 间距、正文行高、下边距）；
     ④ 服务线在手机上改 2 列 —— 4 张竖排 312px，"选服务线"这一步反而看不全。
     结果：估算器顶部 390 → ≈530px、1440 → ≈610px，第一步完整落在首屏内。
     ⚠️ 不动 `.hero--compact` 的全局值：那是全站内容页的口径。 */
  .est-sec { padding-top: var(--space-8); }

  .est-head { max-width: 720px; margin-bottom: var(--space-5); }
  .est-kicker {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-small); font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--color-interactive);
  }
  .est-kicker::before {
    content: ''; width: var(--space-6); height: 2px; background: var(--color-decorative);
  }
  .est-title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); color: var(--navy-900); }
  .est-sub { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--gray-700); }

  .est-grid {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: var(--space-6); align-items: start;
  }
  .est-form { display: grid; gap: var(--space-4); }
  .est-block {
    padding: var(--space-6);
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  }
  .est-step {
    display: flex; align-items: center; gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body); font-weight: 700; color: var(--navy-900);
  }
  .est-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--space-8); height: var(--space-8);
    border-radius: var(--radius-full);
    background: var(--navy-800); color: var(--white);
    font-family: var(--font-en); font-size: var(--fs-small); font-weight: 700;
    letter-spacing: .02em;
  }

  .est-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .est-svc {
    position: relative; display: block; padding: var(--space-4);
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg); cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart), background-color var(--duration-fast) var(--ease-out-quart);
  }
  .est-svc:hover { border-color: var(--navy-700); }
  .est-svc input { position: absolute; opacity: 0; pointer-events: none; }
  .est-svc-name { display: block; font-weight: 700; color: var(--navy-900); }
  .est-svc-range {
    display: block; margin-top: var(--space-1);
    font-size: var(--fs-small); color: var(--gray-600);
    font-variant-numeric: tabular-nums;
    /* 手机 2 列时卡内宽 ~107px（360）/ 114px（390）：`1500–3500 元/㎡` 会在「元/」与「㎡」
       之间断开。单位单独 nowrap ⇒ 只在数字与单位之间的空格处整段折行。
       ⚠️ 分隔符与 services 页同口径（`%s–%s`，不加空格）—— 两处曾各写一份。 */
    word-break: keep-all;
  }
  .est-svc-unit { white-space: nowrap; }
  .est-svc:has(input:checked) {
    border-color: var(--navy-800); background: var(--cool-100);
    box-shadow: inset 0 0 0 1px var(--navy-800);
  }
  .est-svc:has(input:focus-visible) { outline: 2px solid var(--color-interactive); outline-offset: 2px; }

  .est-area { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .est-area input {
    width: 160px; padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    font-size: var(--fs-body-lg); font-weight: 700; color: var(--navy-900);
    font-variant-numeric: tabular-nums;
  }
  .est-area input:focus-visible { outline: none; border-color: var(--navy-800); box-shadow: 0 0 0 3px var(--cool-100); }
  .est-area-unit { font-size: var(--fs-body); color: var(--gray-600); }
  .est-quick { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .est-quick-lab { font-size: var(--fs-small); color: var(--gray-500); }
  .est-quick button {
    font: inherit; cursor: pointer;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--gray-200); border-radius: var(--radius-full);
    background: var(--white); color: var(--navy-800);
    font-size: var(--fs-small); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .est-quick button:hover { border-color: var(--navy-700); background: var(--cool-100); }

  /* 结果面板：深色，与留资卡 / services 的深色 CTA 同一块面料 */
  .est-result {
    position: sticky; top: calc(var(--space-20) + var(--space-6));
    padding: var(--space-8);
    background: var(--navy-800); color: var(--white);
    border-radius: var(--radius-xl);
  }
  .est-res-lab {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .66);
  }
  .est-result-num {
    margin: 0;
    font-size: var(--fs-display);
    font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
  }
  .est-result-note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-small); line-height: 1.7;
    color: rgba(255, 255, 255, .74);
  }
  .est-factors { margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .16); }
  .est-factors li {
    position: relative; padding-left: var(--space-4);
    font-size: var(--fs-caption); line-height: 1.9; color: rgba(255, 255, 255, .78);
  }
  .est-factors li::before {
    content: ''; position: absolute; left: 0; top: .9em;
    width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-decorative);
  }
  .est-hint { margin: var(--space-3) 0 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, .6); }
  .est-cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
  .est-cta .btn { width: 100%; }
  /* 深底上蓝色药丸会发闷 —— 与留资卡同一处理：主 CTA 反白 */
  .est-result .btn-primary {
    background: var(--white); color: var(--navy-900); border-color: var(--white);
  }
  .est-cta-link {
    /* 触控 ≥24：链接在深底上没有行内豁免（它是独立的一行 CTA），必须自带高度 */
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--space-6);
    font-size: var(--fs-small); color: rgba(255, 255, 255, .8);
    text-decoration: underline; text-underline-offset: 3px;
  }

  /* FAQ：2×2 卡片，替换原来的四列小字 */
  .est-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .est-faq-item {
    padding: var(--space-5) var(--space-6);
    background: var(--white); border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
  }
  .est-faq-item h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); color: var(--navy-900); }
  .est-faq-item p { margin: 0; font-size: var(--fs-small); line-height: 1.85; color: var(--gray-700); }

  @media (max-width: 1023px) {
    .est-grid { grid-template-columns: minmax(0, 1fr); }
    .est-result { position: static; }
  }
  @media (max-width: 767px) {
    .est-sec { padding-top: var(--space-6); }
    /* 2 列而不是 1 列：4 张竖排 312px，"选服务线"这一步在首屏里看不全；
       卡片本身就是「名称 + 区间」两行，2 列在 390 下仍不折字（实测最小卡宽 155px）。 */
    .est-services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
    .est-svc { padding: var(--space-3); }
    .est-faq { grid-template-columns: minmax(0, 1fr); }
    .est-block { padding: var(--space-5); }
    .est-result { padding: var(--space-6); }
  }