/* ============================================================
   Tekovate · styles.css
   ------------------------------------------------------------
   ⚠️ 品牌视觉全部收在下面第一个区块的 CSS 变量里。
      Kelvin 的 brand guideline 到了,只改 [BRAND TOKENS] 那一段,
      页面结构与组件完全不用动。

   2026-08-19 已按客户点头的 STRUCTA 参考转亮色(hero 保留摄影+深色压字)。
   Pei Zhi 的正式 guideline 到了,改 [BRAND TOKENS] 即可。
   ============================================================ */

/* ---------- [BRAND TOKENS] ---------- */
/* 2026-08-19 换亮色 · 依据客户点头的 STRUCTA 参考(dribbble 25872967 + 25882832):
   亮色摄影主导 · 白色 bento 卡 · 炭黑药丸主按钮 · 黄色只当点缀 chip。
   黄色沿用 Tekovate 现有金 #FFCD00 —— STRUCTA 的柠檬绿是别人的品牌色,
   Pei Zhi guideline 到了要换只改这里。 */
:root {
  --gold:        #FFCD00;
  --gold-2:      #FFA724;
  --gold-soft:   rgba(255, 205, 0, .18);
  /* 金色文字版:#FFCD00 放白底上对比度不够,文字/链接一律用这个深琥珀 */
  --accent-text: #8a6b00;

  /* STRUCTA 式炭黑 —— 主按钮 / CTA band / footer 锚块 */
  --charcoal:    #15171b;
  --charcoal-2:  #23262c;

  --bg:          #f4f6f9;
  --bg-2:        #ffffff;
  --surface:     #ffffff;
  --surface-2:   #eef1f6;

  --ink:         #101318;
  --ink-soft:    rgba(16, 19, 24, .72);
  --ink-mute:    rgba(16, 19, 24, .50);

  --stroke:      rgba(16, 19, 24, .09);
  --stroke-2:    rgba(16, 19, 24, .18);

  --card-shadow: 0 10px 34px rgba(16, 19, 24, .07);

  --font:        "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:      18px;
  --radius-sm:   13px;
  --ease:        cubic-bezier(.22, .61, .36, 1);

  --shell:       1200px;
  --shell-narrow: 780px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* 全站防呆:.btn 等组件的 display:inline-flex/flex 是 author origin,会盖过
   UA 样式表的 [hidden]{display:none}(author 一律赢 UA,不管 specificity)。
   quote wizard 靠 JS 切 hidden 属性藏/显每一题,没有这条会全部叠在一起显示。
   全站排查过:没有任何既有元素依赖"hidden 但仍要显示"这种用法,可以放全局。 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;            /* 守 feedback_ui_design_direction:字号 ≥14px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font); line-height: 1.18; margin: 0; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: var(--shell-narrow); }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- buttons · 最小高度 48px ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font-family: var(--font); font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: transform .18s var(--ease),
    background .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn--lg { min-height: 54px; padding: 15px 28px; font-size: 1rem; }
/* STRUCTA 式:主按钮 = 炭黑药丸白字,金色留给 chip 与图标 */
.btn--solid { background: var(--charcoal); color: #fff; }
.btn--solid:hover { background: var(--charcoal-2); transform: translateY(-2px); }
.btn--solid .ico { color: var(--gold); }
.btn--ghost { border-color: var(--stroke-2); color: var(--ink); background: var(--bg-2); }
.btn--ghost:hover { border-color: var(--charcoal); transform: translateY(-2px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .82);
  transition: box-shadow .25s var(--ease);
}
.nav.is-stuck { box-shadow: 0 6px 24px rgba(16, 19, 24, .06); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: inline-flex; align-items: center; }
/* 官方横版 logo(Variant-01 · 2026-08-27 客户交付) —— 禁自画 mark,守 feedback_official_brand_assets_only */
.brand-logo { height: 30px; width: auto; display: block; }
.footer .brand-logo { height: 34px; }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links > a {
  padding: 10px 14px; border-radius: 10px; font-size: .93rem; font-weight: 500;
  color: var(--ink-soft); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__links > a:hover { color: var(--ink); background: var(--surface-2); }
.nav__links > a.is-active { color: var(--accent-text); }
.nav__links .btn { margin-left: 10px; }
/* 中文标题断行控制:浏览器对 CJK 逢字可断,词中断开很难看 —— 词包 nowrap,词间给 <wbr> */
.nowrap { white-space: nowrap; }
/* 语言切换:EN｜中 双格开关(Kelvin 2026-08-28:胶囊+globe 出戏 → 借面板
   情景按钮的开关语言,当前语言 = 按下的那格。缩写,不占地) */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 10px;
  padding: 4px; border-radius: 999px; background: var(--surface-2);
}
.lang-toggle__seg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 6px 10px; border-radius: 999px;
  font-family: var(--font); font-size: .82rem; font-weight: 600;
  color: var(--ink-mute); transition: color .18s var(--ease), background .18s var(--ease);
}
.lang-toggle__seg.is-on { background: var(--charcoal); color: var(--gold); }
a.lang-toggle__seg:hover { color: var(--ink); background: var(--bg-2); }
/* .nav__links > a 的 color 规则比 .btn--solid 特异性高,会把白字盖成暗字 —— 显式钉回 */
.nav__links > a.btn--solid { color: #fff; }
.nav__links > a.btn--solid:hover { color: #fff; background: var(--charcoal-2); }
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; }
.nav__toggle:hover { background: var(--surface); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 780px); display: flex; align-items: center; }   /* 0917 Kelvin：文字放影片正中央，桌面手机都是 */
.hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(56px, 7vw, 96px) 24px; }
/* 首页:文案 + 灯光切换面板并排。面板是客户点名要保留的组件。 */
.hero__inner--split {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
/* 2026-09-16 Kelvin：照 Apple / DJI 的 hero —— 文字堆居中、靠上、短，画面留给影片。
   实测 1440：Apple 按钮 44px 高 / 17px 字 / 胶囊；DJI 32px / 16px。取 44px。 */
.hero__copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hero /* Hero 是唯一保留摄影+深色压字的区块(STRUCTA 的白色巨型压字打法)。
   页面 token 已转亮,所以这里的文字颜色必须显式写白,不能再靠继承。 */
.hero { color: #fff; }
.hero__h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.75rem); letter-spacing: -.02em;   /* 0917 Kelvin：hero 标题再大一点 48→60px */
  font-weight: 700; line-height: 1.1; color: #fff; text-wrap: balance;
}
.hero__lead { margin: 18px auto 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 46ch; text-wrap: balance; }
.hero__facts { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.hero__facts span { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: rgba(255, 255, 255, .78); }
.hero__facts .ico { color: var(--gold); margin-top: 2px; }
.hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero .btn--lg { min-height: 44px; padding: 11px 22px; font-size: 1.0625rem; font-weight: 500; line-height: 20px; }
.hero .btn--solid { background: #fff; color: var(--charcoal); }
.hero .btn--solid:hover { background: #e9e9ec; color: var(--charcoal); }
.hero .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
.hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--charcoal); }
/* 首页四个卖点（Kelvin 0916 第三版）：影片下一屏，照 DJI 产品页 —— 一段说明 + 两栏图卡，标题压图上 */
.proof__intro { max-width: 62ch; margin: 0 auto; text-align: center; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.6; text-wrap: balance; }
.proof__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.proof__card { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: var(--charcoal); }
.proof__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, 0) 55%); pointer-events: none; }
.proof__card figcaption { position: absolute; inset: 22px 24px auto; z-index: 1; text-align: center; }
.proof__card h3 { margin: 0; color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }

/* 房间图层 —— 组件抽自客户现网站,见 _preserve/room-demo/ */
.hero__room { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.room__img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.room__img--base         { background-image: url('/images/livingroom-base.jpg'); }
.room__img--curtains     { background-image: url('/images/livingroom-curtains.jpg'); }
.room__img--night        { background-image: url('/images/livingroom-night.jpg'); }
.room__img--curtains-off { background-image: url('/images/livingroom-curtains-off.jpg'); }
.room__img--cinema       { background-image: url('/images/livingroom-cinema.jpg'); }
.hero__room[data-mode="lit"]          .room__img--base { opacity: 1; }
.hero__room[data-mode="curtains"]     .room__img--base { opacity: 1; }
.hero__room[data-mode="curtains"]     .room__img--curtains { opacity: 1; }
.hero__room[data-mode="off"]          .room__img--night { opacity: 1; }
.hero__room[data-mode="cinema"]       .room__img--cinema { opacity: 1; }
.hero__room[data-mode="curtains-off"] .room__img--curtains-off { opacity: 1; }
.room__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,12,15,.94) 0%, rgba(11,12,15,.80) 42%, rgba(11,12,15,.30) 100%),
    linear-gradient(0deg, rgba(11,12,15,.86), transparent 55%);
}
@media (prefers-reduced-motion: reduce) { .room__img { transition: none; } }

/* 2026-09-10:LP hero 背景视频(AI 生成三段自动化短片,取代静态房间照) */
.hero__bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .hero__bg-video { display: none; } }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 84px) 0; }
/* 相邻 section 不叠双倍留白 —— 上一段的底 + 这一段的顶只算一次呼吸
   (2026-08-28 Kelvin 连抓两处大死区,这条把全站节奏一次修对) */
.section + .section { padding-top: clamp(24px, 3.5vw, 44px); }
.section--alt { background: var(--bg-2); }
.section__h { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.02em; }
.section__sub { margin-top: 14px; color: var(--ink-soft); max-width: 62ch; font-size: 1.02rem; }
.note { margin-top: 26px; color: var(--ink-mute); font-size: .93rem; }
.note a { color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px; }

/* 底边分隔线 Kelvin 2026-08-28 嫌多余,删了 */
.page-head { padding: clamp(48px, 7vw, 84px) 0 clamp(24px, 3vw, 40px); }
.page-head__h1 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); letter-spacing: -.025em; }
.page-head__lead { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.13rem); max-width: 64ch; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; font-size: .84rem; color: var(--ink-mute); }
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--accent-text); }
.crumbs .ico { width: 13px; height: 13px; opacity: .5; }

/* ---------- cards ---------- */
.cards { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  position: relative; padding: 30px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: var(--stroke-2); box-shadow: 0 18px 44px rgba(16, 19, 24, .12); }
/* STRUCTA 式黄色 chip:金底 + 炭黑图标 */
.card__ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--gold); color: var(--charcoal); margin-bottom: 20px;
}
.card__ico .ico { width: 25px; height: 25px; }
.card__h { font-size: 1.22rem; margin-bottom: 10px; }
.card__p { color: var(--ink-soft); font-size: .95rem; }
.card__go { position: absolute; top: 30px; right: 30px; color: var(--ink-mute); transition: color .2s var(--ease), transform .2s var(--ease); }
.card:hover .card__go { color: var(--accent-text); transform: translateX(4px); }

/* ---------- question cards ---------- */
.qcards { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.qcards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qcard {
  display: flex; flex-direction: column; gap: 11px; padding: 28px;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke);
  box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.qcard:hover { transform: translateY(-5px); border-color: var(--stroke-2); }
.qcard__h { font-size: 1.1rem; line-height: 1.34; }
.qcard__p { color: var(--ink-soft); font-size: .93rem; }
.qcard__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-text); font-weight: 600; font-size: .89rem; }
.qcard:hover .qcard__go .ico { transform: translateX(4px); }
.qcard__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }

/* ---------- steps ---------- */
.steps { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.step { display: flex; gap: 22px; padding: 20px 0; }
.step:last-child { border-bottom: 0; }
.step__n {
  width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--charcoal);
  font-family: var(--font); font-weight: 700; font-size: 1.05rem;
}
.step__h { font-size: 1.14rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px; }
.step__dur { font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--accent-text); background: var(--gold-soft); padding: 3px 10px; border-radius: 999px; }
.step__p { margin-top: 8px; color: var(--ink-soft); font-size: .96rem; }

