/* ============================================================
   拯救 HMI 2026 长期服务计划 · services/subscription.html 专用样式
   接在 aw.css 之后，只用 aw.css 里已有的 token（--pad / --sec-gap /
   --r-card / --r-media / --accent / --violet …），不另起色板。
   颜色只在爆点上小面积出现：首屏工时格、滑块焦点环、结论青柠卡、
   公式里的青柠芯片、阶梯图的当前档。
   ============================================================ */

/* ------------------------------------------------------------
   首屏 · 左文字、右「设计工时池」生成图形（内联 SVG，不用实拍）
   ------------------------------------------------------------ */
.sub-hero { margin-top: 52px; }

.sub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 40px clamp(20px, 3vw, 48px);
  align-items: end;
}

.sub-hero__lead { max-width: 34ch; margin-top: 6px; text-wrap: balance; }
.sub-hero__lead b { font-weight: 500; color: var(--ink); }
.sub-hero__sub { max-width: 48ch; margin-top: 12px; color: var(--mut); }
.sub-hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.sub-hero__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-media);
  overflow: hidden;
  background: #0e1013;
}
.sub-hero__art svg { width: 100%; height: 100%; }

/* 20 个工作日逐日点亮（每格 8 小时），一整月点满后淡下去重来——
   月费买的是「每个工作日准时释放的产能」，这就是它的样子 */
.cap-day {
  animation: capFill 9.6s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
@keyframes capFill {
  0%   { fill-opacity: 0.06; }
  3%   { fill-opacity: 1; }
  40%  { fill-opacity: 0.62; }
  88%  { fill-opacity: 0.62; }
  100% { fill-opacity: 0.06; }
}

@media (max-width: 1100px) {
  .sub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sub-hero__art { max-width: 560px; }
}

/* 区块副标（sec__head 右侧那句话；aw.css 没有这个类） */
.sec__sub {
  max-width: 50ch;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: var(--mut);
}
.sec__sub small { font-size: 11px; color: var(--mut-2); margin: 0 2px; }

/* ------------------------------------------------------------
   01 · 四张理由卡
   ------------------------------------------------------------ */
.why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-x);
}
.why__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 250px;
  padding: 26px 26px 28px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.why__card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.why__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mut);
}
.why__k i { width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); }
.why__card:nth-child(even) .why__k i { background: var(--violet); }
.why__card h3 { margin-top: auto; font-size: 20.6px; font-weight: 600; line-height: 28px; }
.why__card p { font-size: 14px; font-weight: 300; line-height: 24px; color: var(--mut); }
.why__card p b { font-weight: 500; color: var(--ink); }

@media (max-width: 1100px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .why { grid-template-columns: 1fr; } .why__card { min-height: 0; } }

/* ------------------------------------------------------------
   02 · 计算器：左输入卡（粘性）· 右结果
   ------------------------------------------------------------ */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--gap-x);
  align-items: start;
}

.calc__in {
  position: sticky;
  top: 78px;
  padding: 24px 26px 14px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.calc__group {
  margin: 14px 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut-2);
}
.calc__group:first-child { margin-top: 0; }

.field { display: block; padding: 10px 0 12px; border-top: 0.5px solid var(--line); }
.calc__group + .field { border-top: 0; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__name { font-size: 14px; font-weight: 500; line-height: 22px; }
.field__val {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.field__hint { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--mut-2); }

/* 滑块：2px 轨道（已走过的一段墨色）+ 18px 白色手柄，聚焦时青柠环 */
.rng {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.rng::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ink) var(--p), var(--line) var(--p));
}
.rng::-moz-range-track { height: 2px; border-radius: 1px; background: var(--line); }
.rng::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--ink); }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.rng::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
.rng:hover::-webkit-slider-thumb,
.rng:active::-webkit-slider-thumb { transform: scale(1.12); }
.rng:focus-visible { outline: none; }
.rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent), 0 0 0 0.5px rgba(0, 0, 0, 0.18); }
.rng:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent), 0 0 0 0.5px rgba(0, 0, 0, 0.18); }

.calc__out { display: flex; flex-direction: column; gap: var(--gap-x); }

