/* FTV Pokémon GO Spoofer 页面样式（D2C-20261020-005）
   几何/颜色全部取自 Figma 695:9830 各版块节点（design-nodes/*.json），
   结构与 reviews / faq / cta 三块沿用 ft 族 location-changer 的组件形态。
   令牌：主色渐变 #1FC7FF→#0F9FFF、深字 #292929 / #000、浅蓝卡 #F5F9FF、
        浅绿卡 #EAF8F2、警示卡 #FFF8EF、正文 16/24、导语 20/30、H2 40/48、H1 52/62。 */

/* 站点 main.css 已定义 .container 定宽 750/970/1170/1366 且 ≥1366 无左右 padding；
   本页容器直接沿用（不覆写 width），只在 <1366 档补 15px 内距（站点已给，此处仅占位）。 */
.pg-container {
  margin: 0 auto;
}

.pg-reviews>.container {
  position: relative;
  z-index: 1;
}

.pg-reviews {
  contain: paint;
}

.pg-center {
  text-align: center;
}

.pg-lead {
  font-size: 20px;
  line-height: 30px;
  max-width: 1160px;
  margin: 16px auto 0;
}

/* ---------- 01 Hero：设计 1920×628，内容 1366 宽，左文 660 / 右图 666 ---------- */
.pg-hero {
  background: linear-gradient(135deg, #E8F7FF 0%, #F5FCFF 100%);
  padding: 64px 0;
}

.pg-hero-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.pg-hero-copy {
  flex: 0 0 660px;
  max-width: 660px;
}

.pg-hero h1 {
  margin: 0;
  font-size: 52px;
  line-height: 62px;
  font-weight: 700;
  color: #292929;
}

.pg-hero-bullets {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.pg-hero-bullets li {
  position: relative;
  padding-left: 16px;
  font-size: 20px;
  line-height: 30px;
  color: #000;
}

.pg-hero-bullets li+li {
  margin-top: 6px;
}

.pg-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0F9FFF;
}

.pg-hero-art {
  flex: 0 1 666px;
  min-width: 0;
  max-width: 666px;
  text-align: right;
}

.pg-hero-art img {
  display: block;
  width: 100%;
  max-width: 666px;
  height: auto;
  margin-left: auto;
}

/* 主按钮：设计 288×64，r999，渐变 105deg */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 288px;
  height: 64px;
  margin-top: 40px;
  padding: 0 32px;
  box-sizing: border-box;
  border-radius: 999px;
  background: linear-gradient(105deg, #1FC7FF 0%, #0F9FFF 100%);
  color: #FFFFFF;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease, transform .15s ease;
}

.pg-btn:hover {
  filter: brightness(1.06);
}

.pg-btn:active {
  transform: scale(.98);
}

.pg-btn-ic {
  width: 18px;
  height: 18px;
  flex: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 9px 9px no-repeat,
    linear-gradient(#fff, #fff) 9px 0 / 9px 9px no-repeat,
    linear-gradient(#fff, #fff) 0 9px / 9px 9px no-repeat,
    linear-gradient(#fff, #fff) 9px 9px / 9px 9px no-repeat;
}

/* Windows 图标（与 index 的 .ic-win 同源：ftv-win-icon.svg 24×24） */
.pg-btn .ic-win {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background: url("/assets/location-changer/images/ftv/ftv-win-icon.svg") no-repeat center / contain;
}

/* ---------- 02 Why：设计 1920×1004，标题 390 + 导语 952，bento 1366×568 ---------- */
.pg-why {
  background: #FFFFFF;
  padding: 120px 0;
}

.pg-why-head {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 60px;
}

.pg-why-head h2 {
  flex: 0 0 390px;
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #000;
}

.pg-why-lead {
  flex: 0 1 952px;
  max-width: 952px;
}

.pg-why-lead p {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: #000;
}

.pg-why-lead p+p {
  margin-top: 12px;
}

.pg-bento {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.pg-bento-main {
  flex: 0 0 582px;
}

.pg-bento-side {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 568px;
}

.pg-bento-pair {
  display: flex;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
}

.pg-bento-pair .pg-bento-card {
  flex: 1 1 0;
  padding: 32px;
  box-sizing: border-box;
}

.pg-bento-pair .pg-bento-card p {
  margin-top: 20px;
}

.pg-bento-pair .pg-bento-card .pg-bento-title {
  flex-direction: column;
  align-items: normal;
}

.pg-bento-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 32px;
  border-radius: 24px;
  background: #F5F9FF;
}

.pg-bento-card--pace {
  height: 568px;
  padding: 32px;
  overflow: hidden;
  flex: none;
}

.pg-bento-card--free {
  background: #EAF8F2;
}

.pg-bento-card--speed {
  flex: 0 0 264px;
  padding: 32px;
  box-sizing: border-box;
  gap: 20px;

}

.pg-bento-ic {
  width: 48px;
  height: 48px;
  flex: none;
}

/* 设计 695:9865：图标与标题同一行（Title row，gap 12） */
.pg-bento-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pg-bento-card h3 {
  margin: 0;
  padding-left: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: #000;
}

.pg-bento-card p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.pg-bento-visual {
  margin-top: 0;
}

.pg-bento-visual img {
  display: block;
  width: 100%;
  max-width: 696px;
  height: auto;
}

/* pace 卡：图在上、标题行与正文在下（设计 518×330 图 + 132 文案区，卡内 32 内距、gap 20） */
.pg-bento-card--pace {
  justify-content: space-between;
}

.pg-bento-card--pace .pg-bento-pic img {
  display: block;
  width: 100%;
  max-width: 518px;
  height: auto;
  border-radius: 16px;
}

.pg-bento-card--pace p {
  max-width: 518px;
}

/* ---------- 03 Scenarios：设计 1920×1848，三行交替 650 图 + 636 文 ---------- */

/* FE 验收 P1：设计 695:9959/10127 等 title-block H2 一律 40/48；
   站点 main.css 的 h2{font-size:4.6rem} 会覆盖，桌面档显式声明 */
.pg-scenario h2,
.pg-steps h2,
.pg-reviews h2,
.pg-faq h2 {
  font-size: 40px;
  line-height: 48px;
}

.pg-scenario {
  background: #F5F9FF;
  padding: 120px 0;
}

.pg-sc-list {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.pg-sc-row {
  display: flex;
  align-items: center;
  gap: 80px;
}

.pg-sc-row--rev {
  flex-direction: row-reverse;
}

.pg-sc-media {
  flex: 0 0 650px;
}

.pg-sc-media img {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  /* 设计 695:9949：场景图实例圆角 24；切图四角自带圆角外的黑/白底色，按设计值裁切即可盖住 */
  border-radius: 24px;
}

.pg-sc-copy {
  flex: 1 1 auto;
}

.pg-sc-copy h3 {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  color: #000;
}

.pg-sc-copy p {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 30px;
  color: #000;
}

/* C13：设计节点 695:9945 第 2 行正文 #666666（行 1/3 为 #000） */
.pg-sc-row--rev .pg-sc-copy p {
  color: #666666;
}

.pg-sc-tag {
  display: inline-block;
  margin-top: 24px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #666666;
}

/* ---------- 04 Steps：按 index 的 .lcc-steps 交互与卡片样式适配 ---------- */
.pg-steps {
  background: #FFFFFF;
  padding: 120px 0;
}

.pg-steps h2 {
  margin: 0 auto 60px;
}

.pg-steps-panel {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 1280px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  border-radius: 40px;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
}

.pg-step-list {
  flex: 0 0 570px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-step-list li {
  margin: 0;
  padding: 0;
}

.pg-step {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pg-step.is-active {
  background: #F5FAFF;
}

.pg-step.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20px;
  bottom: 20px;
  width: 4px;
  background: #0F9FFF;
}

.pg-step:focus-visible {
  outline: 2px solid #0F9FFF;
  outline-offset: 2px;
}

.pg-step-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
}

.pg-step-no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #EAEAEA;
  box-sizing: border-box;
  background: #F5FAFF;
  color: #0F9FFF;
  font: 700 20px/26px "MierB-Bold", Arial, sans-serif;
}

.pg-step.is-active .pg-step-no {
  border-color: #0F9FFF;
  background: #0F9FFF;
  color: #FFFFFF;
}

.pg-step-txt {
  max-width: 466px;
  color: #000;
  font: 400 16px/24px "MierB-Regular", "microsoft yahei", Arial, sans-serif;
}

.pg-step.is-active .pg-step-txt {
  font-family: "MierB-Bold", Arial, sans-serif;
  font-weight: 700;
}

.pg-step-txt b {
  font-weight: 700;
}

.pg-steps-shot {
  display: flex;
  flex: 0 1 606px;
  align-items: center;
  min-width: 0;
  width: 606px;
}

.pg-steps-shot img {
  display: block;
  width: 100%;
  max-width: 606px;
  height: auto;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  box-sizing: border-box;
}

.pg-step-dots {
  display: none;
}

.pg-note {
  margin-top: 24px;
  padding: 24px 32px;
  border-radius: 16px;
  background: #F7FBFF;
}

.pg-note b {
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

.pg-note p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}

/* ---------- 05 Reviews：设计 1920×1208，2×2 卡（668/540/796） r16 ---------- */
.pg-reviews {
  position: relative;
  overflow: hidden;
  overflow-x: clip;
  /* 设计 695:9989 帧高 1208 = 标题上 120 + 标题 48 + 60 + 卡片 720 + 44 + logo 80 + 下 136 */
  padding: 120px 0 0;
  background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
}

/* 背景地球图：设计 y=0 起铺满 1920×964，位于标题与卡片之后（z-index 低于内容） */
.pg-reviews-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1920px;
  max-width: none;
  transform: translateX(-50%);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* 设计 695:9989：卡片区 y=228 h=720；第 1 行 668 + 668（卡高 330），
   第 2 行 540 + 796（卡高 360），两行刻意不等宽 → flex 两行分别定宽 */
.pg-reviews-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 60px;
}

.pg-reviews-grid>.pg-review:nth-child(1),
.pg-reviews-grid>.pg-review:nth-child(2) {
  flex: 0 0 668px;
  min-height: 330px;
}

.pg-reviews-grid>.pg-review:nth-child(3) {
  flex: 0 0 540px;
  min-height: 360px;
}

.pg-reviews-grid>.pg-review:nth-child(4) {
  flex: 0 0 796px;
  min-height: 360px;
}

/* 媒体 logo 条：沿用 index scroll-box 的无缝滚动与渐隐 */
.pg-media-row {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  padding-bottom: 123px;
  background: #FFFFFF;
}

.pg-media-row [data-roll="scroll-carousel"] {
  display: flex;
  width: 999%;
  height: 80px;
}

.pg-media-row [data-roll="scroll-carousel"] .item {
  width: 1920px;
  height: 80px;
  overflow: hidden;
  background: url("/assets/images/pokemon-go-spoofer/media-logos.webp") no-repeat;
  background-size: 1920px 80px;
}

.pg-media-row::before,
.pg-media-row::after {
  content: "";
  position: absolute;
  top: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
}

.pg-media-row::before {
  left: -1000px;
  width: 1238px;
  background: linear-gradient(90deg, #FFFFFF 0, #FFFFFF 1000px, rgba(255, 255, 255, 0) 1238px);
}

.pg-media-row::after {
  right: -1000px;
  width: 1285px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #FFFFFF 285px, #FFFFFF 1285px);
}

.pg-review {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 40px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.pg-review-quote {
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  color: #0F9FFF;
}

.pg-review-txt {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 30px;
  color: #000;
}

.pg-review-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 32px;
}

.pg-review-name {
  font-size: 20px;
  line-height: 32px;
  color: #000;
}

.pg-stars {
  width: 120px;
  height: 24px;
  flex: none;
  background: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg fill='%23FF6A00'%3E%3Cpath d='M12 2l2.9 6.2 6.6.9-4.8 4.8 1.2 6.6L12 17.4 6.1 20.5l1.2-6.6L2.5 9.1l6.6-.9z'/%3E%3Cpath d='M36 2l2.9 6.2 6.6.9-4.8 4.8 1.2 6.6L36 17.4l-5.9 3.1 1.2-6.6-4.8-4.8 6.6-.9z'/%3E%3Cpath d='M60 2l2.9 6.2 6.6.9-4.8 4.8 1.2 6.6L60 17.4l-5.9 3.1 1.2-6.6-4.8-4.8 6.6-.9z'/%3E%3Cpath d='M84 2l2.9 6.2 6.6.9-4.8 4.8 1.2 6.6L84 17.4l-5.9 3.1 1.2-6.6-4.8-4.8 6.6-.9z'/%3E%3Cpath d='M108 2l2.9 6.2 6.6.9-4.8 4.8 1.2 6.6-3 3.1-5.9-3.1-5.9 3.1 1.2-6.6-4.8-4.8 6.6-.9z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 06 Before you use：设计 695:10110 警示卡 1366×325 r16 #FFF8EF ---------- */
.pg-before {
  background: #FFFFFF;
  padding: 48px 0;
}

.pg-notice {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px;
  background: #FFF8EF;
  box-shadow: inset 0 0 0 1px rgba(159, 100, 20, .13);
}

.pg-notice-watermark {
  position: absolute;
  top: -28px;
  right: 24px;
  width: 144px;
  height: 144px;
  opacity: .045;
  pointer-events: none;
}

.pg-notice-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pg-notice-ic {
  width: 24px;
  height: 24px;
  flex: none;
  opacity: .62;
}

.pg-notice h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #292929;
}

.pg-notice-policy {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #666666;
}

.pg-strikes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.pg-strike {
  flex: 1 1 418px;
  min-width: 0;
}

.pg-strike-stage {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

.pg-strike-cons {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: #292929;
}

.pg-strike-dur {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

.pg-notice-resp {
  position: relative;
  padding-top: 16px;
  border-top: 1px solid rgba(102, 102, 102, .12);
}

.pg-notice-resp p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #666666;
}

.pg-notice-resp p+p {
  margin-top: 12px;
}

/* ---------- 07 FAQ：设计 1920×1248，10 项 × 88 高，分隔线 ---------- */
.pg-faq {
  background: #FFFFFF;
  padding: 120px 0;
}

/* 设计 695:10127：FAQ List 1366 内条目 1206（两侧各缩 80） */
.pg-faq .faq-con {
  margin: 60px auto 0;
  padding: 0;
  list-style: none;
  max-width: 1206px;
}

.pg-faq .faq-con>li {
  padding: 30px 0;
  border-bottom: 1px solid #EAEAEA;
  cursor: pointer;
}

.pg-faq .faq-con>li:first-child {
  border-top: 1px solid #EAEAEA;
}

/* FE 验收 P1：设计每条目右侧 24×24 chevron（I695:10128;68:283），开项随 .active 旋转 */
.pg-faq .f-title {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 40px 0 0;
  border: 0;
  background: none;
  font-family: "MierB-Bold", "microsoft yahei", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #000;
  text-align: left;
  cursor: pointer;
}

.pg-faq .f-title::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 9l7 7 7-7' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pg-faq .faq-con>li.active .f-title::after {
  transform: translateY(-50%) rotate(180deg);
}

.pg-faq .f-info {
  display: none;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 26px;
  color: #333;
}

.pg-faq .faq-con>li.active .f-title {
  color: #0F9FFF;
}

.pg-faq .f-title:focus-visible {
  outline: 2px solid #0F9FFF;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 08 CTA：设计 1920×456，左文 766 / 右图 600 ---------- */
/* 设计 695:10139 bg-cta-waves：45° #F7FDFF→#F5FCFF 渐变 + 斜向条纹（导出 SVG 原样铺满） */
.pg-cta {
  background: #F5FCFF url("/assets/images/pokemon-go-spoofer/cta-waves.svg") no-repeat center center / cover;
}

/* 设计 766+608=1374 ≈1366 容器（插画右缘溢出容器 8px 属设计内） */
.pg-cta-in {
  display: flex;
  align-items: center;
}

.pg-cta-txt {
  flex: 0 0 766px;
  max-width: 766px;
}

/* 设计 695:10138：Logo and Title 591×64（图标 64 + 标题 44/50），
   标题底 181 → 描述 197（+16），描述底 227 → 按钮 275（+48） */
.pg-cta-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pg-cta-app {
  width: 64px;
  height: 64px;
  flex: none;
}

.pg-cta-txt h2 {
  margin: 0;
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
  color: #000;
}

.pg-cta-txt p {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 30px;
  color: #000;
}

.pg-cta-in {
  height: 456px;
  align-items: center;
}

.pg-cta .pg-btn {
  margin-top: 48px;
}

.pg-cta-art {
  flex: 0 0 608px;
  height: 456px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -15px;
}

/* 设计 695:10138：右图 600×376（Frame img-cta-location-map 600×376）。
   资产自然比 1216:912 = 1.333，直接按宽缩放会得 450 高 → 用设计比例的
   aspect-ratio + object-fit:cover 裁到 600×376（设计框即为裁切框）。 */
.pg-cta-art img {
  display: block;
  width: 608px;
  max-width: none;
  height: auto;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1440px) {

  .pg-hero-copy,
  .pg-cta-txt {
    flex: 0 0 52%;
    max-width: 52%;
  }

  /* FE 验收 P1-7 回收：窄桌面下插画按容器剩余宽收缩，不再定宽 608 */
  .pg-cta-art {
    flex: 1 1 auto;
    margin-right: 0;
    min-width: 0;
  }

  .pg-cta-art img {
    width: 100%;
    max-width: 608px;
    margin-left: auto;
  }
}

@media (max-width: 1199px) {

  .pg-hero,
  .pg-why,
  .pg-scenario,
  .pg-steps,
  .pg-reviews,
  .pg-faq {
    padding: 80px 0;
  }

  /* 纵排后解除横排专用定高/定宽，否则子内容溢出并与相邻版块重叠 */
  .pg-steps-panel {
    height: auto;
  }

  .pg-why-head {
    flex-direction: column;
  }

  .pg-why-head h2 {
    flex: none;
  }

  .pg-why-lead {
    flex: none;
    max-width: 100%;
    min-width: 0;
  }

  .pg-bento-side {
    height: auto;
  }

  .pg-bento-pair {
    flex: none;
  }

  .pg-cta-in {
    padding: 32px 15px;
    height: auto;
  }

  .pg-cta-art {
    height: auto;
  }

  .pg-hero h1 {
    font-size: 44px;
    line-height: 54px;
  }

  .pg-bento {
    flex-direction: column;
  }

  .pg-bento-main {
    flex: none;

  }

  .pg-bento-card--pace {
    width: 600px;
    max-width: 100%;
    margin: auto;
  }

  .pg-sc-row,
  .pg-sc-row--rev {
    flex-direction: column;
    gap: 32px;
  }

  .pg-sc-media {
    flex: none;
    width: 100%;
  }

  .pg-steps-panel {
    flex-direction: column;
    padding: 32px;
    border-radius: 24px;
  }

  .pg-step-list {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 1439px) {

  .pg-reviews-grid>.pg-review:nth-child(1),
  .pg-reviews-grid>.pg-review:nth-child(2),
  .pg-reviews-grid>.pg-review:nth-child(3),
  .pg-reviews-grid>.pg-review:nth-child(4) {
    flex: 1 1 45%;
    min-height: 0;
  }
}

@media (max-width: 991px) {

  /* 768–991 容器 750 宽，hero 双栏会挤压 → 转单列（设计仅给 1920，中间档按不挤不裁判定） */
  .pg-hero-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .pg-hero-copy {
    flex: none;
    max-width: 100%;
  }

  .pg-hero-art {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .pg-hero-art img {
    margin: 0 auto;
  }

  .pg-reviews-grid>.pg-review:nth-child(1),
  .pg-reviews-grid>.pg-review:nth-child(2),
  .pg-reviews-grid>.pg-review:nth-child(3),
  .pg-reviews-grid>.pg-review:nth-child(4) {
    flex: 1 1 100%;
  }

  .pg-why-head {
    flex-direction: column;
  }

  .pg-why-head h2 {
    flex: none;
  }

  .pg-bento-pair {
    flex-direction: column;
  }

  .pg-reviews-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-strikes {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-cta-in {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  .pg-cta-txt {
    flex: none;
    margin: auto;
    max-width: 100%;
  }

  .pg-cta-art {
    height: auto;
    margin: auto;
  }

  .pg-cta-art img {
    width: 400px;
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 767px) {

  .pg-hero,
  .pg-why,
  .pg-scenario,
  .pg-steps,
  .pg-reviews,
  .pg-faq {
    padding: 48px 0;
  }

  .pg-hero-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .pg-hero-copy {
    flex: none;
    max-width: 100%;
  }

  .pg-hero h1 {
    font-size: 32px;
    line-height: 40px !important;
  }

  .pg-hero-bullets li {
    font-size: 16px;
    line-height: 26px;
  }

  .pg-hero-art {
    text-align: center;
  }

  .pg-btn {
    width: 100%;
    min-width: 0;
    font-size: 18px;
  }

  .pg-why-head h2,
  .pg-scenario h2,
  .pg-steps h2,
  .pg-reviews h2,
  .pg-faq h2,
  .pg-cta-txt h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .pg-why-lead p,
  .pg-sc-copy p,
  .pg-cta-txt p,
  .pg-lead {
    font-size: 16px;
    line-height: 26px;
  }

  .pg-sc-copy h3 {
    font-size: 22px;
    line-height: 30px;
  }

  .pg-bento-card {
    padding: 24px;
    border-radius: 16px;
  }

  .pg-cta {
    text-align: center;
  }




  .pg-bento-card--pace p {
    margin-bottom: 24px;
  }

  .pg-bento-card h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .pg-review {
    padding: 24px;
  }

  .pg-review-txt {
    font-size: 16px;
    line-height: 26px;
  }

  .pg-notice {
    padding: 24px;
  }

  .pg-faq .f-title {
    font-size: 17px;
    line-height: 26px;
  }
}

@media (max-width: 1365px) {
  .pg-steps-panel {
    width: 100%;
  }
}

@media (min-width: 1280px) and (max-width: 1365px) {
  .pg-step-list {
    flex: 1 1 0;
    min-width: 0;
  }

  .pg-steps-shot {
    flex: 0 1 46%;
    width: auto;
  }

  .pg-steps-shot img {
    width: 100%;
  }
}

@media (max-width: 1279px) {
  .pg-steps-panel {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .pg-step-list {
    flex: none;
    width: 100%;
  }

  .pg-step-txt {
    max-width: none;
  }

  .pg-steps-shot {
    flex: none;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1199px) {
  .pg-media-row::before {
    width: 1160px;
    background: linear-gradient(90deg, #FFFFFF 0, #FFFFFF 1000px, rgba(255, 255, 255, 0) 1160px);
  }

  .pg-media-row::after {
    width: 1190px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #FFFFFF 190px, #FFFFFF 1190px);
  }
}

@media (max-width: 767px) {
  .pg-steps {
    padding: 80px 16px;
  }

  .pg-steps-panel {
    padding: 16px;
    border-radius: 24px;
  }

  .pg-step {
    padding: 16px;
  }

  .pg-step.is-active::after {
    top: 16px;
    bottom: 16px;
  }

  .pg-steps-shot {
    flex-direction: column;
    align-items: center;
  }

  .pg-step-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }

  .pg-step-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D0D5DD;
  }

  .pg-step-dots i.on {
    background: #0F9FFF;
  }

  .pg-media-row::before {
    width: 1090px;
    background: linear-gradient(90deg, #FFFFFF 0, #FFFFFF 1000px, rgba(255, 255, 255, 0) 1090px);
  }

  .pg-media-row::after {
    width: 1110px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #FFFFFF 110px, #FFFFFF 1110px);
  }

  .lci-cta-logo {
    width: 400px;
  }
}

@media (max-width: 600px) {
  .pg-steps {
    padding: 64px 16px;
  }

  .pg-steps h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .pg-media-row {
    margin-top: 40px;
  }
}