/* lead.css — 在线咨询的表单卡（partials/lead-form.html，v0.18，2026-10-21）。只有联系页用、只在联系页加载（页头 css:）。
   v0.26 第 5 段之七（10-29）Leon「页底不用重复 CTA」：各页页尾的在线咨询区（partials/cta.html）拿掉了，它的样式一起删。
   克制版：白卡片、1px 淡墨细边、贴近的淡影；输入框白底细边，聚焦时边框变墨色、外面一圈很淡的朱色；必填的星号朱色。
   「想了解」是一排胶囊单选，选中是墨色底白字。没过校验的框边框变朱色（aria-invalid，lead.js 打上）。
   10-26 质感版（样稿的登录卡、收银台）：卡片是窗口的材质；输入框是凹下去的格，聚焦时边深一档加一圈淡光；胶囊是浮起的小卡片，选中的是一枚墨键；成功的勾是浮起的小圆钮。 */
.lead-card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-2xl);
  background: var(--sheet);
  background-image: var(--surface-card);
  box-shadow: var(--shadow-window);
}
.lead-form { display: grid; gap: 16px; }
.lead-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 559px) { .lead-row { grid-template-columns: minmax(0, 1fr); } }
.lead-field { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.lead-label { display: block; padding: 0; font-size: 13.5px; font-weight: var(--w-strong); color: var(--ink-2); }
.lead-label i { margin-left: 3px; font-style: normal; color: var(--accent-text-sm); }
.lead-field :is(input[type="text"], textarea) {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--field);
  box-shadow: var(--shadow-well);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.lead-field textarea { min-height: 88px; resize: vertical; }
.lead-field :is(input, textarea)::placeholder { color: var(--muted); color: color-mix(in srgb, var(--muted) 80%, transparent); }
.lead-field :is(input[type="text"], textarea):focus { outline: none; border-color: var(--ink-soft); box-shadow: var(--shadow-well), var(--field-ring); }
.lead-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--accent); box-shadow: var(--shadow-well), 0 0 0 3px rgb(var(--accent-rgb) / 0.14); }
.lead-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lead-chips label { position: relative; cursor: pointer; }
.lead-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lead-chips span { display: inline-block; padding: 6px 14px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--sheet); background-image: var(--surface-card); box-shadow: var(--shadow-card); font-size: 14px; line-height: 1.5; color: var(--ink-2); transition: border-color var(--t-base) ease-out, box-shadow var(--t-base) ease-out, color var(--t-base) ease-out, translate var(--t-press) var(--ease-key); }
/* 选中的是一枚墨键（同收银台选中的金额、ui.css 的 .btn-ink）；夜里是骨白的珍珠键、字换深色（原来写死白字，夜里墨底变骨白就看不见了） */
.lead-chips input:checked + span { border-color: var(--key-ink-edge); background-color: var(--key-ink-bottom); background-image: linear-gradient(180deg, var(--key-ink-top), var(--key-ink-bottom)); box-shadow: inset 0 1px 0 var(--key-ink-hi), inset 0 -1px 0 var(--key-ink-shade), 0 1px 2px var(--key-ink-contact), 0 4px 10px -3px var(--key-ink-lift); color: var(--key-ink-text); text-shadow: 0 -1px 0 var(--key-ink-emboss); }
.lead-chips label:active span { translate: 0 1px; }
.lead-chips input:focus-visible + span { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-off); }
@media (hover: hover) and (pointer: fine) { .lead-chips label:hover input:not(:checked) + span { border-color: var(--line-3); } }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 2px; }
.lead-submit { min-width: 128px; justify-content: center; }
.lead-submit[disabled] { opacity: 0.7; cursor: progress; }
.lead-privacy { flex: 1 1 16em; font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.lead-msg { font-size: 14px; line-height: 1.75; color: var(--ink-soft); }
.lead-msg.bad { color: var(--rouge); }   /* 出错的话用色板的出错色胭脂（--rouge）：夜里朱字压在卡片上只有 4.4:1，胭脂 5.2:1；昼里两个色几乎一样（10-26 W2） */
/* 提交成功：卡片原地换成这一块。勾是一笔画出来的（减少动态效果时直接画好） */
.lead-done { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 5vw, 48px) 8px; text-align: center; }
.lead-done-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--edge-strong); border-radius: 50%; background: var(--sheet); background-image: var(--surface-raised); box-shadow: var(--shadow-raise); color: var(--accent-text); }
.lead-done-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28; stroke-dashoffset: 0; animation: lead-tick 520ms var(--ease) 120ms backwards; }
@keyframes lead-tick { from { stroke-dashoffset: 28; } }
@media (prefers-reduced-motion: reduce) { .lead-done-mark svg { animation: none; } }
.lead-done h3 { margin-top: 6px; font-family: var(--head); font-size: 22px; font-weight: var(--w-title); letter-spacing: var(--track-title); }
.lead-done h3:focus { outline: none; }
.lead-done p { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }