/* ============================================================
   内页共用区块样式（www 设计语言）
   ------------------------------------------------------------
   为什么单独一个文件：
     www 的 static/css/*.css 只覆盖到「首页级」组件（.comp_container /
     .sk-title-container / .chooseUs-* / .partners-* 等）。v10 那批内容页
     （关于我们 / 服务保障 / 托管 …）里的统计数字栅格、里程碑时间轴、
     荣誉资质墙这些版式，www 的模板包里没有对应类，而 v10 原有的类
     （.about-details / .about-time / .box-list …）在 default 主题的
     extend.css 里，带的是 v10 自己的视觉。

   所以这里按 www 的取值重写一遍：颜色 / 圆角 / 阴影 / 间距全部走
   common/vars.css 里的变量，字体与卡片风格对齐 www 的 .chooseUs-itme。

   加载顺序：必须在 www 的 static/css/*.css 之后（header.html 末尾已排好）。
   ============================================================ */

/* ---------- 页头：补全高度链（www 自身的缺口） ----------
   www 的 global.css 里：
     .globalBanner            { height: var(--banner_height); ... }   ← 没写 position
     .globalBanner .pagebanner-relative { position:relative; height:100% }
     .globalBanner .pagebanner          { position:absolute; top:50%; transform:translateY(-50%) }
   而 .comp_container_100 在 www 全包内**没有任何高度定义**（只在 centered 时给了
   width:100%）。于是 height:100% 一路传给一个高度为 0 的中间层，
   .pagebanner-relative 实测 computed height=0，绝对定位的 .pagebanner 便以
   0 高度为基准 + translateY(-50%) 上移半个自身高度，标题被顶出容器、压到导航下面。

   实测（1500px 视口）：globalBanner h=360 正常，但 pagebanner-relative h=0、
   pagebanner top=-47。补齐下面两条后 h=360、标题归位。

   这两条只做「把 www 已有的百分比高度接上」，不改任何颜色 / 尺寸取值。 */
.globalBanner {
  position: relative;
}

.globalBanner .comp_container_100 {
  height: 100%;
}

/* 页头的按钮位是可选的：不传内容时把它收掉，
   否则 .pagebanner-button 自带的 margin-top:20px 会白白撑高一行。 */
.globalBanner .pagebanner-button:empty {
  display: none;
}

/* 页头里的行动按钮（www 原版是 .fancy-button，这里用统一的 .p-btn） */
.globalBanner .pagebanner-button .p-btn {
  height: 44px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 8px 8px 20px rgba(55, 99, 170, 0.1);
}

.globalBanner .pagebanner-button .p-btn--primary:hover {
  transform: scale(0.96);
  background: var(--darker1);
}

/* ---------- 通用：区块与标题 ---------- */
.p-section {
  padding: 60px 0 100px;
}

.p-section--tint {
  background: var(--navleft_color);      /* #f6f8fa，www 的浅灰底 */
}

.p-section--blue {
  background: var(--navright_block);     /* #f4f8ff，www 的浅蓝底 */
}

/* 与 www .sk-title-container 同参数，但可左侧对齐 */
.p-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 48px;
}

.p-title h2 {
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0;
}

.p-title p {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(34, 34, 34, 0.65);
}

.p-title--left {
  align-items: flex-start;
  text-align: left;
}

/* ---------- 关于我们：左文右数 ---------- */
.p-about {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.p-about__text {
  flex: 1 1 auto;
  max-width: 660px;
}

.p-about__text h2 {
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 28px;
}

.p-about__text p {
  font-size: 15px;
  line-height: 32px;
  color: var(--txtdesc);
  margin: 0 0 18px;
}

.p-about__text p:last-child {
  margin-bottom: 0;
}

.p-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 200px);
  gap: 20px;
}

.p-stats__item {
  height: 132px;
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-stats__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-stats__num {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: var(--Original);
  letter-spacing: -0.01em;
}

.p-stats__label {
  font-size: 14px;
  color: var(--txtdesc);
}

/* ---------- 卡片栅格（为什么选择我们 / 携手千行百业） ---------- */
.p-cards {
  display: grid;
  gap: 20px;
}

.p-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.p-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.p-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.p-card {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 28px 30px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-card:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

.p-card__title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 12px;
}

.p-card__desc {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}

.p-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lighter1);           /* #e8f1ff */
  color: var(--Original);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* ---------- 里程碑时间轴 ---------- */
.p-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  padding-top: 8px;
}

