/* ==========================================================================
   pages.css — 各页面专属区块布局
   ========================================================================== */

/* --------------------------------------------------------------------------
   首页：会员订阅推广区
   -------------------------------------------------------------------------- */
.membership {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
}

.membership__title {
  font-size: var(--fs-h2);
  max-width: 16ch;
}

.membership__desc {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  max-width: 42ch;
}

.membership__options {
  display: grid;
  gap: 1rem;
}

.membership__option {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: var(--c-white);
}

.membership__option h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.membership__option p {
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

.membership__cta {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* --------------------------------------------------------------------------
   首页：全屏大字品牌宣言区
   -------------------------------------------------------------------------- */
.manifesto {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 72vh, 760px);
  padding: var(--section-gap) var(--gutter);
  overflow: hidden;
  background: linear-gradient(180deg, #5eaaf0 0%, #9fcdf6 55%, #d8ebfb 100%);
  color: var(--c-white);
  text-align: center;
}

/* 底部的云，纯 CSS 渐变模拟，不加载图片 */
.manifesto::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -18%;
  width: 120%;
  height: 55%;
  background: radial-gradient(
      ellipse 40% 60% at 22% 70%,
      rgba(255, 255, 255, 0.85),
      transparent 70%
    ),
    radial-gradient(
      ellipse 34% 52% at 52% 82%,
      rgba(255, 255, 255, 0.75),
      transparent 70%
    ),
    radial-gradient(
      ellipse 44% 58% at 82% 74%,
      rgba(255, 255, 255, 0.7),
      transparent 70%
    );
  filter: blur(6px);
  pointer-events: none;
}

.manifesto__inner {
  position: relative;
  z-index: 1;
  max-width: 22ch;
}

.manifesto__title {
  font-size: var(--fs-display);
  line-height: 0.94;
}

.manifesto__desc {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 34ch;
  margin-inline: auto;
}

.manifesto__cta {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   首页：社交链接行
   -------------------------------------------------------------------------- */
.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
}

.social__link {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.social__link svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .social__link:hover {
    background: var(--c-black);
    color: var(--c-white);
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   首页：媒体报道 Logo 墙
   -------------------------------------------------------------------------- */
.press {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(5, 1fr);
}

.press__item {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 1rem;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   首页：支持区三栏
   -------------------------------------------------------------------------- */
.support {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.support__card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.support__card h3 {
  font-size: var(--fs-h3);
}

.support__card p {
  color: var(--c-text-muted);
  flex: 1;
}

.support__card .link-arrow,
.support__card .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.support__phone {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
}

/* --------------------------------------------------------------------------
   首页：邮件订阅
   -------------------------------------------------------------------------- */
.subscribe {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--c-black);
  color: var(--c-white);
}

.subscribe__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
}

.subscribe__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.subscribe__input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 0.875rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-white);
  font-size: var(--fs-body);
}

.subscribe__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.subscribe__input:focus {
  outline: none;
  border-color: var(--c-white);
}

.subscribe__note {
  margin-top: 0.875rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
}

.subscribe__ok {
  margin-top: 0.875rem;
  font-size: var(--fs-sm);
  color: #7ee2b8;
}

.subscribe__ok[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   产品详情页
   -------------------------------------------------------------------------- */
.detail-hero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}

.detail-hero__media {
  display: grid;
  place-items: center;
}

.detail-hero__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-h1);
}

.detail-hero__tagline {
  margin-top: 0.75rem;
  font-size: var(--fs-h3);
}

.detail-hero__desc {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  max-width: 48ch;
}

.detail-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.detail-hero__meta {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* 功能三列 */
.features {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.feature {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.feature__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-black);
  color: var(--c-white);
  font-size: 0.9375rem;
  font-weight: 700;
}

.feature h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.feature p {
  color: var(--c-text-muted);
}

/* 截图占位区 */
.shot {
  display: grid;
  place-items: center;
  min-height: clamp(280px, 42vw, 520px);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  color: var(--c-white);
  text-align: center;
}

.shot__window {
  width: 100%;
  max-width: 860px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f4f4f4;
  border-bottom: 1px solid #e2e2e2;
}

.shot__dot {
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);
}

.shot__body {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  color: var(--c-text);
  text-align: left;
}

.shot__row {
  height: 14px;
  border-radius: var(--r-pill);
  background: #e8e8e8;
}

.shot__row--60 { width: 60%; }
.shot__row--80 { width: 80%; }
.shot__row--40 { width: 40%; }

/* 系统要求 */
.specs {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(4, 1fr);
}

.spec {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}

.spec__label {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-bottom: 0.375rem;
}

.spec__value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
}

