/* =============================================
   Small Helix — Services Page Styles
   （本页不引入 desktop-fix.css：其中全局 body / h1 / p 会破坏本页居中与字号）
   ============================================= */

/* 中文 + 英文混排：避免在字中间乱断；长词/数字可折行 */
body.page-services {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto;
}

/* Hero */
body.has-site-header .services-hero {
  padding-top: 28px;
}

.services-hero {
  text-align: center;
  padding: 60px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px));
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.services-hero h1 {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
  line-height: 1.25;
  text-wrap: balance;
}
.services-hero p {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.services-badge {
  display: inline-block;
  background: rgba(124,92,252,0.08);
  color: #7C5CFC;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(124,92,252,0.18);
  backdrop-filter: blur(6px);
}

/* 痛点条：轻量背景 + 数据化卡片（service 目录页） */
.services-pain {
  max-width: 900px;
  margin: 0 auto 8px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
}
.services-pain__inner {
  border-radius: 20px;
  padding: 28px 22px 26px;
  background:
    linear-gradient(145deg, rgba(124, 92, 252, 0.07) 0%, rgba(255, 255, 255, 0.92) 45%, rgba(99, 102, 241, 0.06) 100%),
    url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 40h40V0' fill='none' stroke='%237c5cfc' stroke-opacity='0.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E");
  border: 1px solid rgba(124, 92, 252, 0.15);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.06);
}
.services-pain__title {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 2vw + 0.85rem, 1.35rem);
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
.services-pain__lead {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
  max-width: 640px;
}
.services-pain__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.services-pain__grid--scenarios {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
@media (max-width: 640px) {
  .services-pain__grid {
    grid-template-columns: 1fr;
  }
}
.services-pain__card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
}
.services-pain__stat {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #7c5cfc;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.services-pain__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #374151;
}

/* Jessica008：场景化痛点卡片（无百分比） */
.services-pain__scenario {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(8px);
}
.services-pain__scenario-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
.services-pain__scenario-pain {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
}
.services-pain__scenario-sol {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5b21b6;
  font-weight: 600;
}

/* Modules Section */
.services-modules {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
  width: 100%;
  box-sizing: border-box;
}

/* Module Category Card */
.module-category {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
  border: 1px solid #e6e8f0;
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
}
.module-category:hover {
  box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  border-color: rgba(124,92,252,0.26);
  transform: translateY(-3px);
}

/* Category Header（Jessica009：仅作分区标题，不可折叠） */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.category-header:hover {
  background: #FAFAFC;
}
.category-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.category-header__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(124,92,252,0.10), rgba(124,92,252,0.04));
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(124,92,252,0.14);
}
.category-header__icon svg {
  width: 18px;
  height: 18px;
  stroke: #6d4df2;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-header__info {
  min-width: 0;
  text-align: left;
}
.category-header__info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 2px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}
.category-header__info span {
  display: block;
  font-size: 12px;
  color: #AEAEB2;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: break-word;
}
.category-header__toggle {
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #AEAEB2;
  transition: transform 0.3s ease, color 0.15s ease;
  flex-shrink: 0;
}
.category-header__toggle svg {
  width: 16px;
  height: 16px;
}
.module-category.is-open .category-header__toggle {
  transform: rotate(180deg);
  color: #7C5CFC;
}

/* Sub-modules Grid（全部分类默认展开，无手风琴） */
.category-body {
  max-height: none;
  overflow: visible;
}
.module-category.is-open .category-body {
  max-height: none;
}
.submodules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 20px;
}

