﻿.ai-content {
  all: revert;
  all: unset;
  box-sizing: border-box;
  width: 100%;
  min-height: 1px
}

.ai-content * {
  box-sizing: inherit
}

:root {
  --faq-bg: #0b1220;
  --faq-line: rgba(255, 255, 255, .12);
  --faq-text: #eef3ff;
  --faq-muted: #c6d6ff;
  --faq-soft: rgba(255, 255, 255, .06);
  --faq-blue: #0d99ff;
  --faq-purple: #6742fc;
  --faq-radius: 20px;
  --faq-shadow: 0 16px 42px rgba(0, 0, 0, .24)
}

html,
body {
  max-width: 100%;
  overflow-x: hidden
}

body {
  margin: 0;
  background: var(--faq-bg);
  color: var(--faq-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif
}

a {
  color: inherit;
  text-decoration: none
}

.faq-ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(40deg, #080a0f, #001120)
}

.faq-ambient-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: soft-light;
  opacity: .14
}

.faq-ambient-svg-blur {
  position: absolute;
  width: 0;
  height: 0
}

.faq-ambient-gradients {
  position: absolute;
  inset: -12%;
  filter: url(#faqAmbientGooDetail) blur(24px)
}

.faq-ambient-orb {
  position: absolute;
  width: 80%;
  height: 80%;
  mix-blend-mode: hard-light;
  opacity: .72
}

.faq-ambient-orb.g1 {
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  background: radial-gradient(circle at center, rgba(18, 113, 255, .82) 0, rgba(18, 113, 255, 0) 52%) no-repeat;
  transform-origin: center center;
  animation: faqMoveVertical 64s ease-in-out infinite
}

.faq-ambient-orb.g2 {
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  background: radial-gradient(circle at center, rgba(107, 74, 255, .78) 0, rgba(107, 74, 255, 0) 52%) no-repeat;
  transform-origin: calc(50% - 400px);
  animation: faqMoveInCircle 46s linear infinite reverse
}

.faq-ambient-orb.g3 {
  top: calc(50% - 40% + 200px);
  left: calc(50% - 40% - 500px);
  background: radial-gradient(circle at center, rgba(100, 100, 255, .72) 0, rgba(100, 100, 255, 0) 52%) no-repeat;
  transform-origin: calc(50% + 400px);
  animation: faqMoveInCircle 78s linear infinite
}

.faq-ambient-orb.g4 {
  top: calc(50% - 40%);
  left: calc(50% - 40%);
  background: radial-gradient(circle at center, rgba(50, 160, 220, .7) 0, rgba(50, 160, 220, 0) 52%) no-repeat;
  transform-origin: calc(50% - 200px);
  animation: faqMoveHorizontal 72s ease-in-out infinite;
  opacity: .54
}

.faq-ambient-orb.g5 {
  width: 160%;
  height: 160%;
  top: calc(50% - 80%);
  left: calc(50% - 80%);
  background: radial-gradient(circle at center, rgba(80, 47, 122, .7) 0, rgba(80, 47, 122, 0) 52%) no-repeat;
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: faqMoveInCircle 58s ease-in-out infinite
}

.faq-ambient-orb.g6 {
  width: 52%;
  height: 52%;
  top: 12%;
  right: 6%;
  background: radial-gradient(circle at center, rgba(88, 208, 255, .48) 0, rgba(88, 208, 255, 0) 58%) no-repeat;
  transform-origin: center center;
  animation: faqMoveVertical 54s ease-in-out infinite reverse;
  opacity: .38
}

.faq-ambient-orb.g7 {
  width: 46%;
  height: 46%;
  bottom: 4%;
  right: 18%;
  background: radial-gradient(circle at center, rgba(129, 96, 255, .42) 0, rgba(129, 96, 255, 0) 58%) no-repeat;
  transform-origin: calc(50% + 180px) calc(50% - 120px);
  animation: faqMoveInCircle 66s linear infinite;
  opacity: .34
}

.faq-ambient-orb.g8 {
  width: 38%;
  height: 38%;
  bottom: 16%;
  left: 8%;
  background: radial-gradient(circle at center, rgba(51, 133, 255, .36) 0, rgba(51, 133, 255, 0) 60%) no-repeat;
  transform-origin: center center;
  animation: faqMoveHorizontal 62s ease-in-out infinite reverse;
  opacity: .28
}

.faq-ambient-interactive {
  position: absolute;
  width: 58vmax;
  height: 58vmax;
  top: 0;
  left: 0;
  background: radial-gradient(circle at center, rgba(140, 100, 255, .82) 0, rgba(140, 100, 255, .18) 24%, rgba(140, 100, 255, 0) 62%) no-repeat;
  mix-blend-mode: hard-light;
  opacity: .52;
  will-change: transform
}

.faq-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 105px 18px 48px
}