.p-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 86, 255, 0.05), rgba(0, 86, 255, 0.28), rgba(0, 86, 255, 0.05));
}

.p-timeline__item {
  position: relative;
  padding-top: 38px;
}

.p-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--Original);
  box-shadow: 0 0 0 4px rgba(0, 86, 255, 0.10);
}

.p-timeline__date {
  font-size: 20px;
  font-weight: 700;
  color: var(--Original);
  margin: 0 0 8px;
}

.p-timeline__text {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
}

/* ---------- 图片墙（荣誉资质 / 客户案例） ---------- */
.p-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.p-wall__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-wall__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-wall__item img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
  margin-bottom: 16px;
}

/* 合作方 logo 变体：真实 logo 的宽高比差异很大（腾讯云是横条、宝塔是方形），
   统一压到 56px 高，一行看上去才齐。 */
.p-wall--logo .p-wall__item img {
  max-height: 56px;
  max-width: 150px;
}

.p-wall--logo .p-wall__item {
  min-height: 150px;
}

.p-wall__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0;
}

.p-wall__desc {
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
  margin: 10px 0 0;
}

/* 空数据占位：后台没配荣誉 / 伙伴时，避免区块塌成一空白条 */
.p-wall__placeholder {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--txtdesc);
  border: 1px dashed #dfe5ee;
  border-radius: var(--radius);
  background: #fff;
}

/* ---------- 底部行动区（CTA） ---------- */
.p-cta {
  padding: 56px 0 64px;
  background: linear-gradient(93deg, #0056ff 0%, #206fed 100%);
}

.p-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.p-cta__title {
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 32px;
}

.p-cta__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 56px;
  margin-bottom: 36px;
}

.p-cta__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.p-cta__item::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.p-cta__button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 34px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--Original);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.p-cta__button:hover {
  transform: scale(0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/* ---------- 联系方式卡（联系我们 / 服务保障） ---------- */
.p-contact {
  display: grid;
  gap: 20px;
}

.p-contact--2 { grid-template-columns: repeat(2, 1fr); }
.p-contact--3 { grid-template-columns: repeat(3, 1fr); }
.p-contact--4 { grid-template-columns: repeat(4, 1fr); }

.p-contact__card {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out, transform 0.3s ease-out;
}

.p-contact__card:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
  transform: translateY(-2px);
}

.p-contact__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--lighter1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex: 0 0 auto;
}

.p-contact__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.p-contact__title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-contact__desc {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0;
  flex: 1 1 auto;
}

/* 卡片底部的主信息（电话号 / 邮箱） */
.p-contact__value {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--Original);
  word-break: break-all;
}

.p-contact__action {
  margin-top: 20px;
}

/* ---------- 通用按钮 ---------- */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}

.p-btn--primary {
  background: var(--gradient1);
  color: #fff;
}

.p-btn--primary:hover {
  background: var(--darker1);
  color: #fff;
}

.p-btn--ghost {
  background: #fff;
  border-color: #dfe5ee;
  color: var(--txtcl);
}

.p-btn--ghost:hover {
  border-color: var(--Original);
  color: var(--Original);
}

/* ---------- 帮助列表（联系我们 · 使用帮助） ---------- */
.p-help {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p-help__col {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 26px 30px 30px;
}

.p-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef1f6;
}

.p-help__head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0;
}

.p-help__more {
  font-size: 13px;
  color: var(--txtdesc);
  text-decoration: none;
}

.p-help__more:hover {
  color: var(--Original);
}

.p-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-help__list li {
  margin: 0;
}

.p-help__list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  font-size: 14px;
  color: var(--txtdesc);
  text-decoration: none;
  border-bottom: 1px dashed #f0f3f8;
  transition: color 0.2s ease-out, padding-left 0.2s ease-out;
}

.p-help__list li:last-child a {
  border-bottom: none;
}

.p-help__list a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c9d3e4;
  flex: 0 0 auto;
  transition: background-color 0.2s ease-out;
}

.p-help__list a:hover {
  color: var(--Original);
  padding-left: 4px;
}

.p-help__list a:hover::before {
  background: var(--Original);
}

/* ---------- 流程步骤（服务保障 · 备案 / 退款） ---------- */
.p-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.p-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

/* 连接线：除最后一项外，向右画一条带箭头的细线 */
.p-steps__item::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 86, 255, 0.35), rgba(0, 86, 255, 0.12));
}

.p-steps__item:last-child::after {
  display: none;
}