/* ---------- property cards ---------- */
.props { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prop { padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.prop__h { font-size: 1.05rem; margin-bottom: 9px; color: var(--accent-text); }
.prop__p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- prose (guide / service 内文) ---------- */
.prose h2 { font-size: clamp(1.32rem, 2.3vw, 1.72rem); margin: 46px 0 16px; letter-spacing: -.015em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); font-size: 1.04rem; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.ticks { margin: 20px 0 8px; display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: 1rem; }
.ticks .ico { color: var(--accent-text); margin-top: 4px; width: 18px; height: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pill {
  padding: 11px 17px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--stroke); font-size: .9rem; color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover { border-color: var(--charcoal); color: var(--ink); }

/* ---------- accordion (FAQ) ---------- */
/* FAQ = bento 卡族(2026-08-28 Kelvin 嫌删线后太素):每题一张白卡 + 金圈箭头 */
.acc-list { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.acc {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); box-shadow: var(--card-shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.acc:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
.acc.is-open { box-shadow: 0 16px 40px rgba(16, 19, 24, .12); border-color: rgba(255, 205, 0, .55); }
.acc__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 22px; text-align: left;
  font-family: var(--font); font-weight: 600; font-size: 1.04rem; line-height: 1.4;
}
.acc__chev {
  width: 36px; height: 36px; flex: none; padding: 9px; border-radius: 50%;
  background: var(--gold-soft); color: var(--accent-text);
  transform: rotate(90deg);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.acc.is-open .acc__chev { transform: rotate(-90deg); background: var(--gold); color: var(--charcoal); }
/* grid-template-rows 0fr→1fr 而不是 max-height:
   max-height 会 layout thrash,而且要写一个上限值 —— 上限猜小了会裁掉长答案。
   FAQ 答案长度不固定,不能有上限。 */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.acc.is-open .acc__a { grid-template-rows: 1fr; }
/* 被裁切的那一层不准有 padding。
   min-height:0 只管内容高度,管不到 padding —— padding-bottom:24px 会让 0fr 的行
   永远至少 24px 高,看起来就是「收不起来」(实测:grid-template-rows 解析成 24px)。
   所以间距放进 .acc__inner 里面,跟着内容一起被 overflow:hidden 裁掉。 */
.acc__a > .acc__inner { overflow: hidden; min-height: 0; }
.acc__a p {
  padding: 0 22px 22px; margin: 0;
  color: var(--ink-soft); font-size: 1rem; max-width: 68ch;
}
@media (prefers-reduced-motion: reduce) { .acc__a { transition: none; } }

/* ---------- CTA band ---------- */
/* CTA band = STRUCTA 式炭黑锚块:亮色页面里的深色对比区,金色在这里当亮点 */
.band { padding: clamp(48px, 6vw, 76px) 0; background: var(--charcoal); color: #fff; }
.band .band__p { color: rgba(255, 255, 255, .72); }
.band .btn--solid { background: var(--gold); color: var(--charcoal); }
.band .btn--solid .ico { color: var(--charcoal); }
.band .btn--solid:hover { background: var(--gold-2); }
.band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.band .btn--ghost:hover { border-color: #fff; }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.band__h { font-size: clamp(1.45rem, 2.8vw, 2.05rem); letter-spacing: -.02em; }
.band__p { margin-top: 11px; color: var(--ink-soft); max-width: 52ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- footer ---------- */
.footer { padding: clamp(48px, 6vw, 72px) 0 32px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 44px; }
.footer__tag { margin-top: 18px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; }
.footer__sub { margin-top: 7px; color: var(--ink-mute); font-size: .88rem; }
.footer__social { margin-top: 20px; display: flex; gap: 10px; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--stroke); color: var(--ink-soft);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer__social a:hover { color: var(--accent-text); border-color: var(--charcoal); }
.footer__h { font-family: var(--font); font-weight: 600; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { color: var(--ink-soft); font-size: .94rem; }
.footer__links a:hover { color: var(--accent-text); }
.footer__contact { display: flex; flex-direction: column; gap: 15px; }
.footer__contact li { display: flex; gap: 11px; color: var(--ink-soft); font-size: .93rem; }
.footer__contact .ico { color: var(--accent-text); margin-top: 3px; }
.footer__contact a:hover { color: var(--accent-text); }
.footer__base {
  margin-top: 44px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--ink-mute); font-size: .85rem;
}

/* footer--lp:精简版(free-quote 用),NAP 改跟主 footer 一样的 icon+文字模式,
   原本是一整段纯文字挤在一起没有样式,2026-09-10 UI 审计重做 */
.footer--lp .footer__lp-row { padding-top: 8px; }
.footer--lp .brand-logo { height: 30px; }
.footer__lp-nap {
  margin-top: 22px; display: flex; flex-wrap: wrap; row-gap: 12px; column-gap: 28px;
}
.footer__lp-nap li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-soft); font-size: .92rem; }
.footer__lp-nap .ico { color: var(--accent-text); flex: none; margin-top: 2px; }
.footer__lp-nap a:hover { color: var(--accent-text); }
.footer--lp .footer__base { margin-top: 32px; }

/* ===== ROOM DEMO PANEL (抽自客户现网站 · 见 _preserve/room-demo/) ===== */
/* 玻璃底 —— 面板与 badge 都靠它。原本在 room-demo.css 里,抽面板区块时没带过来。 */
.glass {
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px rgba(16, 19, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* ⚠️ .hero__panel-badge / .pulse / .hero__panel-hint 已经在下面原始组件区块里定义过。
   不要在这里再写一份 —— 之前重复定义时,我的 top 与原本的 bottom 同时生效,
   绝对定位的徽章被撑满整个面板高度。只补组件区块真的没有的东西。 */
.hero__panel { position: relative; }
/* .hero 把文字设成了白色(压字用),但白玻璃面板里必须回到深色文字,
   否则 Living Room / tile 数值全部白字白卡隐形(2026-08-19 实测踩到) */
.hero__panel .panel,
.hero__panel .hero__panel-badge { color: var(--ink); }
.hero .hero__panel-hint { color: rgba(255, 255, 255, .72); }
.hero .hero__panel-hint svg { color: var(--gold); }
/* 徽章浮在面板左下角外侧,提示文字要让开它,否则两行字叠在一起 */
.hero__panel .hero__panel-hint { padding-left: 190px; }
@media (max-width: 860px) {
  .hero__panel .hero__panel-hint { padding-left: 0; padding-top: 26px; }
}

.room__fx { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.room__fx--warm { background: radial-gradient(120% 95% at 62% 28%, rgba(255,176,48,.45), rgba(255,150,20,.10) 55%, transparent 78%); mix-blend-mode: soft-light; }
.room__fx--cool { background: radial-gradient(120% 95% at 55% 22%, rgba(150,196,255,.42), rgba(120,170,255,.10) 55%, transparent 78%); mix-blend-mode: soft-light; }
/* Climate haze — opacity scales with how cold the set temperature is (JS-driven) */
.room__fx--climate { background: linear-gradient(190deg, rgba(150,205,255,.55), transparent 48%); mix-blend-mode: screen; opacity: var(--climate-haze, 0); }
/* Closed-curtain drape over the left windows (used in night/cinema modes).
   Pleated fabric look, masked to the window zone, rendered above the scrim. */
.room__fx--curtains {
  background:
    linear-gradient(180deg, rgba(96,88,76,.12), rgba(0,0,0,.34) 82%),
    repeating-linear-gradient(90deg,
      rgba(104,95,82,.96) 0px,
      rgba(62,56,48,.97) 7px,
      rgba(34,30,26,.98) 14px,
      rgba(20,18,15,.98) 20px,
      rgba(34,30,26,.98) 26px,
      rgba(62,56,48,.97) 33px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 26%, rgba(0,0,0,.85) 36%, transparent 44%);
          mask-image: linear-gradient(90deg, #000 0 26%, rgba(0,0,0,.85) 36%, transparent 44%);
}
.room__fx--security {
  background: radial-gradient(130% 100% at 50% 50%, transparent 58%, rgba(40,120,255,.28) 100%);
  box-shadow: inset 0 0 120px rgba(40,120,255,.35);
}
.hero__room.is-warm    .room__fx--warm     { opacity: 1; }
.hero__room.is-cool    .room__fx--cool     { opacity: 1; }
/* Curtains are now baked into the curtains / curtains-off / cinema photos,
   so the old faint fabric overlay is no longer activated for any mode. */
.hero__room.is-armed   .room__fx--security { opacity: 1; animation: securityPulse 3.4s var(--ease) infinite; }
@keyframes securityPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Dark scrim — keeps hero text legible over the photo */

/* ---------- 控制面板 · 场景 · 设备 tile · 温控转盘 ---------- */
.panel { border-radius: var(--radius); padding: 22px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; }
.panel__title { display: flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; }
.panel__dot { width: 9px; height: 9px; border-radius: 50%; background: #36d399; box-shadow: 0 0 10px #36d399; }
.panel__status { font-size: .72rem; color: var(--ink-mute); }
.panel__scene { display: flex; gap: 8px; margin: 18px 0; }
.scene { flex: 1; padding: 9px; border-radius: 11px; background: var(--surface); border: 1px solid var(--stroke); color: var(--ink-soft); font-size: .8rem; font-weight: 500; transition: all .2s var(--ease); }
.scene--active { background: var(--gold-soft); border-color: rgba(255,205,0,.4); color: var(--accent-text); }
.panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.tile { position: relative; padding: 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--stroke); transition: transform .2s var(--ease), border-color .2s var(--ease); }
.tile:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.tile__icon { width: 34px; height: 34px; border-radius: 10px; background: var(--gold-soft); color: var(--accent-text); display: grid; place-items: center; margin-bottom: 12px; }
.tile__icon svg { width: 19px; height: 19px; }
.tile__label { display: block; font-size: .78rem; color: var(--ink-mute); }
.tile__value { display: block; font-family: var(--font); font-weight: 600; font-size: .92rem; margin-top: 2px; }
.toggle { position: absolute; top: 14px; right: 14px; width: 32px; height: 18px; border-radius: 999px; background: rgba(16,19,24,.18); transition: background .25s var(--ease); }
.toggle::after { content:""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.toggle--on { background: var(--gold); }
.toggle--on::after { transform: translateX(14px); }
.panel__energy { margin-top: 16px; padding-top: 16px; }
.energy__row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-bottom: 9px; }
.energy__val { color: #0d8f60; font-weight: 600; }
.energy__bar { height: 7px; border-radius: 999px; background: rgba(16,19,24,.10); overflow: hidden; }
/* 条本身撑满,用 translateX 把多余的部分推出左边界(父层 overflow:hidden 裁掉)。
   等价于动 width,但只动 transform 层 —— 不触发 layout。
   JS 的介面不变,还是设 --w: 62% 这种百分比。 */
.energy__bar span {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  transform: translateX(calc(var(--w, 0%) - 100%));
}

.hero__panel-badge { position: absolute; bottom: -18px; left: -18px; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255,205,0,.6); animation: ring 2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,205,0,.55); } 70% { box-shadow: 0 0 0 12px rgba(255,205,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,205,0,0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-mute); font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; }
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold); animation: scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }

/* ---------- Interactive panel: hint + control states ---------- */
.hero__panel-hint {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  margin-top: 26px; color: var(--ink-mute); font-size: .78rem; letter-spacing: .01em;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero__panel-hint svg { color: var(--gold); flex: none; }
.hero__panel-hint.is-dismissed { opacity: 0; transform: translateY(6px); pointer-events: none; }

.scene { cursor: pointer; }
.tile[role="button"] { cursor: pointer; outline: none; }
.tile[aria-pressed="false"] { opacity: .72; }
.tile[aria-pressed="false"] .tile__icon { background: rgba(16,19,24,.06); color: var(--ink-mute); }
.scene:focus-visible, .tile[role="button"]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; opacity: 1;
}
.energy__bar span { transition: transform .7s var(--ease); }

/* Full-width tile spanning both columns */
.tile--wide { grid-column: 1 / -1; }

/* Climate: circular temperature dial */
.tile--climate { cursor: default; display: flex; align-items: center; gap: 18px; }
.climate-dial { position: relative; width: 116px; height: 116px; flex: none; cursor: grab; touch-action: none; outline: none; }
.climate-dial:active { cursor: grabbing; }
.climate-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial__track { fill: none; stroke: rgba(16,19,24,.12); stroke-width: 7; stroke-linecap: round; }
.dial__prog { fill: none; stroke: url(#dialGrad); stroke-width: 7; stroke-linecap: round; }
.dial__handle { fill: #fff; stroke: rgba(10,12,20,.35); stroke-width: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.climate-dial:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 50%; }
.dial__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; }
.dial__cap { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.dial__temp { font-family: var(--font); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.climate-info { display: flex; flex-direction: column; gap: 3px; }
.climate-info .tile__label { font-size: .95rem; color: var(--ink); }
.climate-sub { font-size: .82rem; color: var(--ink-soft); }
.climate-hint { font-size: .72rem; color: var(--ink-mute); margin-top: 2px; }



/* ============================================================
   Responsive · desktop 多栏撑满 → mobile 单栏
   守 feedback_desktop_fullwidth_responsive
   ============================================================ */
@media (max-width: 1080px) {
  .cards, .qcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; inset: 74px 0 auto; flex-direction: column; align-items: stretch;
    gap: 4px; padding: 16px 24px 24px; background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 30px rgba(16, 19, 24, .08); display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links .btn { margin: 10px 0 0; }
  .lang-toggle { margin: 10px 0 0; align-self: center; }
  .lang-toggle__seg { min-height: 40px; min-width: 52px; }
  .hero__facts { grid-template-columns: 1fr; }
  .band__inner { flex-direction: column; align-items: flex-start; }
  /* 面板栏是固定 384px,不收掉的话会把文案栏挤成 0px —— 手机上标题整个消失。
     实测过:390px 视口下 grid-template-columns 会解析成 "0px 384px"。 */
  .hero__inner--split { grid-template-columns: minmax(0, 1fr); }
  .hero__panel { max-width: 420px; width: 100%; }
  /* 手机：文字堆在上、影片在下要看得到（Kelvin 0917「电话版的视频很短」）*/
  .hero { min-height: min(88svh, 720px); }
}
@media (max-width: 640px) {
  .cards, .qcards, .qcards--list, .props { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .container { padding: 0 18px; }
  .step { gap: 15px; }
  /* 满宽按钮:图标脱离 flex 靠边站,让**文字本身**在按钮里正中。
     不这样做的话 flex 会把「图标+文字」当一组居中,文字被推偏 ~15px
     (Kelvin 2026-09-01 在桌面版 416px 按钮上看出来,手机版每颗都有)。
     图标在前 → 靠左;尾随的箭头加 .ico--end → 靠右。 */
  .btn { width: 100%; position: relative; }
  .btn > .ico { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
  .btn > .ico--end { left: auto; right: 22px; }
  /* 例外:底部固定条是并排两颗、宽度不够,图标绝对定位会压到文字 */
  .lp-sticky .btn > .ico { position: static; transform: none; }
  .hero__actions .btn, .band__actions .btn { width: 100%; }
  .proof__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .proof__card { aspect-ratio: 4 / 3; }

}

/* ---------- 支柱长文 ---------- */
.pills--toc { margin-top: 22px; }
.pills--toc .pill { font-size: .85rem; padding: 9px 15px; }
.prose h3 { font-size: 1.12rem; margin: 30px 0 10px; letter-spacing: -.01em; }
.prose--pillar h2 { scroll-margin-top: 90px; }
.pillar-card {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px;
  padding: clamp(26px, 4vw, 40px); border-radius: var(--radius);
  background: var(--charcoal); color: #fff; box-shadow: var(--card-shadow);
  transition: transform .22s var(--ease);
}
.pillar-card:hover { transform: translateY(-4px); }
.pillar-card__h { font-size: clamp(1.3rem, 2.6vw, 1.85rem); letter-spacing: -.02em; }
.pillar-card .qcard__p { color: rgba(255, 255, 255, .72); }
.pillar-card .qcard__go { color: var(--gold); }

/* ---------- Landing Page(表单) ---------- */
.quote__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 72px);
}
.quote__facts { margin-top: 24px; }
.steps--tight { margin-top: 30px; }
.steps--tight .step { padding: 16px 0; }
.quote__formcard {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--card-shadow); position: sticky; top: 96px;
}
.quote__form-h { font-size: 1.3rem; margin-bottom: 20px; }
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 7px; color: var(--ink-soft); }
.field__input {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-2); background: var(--bg-2);
  font: inherit; font-size: .96rem; color: var(--ink);
  transition: border-color .18s var(--ease);
}
.field__input:focus { outline: none; border-color: var(--charcoal); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 送出键刻意不放图标:标题长又满宽,箭头绝对定位会在手机上被文字压到
   (2026-09-01 实测 289px 宽时重叠)。满宽主按钮的箭头是装饰,拿掉最干净。 */
.quote__submit { width: 100%; margin-top: 6px; position: relative; }
.quote__note { margin-top: 12px; font-size: .92rem; color: var(--accent-text); min-height: 1.4em; }
/* 送出中/已送出:按钮锁住,而且要看得出来锁了(不然像点了没反应) */
.quote__submit:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
/* PDPA 同意声明 —— 照 fitcomfitness.com 的做法:按钮下方一行小字,不用勾选框 */
/* ⚠️ 12px,明着低于 feedback_ui_design_direction 的「字号 ≥14px」——
   Kelvin 2026-09-01 要求缩小。法务免责小字是那条规则的例外:它是揭露文字不是内容。
   其他地方不准照抄这个尺寸。 */
.quote__consent { margin: 10px auto 0; font-size: .75rem; line-height: 1.5;
  color: var(--ink-mute); max-width: 46ch; text-align: center; }
.quote__consent a { color: var(--accent-text); text-decoration: underline; }
.quote__alt { margin-top: 14px; font-size: .88rem; color: var(--ink-mute); }
.quote__alt a { color: var(--accent-text); font-weight: 600; }
@media (max-width: 900px) {
  .quote__grid { grid-template-columns: minmax(0, 1fr); }
  .quote__formcard { position: static; }
}

/* quote 页的 facts 在白底上,hero 的白字规则会让它隐形(2026-08-28 实测踩到) */
.quote__facts span { color: var(--ink-soft); }
.quote__facts .ico { color: var(--accent-text); }

/* 紧跟 page-head 的第一个 section:顶距从 116px 收到 36px。
   实测 2026-08-28(1512 视口):原 gap = 40(head)+116(section)+44(cards) = 200px,
   Kelvin 嫌太大。收完 = 40+36+0 ≈ 76px。 */
.page-head + .section { padding-top: clamp(20px, 3vw, 36px); }
.page-head + .section > .container > .cards:first-child,
.page-head + .section > .container > .qcards:first-child { margin-top: 0; }

/* ═══ 2026-08-28 impeccable audit 修正批 ═══ */

/* skip link:键盘用户第一 Tab 直达内容 */
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 700;
  padding: 12px 20px; border-radius: 999px; background: var(--charcoal); color: #fff;
  font-family: var(--font); font-weight: 600; font-size: .9rem;
}
.skip-link:focus { left: 12px; }

/* 特色大卡:打破六张同构 —— 入门方案带真实房间照,占两列 */
.card--featured { grid-column: span 2; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.card--featured .card__body { position: relative; padding: 26px 30px 30px; }
.card--featured .card__ico { position: absolute; top: -26px; left: 30px; box-shadow: 0 8px 20px rgba(16, 19, 24, .18); }
.card--featured .card__h { margin-top: 14px; font-size: 1.4rem; }
.card--featured .card__go { top: auto; bottom: 30px; }
@media (max-width: 1080px) { .card--featured { grid-column: span 2; } }
@media (max-width: 640px)  { .card--featured { grid-column: span 1; } }

/* 正文对比度:ink-mute 从 .50 提到 .58(小字号 4.5:1 达标) */
:root { --ink-mute: rgba(16, 19, 24, .58); }

/* 触控目标:pill 链接补到 44px 最小高度 */
.pill { min-height: 44px; display: inline-flex; align-items: center; }

/* 排版细节:标题均衡断行 · 长文减孤字 */
h1, h2, h3 { text-wrap: balance; }
.prose p, .acc__a p, .card__p, .qcard__p { text-wrap: pretty; }

/* 手机版 hero:标题太大太贴顶(Kelvin 2026-08-28 实机截图) */
@media (max-width: 640px) {
  .hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .hero__h1 { font-size: clamp(1.75rem, 7.6vw, 2.1rem); line-height: 1.12; }
  .hero__lead { font-size: 1rem; }
}

/* ---------- 手机滚动场景故事(GSAP) ---------- */
.scene-story { display: none; }
/* JS 初始化(加 has-scene-story)才显示 —— 桌面+手机都跑(Kelvin 2026-08-28)。
   桌面上面板照旧可点,滚动只是替用户"点"它。 */
.has-scene-story .scene-story {
  display: block; position: absolute; left: 0; right: 0; bottom: 20px;
  z-index: 3; color: #fff; pointer-events: none;   /* 字幕不挡面板点击 */
}
.scene-caps { position: relative; min-height: 76px; }
.scene-cap {
  position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(8px);
  font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .85);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.scene-cap strong { color: var(--gold); font-family: var(--font); }
.scene-cap.is-active { opacity: 1; transform: none; }
.scene-dots { display: flex; gap: 7px; margin-top: 10px; }
.scene-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .25s var(--ease), transform .25s var(--ease); }
.scene-dot.is-active { background: var(--gold); transform: scale(1.25); }
.scene-hint { margin-top: 10px; font-size: .78rem; color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) {
  /* 故事模式下:面板与提示让位(它在手机上"没有用途"),hero 撑满一屏被 pin */
  .has-scene-story .hero__panel { display: none; }
  .has-scene-story .hero { min-height: 100svh; }
  .has-scene-story .hero__inner { padding-bottom: 140px; }
}
@media (prefers-reduced-motion: reduce) { .scene-cap { transition: none; } }

/* ---------- 炭黑声明块(construction 段 · 权威时刻用深色) ---------- */
.dark-band {
  background: var(--charcoal); color: #fff;
  border-radius: var(--radius); padding: clamp(30px, 4.5vw, 56px);
  box-shadow: var(--card-shadow);
}
.dark-band__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.dark-band__h { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.02em; color: #fff; }
.dark-band__p { margin-top: 16px; color: rgba(255, 255, 255, .74); font-size: 1.02rem; max-width: 58ch; }
.dark-band__p strong { color: var(--gold); font-weight: 600; }
.dark-band__links { display: flex; flex-direction: column; gap: 10px; }
.dark-band__links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 52px; padding: 13px 20px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font); font-weight: 600; font-size: .95rem; color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.dark-band__links a:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 205, 0, .5); transform: translateX(3px); }
.dark-band__links .ico { color: var(--gold); width: 18px; height: 18px; flex: none; }
@media (max-width: 860px) { .dark-band__grid { grid-template-columns: minmax(0, 1fr); } }

/* 最后一张方案卡拉通整行(横向长卡) —— 网格收成整块,无孤儿位 */
.card--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 26px 30px; }
.card--wide .card__ico { margin-bottom: 0; flex: none; }
.card--wide .card__h { margin-bottom: 6px; }
.card__wide-body { flex: 1; min-width: 0; }
.card__go--inline { position: static; flex: none; }
@media (max-width: 640px) {
  .card--wide { flex-direction: column; align-items: flex-start; gap: 14px; }
  .card__go--inline { display: none; }
}

/* ---------- 文章配图 ---------- */
.article-hero {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  margin-top: 6px;
}

/* guide hub 卡带缩略图(吸引点击) */
.qcard--img { padding: 0; overflow: hidden; }
.qcard__media { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.qcard--img .qcard__body {
  display: flex; flex-direction: column; gap: 11px; flex: 1;
  padding: 20px 26px 24px;
}

/* ============================================================
   /zh/free-quote · Marketing LP（Kelvin 2026-08-28「要有 Marketing purpose」）
   复用既有 token/组件族,只加落地页专属件
   ============================================================ */

/* 痛点卡:白卡族,与 .card 同血统但不带链接手势 */
.pains { margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pain {
  background: var(--surface); border: 1px solid var(--stroke);
  border-radius: var(--radius-sm); box-shadow: var(--card-shadow); padding: 26px 24px;
}
.pain__h { font-family: var(--font); font-size: 1.06rem; font-weight: 700; margin-top: 14px; }
.pain__p { margin-top: 8px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

/* 六方案静态 pill(带 icon,非链接) */
.pills--lp { justify-content: center; margin-top: 26px; }
.pill--static { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.pill--static .ico { width: 17px; height: 17px; color: var(--accent-text); }
.pill--static:hover { border-color: var(--stroke); color: var(--ink-soft); }

/* offer 深色带里的白字 tick 列 + 金色 CTA */
.ticks--dark li { color: rgba(255, 255, 255, .88); font-size: 1.04rem; }
.ticks--dark .ico { color: var(--gold); }
.btn--gold { background: var(--gold); color: var(--charcoal); }
.btn--gold .ico { color: var(--charcoal); }
.btn--gold:hover { background: var(--gold-2); color: var(--charcoal); }
.dark-band__cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.dark-band__sub { color: rgba(255, 255, 255, .62); font-size: .92rem; }

/* 表单区左侧配图 */
.lp-room-photo { margin-top: 26px; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--card-shadow); }

/* 手机底部常驻 CTA(桌面隐藏)。z-index 走站内语义档位:高于 sticky nav(60) */
.lp-sticky { display: none; }
@media (max-width: 860px) {
  .lp-sticky {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px rgba(16, 19, 24, .12);
  }
  .lp-sticky .btn { flex: 1; justify-content: center; min-height: 48px; }
  /* 底栏占掉的高度还给页面,免得 footer 被盖住 */
  body:has(.lp-sticky) { padding-bottom: 76px; }
}
/* LP hero:多了一行 demo 提示,flex 改纵向免得提示被挤到右边当同排项 */
.hero--lp { flex-direction: column; justify-content: center; }
.hero--lp .hero__inner { width: 100%; }
/* LP 直效文案组件:CTA 降摩擦行 · 居中过渡钩 · 命名保证块 */
.hero__reassure { margin-top: 14px; font-size: .92rem; color: rgba(255, 255, 255, .66); }
/* 2026-09-10 方案 A(Kelvin 签):CTA 按钮下面那行支撑句,贴着按钮不贴 hero__reassure */
.hero__cta-support { margin: 12px auto 0; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.hero__cta-support b { color: #e9c96a; font-weight: 600; }
.note--center { text-align: center; max-width: 46ch; margin-left: auto; margin-right: auto; }
.lp-guarantees { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.lp-guarantees p { color: rgba(255, 255, 255, .74); font-size: .97rem; max-width: 58ch; }
.lp-guarantees strong { color: var(--gold); font-weight: 600; }
/* LP 分区大圆角过渡(Kelvin 2026-08-28 参考 reichheld ting + 补充规则:
   只有颜色反差大的交界才翻圆角 —— 暗 hero → 亮内容区。
   灰底/白底同属浅色系,交界保持直线,别每一刀都圆) */
/* 0917 Kelvin：hero 与下一节改直边，不再圆角上叠 */
.lp .hero--lp + .section { position: relative; z-index: 2; background: var(--bg); }
/* 2026-09-10(Kelvin 签):主页 hero 跟 LP 同一套圆角过渡,暗视频→亮内容区 */
.hero:not(.hero--lp) + .section { position: relative; z-index: 2; background: var(--bg); }
/* LP hero 文字离边角远一点(手机上 24px 太贴) */
@media (max-width: 860px) {
  .lp .hero__inner { padding-left: 34px; padding-right: 34px; }
}
/* LP 顶部卖点横条:金底炭黑,一行三卖点(Kelvin 2026-08-28) */
.lp-topbar {
  background: var(--gold); color: var(--charcoal);
  font-family: var(--font); font-weight: 600; font-size: .88rem;
  text-align: center; padding: 9px 16px; line-height: 1.5;
}
@media (max-width: 560px) { .lp-topbar { font-size: .8rem; padding: 8px 12px; } }
/* LP 分栏区:标题在左、内容在右(Kelvin 2026-08-28 参考版式)。手机叠回单栏 */
.split-sec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
  max-width: 1020px;   /* 整块收窄往中间靠(Kelvin 2026-08-28:都移去 center) */
}
.split-sec__head .section__h { text-align: left; }
.split-sec__head .section__sub { text-align: left; margin-left: 0; }
.split-sec .steps { margin-top: 0; }
.acc-list--split { margin-top: 0; }
@media (max-width: 900px) {
  .split-sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split-sec__head { position: static; }
}

/* LP 解法区:全部元素回到中轴,pill 3x2 网格(Kelvin 2026-08-28:之前左右混排乱了) */
.section--center .section__h,
.section--center .section__sub,
.section--center .note { text-align: center; margin-left: auto; margin-right: auto; }
/* ch 单位按「0」宽算,中文一字吃两 ch,62ch/58ch 在中文里只剩一行 30 字 ——
   中文段落放开 ch 限宽,行长交给 780px 窄容器管(约 45 字/行) */
.section--center .section__sub, .section--center .note { max-width: none; }
@media (min-width: 700px) {
  .section--center .pills--lp { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 12px; }
}
/* LP hero:压暗层调轻(Kelvin 2026-08-28:背景太暗)。文字区仍够黑保住对比 */
.hero--lp .room__scrim {
  background:
    linear-gradient(100deg, rgba(11,12,15,.82) 0%, rgba(11,12,15,.58) 42%, rgba(11,12,15,.16) 100%),
    linear-gradient(0deg, rgba(11,12,15,.66), transparent 55%);
}
/* 视频块:圆角白卡族,下面解释保留 */
.lp-video-wrap { max-width: 860px; margin: 30px auto 0; }
.lp-video, .lp-video-fallback { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--card-shadow); display: block; }
.lp-video-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-video { display: none; }
  .lp-video-fallback { display: block; }
}
/* EN LP 标题:英文问句长,全大写 4.4rem 会顶出五行 —— 只对英文收一档,中文不动 */
/* 2026-09-16：LP 标题跟首页同一套字号、居中（原 17ch 左靠版已退役） */
.hero--lp .hero__h1:lang(en) { max-width: 20ch; margin-left: auto; margin-right: auto; }
/* footer 地图链接:金字族,跟其他 footer 链接区分开 */
.footer__maps { color: var(--accent-text); font-size: .9rem; }
.footer__maps:hover { text-decoration: underline; }

/* ── 咨询表单 v2 wizard ──────────────────────────────────────
   翻题只切 hidden 属性,不动文档流 —— 不做滚动劫持(Kelvin 规则)。
   选中态与 hover 一律实色,不准半透明。                        */
html:has(.wz) { scrollbar-gutter: stable; }   /* 翻题时页面不左右跳 */

/* 0917 Kelvin「不要这样放着」：问答块撑满一屏（扣掉顶栏），题目在视窗中间，页脚推到下一屏 */
.wz { padding: 2rem 0 2.5rem; min-height: calc(100svh - 74px); display: flex; }
.wz > .container { display: flex; flex-direction: column; flex: 1; }
#wizard { margin: auto 0; padding: 2rem 0; }
.wz__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 0; }
.wz__bar { flex: 1; height: 4px; background: var(--stroke); border-radius: 2px; overflow: hidden; }
.wz__bar > span { display: block; height: 100%; width: 0; background: var(--gold);
                  transition: width .25s ease; }
.wz__count { margin: 0; color: var(--ink-mute); white-space: nowrap; }

/* 正文一个字号。只有这两个大一级(Kelvin 规则)。 */
.wz__h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 1rem; }
.wz__q  { font-size: 1.375rem; line-height: 1.3; margin: 0 0 .5rem; }
.wz__lead, .wz__note, .wz__consent, .wz__lbl { font-size: 1rem; }
.wz__meta { font-size: .875rem; }   /* 注脚级：时长 / 回复时限 / 隐私，Kelvin 0916 要缩小 */
.wz__note, .wz__meta, .wz__consent { color: var(--ink-mute); }
.wz__note { margin: 0 0 1.25rem; }
.wz__price { margin: 1.25rem 0 .5rem; font-size: 1rem; }

.wz__opts { display: grid; gap: .625rem; margin: 1.25rem 0; }
@media (min-width: 720px) { .wz__opts--multi { grid-template-columns: 1fr 1fr; } }

.wz__opt {
  min-height: 56px;                  /* 手机指头点得到 */
  display: flex; align-items: center; text-align: left;
  padding: .875rem 1.125rem;
  border: 1px solid var(--stroke); border-radius: 10px;
  background: #fff; color: var(--ink);
  font: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.wz__opt:hover  { background: var(--surface-2); border-color: var(--ink); }   /* 实色 */
.wz__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wz__opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.wz__opt--sm { min-height: 48px; }

.wz__lbl { display: block; margin: 1.25rem 0 .375rem; font-weight: 700; }
.wz__input {
  width: 100%; min-height: 56px; padding: .875rem 1.125rem;
  border: 1px solid var(--stroke); border-radius: 10px;
  background: #fff; color: var(--ink); font: inherit;
}
.wz__hint { margin: .375rem 0 0; font-size: 1rem; color: var(--ink-mute); }
.wz__input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wz__send { width: 100%; margin-top: 1.5rem; }

.wz__nav { display: flex; justify-content: space-between; gap: 1rem;
           margin-top: 2rem; min-height: 48px; }
.wz__navbtn { background: none; border: 0; color: var(--ink-mute);
              font: inherit; cursor: pointer; padding: .75rem 0; }
.wz__navbtn:hover { color: var(--ink); }

/* 蜜罐:要藏得掉,但不能用 display:none —— 部分机器人会跳过 none 的栏位。 */
.wz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wz__bar > span { transition: none; }
}

/* 2026-10-01 两页合一:问卷嵌在 /free-quote 的 #form。
   跳过来时让出顶栏高度,进度条才不被盖住。
   问卷在画面上时收起手机底栏(JS 挂 .is-hidden),答题时不需要第二个入口。 */
.wz--embed { scroll-margin-top: 74px; }
@media (max-width: 860px) { .lp-sticky.is-hidden { display: none; } }

/* ============================================================
   首页 v2 · 2026-10 重设计(照 _design/chatgpt/P01-3/4)
   全部用 .h2-* 前缀,只首页用,不碰旧组件。
   数值照 Pillar 自家站实测:标题字距 -.03em、行高 1.02-1.08、区块留白 ~112px、
   外容器跟顶栏同宽(--shell 1200,logo 与内容左缘对齐) / 正文栏 860、圆角只有两档(16px 卡片 + 999px 按钮)。
   ============================================================ */
.h2-wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.h2-narrow { max-width: 860px; }
.h2-center { text-align: center; margin-left: auto; margin-right: auto; }
.h2-h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.h2-sub { margin-top: 14px; color: var(--ink-soft); font-size: 1.0625rem; max-width: 60ch; }
.h2-note { margin-top: 32px; color: var(--ink-soft); }
.h2-note a { color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.h2-sec { padding: clamp(72px, 8vw, 112px) 0; }
.h2-sec--tight { padding-top: 0; }
.h2-sec--alt { background: var(--surface); }

.h2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1;
  border: 1.5px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.h2-btn--gold { background: var(--gold); color: var(--charcoal); }
.h2-btn--gold:hover { background: var(--gold-2); }
.h2-btn--line { border-color: rgba(255, 255, 255, .85); color: #fff; }
.h2-btn--line:hover { background: #fff; color: var(--charcoal); }

/* Hero · VIDEO 1 */
.h2-hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: center;
  color: #fff; overflow: hidden; background: var(--charcoal); }
.h2-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h2-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 13, .72) 0%, rgba(10, 11, 13, .35) 55%, rgba(10, 11, 13, .1) 100%); }
.h2-hero__copy { position: relative; padding-top: 72px; padding-bottom: 72px; }
.h2-hero__h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 800; max-width: 15ch; }
.h2-hero .hero__lead { margin: 22px 0 0; text-wrap: pretty; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55;
  max-width: 46ch; color: rgba(255, 255, 255, .88); }
.h2-hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* 四个事实 · 深色带 */
.h2-facts { background: var(--charcoal); color: #fff; }
.h2-facts__list { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; padding-top: 34px; padding-bottom: 34px; text-align: center; font-weight: 600;
  font-size: 1.0625rem; line-height: 1.4; }

/* 滚动场景 · VIDEO 2 —— 影片跟着滚动走,设备动作那一刻从设备拉线到标签
   (Kelvin 2026-10-02 参考 YouTube dftKArsWaCs:不标出来会以为是人手开的) */
.h2-scene { position: relative; height: 700vh; background: var(--charcoal); }
.h2-scene__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; color: #fff; }
.h2-scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* 手机竖屏时 home-v2.js 会逐幕改横向位置 */
.h2-scene__scrim { position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(10, 11, 13, .7) 0%, rgba(10, 11, 13, .25) 45%, rgba(10, 11, 13, 0) 70%); }
.h2-scene__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.h2-scene__lines line { stroke: #fff; stroke-width: 1; }   /* 细线，照参考片 */
.h2-scene__copy { display: flex; flex-direction: column; align-items: flex-end; }
.h2-scene__h { position: relative; z-index: 3; width: min(100%, 460px); font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; }
.h2-cos { list-style: none; margin: 28px 0 0; padding: 0; width: min(100%, 460px); display: grid; gap: 14px; }
/* 有 JS 时所有标签叠在同一格,一次只显示一个;没 JS 时照常列出全部 */
.h2-scene.is-js .h2-cos { grid-template-areas: "one"; }
.h2-scene.is-js .h2-co { grid-area: one; }
.h2-co__label { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(10, 11, 13, .62);
  font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.35; color: #fff; }
.h2-co__label .ico { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 999px;
  background: var(--gold); color: var(--charcoal); stroke-width: 2; }
/* 设备上的点:金色实心 + 一圈呼吸光,位置由 JS 按 object-fit:cover 换算 */
.h2-co__dot { display: none; position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 999px; background: var(--gold); box-shadow: 0 0 0 0 rgba(255, 205, 0, .55); }
.h2-scene.is-js .h2-co__dot { display: block; opacity: 0; }
.h2-scene.is-js .h2-co.is-on .h2-co__dot { animation: h2-pulse 1.6s var(--ease) infinite; }
/* 标签的出现由 home-v2.js 按影片进度逐帧控制（clip-path 展开 + 逐字），这里不放 transition */
.h2-scene.is-js .h2-co__label { opacity: 0; }
@keyframes h2-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 205, 0, .55); } 100% { box-shadow: 0 0 0 16px rgba(255, 205, 0, 0); } }

/* 六个方案 · 杂志式不等大网格(一大五小) */
.h2-svcs { margin-top: 48px; display: grid; gap: 20px; grid-template-columns: repeat(9, 1fr);
  grid-template-areas: "a a a b b b c c c" "a a a d d e e f f"; }
.h2-svc { display: flex; flex-direction: column; background: var(--surface); border-radius: 16px;
  overflow: hidden; box-shadow: var(--card-shadow); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.h2-svc:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16, 19, 24, .12); }
.h2-svc__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.h2-svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-svc__body { display: block; padding: 20px 22px 24px; }
.h2-svc__h { display: block; font-family: var(--font); font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.h2-svc__p { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
.h2-svc--intelligent-lighting { grid-area: a; }
.h2-svc--intelligent-lighting .h2-svc__media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.h2-svc--climate-air { grid-area: b; }
.h2-svc--security-access { grid-area: c; }
.h2-svc--audio-visual { grid-area: d; }
.h2-svc--energy-management { grid-area: e; }
.h2-svc--voice-app-control { grid-area: f; }

/* 五步流程 · 横排,只有名称不编号 */
.h2-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.h2-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.h2-step__h { margin-top: 18px; font-size: 1.0625rem; letter-spacing: -.01em; }
.h2-step__dur { display: block; margin-top: 6px; font-size: .875rem; font-weight: 600; color: var(--accent-text); }
.h2-step__p { margin-top: 8px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }

/* 照片压字带 · VIDEO 3 / 结尾 */
.h2-photo-band { position: relative; color: #fff; overflow: hidden; background: var(--charcoal); }
.h2-photo-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h2-photo-band__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .5) 50%, rgba(10, 11, 13, .15) 100%); }
.h2-photo-band__copy { position: relative; padding-top: clamp(88px, 10vw, 140px); padding-bottom: clamp(88px, 10vw, 140px); }
.h2-photo-band__copy > p { margin-top: 18px; max-width: 54ch; color: rgba(255, 255, 255, .86); font-size: 1.0625rem; line-height: 1.6; }
.h2-photo-band__copy .h2-h2 { max-width: 18ch; }
.h2-photo-band__copy .h2-btn { margin-top: 30px; }

/* 问题清单 · 一行一题 */
.h2-rows { margin-top: 40px; display: grid; gap: 12px; }
.h2-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--card-shadow); color: var(--ink);
  font-weight: 500; transition: background .2s var(--ease); }
.h2-row:hover { background: var(--surface-2); }
.h2-row .ico { flex: none; width: 18px; height: 18px; transition: transform .2s var(--ease); }
.h2-row:hover .ico { transform: translateX(4px); }
.h2-acc { margin-top: 40px; }

@media (max-width: 1024px) {
  .h2-svcs { grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a" "b c" "d e" "f f"; }
  .h2-svc--intelligent-lighting .h2-svc__media { min-height: 260px; }
  .h2-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .h2-facts__list { grid-template-columns: 1fr 1fr; gap: 18px 16px; font-size: .9375rem; }
  /* 2026-10-15 Kelvin:手机版四个卖点改一行往左无限滚动(home-v2.js 复制一份接在后面,移 -50% 刚好接回) */
  .h2-facts { overflow: hidden; }
  .h2-facts.is-marquee .h2-facts__list { display: flex; width: max-content; max-width: none; gap: 0;
    padding-left: 0; padding-right: 0; animation: h2-marquee 22s linear infinite; }
  .h2-facts.is-marquee li { flex: none; white-space: nowrap; padding: 0 22px; position: relative; }
  .h2-facts.is-marquee li::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px;
    margin-top: -3px; border-radius: 50%; background: var(--gold); }
  .h2-svcs { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; }
  .h2-steps { grid-template-columns: 1fr; }
  .h2-step img { aspect-ratio: 16 / 9; }
  .h2-scene { height: 360vh; }
  .h2-scene__pin { align-items: flex-end; padding-bottom: 32px; }
  /* 2026-10-15:手机上影片从导航栏下面开始,画面最上面的设备(冷气)才不会被导航栏盖住 */
  .h2-scene__video { top: 74px; height: calc(100% - 74px); }
  .h2-scene__scrim { background: linear-gradient(180deg, rgba(10, 11, 13, 0) 30%, rgba(10, 11, 13, .75) 75%); }
  .h2-scene__copy { align-items: stretch; }
  .h2-scene__h { font-size: 1.75rem; }
  .h2-cos { margin-top: 16px; gap: 10px; }
  .h2-hero__scrim { background: linear-gradient(180deg, rgba(10, 11, 13, .35) 0%, rgba(10, 11, 13, .75) 100%); }
  .h2-photo-band__scrim { background: rgba(10, 11, 13, .66); }
}
@media (prefers-reduced-motion: reduce) {
  .h2-scene { height: auto; }
  .h2-scene__pin { position: relative; height: auto; min-height: 80vh; }
  .h2-scene.is-js .h2-co__label { opacity: 1; transform: none; transition: none; }
  .h2-scene.is-js .h2-co__dot, .h2-scene__lines { display: none; }
  .h2-svc, .h2-row .ico { transition: none; }
}

/* 首页「屋主常问」= 文章卡(2026-10-02 Kelvin:跟「快速解答」太像会混淆)
   左一张大卡,右边四张横向小卡(缩图+标题);快速解答维持手风琴 */
.h2-guides { margin-top: 48px; display: grid; gap: 20px; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(4, auto); }
.h2-guide { display: flex; gap: 18px; align-items: center; background: var(--surface); border-radius: 16px;
  overflow: hidden; box-shadow: var(--card-shadow); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.h2-guide:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16, 19, 24, .12); }