@keyframes faqMoveInCircle {
  0% {
    transform: rotate(0)
  }

  50% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes faqMoveVertical {
  0% {
    transform: translateY(-50%)
  }

  50% {
    transform: translateY(50%)
  }

  100% {
    transform: translateY(-50%)
  }
}

@keyframes faqMoveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%)
  }

  50% {
    transform: translateX(50%) translateY(10%)
  }

  100% {
    transform: translateX(-50%) translateY(-10%)
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  color: rgba(198, 214, 255, .76);
  font-size: 13px
}

.breadcrumb a:hover {
  color: #fff
}

.hero {
  box-sizing: border-box;
  padding: 30px;
  border-radius: 26px;
  background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .2), transparent 18%), linear-gradient(124deg, var(--faq-purple), var(--faq-blue));
  box-shadow: var(--faq-shadow)
}

.eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px
}

.hero h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.22;
  letter-spacing: -.4px
}

.hero p {
  margin: 0;
  max-width: 880px;
  color: rgba(255, 255, 255, .92);
  line-height: 1.85
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  position: relative;
  margin-top: 22px
}

.main-flow {
  min-width: 0;
  display: grid;
  gap: 18px
}

.side-flow {
  min-width: 0;
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: 14px
}

@media (min-width: 901px) {
  .side-flow.js-sticky-managed {
    position: relative !important;
    top: auto !important;
  }

  .side-flow.js-sticky-managed.is-fixed {
    position: fixed !important;
    top: 112px !important;
    z-index: 12;
  }

  .side-flow.js-sticky-managed.is-bottom {
    position: absolute !important;
    top: auto !important;
    bottom: 0;
    right: 0;
    left: auto !important;
    width: var(--js-sticky-width, 300px);
    z-index: 5;
  }

  .side-flow {
    position: sticky !important;
    top: 112px;
    align-self: start;
    height: fit-content;
    max-height: none;
    overflow: visible;
    z-index: 5;
  }
}

.panel {
  box-sizing: border-box;
  padding: 22px;
  border-radius: var(--faq-radius);
  background: rgb(0 0 0 / 41%);
  border: 1px solid var(--faq-line);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  overflow: hidden
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.35
}

.panel h3 {
  margin: 0 0 9px;
  font-size: 18px;
  line-height: 1.45
}

.panel li,
.panel p {
  color: var(--faq-muted);
  font-size: 14px;
  line-height: 1.85
}

.panel p {
  margin: 0
}

.side-flow .panel {
  padding: 17px
}

.section-intro {
  margin: 0 0 16px !important;
  color: var(--faq-muted)
}

.ability-grid,
.comparison-grid,
.insight-grid,
.point-grid,
.proof-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.ability-card,
.comparison-card,
.insight-card,
.point,
.proof-card,
.related-card {
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .12)
}

.point {
  padding: 15px;
  color: var(--faq-muted);
  font-size: 14px;
  line-height: 1.8
}

.conclusion-notes {
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 91, 91, .16), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 91, 91, .28)
}

.conclusion-notes h3 {
  margin: 0 0 14px
}