/* Sub-module Card */
.submodule-card {
  background: linear-gradient(180deg, #f8f9ff 0%, #f5f6fb 100%);
  border: 1px solid rgba(124,92,252,0.08);
  border-radius: 12px;
  padding: 16px;
  padding-top: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
.submodule-card:hover {
  background: linear-gradient(180deg, #f2efff 0%, #f6f4ff 100%);
  border-color: rgba(124,92,252,0.28);
  box-shadow: 0 8px 20px rgba(124,92,252,0.12);
}
.submodule-card:active {
  transform: scale(0.98);
}
.submodule-card__id {
  font-size: 11px;
  font-weight: 600;
  color: #7C5CFC;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-align: center;
}
.submodule-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 4px;
  line-height: 1.4;
  text-align: center;
}
.submodule-card__desc {
  font-size: 12px;
  color: #86868B;
  line-height: 1.55;
  margin-bottom: 10px;
  text-align: center;
  hyphens: none;
}
.submodule-card__price {
  font-size: 13px;
  font-weight: 600;
  color: #AEAEB2;
  text-align: center;
}

/* Free Trial Tag */
.submodule-card__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #7C5CFC, #6344E0);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* Packages Section */
.services-packages {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px));
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.packages-title {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7C5CFC;
  margin: 0 auto 8px;
  max-width: 100%;
}
.packages-heading {
  text-align: center;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 auto 24px;
  line-height: 1.3;
  max-width: 22em;
  text-wrap: balance;
}
.packages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: initial;
}
.package-card {
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  transition: all 0.25s ease;
  position: relative;
}
.package-card:hover {
  box-shadow: 0 14px 34px rgba(17,24,39,0.12);
  transform: translateY(-3px);
}
.package-card--featured {
  border-color: #7C5CFC;
  background: linear-gradient(180deg, #FAFAFF 0%, #fff 100%);
}
.package-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #7C5CFC, #6344E0);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.package-card__name {
  font-size: 16px;
  font-weight: 600;
  color: #1D1D1F;
  margin-bottom: 4px;
}
.package-card__scope {
  font-size: 12px;
  color: #86868B;
  margin-bottom: 16px;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
}
.package-card__price {
  font-size: 28px;
  font-weight: 700;
  color: #7C5CFC;
  margin-bottom: 4px;
}
.package-card__compare {
  font-size: 12px;
  color: #AEAEB2;
  margin-bottom: 16px;
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
}
.package-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: rgba(124,92,252,0.08);
  color: #7C5CFC;
}
.package-card__cta:hover {
  background: rgba(124,92,252,0.15);
}
.package-card--featured .package-card__cta {
  background: #7C5CFC;
  color: #fff;
}
.package-card--featured .package-card__cta:hover {
  background: #6344E0;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1D1D1F;
  color: #fff;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Back link */
.services-back {
  text-align: center;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(40px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  margin: 0;
}
.services-back a {
  font-size: 13px;
  color: #86868B;
  text-decoration: none;
  transition: color 0.2s;
}
.services-back a:hover { color: #7C5CFC; }

/* Tablet */
@media (max-width: 768px) {
  .services-hero {
    padding: 48px 20px 32px;
  }
  .services-modules,
  .services-packages {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .module-category {
    margin-bottom: 12px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .services-hero {
    padding: 40px 20px 28px;
  }
  .submodules-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .category-header {
    padding: 16px 18px;
  }
  .packages-grid {
    grid-template-columns: 1fr;
  }
  .package-card {
    padding: 24px 18px;
  }
  .package-card__price {
    font-size: 24px;
  }
}

@media (max-width: 375px) {
  .services-hero h1 {
    font-size: 24px;
  }
  .services-hero p {
    font-size: 14px;
  }
  .category-header {
    padding: 14px 14px;
  }
  .submodule-card {
    padding: 14px;
  }
  .packages-heading {
    font-size: 20px;
  }
}

/* 宽屏：原 desktop-fix 中针对本页的宽度（已不再引入该文件） */
@media (min-width: 1440px) {
  .services-hero {
    max-width: 720px;
  }
  .services-modules,
  .services-packages {
    max-width: 800px;
  }
}

@supports not (text-wrap: balance) {
  .services-hero h1,
  .packages-heading {
    text-wrap: unset;
  }
}

/* =============================================
   v4 三阶段布局（Brief-C）
   ============================================= */

/* Hero 三段式漏斗示意 */
.services-funnel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.services-funnel__step {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  color: #1d1d1f;
}
.services-funnel__step--1 { background: #EBF5FF; color: #1d4ed8; }
.services-funnel__step--2 { background: #F3F0FF; color: #6d28d9; }
.services-funnel__step--3 { background: #ECFDF5; color: #047857; }
.services-funnel__sep { color: #c4c4cc; font-weight: 700; }

/* Phase section */
.phase-section {
  border-radius: 20px;
  padding: 22px 18px 24px;
  margin-bottom: 6px;
  border: 1px solid transparent;
}
.phase-section--1 { background: #EBF5FF; border-color: #dbeafe; }
.phase-section--2 { background: #F3F0FF; border-color: #ede9fe; }
.phase-section--3 { background: #ECFDF5; border-color: #d1fae5; }

.phase-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.phase-header__badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  white-space: nowrap;
}
.phase-section--1 .phase-header__badge { background: #2563eb; }
.phase-section--2 .phase-header__badge { background: #7C5CFC; }
.phase-section--3 .phase-header__badge { background: #059669; }
.phase-header__titles h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.3;
}
.phase-header__en {
  display: block;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Phase 之间递进箭头 */
.phase-arrow {
  text-align: center;
  font-size: 24px;
  line-height: 1;
  color: #c4b5fd;
  margin: 2px 0 8px;
  font-weight: 700;
}

/* 模块卡片：方法论 + CTA + 标签色 */
.phase-section .submodules-grid {
  padding: 0;
}
.phase-section .submodule-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(17, 24, 39, 0.06);
}
.phase-section .submodule-card:hover {
  background: #fff;
  border-color: rgba(124, 92, 252, 0.32);
}
.submodule-card__method {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: center;
  min-height: 2.4em;
}
.submodule-card__price--na {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
}
.submodule-card__cta {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #7C5CFC;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.submodule-card:hover .submodule-card__cta { opacity: 1; }

/* 标签颜色：新增=绿 / 重定义=蓝 / 合并=紫 */
.submodule-card__tag--new {
  background: linear-gradient(135deg, #10b981, #059669);
}
.submodule-card__tag--redefine {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.submodule-card__tag--merge {
  background: linear-gradient(135deg, #8b5cf6, #7C5CFC);
}

/* Phase 底部套餐卡片 */
.phase-packs {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkg-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 2px solid #7C5CFC;
  border-radius: 14px;
  padding: 14px 18px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pkg-inline:hover {
  box-shadow: 0 10px 26px rgba(124, 92, 252, 0.18);
  transform: translateY(-2px);
}
.pkg-inline__name {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
}
.pkg-inline__scope {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.pkg-inline__pricing {
  text-align: right;
  flex-shrink: 0;
}
.pkg-inline__price {
  font-size: 20px;
  font-weight: 800;
  color: #7C5CFC;
  letter-spacing: -0.02em;
}
.pkg-inline__save {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  padding: 1px 8px;
  border-radius: 8px;
  margin-top: 2px;
}

/* 全案区渐变强调 */
.services-packages .package-card {
  background: linear-gradient(180deg, #FAFAFF 0%, #ffffff 100%);
}
.services-packages .package-card--featured {
  background: linear-gradient(180deg, #F3F0FF 0%, #ffffff 100%);
}

/* Footer 备案 */
.services-footer {
  text-align: center;
  padding: 24px 16px max(32px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #eef0f5;
  margin-top: 8px;
}
.services-footer p {
  margin: 4px 0;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
}
.services-footer a {
  color: #9ca3af;
  text-decoration: none;
}
.services-footer a:hover { color: #7C5CFC; }

/* 移动端：卡片 2 列 → 1 列，套餐卡纵向 */
@media (max-width: 640px) {
  .phase-section { padding: 18px 14px 20px; }
  .phase-section .submodules-grid { grid-template-columns: 1fr; }
  .submodule-card__method { min-height: 0; }
  .pkg-inline { flex-direction: row; align-items: center; }
  .pkg-inline__price { font-size: 18px; }
}
@media (max-width: 375px) {
  .services-funnel__step { font-size: 12px; padding: 5px 12px; }
  .phase-header__titles h3 { font-size: 16px; }
}