/* --------------------------------------------------------------------------
   定价页
   -------------------------------------------------------------------------- */
.pricing-hero {
  text-align: center;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.pricing-hero__title {
  font-size: var(--fs-h1);
  max-width: 18ch;
  margin-inline: auto;
}

.pricing-hero__desc {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--c-text-muted);
  max-width: 46ch;
  margin-inline: auto;
}

/* 月付 / 年付切换 */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--c-surface);
}

.billing-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 1.25rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.billing-toggle__btn.is-active {
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.billing-toggle__save {
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
  background: #d7f5e6;
  color: #0a7a4d;
  font-size: 0.75rem;
  font-weight: 600;
}

/* 套餐卡片 */
.plans {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 2px solid transparent;
}

.plan--featured {
  background: var(--c-white);
  border-color: var(--c-black);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.plan__name {
  font-size: var(--fs-h3);
}

.plan__badge {
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--c-black);
  color: var(--c-white);
  font-size: 0.75rem;
  font-weight: 600;
}

.plan__desc {
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.plan__amount {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}

.plan__period {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.plan__billed {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  min-height: 1.4em;
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 0.4375rem;
  font-size: var(--fs-body);
}

.plan__features svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
}

.plan__features li.is-off {
  color: #a8a8a8;
}

.plan .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.plan .btn .btn__arrow {
  margin-left: 0.5rem;
}

/* 单品购买网格 */
.buy-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.buy-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (hover: hover) {
  .buy-card:hover {
    border-color: var(--c-black);
    transform: translateY(-3px);
  }
}

.buy-card .app-icon {
  flex: none;
  width: 64px;
}

.buy-card__body {
  min-width: 0;
  flex: 1;
}

.buy-card__name {
  font-size: var(--fs-h3);
}

.buy-card__tagline {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.buy-card__price {
  margin-top: 0.5rem;
  font-size: var(--fs-body);
  font-weight: 700;
}

/* 功能对比表 */
.compare-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}

.compare {
  min-width: 640px;               /* 低于此宽度就横向滚动，不压缩列 */
  font-size: var(--fs-body);
}

.compare th,
.compare td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.compare thead th {
  position: sticky;
  top: 0;
  background: var(--c-surface-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare tbody th {
  font-weight: 500;
}

.compare td {
  text-align: center;
  width: 15%;
}

.compare thead th:not(:first-child) {
  text-align: center;
}

.compare svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.compare__hint {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* 支付方式与保障 */
.pay-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1.125rem;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}

.guarantee {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(3, 1fr);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--c-surface);
}

.guarantee__item h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}

.guarantee__item p {
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

/* --------------------------------------------------------------------------
   关于页
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.stat__num {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: var(--fw-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
}

.stat__label {
  margin-top: 0.625rem;
  color: var(--c-text-muted);
  font-size: var(--fs-body);
}

.values {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.value {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}

.value h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.625rem;
}

.value p {
  color: var(--c-text-muted);
}

.team {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(4, 1fr);
}

.team__member {
  text-align: center;
}

.team__avatar {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--c-white);
}

.team__name {
  margin-top: 0.875rem;
  font-size: var(--fs-h3);
}

.team__role {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--c-black);
  color: var(--c-white);
}

.cta-band__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

.cta-band__desc {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 42ch;
}

/* ==========================================================================
   响应式
   ========================================================================== */

/* ≤1279：小笔记本 / iPad Pro 横屏 */
@media (max-width: 1279px) {
  .specs,
  .stats,
  .team {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ≤1023：iPad 竖屏 */
@media (max-width: 1023px) {
  .membership,
  .subscribe,
  .detail-hero {
    grid-template-columns: 1fr;
  }

  .detail-hero {
    text-align: center;
    justify-items: center;
  }

  .detail-hero__name,
  .detail-hero__actions {
    justify-content: center;
  }

  .detail-hero__desc {
    margin-inline: auto;
  }

  .features,
  .support,
  .values,
  .guarantee {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* 套餐两列，推荐档独占第一行更醒目 */
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan--featured {
    grid-column: 1 / -1;
  }
}

/* ≤767：手机 */
@media (max-width: 767px) {
  .features,
  .support,
  .values,
  .guarantee,
  .specs,
  .buy-grid,
  .plans,
  .stats {
    grid-template-columns: 1fr;
  }

  .plan--featured {
    grid-column: auto;
    order: -1;                    /* 手机上把推荐档提到最前 */
  }

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

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

  .subscribe__form .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-band .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ≤479：小屏手机 */
@media (max-width: 479px) {
  .press {
    grid-template-columns: 1fr;
  }

  .buy-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .social__link {
    width: 48px;
    height: 48px;
  }
}