.conclusion-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.conclusion-note {
  position: relative;
  padding: 15px;
  border-radius: 16px;
  background: rgba(20, 8, 12, .46);
  border: 1px solid rgba(255, 91, 91, .26);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16)
}

.conclusion-note:before {
  content: "误区";
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 91, 91, .18);
  border: 1px solid rgba(255, 91, 91, .34);
  color: #ffb6b6;
  font-size: 12px;
  font-weight: 900
}

.conclusion-note b {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 15px;
  line-height: 1.45
}

.conclusion-note span {
  display: block;
  color: var(--faq-muted);
  font-size: 13px;
  line-height: 1.75
}

.ability-card,
.comparison-card,
.insight-card {
  padding: 18px
}

.comparison-card ul,
.insight-card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px
}

.comparison-card li,
.insight-card li {
  position: relative;
  padding-left: 24px;
  list-style: none
}

.comparison-card li:before,
.insight-card li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faq-blue);
  box-shadow: 0 0 0 5px rgba(13, 153, 255, .14)
}

.insight-lead {
  color: #fff !important;
  font-weight: 800;
  margin-bottom: 10px !important
}

.insight-list {
  display: grid;
  gap: 12px
}

.insight-list .insight-card {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start
}

.insight-list .insight-card h3 {
  margin: 0
}

.faq-page-wordpress-plugin-community-verification .insight-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 18px;
  overflow: hidden;
  border-color: rgba(13, 153, 255, .24);
  background: linear-gradient(180deg, rgba(13, 153, 255, .13), rgba(255, 255, 255, .045))
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card:before {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 12px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(13, 153, 255, .18);
  border: 1px solid rgba(13, 153, 255, .34);
  color: #b8e2ff;
  font-size: 12px;
  font-weight: 900
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card:first-child:before {
  content: "楠岃瘉 01"
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card:nth-child(2):before {
  content: "楠岃瘉 02"
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card:nth-child(3):before {
  content: "楠岃瘉 03"
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card h3 {
  margin: 0 0 10px;
  font-size: 18px
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card>div {
  margin-top: 0
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-lead {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .12)
}

.faq-page-wordpress-plugin-community-verification .insight-list .insight-card li:before {
  background: #42d392;
  box-shadow: 0 0 0 5px rgba(66, 211, 146, .14)
}

.faq-page-wordpress-website-maintenance-after-launch .insight-grid .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.faq-page-seo-plugin-vs-yoast-seo .insight-grid .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.faq-page-wordpress-custom-development-price .insight-grid .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.faq-page-template-vs-custom .insight-grid .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.comparison-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.comparison-top>div {
  min-width: 0
}

.comparison-top strong {
  display: block;
  overflow-wrap: anywhere
}

.comparison-label,
.comparison-tag,
.proof-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(13, 153, 255, .12);
  border: 1px solid rgba(13, 153, 255, .22);
  color: #9dd4ff;
  font-size: 12px;
  font-weight: 900
}

.comparison-card.risk {
  border-color: rgba(255, 91, 91, .3);
  background: linear-gradient(180deg, rgba(255, 91, 91, .13), rgba(255, 255, 255, .045))
}

.comparison-card.risk .comparison-tag {
  color: #ffb6b6;
  border-color: rgba(255, 91, 91, .3);
  background: rgba(255, 91, 91, .14)
}

.comparison-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .045)
}

.comparison-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0
}

.comparison-table td,
.comparison-table th {
  padding: 14px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  vertical-align: top;
  text-align: left
}

.comparison-table th {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: rgba(13, 153, 255, .12)
}

.comparison-table tr:last-child td {
  border-bottom: 0
}

.comparison-table td:first-child {
  width: 160px;
  color: #fff;
  font-weight: 900
}

.comparison-table td:nth-child(3) {
  background: linear-gradient(90deg, rgba(66, 211, 146, .1), rgba(66, 211, 146, .035))
}

.compare-result {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start
}

.compare-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  line-height: 1
}

