/* 页尾 CTA 询盘窗口（2026-10-31）
 *
 * 背景：how-to-work-with-us、blog 两页的深色收尾板块只写了「把六点发给我们」，
 *       却没有任何地方可以填 —— 客户看完话术无处落地。
 * 做法：把原来居中的一句话拆成两栏，左边文案，右边常驻询盘卡。
 *       只在 .tn-cta.rq-on 下生效，不动站内其它板块。
 */

.tn-cta.rq-on {
  padding: 84px 24px 88px;
  text-align: left;
}

.tn-cta.rq-on .rq-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(352px, 430px);
  gap: 56px 60px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* ── 左：文案 ───────────────────────────── */
.tn-cta.rq-on .rq-copy h2 {
  margin: 0 0 20px;
  max-width: 20ch;
  text-align: left;
}

.tn-cta.rq-on .rq-copy > p {
  margin: 0;
  max-width: 52ch;
  text-align: left;
}

.tn-cta.rq-on .rq-six {
  display: grid;
  justify-content: start;
  justify-items: start;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  max-width: none;
  grid-template-columns: repeat(3, max-content);
  list-style: none;
}

.tn-cta.rq-on .rq-six li {
  padding: 6px 12px;
  border: 1px solid rgba(201, 221, 228, 0.28);
  border-radius: 100px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #a9c8d3;
  white-space: nowrap;
}

/* ── 右：询盘卡 ─────────────────────────── */
.rq-card {
  background: #fbfaf7;
  border-radius: 5px;
  padding: 24px 26px 20px;
  color: #16211f;
  box-shadow: 0 22px 50px rgba(4, 22, 28, 0.34);
  text-align: left;
}

.rq-card p.rq-kicker {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #b9603c;
}

.rq-card h3 {
  margin: 0 0 5px;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #12303a;
}

.rq-card p.rq-sub {
  margin: 0 0 15px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7a76;
}

.rq-card label {
  display: block;
  margin: 0 0 9px;
}

.rq-card label > span {
  display: block;
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7a76;
}

.rq-card input,
.rq-card textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #d3d7d1;
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #16211f;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
}

.rq-card input::placeholder,
.rq-card textarea::placeholder {
  color: #a3aeaa;
}

.rq-card input:focus,
.rq-card textarea:focus {
  outline: 0;
  border-color: #b9603c;
  box-shadow: 0 0 0 3px rgba(185, 96, 60, 0.14);
}

.rq-card textarea {
  min-height: 76px;
  resize: vertical;
}

.rq-card .rq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.rq-card .rq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.rq-btn {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 3px;
  background: #233f35;
  color: #fbfaf7;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease;
}

.rq-btn:hover:not(:disabled) {
  background: #17302a;
}

.rq-btn:disabled {
  opacity: 0.62;
  cursor: default;
}

.rq-card p.rq-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #8a6a3a;
}

.rq-card p.rq-status:empty {
  display: none;
}

.rq-card p.rq-status.is-error {
  color: #a2382a;
}

.rq-card p.rq-note {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #7f8b86;
}

.rq-done {
  padding: 14px 0 6px;
  text-align: left;
}

.rq-done h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: #12303a;
}

.rq-done p {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #4f5f5b;
}

.rq-done b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #16211f;
}

/* ── 窄屏 ───────────────────────────────── */
@media (max-width: 900px) {
  .tn-cta.rq-on {
    padding: 58px 20px 62px;
    text-align: center;
  }

  .tn-cta.rq-on .rq-band {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .tn-cta.rq-on .rq-copy h2,
  .tn-cta.rq-on .rq-copy > p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .tn-cta.rq-on .rq-six {
    justify-content: center;
    margin: 22px auto 0;
  }

  .rq-card {
    padding: 22px 20px 20px;
  }
}

@media (max-width: 460px) {
  .rq-card .rq-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}