/* 真实月成本：墨色大卡 */
.calc__hero { padding: 28px 30px 26px; background: var(--ink); color: #fff; border-radius: var(--r-card); }
.calc__k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.calc__big > b {
  display: block;
  margin-top: 8px;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.calc__big > b i {
  font-style: normal;
  font-size: 0.42em;
  font-weight: 500;
  vertical-align: 0.6em;
  margin-right: 0.12em;
  color: var(--accent);
}
.calc__note { display: block; margin-top: 8px; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.68); }
.calc__note b { font-weight: 600; color: var(--accent); }

.split { margin-top: 24px; }
.split__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.split__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); transition: width 0.5s var(--ease); }
.split__bar i:nth-child(1) { background: #fff; }
.split__bar i:nth-child(2) { background: rgba(255, 255, 255, 0.62); }
.split__bar i:nth-child(3) { background: rgba(255, 255, 255, 0.34); }
.split__bar i:nth-child(4) { background: var(--violet); }
.split__bar i:nth-child(5) { background: var(--accent); }
.split__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.66);
}
.split__legend li { display: inline-flex; align-items: center; gap: 7px; }
.split__legend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.split__legend b { font-weight: 500; color: #fff; }

/* 有效工时：两条横条 */
.calc__hours {
  display: grid;
  gap: 26px;
  padding: 26px 28px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.hrow__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hrow__head > span { font-size: 14px; font-weight: 500; }
.hrow__head > b { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrow__head em { font-style: normal; margin-left: 6px; font-size: 13px; font-weight: 300; color: var(--mut); }
.hbar { display: flex; height: 14px; margin-top: 12px; border-radius: 7px; overflow: hidden; background: var(--grey-2); }
.hbar i { display: block; height: 100%; width: calc(var(--w) * 100%); transition: width 0.5s var(--ease); }
.hbar__eff { background: var(--ink); }
.hbar__ramp { background: rgba(94, 106, 210, 0.6); }
.hbar__leave { background: rgba(34, 34, 34, 0.28); }
.hbar__churn { background: repeating-linear-gradient(135deg, rgba(34, 34, 34, 0.38) 0 4px, transparent 4px 8px); }
.hbar__sub { background: var(--accent); }
.hlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 18px;
  color: var(--mut);
}
.hlegend li { display: inline-flex; align-items: center; gap: 7px; }
.hlegend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--grey)); }
.hlegend--churn::before { background: repeating-linear-gradient(135deg, rgba(34, 34, 34, 0.38) 0 2px, transparent 2px 4px) !important; }
.hlegend b { font-weight: 500; color: var(--ink); }

/* 结论四格 */
.calc__verdict { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-x); }
.vt { padding: 18px 22px 16px; background: var(--card); border-radius: var(--r-card); box-shadow: inset 0 0 0 0.5px var(--line); }
.vt > span { display: block; min-height: 40px; font-size: 13px; line-height: 20px; color: var(--mut); }
.vt > b {
  display: block;
  margin-top: 6px;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vt--lime { background: var(--accent); box-shadow: none; }
.vt--lime > span { color: rgba(34, 34, 34, 0.62); }

.calc__verdict-line {
  max-width: 60ch;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.calc__verdict-line b { font-weight: 600; color: var(--violet); }
.calc__fine { max-width: 92ch; font-size: 12px; line-height: 20px; color: var(--mut-2); }

@media (max-width: 1100px) {
  .calc { grid-template-columns: 1fr; }
  .calc__in { position: static; }
}
@media (max-width: 760px) {
  .calc__verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__hero, .calc__hours { padding: 22px 20px; }
}

/* ------------------------------------------------------------
   03 · 配置器：左分段按钮 + 公式，右产能包 + 合约期
   ------------------------------------------------------------ */
.cfg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-x);
  align-items: start;
}
.cfg__ctl {
  display: grid;
  gap: 20px;
  padding: 24px 26px 26px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.seg { display: grid; gap: 8px; }
.seg__name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; line-height: 22px; }
.seg__name small { font-size: 12px; font-weight: 300; color: var(--mut-2); }
.seg__btns { display: flex; gap: 4px; padding: 4px; background: var(--grey-2); border-radius: var(--r-ui); }
.seg__btns button {
  flex: 1 1 0;
  height: 38px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--mut);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.seg__btns button em { font-style: normal; margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--mut-2); }