.compare-mark.yes {
  color: #d9ffe9;
  background: rgba(66, 211, 146, .22);
  border: 1px solid rgba(66, 211, 146, .46)
}

.compare-mark.no {
  color: #ffd1d1;
  background: rgba(255, 91, 91, .2);
  border: 1px solid rgba(255, 91, 91, .42)
}

.compare-mark.partial {
  color: #fff0bf;
  background: rgba(255, 193, 7, .18);
  border: 1px solid rgba(255, 193, 7, .38)
}

.compare-text {
  color: var(--faq-muted);
  font-size: 14px;
  line-height: 1.75
}

.faq-page-why-choose-wordpress-professional-company .comparison-section {
  border-color: rgba(13, 153, 255, .2);
  background: linear-gradient(180deg, rgba(13, 153, 255, .09), rgb(0 0 0 / 41%))
}

.faq-page-why-choose-wordpress-professional-company .comparison-section .section-intro {
  max-width: 760px
}

.faq-page-why-choose-wordpress-professional-company .insight-grid .insight-card:nth-child(3) {
  grid-column: 1/-1
}

.trust-showcase {
  position: relative;
  margin-top: 16px;
  padding: 14px 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: grab;
  touch-action: pan-y
}

.trust-showcase.is-dragging {
  cursor: grabbing
}

.trust-showcase:after,
.trust-showcase:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 74px;
  pointer-events: none
}

.trust-showcase:before {
  left: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 58%), transparent)
}

.trust-showcase:after {
  right: 0;
  background: linear-gradient(270deg, rgb(0 0 0 / 58%), transparent)
}

.trust-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 0 14px;
  will-change: transform
}

.trust-card {
  flex: 0 0 clamp(220px, 24vw, 280px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none
}

.trust-card img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none
}

.faq-proof-main img,
.faq-proof-thumb img,
.proof-media img,
.trust-card img,
.wechat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.faq-proof-tip,
.trust-note {
  margin-top: 12px;
  color: rgba(198, 214, 255, .78);
  font-size: 13px
}

.proof-card {
  overflow: hidden
}

.proof-media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16/10;
  background: rgba(255, 255, 255, .06);
  cursor: pointer
}

.proof-body {
  padding: 15px
}

.proof-body p {
  margin: 0 0 12px
}

.proof-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(13, 153, 255, .1);
  border: 1px solid rgba(13, 153, 255, .22);
  color: #9dd4ff;
  font-size: 13px;
  font-weight: 800
}

.faq-proof-slider {
  margin-top: 16px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1)
}

.faq-proof-stage {
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, .06);
  overflow: hidden
}

.faq-proof-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: 0 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .22s ease
}

.faq-proof-main.is-active {
  opacity: 1;
  pointer-events: auto
}

.faq-proof-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(11, 18, 32, .62);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%)
}

.faq-proof-nav.prev {
  left: 14px
}

.faq-proof-nav.next {
  right: 14px
}

.faq-proof-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1)
}

.faq-proof-copy {
  display: none
}

.faq-proof-copy.is-active {
  display: block
}

.faq-proof-counter {
  flex-shrink: 0;
  color: #9dd4ff;
  font-weight: 900;
  font-size: 13px
}

.faq-proof-thumbs {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  overflow-x: auto
}

.faq-proof-thumb {
  flex: 0 0 112px;
  height: 70px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  opacity: .68
}

.faq-proof-thumb.is-active {
  opacity: 1;
  border-color: var(--faq-blue)
}

.community-box {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 153, 255, .14), rgba(255, 255, 255, .045));
  border: 1px solid rgba(13, 153, 255, .24)
}

.community-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

.community-head h3 {
  margin: 0
}

.case-badge,
.community-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(13, 153, 255, .18);
  border: 1px solid rgba(13, 153, 255, .34);
  color: #b8e2ff;
  font-size: 12px;
  font-weight: 900
}