.h2-guide__media { flex: none; width: 34%; align-self: stretch; overflow: hidden; }
.h2-guide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-guide__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 18px 0; }
.h2-guide__h { font-family: var(--font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; }
.h2-guide__go { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--accent-text); }
.h2-guide__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.h2-guide:hover .h2-guide__go .ico { transform: translateX(4px); }
.h2-guide--big { grid-row: 1 / -1; flex-direction: column; align-items: stretch; gap: 0; }
.h2-guide--big .h2-guide__media { width: 100%; flex: 1; min-height: 300px; }
.h2-guide--big .h2-guide__body { padding: 26px 28px 30px; }
.h2-guide--big .h2-guide__h { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; }
@media (max-width: 860px) {
  .h2-guides { grid-template-columns: 1fr; grid-template-rows: none; }
  .h2-guide--big { grid-row: auto; }
  .h2-guide--big .h2-guide__media { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .h2-guide, .h2-guide__go .ico { transition: none; } }
.h2-scene__lines line { transition: none; }

/* 滚动场景开场：黑幕盖住影片，滚动时由 home-v2.js 慢慢调淡（标题留在黑幕上面）。
   没有 JS 时不盖（opacity 0），直接看到画面。 */
.h2-scene__black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; }
.h2-scene.is-js .h2-scene__black { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .h2-scene.is-js .h2-scene__black { opacity: 0; } }