.seg__btns button:hover { color: var(--ink); }
.seg__btns button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
.seg__btns button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 6px; }

/* 公式条：芯片随选择改写 */
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: var(--r-ui);
  background: var(--ground);
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-family: var(--mono);
  font-size: 13px;
}
.formula .op { color: var(--mut-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.chip--off { opacity: 0.42; text-decoration: line-through; }
.chip--ink { background: var(--ink); color: #fff; box-shadow: none; }
.chip--lime { background: var(--accent); color: var(--ink); box-shadow: none; }
.formula__eq { flex-basis: 100%; margin-top: 4px; font-size: 12px; line-height: 18px; color: var(--mut); }

.cfg__out { display: grid; gap: var(--gap-x); }

/* 产能包：墨色卡 */
.pack { padding: 26px 28px 28px; background: var(--ink); color: #fff; border-radius: var(--r-card); }
.pack__k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.pack__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px var(--gap-x); margin-top: 16px; }
/* 直接子选择器：说明文字是 .pack__cell 的直接子 span，
   数字本身是 <b> 里面的 span（JS 要拿它写值）——写成后代选择器会把数字也吃成 12.5px 灰字 */
.pack__cell > b {
  display: block;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease);
}
.pack__cell > b small { margin-left: 3px; font-size: 0.5em; font-weight: 500; color: var(--accent); }
.pack__cell > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 18px; color: rgba(255, 255, 255, 0.62); }
.pack__cell--dim > b { color: rgba(255, 255, 255, 0.3); }
.pack__cell--dim > b small { color: rgba(255, 255, 255, 0.3); }
.pack__list {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.78);
}
.pack__list li { display: flex; gap: 10px; transition: color 0.3s var(--ease); }
.pack__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 1.5px; background: var(--accent); transition: background-color 0.3s var(--ease); }
.pack__list li.is-off { color: rgba(255, 255, 255, 0.32); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }
.pack__list li.is-off::before { background: rgba(255, 255, 255, 0.2); }

/* 合约期：阶梯图 + 三条事实 */
.term {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px var(--gap-x);
  padding: 22px 26px 24px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.term__k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2); }
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 150px; margin-top: 12px; align-items: end; }
.ladder__col { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; text-align: center; }
.ladder__col i {
  align-self: end;
  display: block;
  height: calc(var(--h) * 100%);
  border-radius: 6px 6px 2px 2px;
  background: var(--grey);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.ladder__col b { margin-top: 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mut); }
.ladder__col span { font-size: 11.5px; line-height: 16px; color: var(--mut-2); }
.ladder__col.is-on i { background: var(--accent); }
.ladder__col.is-on b { color: var(--ink); }
.ladder__col.is-on span { color: var(--ink); }
.term__facts { display: grid; gap: 12px; align-content: start; }
.term__facts div { padding-top: 10px; border-top: 0.5px solid var(--line); }
.term__facts div:first-child { border-top: 0; padding-top: 0; }
.term__facts span { display: block; font-size: 12.5px; line-height: 18px; color: var(--mut); }
.term__facts b { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; }

@media (max-width: 1100px) { .cfg { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pack__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .term { grid-template-columns: 1fr; }
  .seg__btns button em { display: none; }
}

/* ------------------------------------------------------------
   04 · 规则：两列八条
   ------------------------------------------------------------ */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-x); border-top: 0.5px solid var(--line); }
.rule { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; padding: 22px 0 24px; border-bottom: 0.5px solid var(--line); }
.rule__n { padding-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--mut-2); }
.rule h3 { font-size: 16px; font-weight: 500; line-height: 24px; }
.rule p { margin-top: 4px; max-width: 52ch; font-size: 13.5px; font-weight: 300; line-height: 22px; color: var(--mut); }
.rule p b { font-weight: 500; color: var(--ink); }
@media (max-width: 860px) { .rules { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   06 · 范围：包含 / 不包含
   ------------------------------------------------------------ */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-x); }