.community-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px
}

.community-links a {
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(4, 12, 26, .46);
  border: 1px solid rgba(13, 153, 255, .22);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  min-width: 0
}

.community-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 153, 255, .48);
  background: rgba(13, 153, 255, .14)
}

.community-links span {
  color: #9dd4ff;
  font-size: 12px;
  font-weight: 900
}

.community-links b {
  color: #fff;
  font-size: 14px;
  overflow-wrap: anywhere
}

.wechat-card {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .085);
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: center
}

.wechat-card button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: 0 0;
  cursor: pointer
}

.wechat-card img {
  border-radius: 10px
}

.wechat-card span {
  display: block;
  margin-top: 9px;
  color: #dce9ff;
  font-size: 13px;
  line-height: 1.6
}

.case-showcase {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(13, 153, 255, .07));
  border: 1px solid rgba(255, 255, 255, .13)
}

.case-showcase-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.case-showcase-head strong {
  color: #fff;
  font-size: 16px
}

.case-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

.case-links a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  min-width: 0
}

.case-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 153, 255, .42);
  background: rgba(13, 153, 255, .12)
}

.case-links b {
  color: #fff;
  font-size: 14px;
  overflow-wrap: anywhere
}

.case-links span {
  color: #9dd4ff;
  font-size: 12px;
  font-weight: 900;
  min-width: 0
}

.related-card {
  display: block;
  padding: 16px;
  transition: transform .16s ease, border-color .16s ease
}

.related-card:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 153, 255, .35)
}

.related-card b {
  display: block;
  margin-bottom: 7px
}

.related-card span {
  display: block;
  color: var(--faq-muted);
  font-size: 13px;
  line-height: 1.7
}

.evidence-list {
  display: grid;
  gap: 10px
}

.evidence-list div {
  padding: 12px;
  border-radius: 14px;
  background: rgba(13, 153, 255, .1);
  border: 1px solid rgba(13, 153, 255, .18);
  color: var(--faq-muted);
  font-size: 13px;
  line-height: 1.7
}

.conclusion-panel {
  background: linear-gradient(165deg, rgba(13, 153, 255, .15), rgba(0, 0, 0, .41));
  border-color: rgba(13, 153, 255, .3)
}

.conclusion-panel .point {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 500
}

.conclusion-panel .point:before {
  content: "";
  margin-right: 8px;
  color: var(--faq-blue)
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #0b1220;
  font-size: 13px;
  font-weight: 900
}

.btn.secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14)
}

@media(max-width:720px) {
  .faq-wrap {
    padding-top: 10px;
    padding-left: 14px;
    padding-right: 14px
  }

  .hero {
    padding: 24px
  }

  .hero h1 {
    font-size: 26px
  }

  .detail-layout {
    display: block
  }

  .side-flow {
    position: static;
    margin-top: 18px
  }

  .ability-grid,
  .case-links,
  .community-box,
  .community-links,
  .comparison-grid,
  .conclusion-note-grid,
  .insight-grid,
  .insight-list .insight-card,
  .point-grid,
  .proof-grid,
  .related-grid {
    grid-template-columns: 1fr
  }

  .faq-page-wordpress-plugin-community-verification .insight-list {
    grid-template-columns: 1fr
  }

  .faq-proof-meta {
    display: block
  }

  .faq-proof-counter {
    display: block;
    margin-top: 10px
  }

  .trust-card {
    flex-basis: 220px
  }
}