.p-steps__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--Original);
  color: var(--Original);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 86, 255, 0.12);
}

.p-steps__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 8px;
}

.p-steps__desc {
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
  margin: 0;
}

/* ---------- 图文左右分栏 ---------- */
.p-split {
  display: flex;
  align-items: center;
  gap: 60px;
}

.p-split__media {
  flex: 0 0 420px;
}

.p-split__media img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

.p-split__body {
  flex: 1 1 auto;
}

.p-split__body > h2 {
  font-size: 26px;
  line-height: 38px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 26px;
}

.p-split__block + .p-split__block {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #eef1f6;
}

.p-split__block h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 10px;
}

.p-split__block p {
  font-size: 14px;
  line-height: 26px;
  color: var(--txtdesc);
  margin: 0 0 16px;
}

/* ---------- 选项卡（服务器托管 · 服务类型） ---------- */
.p-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.p-tabs__item {
  padding: 0 24px;
  height: 42px;
  line-height: 42px;
  border-radius: 21px;
  background: var(--lighter2, #f3f7ff);
  border: 1px solid transparent;
  color: var(--txtcl);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}

.p-tabs__item:hover {
  color: var(--Original);
  border-color: rgba(0, 86, 255, 0.35);
}

.p-tabs__item.is-active {
  background: var(--gradient1);
  color: #fff;
  border-color: transparent;
}

.p-tabs__pane {
  display: none;
}

.p-tabs__pane.is-active {
  display: block;
}

/* ---------- 规格卡（服务器托管 · 规格 / 价格） ---------- */
.p-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.p-spec {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-spec:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-spec__title {
  font-size: 19px;
  line-height: 28px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef1f6;
}

.p-spec__attrs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.p-spec__attr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 22px;
}

.p-spec__attr dt {
  flex: 0 0 70px;
  color: #98a2b3;
  margin: 0;
}

.p-spec__attr dd {
  flex: 1 1 auto;
  margin: 0;
  color: var(--txtcl);
  word-break: break-all;
}

.p-spec__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
}

.p-spec__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #ff2626;
}

.p-spec__price em {
  font-style: normal;
  font-size: 14px;
}

.p-spec__price strong {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.p-spec__price span {
  font-size: 13px;
  color: var(--txtdesc);
}

/* ---------- 大特型卡（服务器托管 · 服务优势） ---------- */
.p-feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.p-feature__item {
  background: #fff;
  border: 1px solid #E6E9EC;
  border-radius: var(--radius);
  box-shadow: 0 2px 7px 0 #F2F5F7;
  padding: 30px;
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.p-feature__item:hover {
  border-color: var(--Original);
  box-shadow: 0 10px 20px 0 rgba(192, 205, 232, 0.3), 0 0 2px 0 rgba(37, 56, 108, 0.1);
}

.p-feature__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lighter1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.p-feature__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.p-feature__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--txtcl);
  margin: 0 0 20px;
}

.p-feature__group + .p-feature__group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #eef1f6;
}

.p-feature__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--txtcl);
  margin: 0 0 6px;
}

.p-feature__desc {
  font-size: 13px;
  line-height: 24px;
  color: var(--txtdesc);
  margin: 0;
}

/* ---------- 表单（意见反馈 / 期待您的声音） ----------
   布局：左表单卡 + 右侧说明栏（.p-form__side）。
   控件沿用 www 控件语汇 —— 1px 描边 #dfe5ee、6px 圆角、聚焦换主色，
   和活动页弹窗里的配置表单保持同一套观感。 */