.scope__col { padding: 24px 28px 20px; background: var(--card); border-radius: var(--r-card); box-shadow: inset 0 0 0 0.5px var(--line); }
.scope__col--no { background: transparent; }
.scope__col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.scope__col h3 i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
}
.scope__col--no h3 i { background: var(--grey); color: var(--mut); }
.scope__col li { display: flex; gap: 10px; padding: 9px 0; border-top: 0.5px solid var(--line); font-size: 14px; font-weight: 300; line-height: 22px; }
.scope__col li::before { content: "✓"; flex: none; width: 14px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.scope__col--no li::before { content: "×"; color: var(--mut-2); }
.scope__col li b { font-weight: 500; }
@media (max-width: 760px) { .scope { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   07 · 常见问题（原生 details）
   ------------------------------------------------------------ */
.faq { border-top: 0.5px solid var(--line); }
.faq details { border-bottom: 0.5px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.faq summary:hover i { box-shadow: inset 0 0 0 0.5px var(--ink); }
.faq details[open] summary i { transform: rotate(45deg); background: var(--accent); box-shadow: none; }
.faq details p { max-width: 72ch; padding: 0 48px 22px 0; font-size: 14px; font-weight: 300; line-height: 26px; color: var(--mut); }
.faq details p b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------
   两条别的路
   ------------------------------------------------------------ */
.alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-x); }
.alt a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 28px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.alt a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.alt a b { font-size: 18px; font-weight: 500; line-height: 26px; }
.alt a p { font-size: 13.5px; font-weight: 300; line-height: 22px; color: var(--mut); }
.alt a em { margin-top: auto; padding-top: 8px; font-style: normal; font-size: 13px; font-weight: 500; }
@media (max-width: 700px) { .alt { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   CTA：复用 card-recommendation，背景用首页同款生成图
   ------------------------------------------------------------ */
.sub-cta .card-recommendation__content > p:last-of-type { color: var(--mut); }

/* ------------------------------------------------------------
   减少动效 / 无 JS
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cap-day { animation: none; fill-opacity: 0.62; }
  .split__bar i, .hbar i, .ladder__col i, .why__card, .alt a { transition: none; }
}
.no-js .cap-day { fill-opacity: 0.62; }

/* ---------- 视觉化改造补丁（2026-09-05）----------
   FAQ 标题行与「两条别的路」卡片标题的 emoji 圆章走 .vb-e 的 ::before
   （不是真元素——真元素插在中文旁会改掉中英词典的翻译单元 key）。
   summary 是 space-between 布局，问题文字要单独占一格弹性空间。 */
.faq summary .faq__q { flex: 1; }
.faq summary.vb-e::before { flex: none; }
.faq details[open] summary.vb-e::before { transform: rotate(-8deg) scale(1.06); border-radius: 50%; }
.alt a:hover b.vb-e::before { transform: rotate(-8deg) scale(1.08); border-radius: 50%; }

/* 规则区的折叠列表与首屏拉开距离 */
.vb-fold { margin-top: 4px; }

/* ============================================================
   索取方案表单（2026-09-06）· 控件在 assets/css/forms.css
   ============================================================ */
.sb-ask__grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .sb-ask__grid { grid-template-columns: 1fr; gap: 30px; } }
.sb-ask__grid .heading-5 { margin-top: 10px; }
.sb-ask__p { color: var(--mut); margin-top: 15px; max-width: 40ch; }
.sb-ask__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 34px);
}
.sb-ask__form.sform--tight .sform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 620px) { .sb-ask__form.sform--tight .sform__grid { grid-template-columns: 1fr; } }
.sb-ask__form .sfield input,
.sb-ask__form .sfield select,
.sb-ask__form .sfield textarea { background-color: var(--ground); }
.sb-ask__form .sfield input:focus,
.sb-ask__form .sfield select:focus,
.sb-ask__form .sfield textarea:focus { background-color: var(--card); }
.sb-ask__form[data-state="done"] { padding: 0; border: 0; }
.sb-ask__form .sform__done { border-radius: var(--r-card); }