@media(max-width:520px) {
  .faq-wrap {
    padding: 10px 12px 40px
  }

  .breadcrumb {
    font-size: 12px;
    gap: 6px;
    overflow-wrap: anywhere;
    word-break: break-word
  }

  .hero {
    padding: 18px 14px;
    border-radius: 18px
  }

  .eyebrow,
  .proof-link,
  .btn,
  .btn.secondary,
  .comparison-label,
  .comparison-tag,
  .proof-type,
  .case-badge,
  .community-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
  }

  .hero h1 {
    font-size: 24px;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-break: break-word
  }

  .hero p,
  .section-intro,
  .panel p,
  .panel li,
  .evidence-list div,
  .conclusion-note span,
  .related-card span,
  .wechat-card span,
  .compare-text {
    overflow-wrap: anywhere;
    word-break: break-word
  }

  .panel {
    padding: 16px 12px
  }

  .side-flow .panel {
    padding: 14px 12px
  }

  .comparison-top,
  .community-head,
  .case-showcase-head,
  .actions {
    align-items: flex-start
  }

  .comparison-top,
  .community-head,
  .case-showcase-head {
    flex-wrap: wrap
  }

  .comparison-table-wrap {
    margin: 0 -12px;
    border-left: 0;
    border-right: 0;
    border-radius: 0
  }

  .faq-proof-nav {
    width: 36px;
    height: 36px;
    font-size: 24px
  }

  .faq-proof-nav.prev {
    left: 8px
  }

  .faq-proof-nav.next {
    right: 8px
  }

  .faq-proof-meta {
    padding: 12px
  }

  .faq-proof-thumbs {
    padding: 0 12px 12px
  }

  .faq-proof-thumb {
    flex-basis: 92px;
    height: 58px
  }

  .proof-body {
    padding: 12px
  }

  .community-box,
  .case-showcase,
  .conclusion-notes {
    padding: 12px
  }

  .community-links a,
  .case-links a,
  .related-card,
  .ability-card,
  .comparison-card,
  .insight-card,
  .point,
  .conclusion-note {
    padding: 12px
  }

  .community-links a,
  .case-links a {
    min-width: 0
  }

  .case-links a {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .case-links b,
  .case-links span,
  .community-links b,
  .community-links span,
  .proof-body h3,
  .proof-body p,
  .insight-card h3,
  .insight-lead,
  .comparison-top strong {
    overflow-wrap: anywhere;
    word-break: break-word
  }

  .wechat-card {
    padding: 10px
  }

  .wechat-card img {
    max-width: 100%;
    height: auto
  }

  .actions .btn {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px
  }

  .faq-page-wordpress-plugin-community-verification .insight-list .insight-card {
    padding: 14px
  }

  .faq-page-wordpress-plugin-community-verification .insight-list .insight-lead {
    padding: 10px
  }
}

@media (prefers-reduced-motion:reduce) {

  .faq-ambient-interactive,
  .faq-ambient-orb {
    animation: none !important;
    transition: none !important;
    transform: none !important
  }
}

@media (max-width: 900px) {
  .detail-layout {
    display: block !important;
    grid-template-columns: unset !important;
    gap: 0 !important;
    align-items: stretch !important;
    margin-top: 18px !important;
  }

  .main-flow,
  .side-flow {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .side-flow {
    margin-top: 16px !important;
  }

  .faq-wrap {
    padding: 16px 12px 28px;
  }

  .faq-hero {
    padding: 18px 14px;
    border-radius: 18px;
  }

  .faq-hero h1 {
    font-size: 24px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .comparison-table-wrap {
    margin: 0 -12px;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 980px;
  }

  .comparison-grid,
  .insight-grid,
  .proof-grid,
  .conclusion-note-grid,
  .related-grid,
  .ability-grid,
  .compare-grid,
  .community-box {
    grid-template-columns: 1fr !important;
  }

  .faq-proof-slider,
  .faq-proof-stage,
  .trust-showcase,
  .proof-card,
  .proof-media,
  .faq-proof-main,
  .trust-card,
  .wechat-card {
    width: 100%;
    max-width: 100%;
  }

  .faq-list-shell {
    padding: 10px;
  }

  .faq-grid {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .faq-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }

  .comparison-table {
    min-width: 860px;
  }

  .faq-list-shell {
    padding: 10px;
  }

  .faq-card {
    padding: 14px;
    border-radius: 16px;
  }

  .faq-card-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .faq-card h3 {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
