/* FEAT-3a53 pricing desktop (>=769px) — ported from design styles.css; mobile production frozen */
/* Scoped under .pricing-desktop-only; do not apply <=768 design mobile rules */

.pricing-desktop-only { display: none; }
.pricing-mobile-only { display: contents; }
@media (min-width: 769px) {
  .pricing-desktop-only { display: contents; }
  .pricing-mobile-only { display: none; }
}

@media (min-width: 769px) {
.pricing-desktop-only {
  --black: #070808;
  --text: #111827;
  --muted: #6b7280;
  --subtle: #84888c;
  --line: #e5e7eb;
  --soft: #f2f3f4;
  --blue: #0078ff;
  --blue-soft: #3b82f6;
  --page-max: 1216px;
}

.pricing-desktop-only html::-webkit-scrollbar,
.pricing-desktop-only body::-webkit-scrollbar {
  display: none;
}

.pricing-desktop-only .hero {
  position: relative;
  display: grid;
  min-height: 713px;
  padding: 150px 24px 112px;
  overflow: hidden;
  place-items: center;
}

.pricing-desktop-only .hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.88) 8%, rgba(255, 255, 255, 0) 24%);
}

.pricing-desktop-only .hero::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 220px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 88%);
}

.pricing-desktop-only .hero-field {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 1920px;
  height: 1040px;
  background: radial-gradient(42% 52% at 50% 55%, rgba(142, 178, 255, 0.8) 0%, rgba(142, 178, 255, 0.4) 48%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-50%);
}

.pricing-desktop-only .hero-sphere {
  position: absolute;
  top: -96px;
  left: 50%;
  z-index: 1;
  width: min(1534px, calc(130vw - 24px));
  aspect-ratio: 1200 / 675;
  height: auto;
  opacity: 1;
  mix-blend-mode: normal;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 7%, #000 17%, #000 78%, rgba(0, 0, 0, 0.28) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.28) 7%, #000 17%, #000 78%, rgba(0, 0, 0, 0.28) 91%, transparent 100%);
}

.pricing-desktop-only .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.pricing-desktop-only .hero h1 {
  max-width: 1215px;
  margin: 0;
  color: #000;
  font-size: clamp(54px, 6.25vw, 96px);
  font-weight: 600;
  line-height: 1;
}