.p-form {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.p-form__main {
  flex: 1 1 auto;
  min-width: 0;
}

.p-form__side {
  flex: 0 0 340px;
}

.p-form__card {
  padding: 34px 36px;
  border: 1px solid #e9eef3;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--global-shadow);
}

/* 一行：左标签右控件 */
.p-field {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

.p-field:last-child {
  margin-bottom: 0;
}

.p-field__label {
  flex: 0 0 84px;
  padding-top: 9px;
  font-size: 14px;
  line-height: 22px;
  color: var(--txtclc);
  text-align: right;
}

.p-required {
  color: #e64545;
  margin-right: 2px;
}

.p-field__control {
  flex: 1 1 auto;
  min-width: 0;
}

.p-input,
.p-textarea,
.p-select {
  width: 100%;
  padding: 0 14px;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--txtcl);
  outline: none;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.p-input,
.p-select {
  height: 40px;
}

.p-textarea {
  min-height: 132px;
  padding: 10px 14px;
  line-height: 24px;
  resize: vertical;
}

.p-input::placeholder,
.p-textarea::placeholder {
  color: #b4bcc9;
}

.p-input:focus,
.p-textarea:focus,
.p-select:focus {
  border-color: var(--Original);
  box-shadow: 0 0 0 3px rgba(0, 86, 255, 0.08);
}

/* 校验失败（js/feedback.js 加 .is-error） */
.p-input.is-error,
.p-textarea.is-error {
  border-color: #ff6739;
}

/* 手机 / 邮箱 组合控件 */
.p-input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p-input-group .p-select {
  flex: 0 0 104px;
  width: 104px;
}

/* 反馈类型：单选卡网格 */
.p-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.p-radio {
  position: relative;
  display: block;
  padding: 14px 16px;
  border: 1px solid #dfe5ee;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease-out, background-color 0.25s ease-out;
}

.p-radio:hover {
  border-color: rgba(0, 86, 255, 0.4);
}

.p-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ★ 同时支持 :has() 与 JS 补的 .is-checked：
   老内核没有 :has()，由 js/feedback.js 在 change 时补类，视觉表现一致。 */
.p-radio:has(input[type="radio"]:checked),
.p-radio.is-checked {
  border-color: var(--Original);
  background: rgba(0, 86, 255, 0.04);
}

.p-radio__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: var(--txtcl);
}

.p-radio__title::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid #c8ced8;
  border-radius: 50%;
  background: #fff;
  transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;
}

.p-radio:has(input[type="radio"]:checked) .p-radio__title,
.p-radio.is-checked .p-radio__title {
  color: var(--Original);
}

.p-radio:has(input[type="radio"]:checked) .p-radio__title::before,
.p-radio.is-checked .p-radio__title::before {
  border-color: var(--Original);
  border-width: 5px;
}

.p-radio__desc {
  margin-top: 4px;
  padding-left: 24px;
  font-size: 12px;
  line-height: 20px;
  color: var(--txtdesc);
}

/* 操作区 */
.p-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e9eef3;
}

.p-form__actions .p-btn {
  min-width: 120px;
  height: 42px;
}

.p-form__tip {
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
}

/* 右侧说明栏 */
.p-form__panel {
  padding: 26px 26px 28px;
  border-radius: var(--radius);
  background: var(--navright_block);
}

.p-form__panel + .p-form__panel {
  margin-top: 20px;
}

.p-form__panel-title {
  position: relative;
  padding-left: 14px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--txtcl);
}

.p-form__panel-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--gradient1);
}

.p-form__panel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p-form__panel-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 22px;
  color: var(--txtdesc);
}

.p-form__panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--Original);
  opacity: 0.6;
}

/* ---------- 移动端 ---------- */
@media screen and (max-width: 768px) {
  .p-section {
    padding: 36px 0 56px;
  }

  .p-title {
    padding-bottom: 28px;
  }

  .p-title h2 {
    font-size: 22px;
    line-height: 32px;
  }

  .p-title p {
    font-size: 14px;
  }

  .p-about {
    flex-direction: column;
    gap: 32px;
  }

  .p-stats {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }

  .p-cards--2,
  .p-cards--3,
  .p-cards--4 {
    grid-template-columns: 1fr;
  }

  .p-timeline {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .p-timeline::before {
    display: none;
  }

  .p-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-contact--2,
  .p-contact--3,
  .p-contact--4 {
    grid-template-columns: 1fr;
  }

  .p-help {
    grid-template-columns: 1fr;
  }

  .p-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .p-steps__item::after {
    display: none;
  }

  .p-split {
    flex-direction: column;
    gap: 28px;
  }

  .p-split__media {
    flex: 0 0 auto;
    width: 100%;
  }

  .p-specs,
  .p-feature {
    grid-template-columns: 1fr;
  }

  .p-tabs__item {
    padding: 0 16px;
    height: 38px;
    line-height: 38px;
  }

  .p-cta__list {
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .p-form {
    flex-direction: column;
    gap: 20px;
  }

  .p-form__side {
    flex: 0 0 auto;
    width: 100%;
  }

  .p-form__card {
    padding: 22px 18px;
  }

  .p-field {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
  }

  .p-field__label {
    flex: 0 0 auto;
    padding-top: 0;
    text-align: left;
  }

  .p-radio-grid {
    grid-template-columns: 1fr;
  }

  .p-form__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .p-form__actions .p-btn {
    width: 100%;
  }
}