/* ============================================================
   内页 v2(2026-10-04)· 照 ChatGPT 设计图 P02-P13
   数值沿用首页 v2:标题字距 -.03em、行高 1.04-1.08、区块留白 ~96-112px、圆角只有 16px + 999px。
   ============================================================ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pg-sec { padding: clamp(72px, 8vw, 104px) 0; }
.pg-sec--first { padding-top: clamp(24px, 3vw, 40px); }
.pg-sec--tight { padding-top: 0; }
/* 深色压图 hero */
.pg-hero { position: relative; min-height: min(78svh, 640px); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: var(--charcoal); }
.pg-hero--small { min-height: min(56svh, 440px); }
.pg-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .45) 50%, rgba(10, 11, 13, .12) 100%),
              linear-gradient(0deg, rgba(10, 11, 13, .35) 0%, rgba(10, 11, 13, 0) 45%); }
.pg-hero__copy { position: relative; padding-top: 96px; padding-bottom: clamp(48px, 6vw, 80px); }
.pg-crumbs, .pg-crumbs a { color: rgba(255, 255, 255, .78); }
.pg-crumbs a:hover { color: #fff; }
.pg-crumbs .ico { opacity: .7; }
.pg-hero__h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em;
  font-weight: 800; max-width: 17ch; }
.pg-hero .page-head__lead { margin: 20px 0 0; max-width: 52ch; color: rgba(255, 255, 255, .88);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; text-wrap: pretty; }
.pg-hero .h2-btn { margin-top: 30px; }
/* 浅底页首(方案总览 / FAQ) */
.pg-head { padding: clamp(64px, 8vw, 104px) 0 clamp(28px, 4vw, 48px); }
.pg-head__h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.pg-head .page-head__lead { margin-top: 18px; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.pg-head .h2-center .page-head__lead { margin-left: auto; margin-right: auto; }
.pg-head--split { padding-top: clamp(48px, 6vw, 72px); }
.pg-head__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pg-head__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
/* 照片 + 文字,左右交替 */
.pg-splits { display: grid; gap: clamp(40px, 5vw, 64px); }
.pg-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pg-split--flip .pg-split__media { order: 2; }
.pg-split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; }
.pg-split__h { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.pg-split__h--q { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.12; }
.pg-split__p { margin-top: 18px; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; max-width: 54ch; text-wrap: pretty; }
.pg-split--qa .pg-split__media img { aspect-ratio: 16 / 10; }
.pg-qa { max-width: 760px; }
.pg-link { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--gold); color: var(--ink); font-weight: 600; }
.pg-link .ico { width: 18px; height: 18px; color: var(--accent-text); transition: transform .2s var(--ease); }
.pg-link:hover .ico, a:hover > .pg-feature__body .pg-link .ico { transform: translateX(4px); }
/* 方案页 · 装了可以做什么 */
.pg-panels { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-panel { margin: 0; }
.pg-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }
.pg-panel figcaption { margin-top: 16px; }
.pg-panel__h { display: block; font-family: var(--font); font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.pg-panel__p { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
/* 方案页 · 深色带:看看其他方案 */
.pg-dark { background: var(--charcoal); color: #fff; padding: clamp(72px, 8vw, 104px) 0; }
.pg-others { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pg-other { color: #fff; }
.pg-other__media { display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.pg-other__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.pg-other:hover .pg-other__media img { transform: scale(1.04); }
.pg-other__h { display: block; margin-top: 12px; font-weight: 600; }
/* FAQ · 左主题右问答 */
.pg-faq { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }
.pg-faq__nav { position: sticky; top: 96px; display: grid; gap: 4px; padding: 12px; background: var(--surface);
  border-radius: 16px; box-shadow: var(--card-shadow); }
.pg-faq__nav a { padding: 12px 16px; border-radius: 12px; color: var(--ink-soft); font-weight: 500; }
.pg-faq__nav a:hover { background: var(--surface-2); color: var(--ink); }
.pg-faq__group { scroll-margin-top: 96px; }
.pg-faq__group + .pg-faq__group { margin-top: 44px; }
.pg-faq__gh { font-size: 1.25rem; letter-spacing: -.015em; margin-bottom: 16px; }
/* 指南总览 */
.pg-feature { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--surface); border-radius: 16px;
  overflow: hidden; box-shadow: var(--card-shadow); color: var(--ink); }
.pg-feature__media { display: block; min-height: 320px; }
.pg-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 44px); }
.pg-feature__h { font-family: var(--font); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -.025em; }
.pg-feature .pg-link { margin-top: 8px; align-self: flex-start; }
.pg-arts { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-art { display: flex; align-items: center; gap: 20px; padding-right: 20px; background: var(--surface); border-radius: 16px;
  overflow: hidden; box-shadow: var(--card-shadow); color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pg-art:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16, 19, 24, .12); }
.pg-art__media { flex: none; width: 36%; align-self: stretch; min-height: 150px; }
.pg-art__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-art__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 0; }
.pg-art__h { font-family: var(--font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; }
.pg-art__p { color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-art__go { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; }
.pg-art__go .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.pg-art:hover .pg-art__go .ico { transform: translateX(3px); }
/* 文章阅读栏 */
.pg-read { max-width: 760px; margin: 0 auto; }
.pg-read.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 800; margin-top: 56px; }
.pg-read.prose p { font-size: 1.0625rem; line-height: 1.7; }
.pg-read .h2-rows { margin-top: 20px; }
/* 支柱长文 · 左 sticky 目录 */
.pg-pillar { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.pg-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; display: grid; gap: 2px;
  padding: 20px; background: var(--surface); border-radius: 16px; box-shadow: var(--card-shadow); }
.pg-toc__h { font-weight: 700; margin-bottom: 8px; }
.pg-toc a { display: block; padding: 8px 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.4; }
.pg-toc a:hover { color: var(--ink); }
.pg-read--pillar { margin: 0; }
.pg-read--pillar h2 { scroll-margin-top: 96px; }
.pg-read--pillar h2:first-child { margin-top: 0; }
@media (max-width: 960px) {
  .pg-split, .pg-head__grid, .pg-feature, .pg-faq, .pg-pillar { grid-template-columns: 1fr; }
  .pg-split--flip .pg-split__media { order: 0; }
  .pg-panels { grid-template-columns: 1fr 1fr; }
  .pg-others { grid-template-columns: repeat(3, 1fr); }
  .pg-arts { grid-template-columns: 1fr; }
  .pg-faq__nav { position: static; display: flex; flex-wrap: wrap; padding: 8px; }
  .pg-faq__nav a { padding: 10px 14px; }
  .pg-toc { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .pg-panels { grid-template-columns: 1fr; }
  .pg-others { grid-template-columns: 1fr 1fr; }
  .pg-hero { min-height: 520px; }
  .pg-hero--small { min-height: 400px; }
  .pg-hero__scrim { background: linear-gradient(180deg, rgba(10, 11, 13, .3) 0%, rgba(10, 11, 13, .8) 100%); }
  .pg-art { gap: 14px; padding-right: 14px; }
  .pg-art__media { width: 32%; min-height: 120px; }
  .pg-art__p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-art, .pg-art__go .ico, .pg-link .ico, .pg-other__media img { transition: none; }
}
/* 收尾带标题在内页用 p(不占 H2),要盖掉 .h2-photo-band__copy > p 的正文字级 */
.h2-photo-band__copy > p.h2-h2 { margin-top: 0; max-width: 18ch; color: #fff;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }

/* ── 问卷弹窗(quote-modal.js · 2026-10-04)──────────────────
   全站报价按钮点了开这个,内容是从 /free-quote 抓来的同一份问卷。 */
html.wzm-open { overflow: hidden; }
.wzm { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wzm[hidden] { display: none; }
.wzm__backdrop { position: absolute; inset: 0; background: rgba(10, 11, 13, .62); }
.wzm__panel { position: relative; width: min(760px, 100%); max-height: calc(100svh - 48px); overflow-y: auto;
  overscroll-behavior: contain; background: var(--bg); border-radius: 16px; padding: 56px 44px 32px;
  box-shadow: 0 30px 80px rgba(10, 11, 13, .35); }
.wzm__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 999px;
  border: 0; background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; transition: background .15s ease; }
.wzm__close:hover { background: var(--stroke-2); }
.wzm__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wzm .wz--modal { min-height: 0; padding: 0; display: block; }
.wzm .wz--modal > .container { padding: 0; max-width: none; }
.wzm #wizard { margin: 0; padding: 1.25rem 0 0; }
@media (max-width: 640px) {
  .wzm { padding: 0; align-items: stretch; }
  .wzm__panel { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: 64px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) { .wzm__close { transition: none; } }
/* 弹窗里题目从 h2 换成 p(不占这页的标题结构),补回标题字重 */
.wzm .wz__q, .wzm .wz__h1 { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }
.wzm .wz__nav { margin-top: 1rem; }

/* ── 落地页 v2(/free-quote · P14)· 隐私政策 · 404 ──────── */
.pg-hero--lp { min-height: min(88svh, 780px); align-items: center; }
.pg-hero--lp .pg-hero__h1 { max-width: 16ch; }
.pg-hero--lp .hero__lead { margin: 20px 0 0; max-width: 46ch; color: rgba(255, 255, 255, .88);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.pg-hero--lp .h2-btn { margin-top: 30px; }
.pg-hero__support { margin-top: 14px; font-size: .9375rem; color: rgba(255, 255, 255, .78); }
.pg-hero__support b { color: #fff; font-weight: 600; }
.pg-panels--4 { grid-template-columns: repeat(4, 1fr); }
.pg-panels--4 .pg-panel img { aspect-ratio: 3 / 2; }
.pg-lp-video { margin-top: 36px; }
.pg-lp-note { text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto; }
.pg-offer__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pg-offer__wa { margin-top: 30px; gap: 10px; }
.pg-offer__wa .ico { width: 20px; height: 20px; }
.pg-offer__sub { margin-top: 12px; font-size: .9375rem; color: rgba(255, 255, 255, .7); }
.pg-offer__list { list-style: none; margin: 0; padding: 0 0 0 clamp(0px, 3vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 14px;
  font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.pg-offer__g { margin-top: 28px; padding-left: clamp(0px, 3vw, 40px); display: grid; gap: 12px;
  font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.pg-offer__g strong { color: var(--gold); font-weight: 600; }
.pg-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pg-step img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; }
.pg-step__h { margin-top: 18px; font-size: 1.125rem; letter-spacing: -.01em; }
.pg-step__dur { display: block; margin-top: 4px; font-size: .875rem; font-weight: 600; color: var(--accent-text); }
.pg-step__p { margin-top: 8px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
/* 隐私政策:浅底页首 + 阅读栏 */
.pg-head--legal .pg-head__h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.pg-head--legal .crumbs { margin-bottom: 18px; }
/* 404 */
.pg-hero--404 { min-height: min(80svh, 680px); align-items: center; }
.pg-404__code { font-family: var(--font); font-weight: 800; font-size: 1rem; letter-spacing: .02em; color: var(--gold); margin-bottom: 14px; }
.pg-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 960px) {
  .pg-panels--4 { grid-template-columns: 1fr 1fr; }
  .pg-offer__grid { grid-template-columns: 1fr; }
  .pg-offer__list, .pg-offer__g { padding-left: 0; border-left: 0; }
  .pg-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pg-panels--4 { grid-template-columns: 1fr; }
  .pg-hero--lp { min-height: 600px; }
}
/* 长文目录:读到哪节标哪节,目录自己跟着滚(toc.js · 2026-10-05) */
.pg-toc { scrollbar-width: none; }
.pg-toc::-webkit-scrollbar { display: none; }
.pg-toc a { padding-left: 12px; margin-left: -12px; border-left: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.pg-toc a.is-active { color: var(--ink); font-weight: 600; border-left-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .pg-toc a { transition: none; } }
.pg-toc { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .pg-toc { scroll-behavior: auto; } }
/* 滚动区黑屏中间的往下滑提示(无文字 · 2026-10-05):两道细箭头轮流往下淡出,
   透明度由 home-v2.js 跟着黑幕一起退;没 JS 时没有黑幕,提示也不显示 */
.h2-scene__cue { display: none; position: absolute; left: 50%; top: 50%; z-index: 2; width: 56px; margin: -42px 0 0 -28px; pointer-events: none; }
.h2-scene.is-js .h2-scene__cue { display: block; }
.h2-scene__cue svg { display: block; width: 56px; height: 84px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.h2-scene__cue path { animation: h2-cue 1.8s var(--ease) infinite; }
.h2-scene__cue path:nth-child(2) { animation-delay: .25s; stroke: var(--gold); }
@keyframes h2-cue { 0% { opacity: .15; transform: translateY(-5px); } 40% { opacity: 1; } 80%, 100% { opacity: .15; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .h2-scene__cue path { animation: none; opacity: .8; } }

/* 页尾 v2(2026-10-05):小标题改正常大小写(全大写小标=AI 站指纹)、社群图示去方框、
   四栏比例照设计图(品牌 / 方案 / 导航 / 联络) */
.footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: clamp(28px, 3.5vw, 48px); }
.footer__h { font-size: 1rem; letter-spacing: -.01em; text-transform: none; color: var(--ink); font-weight: 700; margin-bottom: 18px; }
.footer__links { gap: 12px; }
.footer__social { gap: 18px; margin-top: 22px; }
.footer__social a { width: auto; height: auto; border: 0; background: none; border-radius: 0; }
.footer__social .ico { width: 20px; height: 20px; }
.footer__base { border-top: 1px solid var(--stroke); }
.footer__base a { color: var(--ink-mute); }
.footer__base a:hover { color: var(--accent-text); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } .footer__brand, .footer__col--wide { grid-column: 1 / -1; } }

/* ── /free-quote 优化(2026-10-07 · Clarity:470 访客 3 个开始答题、平均只滑 18%)──
   首屏直接放第一题;首屏图改 <img> 小档先出来,影片真的在播才淡入盖上去 */
.pg-hero--lp video.pg-hero__bg { opacity: 0; transition: opacity .5s ease; }
.pg-hero--lp video.pg-hero__bg.is-playing { opacity: 1; }
.pg-pick { margin-top: 28px; max-width: 640px; }
.pg-pick__q { font-family: var(--font); font-weight: 700; font-size: 1.125rem; color: #fff; margin-bottom: 14px; }
.pg-pick__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-pick__opt { min-height: 50px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(10, 11, 13, .35); color: #fff; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pg-pick__opt:hover, .pg-pick__opt[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
.pg-pick__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pg-pick + .pg-hero__support { margin-top: 16px; }
@media (max-width: 640px) {
  .pg-pick__opts { display: grid; grid-template-columns: 1fr 1fr; }
  .pg-pick__opt { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) { .pg-hero--lp video.pg-hero__bg, .pg-pick__opt { transition: none; } }
/* 问卷小字对比度不够(Lighthouse 4.44 < 4.5)→ 加深一级 */
.wz__meta, .wz__note, .wz__consent { color: var(--ink-soft); }

/* ── 问卷改版(2026-10-07 · ChatGPT 设计图三张:电脑左右栏 / 选项卡片 / 手机顶部细条)──
   报价页:左边深色栏放四个保证 + 洋房照;右边题目。弹窗版不分栏,只吃卡片样式。 */
.wz--split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 0; min-height: calc(100svh - 74px); }
.wz-aside { background: var(--charcoal); color: #fff; display: flex; flex-direction: column; padding: 64px clamp(28px, 4vw, 56px) 0; overflow: hidden; }
.wz-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.wz-aside__list li { display: flex; align-items: center; gap: 16px; font-size: 1.0625rem; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.wz-aside__list .ico { flex: none; width: 26px; height: 26px; color: var(--gold); }
.wz-aside__img { display: block; margin: 48px calc(-1 * clamp(28px, 4vw, 56px)) 0; width: calc(100% + 2 * clamp(28px, 4vw, 56px));
  max-width: none; flex: 1; min-height: 280px; object-fit: cover; object-position: 50% 50%; }
.wz--split > .container { max-width: none; padding: 48px clamp(24px, 5vw, 80px) 40px; display: flex; flex-direction: column; }
.wz--split #wizard { max-width: 760px; width: 100%; margin: auto 0; }
.wz--split .wz__nav { max-width: 760px; width: 100%; }
/* 题目大一级(标题字),说明字一行 */
.wz__q, .wz__h1 { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.wz__q { font-size: clamp(1.625rem, 2.6vw, 2.5rem); margin-bottom: .6rem; }
.wz__count { color: var(--accent-text); font-weight: 600; }
/* 选项 = 白色卡片 + 左边细线图示;选中 = 炭黑卡片 + 金色勾 */
.wz__opts { gap: 14px; margin: 1.75rem 0 1rem; }
@media (min-width: 720px) { .wz__opts--single, .wz__opts--multi { grid-template-columns: 1fr 1fr; } }
.wz__opt { position: relative; gap: 16px; min-height: 76px; padding: 16px 44px 16px 20px; border: 1.5px solid transparent;
  border-radius: 18px; background: #fff; box-shadow: var(--card-shadow); font-weight: 500; line-height: 1.4;
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.wz__opt:hover { background: #fff; border-color: var(--charcoal); }
.wz__ico { flex: none; width: 28px; height: 28px; color: var(--accent-text); }
.wz__opt[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.wz__opt[aria-pressed="true"] .wz__ico { color: var(--gold); }
.wz__tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 999px; background: var(--gold);
  color: var(--charcoal); display: none; align-items: center; justify-content: center; }
.wz__tick .ico { width: 13px; height: 13px; stroke-width: 3; }
.wz__opt[aria-pressed="true"] .wz__tick { display: inline-flex; }
.wz__opt--sm { min-height: 52px; padding: 12px 40px 12px 18px; }
.wz__opt--sm .wz__tick { top: 50%; transform: translateY(-50%); }
/* 填空题:大白卡输入框,单位贴在右边 */
.wz__field { position: relative; margin-top: 1.75rem; }
.wz__input { min-height: 68px; border: 1.5px solid transparent; border-radius: 18px; box-shadow: var(--card-shadow); font-size: 1.125rem; }
.wz__field .wz__input { min-height: 76px; padding-right: 96px; font-size: 1.25rem; }
.wz__input:focus { border-color: var(--charcoal); outline: none; }
.wz__suffix { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--ink-soft); pointer-events: none; }
.wz__navbtn { text-decoration: underline; text-underline-offset: 4px; color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  /* 手机:左栏变顶部细条,只留两个最重要的保证;不放照片 */
  .wz--split { grid-template-columns: 1fr; min-height: 0; }
  .wz-aside { padding: 12px 16px; }
  .wz-aside__list { grid-auto-flow: column; justify-content: center; gap: 18px; }
  .wz-aside__list li { display: none; font-size: .8125rem; gap: 8px; }
  .wz-aside__list li.wz-aside__key { display: flex; }
  .wz-aside__list .ico { width: 18px; height: 18px; }
  .wz-aside__img { display: none; }
  .wz--split > .container { padding: 28px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) { .wz__opt { transition: none; } }
/* 「其他」选填框:勾了才出现,接在选项卡片下面 */
.wz__other { margin: 4px 0 1rem; }
.wz__other[hidden] { display: none; }

/* 问卷每一题底下的 WhatsApp 出口(2026-10-15 · 15 个开始答的有 10 个在 Q1-Q2 走掉)
   安静的次要文字链,不跟选项卡片 / Next 抢;弹窗里一样 */
.wz__wa { margin: .5rem 0 0; text-align: center; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.wz--split .wz__wa { max-width: 760px; width: 100%; }
.wz__wa a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 4px;
  color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.wz__wa .ico { flex: none; width: 18px; height: 18px; color: var(--accent-text); }
.wz__wa-cta { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.wz__wa a:hover .wz__wa-cta { color: var(--accent-text); }
.wz__wa a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.wzm .wz__wa { margin-top: .25rem; }
/* 单选题(没有 Back/Next)时导航列是空的,出口往上收,别在小手机上被挤到折线下 */
.wz__nav:not(:has(> :not([hidden]))) + .wz__wa { margin-top: -4.5rem; }
.wzm .wz__nav:not(:has(> :not([hidden]))) + .wz__wa { margin-top: -3.5rem; }

/* Q7 第二条路:答案带进 WhatsApp(2026-10-15 · 3 人答到 Q7 没送出)。
   次要按钮,排在主按钮「提交」和同意文字下面 */
.wz__or { margin: 1rem 0 .5rem; text-align: center; color: var(--ink-mute); font-size: .9375rem; }
.wz__wasend { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.wz__wasend .ico { width: 20px; height: 20px; color: var(--accent-text); flex: none; }
.wz__wasend[hidden] { display: none; }

/* 2026-10-15 Clarity:/free-quote 手机 67% 不滑就走,只 4% 开始答题。
   FB App 内建浏览器(约 390×664)第一屏只露出两个房型按钮,还被底栏盖住一半。
   ① 手机版 LP hero 收紧上方留白,五个房型在第一屏放得下
   ② 底栏在客人滑过 hero 之前不出现(quote-wizard.js 挂 .is-past-hero);
      不支援 :has 的旧浏览器照旧常驻,只是退回原状 */
@media (max-width: 640px) {
  .pg-hero--lp { min-height: 0; align-items: flex-start; }
  .pg-hero--lp .pg-hero__copy { padding-top: 20px; padding-bottom: 28px; }
  .pg-hero--lp .pg-hero__h1 { font-size: 2.125rem; }
  .pg-hero--lp .hero__lead { margin-top: 12px; }
  .pg-hero--lp .pg-pick { margin-top: 16px; }
  .pg-hero--lp .pg-pick__q { margin-bottom: 10px; }
  .pg-hero--lp .pg-pick__opt { min-height: 46px; }
}
@media (max-width: 860px) {
  body:has(.pg-pick) .lp-sticky:not(.is-past-hero) { display: none; }
}

/* 2026-10-15 Kelvin:全站右下角 WhatsApp 浮动圆钮。z-index 低于问卷弹窗(300),高于手机底栏(200)以外的内容 */
.wa-float {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 150;
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 2px 6px rgba(16, 19, 24, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float svg { width: 32px; height: 32px; }
/* 2026-10-15 Kelvin「做成会动、吸引人点」:进场弹出 → 绿色波纹一直往外扩 → 每 6 秒摇一下 */
.wa-float { animation: wa-in .6s cubic-bezier(.34, 1.56, .64, 1) 1.2s backwards; }
.wa-float::before, .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; z-index: -1; animation: wa-ring 2.4s ease-out 2s infinite; }
.wa-float::after { animation-delay: 3.2s; }
.wa-float svg { animation: wa-wiggle 6s ease-in-out 3s infinite; transform-origin: 50% 60%; }
@keyframes wa-in { from { opacity: 0; transform: scale(0) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.9); opacity: 0; } }
@keyframes wa-wiggle { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-16deg) scale(1.1); }
  90% { transform: rotate(14deg) scale(1.1); } 93% { transform: rotate(-10deg); } 96% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float svg, .wa-float::before, .wa-float::after { animation: none; } }
.wa-float:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(37, 211, 102, .45), 0 2px 6px rgba(16, 19, 24, .18); }
.wa-float:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }
@media (max-width: 860px) {
  .wa-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  /* 落地页手机底栏已经有 WhatsApp 按钮,不叠两颗 */
  body:has(.lp-sticky) .wa-float { display: none; }
  /* 首页滚动影片底部有说明标签,影片在画面时淡出(render.py scripts 切 scene-on) */
  .wa-float { transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease; }
  body.scene-on .wa-float { opacity: 0; pointer-events: none; }
}
html.wzm-open .wa-float { display: none; }

@keyframes h2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .h2-facts.is-marquee .h2-facts__list { animation: none; } }

/* ============================================================
   2026-10-17 落地页 v3(/free-quote · /zh/free-quote)· 照 Kelvin 签的 ChatGPT 设计图
   首屏:影片 + 价格金条 + 本地公司一句 + 第一题;下面四段:场景滑卡 / 一天时间轴 / 免费三步深色段 / FAQ
   ============================================================ */
.lp3-hero .pg-hero__h1 { max-width: 18ch; }
.lp3-price { display: inline-block; margin-top: 20px; padding: 10px 16px; border-radius: 12px;
  background: var(--gold); color: var(--charcoal); font-weight: 700; font-size: 1rem; line-height: 1.45; max-width: 40rem; }
.lp3-local { margin-top: 12px; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.lp3-hero .pg-pick { margin-top: 24px; }

.lp3-sec { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
.lp3-sec--white { background: var(--surface); }
.lp3-h2 { font-family: var(--font); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15;
  letter-spacing: -.02em; font-weight: 800; margin-bottom: clamp(24px, 3vw, 40px); text-wrap: balance; }

/* 场景卡:手机左右滑(第二张露一角),电脑四格并排 */
.lp3-scenes { list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -24px; padding: 0 24px 4px; scroll-padding: 0 24px; scrollbar-width: none; }
.lp3-scenes::-webkit-scrollbar { display: none; }
.lp3-scene { position: relative; flex: 0 0 82%; scroll-snap-align: start; border-radius: var(--radius);
  overflow: hidden; background: var(--charcoal); box-shadow: var(--card-shadow); aspect-ratio: 4 / 5; }
.lp3-scene__media, .lp3-scene__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp3-scene__media img { object-fit: cover; }
.lp3-scene::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10, 11, 13, .86) 0%, rgba(10, 11, 13, .35) 38%, rgba(10, 11, 13, 0) 62%); }
.lp3-scene__cap { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; color: #fff; }
.lp3-scene__h { font-family: var(--font); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.lp3-scene__p { margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.lp3-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.lp3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stroke-2); transition: background .2s var(--ease); }
.lp3-dot.is-on { width: 22px; border-radius: 999px; background: var(--gold); }
.lp3-note { margin-top: 28px; font-family: var(--font); font-weight: 700; font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.45; text-align: center; text-wrap: balance; }

/* 一天:金线 + 圆点在左,时间标签在上,照片 + 一句在下(手机);电脑版时间在左、照片和字在右。
   金线 = .lp3-day__line(浅金底轨)+ .lp3-day__fill(实金,lp-v3.js 随滚动由上往下画)。
   线的起讫 lp-v3.js 现场量第一颗、最后一颗圆点;JS 没跑时用下面的 CSS 近似值,整条实金照常显示。 */
.lp3-day-wrap { position: relative; max-width: 920px; }
.lp3-day__line { position: absolute; left: 6px; top: 10px; bottom: 150px; width: 2px; background: var(--gold-soft); }
.lp3-day__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; }
.lp3-day { list-style: none; }
.lp3-day__item { display: grid; grid-template-columns: 14px 1fr; column-gap: 16px; row-gap: 10px; align-items: center; padding: 12px 0; }
.lp3-day__item::before { content: ""; grid-column: 1; grid-row: 1; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--surface); position: relative; z-index: 1; transition: background .3s var(--ease); }
.lp3-day__item.is-lit::before { background: var(--gold); }
.lp3-day__when { grid-column: 2; grid-row: 1; font-family: var(--font); font-weight: 700; font-size: .9375rem;
  line-height: 1.3; color: var(--accent-text); }
.lp3-day__body { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 16px; }
.lp3-day__img { flex: none; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
.lp3-day__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp3-day__what { font-size: .9375rem; line-height: 1.55; }

.lp3-calm { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: clamp(28px, 4vw, 48px); max-width: 880px; }
.lp3-calm__card { background: var(--bg); border-radius: var(--radius); padding: 18px 10px; text-align: center; }
.lp3-calm__card .ico { width: 30px; height: 30px; color: var(--accent-text); margin: 0 auto 10px; display: block; }
.lp3-calm__card p { font-size: .8125rem; line-height: 1.45; }
.lp3-calm__card b { display: block; font-weight: 700; }

/* 证明段(data.LP_PROOF_ENABLED 打开才出现) */
.lp3-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp3-proof__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.lp3-proof__item figcaption { margin-top: 8px; font-size: .875rem; color: var(--ink-soft); }
.lp3-proof__quote { margin-top: 20px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 24px; }
.lp3-proof__quote cite { display: block; margin-top: 10px; font-style: normal; color: var(--ink-mute); font-size: .875rem; }

/* 深色段:三步 + 保修 + 两颗按钮,全部置中 */
.lp3-band__in { text-align: center; }
.lp3-band .lp3-h2 { color: #fff; }
.lp3-steps { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; max-width: 760px; margin: 0 auto; }
.lp3-steps::before { content: ""; position: absolute; top: 19px; left: 16.66%; right: 16.66%; height: 2px; background: var(--gold); }
.lp3-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.lp3-step__n { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--charcoal);
  display: flex; align-items: center; justify-content: center; font-family: var(--font); font-weight: 800; font-size: 1.125rem; }
.lp3-band__warranty { margin-top: 32px; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .86); }
.lp3-band__warranty .ico { width: 20px; height: 20px; color: var(--gold); flex: none; }
.lp3-band__ctas { margin: 24px auto 0; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.lp3-band__ctas .h2-btn { width: 100%; gap: 8px; }
.lp3-band__ctas .h2-btn .ico { width: 20px; height: 20px; position: static; transform: none; }
.lp3-band__tiny { margin-top: 14px; font-size: .8125rem; color: rgba(255, 255, 255, .66); }

@media (min-width: 1024px) {
  .lp3-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; margin: 0; padding: 0; }
  .lp3-scene { aspect-ratio: 2 / 3; }
  .lp3-dots { display: none; }
  .lp3-day-wrap, .lp3-calm { margin-left: auto; margin-right: auto; }
  .lp3-sec--white .lp3-h2 { text-align: center; }
  .lp3-day__line { left: 154px; top: 126px; bottom: 126px; }
  .lp3-day__item { grid-template-columns: 120px 14px 1fr; column-gap: 28px; padding: 14px 0; }
  .lp3-day__item::before { grid-column: 2; }
  .lp3-day__when { grid-column: 1; font-size: 1.0625rem; text-align: right; }
  .lp3-day__body { grid-column: 3; grid-row: 1; gap: 32px; }
  .lp3-day__img { width: 220px; height: 220px; border-radius: var(--radius); }
  .lp3-day__what { font-size: 1.125rem; max-width: 34ch; }
  .lp3-calm { gap: 18px; }
  .lp3-calm__card { padding: 28px 20px; }
  .lp3-calm__card p { font-size: .9375rem; }
  .lp3-calm__card .ico { width: 36px; height: 36px; }
  .lp3-band__ctas { flex-direction: row; max-width: 720px; }
  .lp3-steps li { font-size: 1.0625rem; }
}
@media (max-width: 640px) {
  /* 三张定心卡在手机并排太窄(中文会断成「也能/装，」)→ 改成一张一行:图示左、字右 */
  .lp3-calm { grid-template-columns: 1fr; gap: 10px; }
  .lp3-calm__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
  .lp3-calm__card .ico { margin: 0; flex: none; width: 28px; height: 28px; }
  .lp3-calm__card p { font-size: .9375rem; }
  .lp3-calm__card b { display: inline; }
  .lp3-price { font-size: .9375rem; padding: 9px 14px; margin-top: 14px; }
  .lp3-local { margin-top: 10px; font-size: .8125rem; }
  .lp3-hero .pg-pick { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .lp3-dot { transition: none; } }

/* LP v3:问卷不再是第一屏,接在深色段后面。
   不撑满整屏、题目靠上,左栏收成圆角卡片,跟上面深色段分开(10-18 Kelvin 截图:中间空一大块、两块黑黏在一起) */
.lp3-band + .wz--split { background: #fff; min-height: 0; margin: clamp(24px, 4vw, 56px) 16px; border-radius: 20px; overflow: hidden; }
.lp3-band + .wz--split #wizard { margin: 0; }
@media (min-width: 901px) {
  .lp3-band + .wz--split { max-width: 1268px; margin: clamp(48px, 6vw, 80px) auto; width: calc(100% - 48px); box-shadow: var(--card-shadow); }
  .lp3-band + .wz--split > .container { padding-top: 56px; padding-bottom: 48px; }
  .lp3-band + .wz--split .wz-aside { padding-top: 56px; }
}
.lp3-band + .wz--split .wz__meta { margin-bottom: 16px; }
/* 10-18 Kelvin:问卷卡字太多、开始和 WhatsApp 之间太空。
   开场只留标题 + 一行注脚 + 开始(说明和价格上面都讲过了);还没开始答时进度条没意义,先藏 */
.lp3-band + .wz--split .wz__step--intro .wz__lead,
.lp3-band + .wz--split .wz__step--intro .wz__price { display: none; }
.lp3-band + .wz--split .wz__head:has(.wz__bar[aria-valuenow="0"]) { display: none; }
.lp3-band + .wz--split .wz__h1 { margin-bottom: 12px; }
.lp3-band + .wz--split .wz__nav:not(:has(> :not([hidden]))) { display: none; }
.lp3-band + .wz--split .wz__nav:not(:has(> :not([hidden]))) + .wz__wa { margin-top: 8px; }
/* 10-18 Kelvin:电脑版排版。开始按钮太小、WhatsApp 置中跟左对齐的字不一条线、下面空一截。
   内容整组垂直置中在卡片里,按钮加宽,WhatsApp 跟按钮同一条左线 */
.lp3-band + .wz--split #wzStart { width: 100%; }
@media (min-width: 901px) {
  .lp3-band + .wz--split > .container { justify-content: center; }
  .lp3-band + .wz--split #wzStart { max-width: 420px; }
  .lp3-band + .wz--split .wz__wa { text-align: left; }
  .lp3-band + .wz--split .wz__wa a { padding-left: 0; }
}
.lp3-band + .wz--split #wizard { padding-bottom: 0; }
/* 10-18 Kelvin 第三轮:电脑版空白太多 → 字放大、按钮加高;手机顶条两句挤一排会断字 → 改上下两行 */
@media (min-width: 901px) {
  .lp3-band + .wz--split .wz__step--intro .wz__h1 { font-size: clamp(2.25rem, 3.2vw, 3rem); line-height: 1.15; margin-bottom: 16px; }
  .lp3-band + .wz--split .wz__step--intro .wz__meta { font-size: 1.0625rem; margin-bottom: 28px; }
  .lp3-band + .wz--split #wzStart { max-width: 480px; min-height: 64px; font-size: 1.1875rem; }
  .lp3-band + .wz--split .wz__wa { font-size: 1.0625rem; margin-top: 12px; }
}
@media (max-width: 900px) {
  .lp3-band + .wz--split .wz-aside { padding: 14px 20px; }
  .lp3-band + .wz--split .wz-aside__list { grid-auto-flow: row; justify-content: start; gap: 8px; }
  .lp3-band + .wz--split .wz-aside__list li { font-size: .875rem; }
  .lp3-band + .wz--split > .container { padding-top: 24px; }
}
@media (min-width: 901px) {
  .lp3-band + .wz--split .wz-aside { padding-top: 44px; }
  .lp3-band + .wz--split .wz-aside__list { gap: 18px; }
  .lp3-band + .wz--split .wz-aside__img { margin-top: 36px; height: 180px; min-height: 180px; flex: 1 1 auto; }
}
/* 10-18 Kelvin:手机版白卡顶上一条黑底很怪。
   手机:两句保证移到 WhatsApp 下面,浅色小字 + 细分隔线,当按钮底下的定心话;开场还没答题时题目上方不留空 */
.lp3-band + .wz--split > .container:has(.wz__bar[aria-valuenow="0"]) #wizard { padding-top: 0; }
@media (max-width: 900px) {
  .lp3-band + .wz--split .wz-aside { order: 2; background: transparent; color: var(--ink); padding: 0 20px 20px; }
  .lp3-band + .wz--split .wz-aside__list { border-top: 1px solid var(--stroke); padding-top: 16px; gap: 10px; }
  .lp3-band + .wz--split .wz-aside__list li { color: var(--ink-soft); font-size: .875rem; }
  .lp3-band + .wz--split .wz-aside__list .ico { color: #8A6B00; }
  .lp3-band + .wz--split > .container { padding: 28px 20px 16px; }
  .lp3-band + .wz--split .wz__step--intro .wz__h1 { font-size: 1.625rem; }
}