.pricing-desktop-only .hero-title-line {
  display: block;
  margin-bottom: -0.1em;
  padding-bottom: 0.12em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(0.985);
  animation: pricing-heroReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pricing-desktop-only .hero-title-line:nth-child(1) {
  animation-delay: 0ms;
}

.pricing-desktop-only .hero-title-line:nth-child(2) {
  animation-delay: 80ms;
}

.pricing-desktop-only .hero p {
  width: min(1129px, 100%);
  margin: 30px 0 48px;
  color: var(--black);
  font-size: clamp(18px, 1.67vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(0.985);
  /* Same fade-up as .scroll-reveal; sync table start with actions delay */
  animation: pricing-heroReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.pricing-desktop-only .hero-actions {
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(0.985);
  animation: pricing-heroReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

.pricing-desktop-only .hero-actions .button {
  font-weight: 600;
}

.pricing-desktop-only .hero-actions,
.pricing-desktop-only .cta-actions {
  display: flex;
  /* Override site.css .hero-actions { flex-direction: column } */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.pricing-desktop-only .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 99px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.pricing-desktop-only .table-action {
  border: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.pricing-page {
  --black: #070808;
  --text: #111827;
  --muted: #6b7280;
  --subtle: #84888c;
  --line: #e5e7eb;
  --soft: #f2f3f4;
  --blue: #0078ff;
  --blue-soft: #3b82f6;
  --page-max: 1216px;
}

.pricing-desktop-only .button svg {
  display: block;
  flex: 0 0 auto;
}

.pricing-desktop-only .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 52px, 0) scale(0.985);
  /* 不加 transition：避免首次挂上 class 时从 1→0 渐隐 */
  will-change: opacity, transform;
}

.pricing-desktop-only tr.scroll-reveal {
  transform: translate3d(0, 28px, 0);
}

.pricing-desktop-only .scroll-reveal.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Compare / FAQ / Footer：与首页 reveal 节奏对齐 */

.pricing-desktop-only .compare-section .scroll-reveal.reveal-visible,
.pricing-desktop-only .faq-section .scroll-reveal.reveal-visible {
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* compare 表格：边框跟着单元格一起淡入，避免横线先弹出来 */

.pricing-desktop-only .compare-section h2.scroll-reveal {
  border-bottom-color: transparent;
}

.pricing-desktop-only .compare-section h2.scroll-reveal.reveal-visible {
  border-bottom-color: #d1d5db;
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-bottom-color 420ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.pricing-desktop-only .compare-section tr.scroll-reveal {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

.pricing-desktop-only .compare-section tr.scroll-reveal > th,
.pricing-desktop-only .compare-section tr.scroll-reveal > td {
  opacity: 0;
  border-bottom-color: transparent;
  transform: translate3d(0, 28px, 0);
  will-change: opacity, transform;
}

.pricing-desktop-only .compare-section tr.scroll-reveal.reveal-visible > th,
.pricing-desktop-only .compare-section tr.scroll-reveal.reveal-visible > td {
  opacity: 1;
  border-bottom-color: var(--line);
  transform: translate3d(0, 0, 0);
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-bottom-color 420ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.pricing-desktop-only .compare-section thead tr.scroll-reveal.reveal-visible > th {
  border-bottom-color: #d1d5db;
}

.pricing-desktop-only .button-primary,
.pricing-desktop-only .button-blue {
  color: #fff;
  background: var(--blue);
}

.pricing-desktop-only .hero-actions .button-primary {
  gap: 16px;
  padding-right: 8px;
}

.pricing-desktop-only .button-primary-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: #070808;
}

.pricing-desktop-only .button-primary-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.pricing-desktop-only .button-muted {
  color: var(--black);
  background: var(--soft);
}

.pricing-desktop-only .compare-section,
.pricing-desktop-only .faq-section {
  width: min(var(--page-max), calc(100% - 48px));
  margin: 0 auto;
}

.pricing-desktop-only .compare-section {
  padding-bottom: 118px;
}

.pricing-desktop-only .compare-section h2 {
  margin: 0;
  padding: 16px 0;
  border-bottom: 2px solid #d1d5db;
  font-size: 32px;
  line-height: 1.5;
}

.pricing-desktop-only .table-wrap {
  overflow: visible;
}

.pricing-desktop-only .compare-section table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.8px;
}

.pricing-desktop-only .compare-section th,
.pricing-desktop-only .compare-section td {
  padding: 11.8px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  vertical-align: middle;
}

.pricing-desktop-only .compare-section th {
  height: 58px;
  font-weight: 700;
  text-align: center;
  /* 第一行（表头）底部分割线：替代已移除的标题线 */
  border-bottom: 2px solid #d1d5db;
}

.pricing-desktop-only .compare-section th:first-child,
.pricing-desktop-only .compare-section td:first-child {
  width: 22.6%;
  padding-right: 24px;
  text-align: left;
  font-weight: 400;
}

/* Gutter between plan columns so long copy (e.g. privacy) does not collide */
.pricing-desktop-only .compare-section th:not(:first-child),
.pricing-desktop-only .compare-section td:not(:first-child) {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.pricing-desktop-only .compare-section tbody tr.tall td {
  height: 95px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.pricing-desktop-only .compare-section td.strong {
  font-weight: 700;
}

.pricing-desktop-only .check {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.77261 10.7273L9.77808 17.7327L21.0987 6.41211L22.372 7.68545L10.4148 19.6427C10.0633 19.9942 9.49288 19.9942 9.14141 19.6427L1.49927 12.0006L2.77261 10.7273Z' fill='%23070808'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  vertical-align: middle;
}

.pricing-desktop-only .check::before {
  display: none;
}

.pricing-desktop-only .dash {
  color: #9ca3af;
}

.pricing-desktop-only .table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  min-height: 39px;
  border-radius: 196px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.pricing-desktop-only .faq-section {
  padding-bottom: 120px;
}

.pricing-desktop-only .faq-section h2 {
  margin: 0 0 18px;
  color: #0a0a0b;
  font-size: 40px;
  font-weight: 700; /* design draft UA heading bold; Tailwind preflight resets to inherit 400 */
  line-height: 1.05;
}

.pricing-desktop-only .faq-group {
  margin-top: 8px;
}

.pricing-desktop-only .faq-group h3 {
  margin: 0;
  padding: 19px 0 13px;
  color: #0a0a0b;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.pricing-desktop-only .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.pricing-desktop-only .faq-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.pricing-desktop-only .faq-card {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 20px;
  grid-template-rows: minmax(48px, auto);
  width: 100%;
  align-self: stretch;
  align-items: center;
  align-content: start;
  min-height: 72px;
  padding: 12px 30px 12px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--soft);
  color: #0a0a0b;
  cursor: pointer;
  column-gap: 16px;
  text-align: left;
}

.pricing-desktop-only .faq-card > span:first-child {
  width: 12px;
  height: 12px;
  background: var(--blue-soft);
  border-radius: 1.5px;
  align-self: center;
}

.pricing-desktop-only .faq-label {
  display: flex;
  min-width: 0;
  align-items: center;
  align-self: center;
  color: #0a0a0b;
  font-size: 16px;
  line-height: 1.25;
}

.pricing-desktop-only .faq-card b {
  justify-self: end;
  align-self: center;
  font-weight: 400;
  line-height: 1;
}

.pricing-desktop-only .faq-card.half {
  width: 100%;
  max-width: 100%;
}

.pricing-desktop-only .faq-card-open {
  /* 首行与收起态同高；禁止 min-height/stretch 拉高首行导致标题跳动 */
  grid-template-rows: minmax(48px, auto) auto;
  min-height: 0;
  align-items: center;
  align-content: start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pricing-desktop-only .faq-card-open > span:first-child,
.pricing-desktop-only .faq-card-open .faq-label,
.pricing-desktop-only .faq-card-open > b {
  align-self: center;
}

.pricing-desktop-only .faq-card-open strong {
  font-size: 18px;
  font-weight: 500;
}

.pricing-desktop-only .faq-card em {
  display: none;
  grid-column: 2 / 4;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  color: #61666b;
  font-size: 16px;
  font-style: normal;
  line-height: 1.35;
  text-align: left;
}

.pricing-desktop-only .faq-card-open em {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dotted #d5dae0;
}

.pricing-desktop-only .pricing-final-cta {
  position: relative;
  width: min(1298px, calc(100% - 48px));
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  overflow: hidden;
  place-items: center;
  text-align: center;
}

.pricing-desktop-only .dot-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, #e1e7f3 1px, transparent 1.5px);
  background-size: 12px 12px;
  mask-image: radial-gradient(ellipse at center, black 0 30%, transparent 68%);
  opacity: 0.75;
}

.pricing-desktop-only .cta-content {
  position: relative;
  z-index: 1;
  width: min(790px, 100%);
  transform: translateY(-110px);
}

.pricing-desktop-only .cta-content > :not(.cta-line-orb):not(.cta-orb-filter) {
  position: relative;
  z-index: 2;
}

.pricing-desktop-only .cta-orb-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pricing-desktop-only .pricing-final-cta h2 {
  margin: 0;
  color: #000;
  font-size: clamp(44px, 3.3vw, 63px);
  font-weight: 800;
  line-height: 1.1;
}

.pricing-desktop-only .pricing-final-cta p {
  margin: 16px 0 32px;
  color: #000;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

.pricing-desktop-only .cta-line-orb {
  position: absolute;
  top: -84px;
  left: 50%;
  z-index: 1;
  width: min(420px, 64vw);
  height: auto;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.28;
  filter: url("#pricing-cta-orb-warp") invert(1);
  mix-blend-mode: multiply;
  transform-origin: 50% 50%;
  animation: pricing-ctaOrbMotion 8.8s ease-in-out infinite;
  will-change: transform, filter;
}

.pricing-desktop-only .button-dark {
  min-height: 51px;
  color: #fff;
  background: var(--black);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pricing-desktop-only .button-blue {
  min-height: 51px;
}

/* 覆盖顶栏 .brand，避免 header 的尺寸/间距泄漏到页脚（与首页一致） */

@media (prefers-reduced-motion: reduce) {
.pricing-desktop-only .hero h1,
.pricing-desktop-only .hero p,
.pricing-desktop-only .hero-actions,
.pricing-desktop-only .hero-title-line {
    opacity: 1;
    transform: none;
    animation: none;
  }

.pricing-desktop-only .cta-line-orb {
    animation: none;
    transform: translateX(-50%);
  }

.pricing-desktop-only .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

.pricing-desktop-only .compare-section h2.scroll-reveal {
    border-bottom-color: #d1d5db;
  }

.pricing-desktop-only .compare-section tr.scroll-reveal > th,
.pricing-desktop-only .compare-section tr.scroll-reveal > td {
    opacity: 1;
    border-bottom-color: var(--line);
    transform: none;
    transition: none;
  }

.pricing-desktop-only .compare-section thead tr.scroll-reveal > th {
    border-bottom-color: #d1d5db;
  }
}

/* 小高度笔记本：首屏露出 compare 标题 + 表头 + Platform Fee 整行 */

@media (max-height: 920px) and (min-width: 769px) {
.pricing-desktop-only .hero {
    /* 预留约 208px：h2≈82 + thead58 + 首行≈50 + 余量 */
    min-height: calc(100svh - 72px - 208px);
    padding: 80px 24px 56px;
  }

.pricing-desktop-only .hero::after {
    height: 140px;
  }

.pricing-desktop-only .hero-sphere {
    top: -112px;
    width: min(1360px, calc(120vw - 24px));
  }

.pricing-desktop-only .hero h1 {
    font-size: clamp(46px, 5.4vw, 96px);
  }

.pricing-desktop-only .hero p {
    margin: 22px 0 36px;
    font-size: clamp(17px, 1.55vw, 28px);
  }

.pricing-desktop-only .hero-actions .button {
    min-height: 52px;
  }
}

@media (max-height: 800px) and (min-width: 769px) {
.pricing-desktop-only .hero {
    min-height: calc(100svh - 72px - 200px);
    padding: 64px 24px 44px;
  }

.pricing-desktop-only .hero h1 {
    font-size: clamp(40px, 4.8vw, 72px);
  }

.pricing-desktop-only .hero p {
    margin: 16px 0 28px;
  }
}

/* Preserve design cta-content translateY(-110px) under scroll-reveal (FEAT-32f0 lesson) */
.pricing-desktop-only .pricing-final-cta .cta-content.scroll-reveal {
  transform: translate3d(0, calc(-110px + 52px), 0) scale(0.985);
}
.pricing-desktop-only .pricing-final-cta .cta-content.scroll-reveal.reveal-visible {
  transform: translate3d(0, -110px, 0) scale(1);
}
}

@keyframes pricing-heroReveal {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes pricing-ctaOrbMotion {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  }

  25% {
    transform: translateX(-50%) translateY(-18px) rotate(2.2deg) scale(1.05, 0.97);
  }

  52% {
    transform: translateX(-50%) translateY(10px) rotate(-1.6deg) scale(0.98, 1.04);
  }

  76% {
    transform: translateX(-50%) translateY(-10px) rotate(1.2deg) scale(1.03, 0.99);
  }

  100% {
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  }
}