/* =========================================================
   AVC PREVIEW CSS v21 — clean definitive version
   Scope: preview page only.
   Shimmer architecture: ONE real DOM blade layer per CTA.
   No pseudo-element shimmer stacking, no transform/background conflict.
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   1) Seamless black continuity between page sections
───────────────────────────────────────────────────────── */
body.avc-preview-page .hero,
body.avc-preview-page main > section,
body.avc-preview-page main > .img-caption-wrap,
body.avc-preview-page main > .wow-break,
body.avc-preview-page main > .arsenal-section,
body.avc-preview-page main > .system-summary-section,
body.avc-preview-page main > .pricing-section,
body.avc-preview-page main > .expanding-section,
body.avc-preview-page main > .cta-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.avc-preview-page section + section,
body.avc-preview-page section + .img-caption-wrap,
body.avc-preview-page .img-caption-wrap + section {
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   2) Universal Character System section
───────────────────────────────────────────────────────── */
body.avc-preview-page .avc-universal-system .col-img,
body.avc-preview-page .avc-universal-system .video-contain {
  background: #000 !important;
}

body.avc-preview-page .avc-universal-system .col-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

body.avc-preview-page .avc-universal-system .col-left {
  max-width: 100% !important;
}

body.avc-preview-page .avc-universal-system .avc-universal-title {
  max-width: min(720px, 40vw) !important;
  margin-bottom: clamp(16px, 1.7vw, 24px) !important;
  font-family: 'Overpass', 'Inter', sans-serif !important;
  font-size: clamp(31px, 2.65vw, 52px) !important;
  line-height: 1.035 !important;
  letter-spacing: .075em !important;
  font-weight: 300 !important;
}

body.avc-preview-page .avc-universal-system .avc-universal-title span {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

body.avc-preview-page .avc-universal-system .avc-universal-payoff {
  max-width: min(620px, 38vw) !important;
  margin: 0 0 clamp(18px, 1.9vw, 28px) !important;
  font-family: 'Overpass', 'Inter', sans-serif !important;
  color: var(--v5-text, rgba(255,250,243,.99)) !important;
  font-size: clamp(18px, 1.28vw, 24px) !important;
  line-height: 1.18 !important;
  letter-spacing: .13em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

body.avc-preview-page .avc-universal-system .avc-universal-intro {
  max-width: min(620px, 38vw) !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {
  body.avc-preview-page .avc-universal-system .avc-universal-title {
    font-size: clamp(30px, 4.8vw, 46px) !important;
  }
  body.avc-preview-page .avc-universal-system .avc-universal-title span {
    white-space: normal !important;
  }
  body.avc-preview-page .avc-universal-system .avc-universal-payoff {
    font-size: clamp(16px, 2.7vw, 21px) !important;
  }
}

@media (max-width: 760px) {
  body.avc-preview-page .avc-universal-system .avc-universal-title span {
    display: inline !important;
  }
  body.avc-preview-page .avc-universal-system .avc-universal-title span::after {
    content: " ";
  }
  body.avc-preview-page .avc-universal-system .avc-universal-payoff {
    letter-spacing: .105em !important;
  }
}

/* ─────────────────────────────────────────────────────────
   3) Secondary page-depth buttons: graphite/orange
───────────────────────────────────────────────────────── */
body.avc-preview-page .avc-secondary-code-btn,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn {
  background: linear-gradient(96deg, rgba(11,11,11,.98) 0%, rgba(27,27,27,.98) 100%) !important;
  border: 1px solid rgba(254,127,0,.76) !important;
  color: rgba(255,250,243,.98) !important;
  box-shadow: 0 0 0 1px rgba(254,127,0,.12), 0 12px 34px rgba(0,0,0,.38) !important;
}

body.avc-preview-page .avc-secondary-code-btn span,
body.avc-preview-page .avc-secondary-code-btn strong,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn span,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn strong {
  color: rgba(255,250,243,.98) !important;
}

body.avc-preview-page .avc-secondary-code-btn::after,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn::after {
  color: #fe7f00 !important;
}

body.avc-preview-page .avc-secondary-code-btn:hover,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn:hover {
  border-color: rgba(255,154,40,.96) !important;
  box-shadow: 0 0 0 1px rgba(254,127,0,.22), 0 16px 44px rgba(254,127,0,.13) !important;
}

body.avc-preview-page a.avc-secondary-code-btn:not(.wrap-learn-btn) {
  margin-top: clamp(26px, 2.2vw, 36px) !important;
  min-width: min(100%, 330px) !important;
}

body.avc-preview-page a.wrap-learn-btn.avc-secondary-code-btn {
  margin-left: 0 !important;
  margin-top: clamp(34px, 2.4vw, 42px) !important;
  align-self: flex-start !important;
  width: fit-content !important;
  min-width: min(100%, 330px) !important;
}

/* ─────────────────────────────────────────────────────────
   4) CTA base: stable flex centering + clipping
───────────────────────────────────────────────────────── */
body.avc-preview-page a.avc-code-btn,
body.avc-preview-page a.pricing-cta,
body.avc-preview-page a.checkout-code-btn,
body.avc-preview-page button.avc-form-code-btn,
body.avc-preview-page button.form-btn,
body.avc-preview-page .avc-shine-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transform-origin: center center !important;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

/* Disable all legacy pseudo-element shimmer rules from style.css. */
body.avc-preview-page a.avc-code-btn::before,
body.avc-preview-page a.pricing-cta::before,
body.avc-preview-page a.checkout-code-btn::before,
body.avc-preview-page button.avc-form-code-btn::before,
body.avc-preview-page button.form-btn::before,
body.avc-preview-page .avc-shine-btn::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Keep labels and arrow pseudo-elements above the blade. */
body.avc-preview-page a.avc-code-btn > *:not(.avc-button-blade),
body.avc-preview-page a.pricing-cta > *:not(.avc-button-blade),
body.avc-preview-page a.checkout-code-btn > *:not(.avc-button-blade),
body.avc-preview-page button.avc-form-code-btn > *:not(.avc-button-blade),
body.avc-preview-page button.form-btn > *:not(.avc-button-blade),
body.avc-preview-page .avc-shine-btn > *:not(.avc-button-blade),
body.avc-preview-page a.avc-code-btn::after,
body.avc-preview-page button.avc-form-code-btn::after {
  position: relative !important;
  z-index: 4 !important;
  text-align: center !important;
}

body.avc-preview-page a.avc-code-btn::after,
body.avc-preview-page button.avc-form-code-btn::after {
  flex: 0 0 auto !important;
}

body.avc-preview-page .avc-button-label,
body.avc-preview-page .avc-shine-btn > span:not(.avc-button-blade),
body.avc-preview-page .avc-shine-btn > strong {
  text-align: center !important;
}

/* ─────────────────────────────────────────────────────────
   5) Single real low-roughness blade layer
   Movement uses left on a real child element, so style.css pseudo rules
   cannot freeze it. No transform/background animation is used.
───────────────────────────────────────────────────────── */
@keyframes avcButtonBladeV21 {
  0%   { left: -100%; }
  100% { left: 205%; }
}

body.avc-preview-page .avc-button-blade {
  position: absolute !important;
  z-index: 3 !important;
  top: -50% !important;
  left: -100%;
  width: clamp(54px, 5vw, 86px) !important;
  height: 200% !important;
  pointer-events: none !important;
  flex: none !important;
  display: block !important;
  opacity: 1 !important;
  transform: skewX(-24deg) !important;
  will-change: left !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,.09) 34%,
    rgba(255,255,255,.36) 45%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.36) 55%,
    rgba(255,255,255,.09) 66%,
    rgba(255,255,255,0) 78%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter: blur(.28px) drop-shadow(0 0 5px rgba(255,255,255,.42)) drop-shadow(0 0 12px rgba(255,255,255,.17)) !important;
  mix-blend-mode: screen !important;
  animation: avcButtonBladeV21 3s linear infinite;
}

body.avc-preview-page .avc-secondary-code-btn .avc-button-blade,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn .avc-button-blade {
  opacity: .9 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,.07) 35%,
    rgba(255,255,255,.28) 45%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.28) 55%,
    rgba(255,255,255,.07) 65%,
    rgba(255,255,255,0) 76%,
    rgba(255,255,255,0) 100%
  ) !important;
}

/* Hover: existing interactive feel preserved. */
body.avc-preview-page a.avc-code-btn:hover,
body.avc-preview-page a.pricing-cta:hover,
body.avc-preview-page a.checkout-code-btn:hover,
body.avc-preview-page button.avc-form-code-btn:hover,
body.avc-preview-page button.form-btn:hover,
body.avc-preview-page .avc-shine-btn:hover {
  transform: translateY(-2px) scale(1.015) !important;
  filter: brightness(1.12) saturate(1.05) !important;
}


/* ─────────────────────────────────────────────────────────
   6) Mobile CTA safety: visible, centered labels
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page a.avc-code-btn,
  body.avc-preview-page a.pricing-cta,
  body.avc-preview-page a.checkout-code-btn,
  body.avc-preview-page button.avc-form-code-btn,
  body.avc-preview-page button.form-btn,
  body.avc-preview-page .avc-shine-btn {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  body.avc-preview-page .avc-button-blade {
    width: clamp(58px, 20vw, 98px) !important;
    animation-duration: 3s;
  }

  body.avc-preview-page a.avc-secondary-code-btn:not(.wrap-learn-btn),
  body.avc-preview-page a.wrap-learn-btn.avc-secondary-code-btn {
    min-width: min(100%, 360px) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V21 FINAL CTA SHIMMER SAFETY OVERRIDE
   Real DOM blade only. No pseudo shimmer. Text stays centered.
───────────────────────────────────────────────────────── */
body.avc-preview-page .avc-shine-btn::before,
body.avc-preview-page .avc-shine-btn::after {
  /* Do not globally remove arrows from original buttons; only hide empty pseudo shine if present. */
}

body.avc-preview-page .avc-shine-btn {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body.avc-preview-page .avc-shine-btn > *:not(.avc-button-blade) {
  position: relative !important;
  z-index: 4 !important;
}

body.avc-preview-page .avc-button-blade {
  position: absolute !important;
  z-index: 3 !important;
  top: -50% !important;
  left: -100%;
  width: clamp(54px, 5vw, 86px) !important;
  height: 200% !important;
  display: block !important;
  flex: 0 0 auto !important;
  pointer-events: none !important;
  transform: skewX(-24deg) !important;
  will-change: left !important;
  opacity: 1 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,.09) 34%,
    rgba(255,255,255,.36) 45%,
    rgba(255,255,255,.50) 50%,
    rgba(255,255,255,.36) 55%,
    rgba(255,255,255,.09) 66%,
    rgba(255,255,255,0) 78%,
    rgba(255,255,255,0) 100%
  ) !important;
  filter: blur(.28px) drop-shadow(0 0 5px rgba(255,255,255,.42)) drop-shadow(0 0 12px rgba(255,255,255,.17)) !important;
  mix-blend-mode: screen !important;
  animation: avcButtonBladeV21 3s linear infinite !important;
}

body.avc-preview-page .avc-secondary-code-btn .avc-button-blade,
body.avc-preview-page .wrap-learn-btn.avc-secondary-code-btn .avc-button-blade {
  opacity: .9 !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 24%,
    rgba(255,255,255,.07) 35%,
    rgba(255,255,255,.28) 45%,
    rgba(255,255,255,.46) 50%,
    rgba(255,255,255,.28) 55%,
    rgba(255,255,255,.07) 65%,
    rgba(255,255,255,0) 76%,
    rgba(255,255,255,0) 100%
  ) !important;
}

@keyframes avcButtonBladeV21 {
  0% { left: -100%; }
  100% { left: 205%; }
}

@media (max-width: 760px) {
  body.avc-preview-page .avc-shine-btn {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
  body.avc-preview-page .avc-button-blade {
    width: clamp(58px, 20vw, 98px) !important;
    animation-duration: 3s !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V22 MOBILE CTA TEXT RESTORE — desktop shimmer unchanged
   Problem fixed: on mobile some CTA labels were collapsed/hidden while the
   arrow stayed visible. This forces all button labels back into the flex flow
   above the blade, without changing the desktop layout.
───────────────────────────────────────────────────────── */
body.avc-preview-page .avc-shine-btn .avc-button-blade {
  z-index: 2 !important;
}

body.avc-preview-page .avc-shine-btn .avc-button-text,
body.avc-preview-page .avc-shine-btn .avc-button-label,
body.avc-preview-page .avc-shine-btn .avc-button-arrow,
body.avc-preview-page .avc-shine-btn > span:not(.avc-button-blade),
body.avc-preview-page .avc-shine-btn > strong,
body.avc-preview-page a.avc-code-btn::after,
body.avc-preview-page button.avc-form-code-btn::after {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  text-align: center !important;
  font-size: inherit !important;
  line-height: 1.08 !important;
  letter-spacing: inherit !important;
  text-indent: 0 !important;
  transform: none !important;
  overflow: visible !important;
  max-width: 100% !important;
}

body.avc-preview-page .avc-shine-btn .avc-button-text,
body.avc-preview-page .avc-shine-btn .avc-button-label,
body.avc-preview-page .avc-shine-btn > span:not(.avc-button-blade),
body.avc-preview-page .avc-shine-btn > strong {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

body.avc-preview-page .avc-shine-btn .avc-button-arrow,
body.avc-preview-page a.avc-code-btn::after,
body.avc-preview-page button.avc-form-code-btn::after {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  body.avc-preview-page a.avc-code-btn,
  body.avc-preview-page a.pricing-cta,
  body.avc-preview-page a.checkout-code-btn,
  body.avc-preview-page button.avc-form-code-btn,
  body.avc-preview-page button.form-btn,
  body.avc-preview-page .avc-shine-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
  }

  body.avc-preview-page .hero a.avc-code-btn .avc-button-text,
  body.avc-preview-page .hero a.avc-code-btn > span:not(.avc-button-blade) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    max-width: calc(100% - 34px) !important;
  }

  body.avc-preview-page a.avc-code-btn::after,
  body.avc-preview-page button.avc-form-code-btn::after {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V23 — Mobile-only fix for Universal Character System text width
   Desktop is intentionally unchanged.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page .avc-universal-system .col-left {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-title,
  body.avc-preview-page .avc-universal-system .avc-universal-payoff,
  body.avc-preview-page .avc-universal-system .avc-universal-intro {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-title {
    font-size: clamp(30px, 8.7vw, 40px) !important;
    line-height: 1.075 !important;
    letter-spacing: .067em !important;
    margin-bottom: clamp(22px, 6vw, 30px) !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-title span {
    display: inline !important;
    max-width: none !important;
    white-space: normal !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-title span::after {
    content: " " !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-payoff {
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.22 !important;
    letter-spacing: .105em !important;
    margin-bottom: clamp(22px, 6vw, 30px) !important;
  }

  body.avc-preview-page .avc-universal-system .avc-universal-intro {
    font-size: clamp(15px, 4.25vw, 18px) !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V24 — final aesthetic refinements
   1) Workflow CREATE / WRAP / SYNC labels match Universal payoff scale.
   2) Remove final divider after the third workflow item only.
   3) Slight orange emission on featured pricing card.
───────────────────────────────────────────────────────── */
body.avc-preview-page #workflow .col-item-body h4 {
  font-family: 'Overpass', 'Inter', sans-serif !important;
  font-size: clamp(18px, 1.28vw, 24px) !important;
  line-height: 1.18 !important;
  letter-spacing: .13em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--v5-text, rgba(255,250,243,.99)) !important;
}

body.avc-preview-page #workflow .col-right-text .col-item:last-child,
body.avc-preview-page #workflow .col-right-text .col-item:last-of-type,
body.avc-preview-page #workflow .col-right-text .col-item.col-item-tight:last-child,
body.avc-preview-page #workflow .col-right-text .col-item.col-item-tight:last-of-type {
  border-bottom: 0 !important;
}

body.avc-preview-page .pricing-card.pricing-card-featured {
  border-color: rgba(254,127,0,.86) !important;
  box-shadow:
    0 0 0 1px rgba(254,127,0,.16),
    0 0 28px rgba(254,127,0,.16),
    0 0 70px rgba(254,127,0,.07),
    inset 0 0 34px rgba(254,127,0,.045) !important;
}

body.avc-preview-page .pricing-card.pricing-card-featured:hover {
  box-shadow:
    0 0 0 1px rgba(254,127,0,.22),
    0 0 38px rgba(254,127,0,.22),
    0 0 90px rgba(254,127,0,.095),
    inset 0 0 40px rgba(254,127,0,.06) !important;
}

body.avc-preview-page .pricing-card-featured .pricing-best {
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  body.avc-preview-page #workflow .col-item-body h4 {
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.2 !important;
    letter-spacing: .105em !important;
  }

  body.avc-preview-page .pricing-card-featured .pricing-best {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    letter-spacing: .13em !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V25 — desktop badge spacing + mobile expanding carousel
───────────────────────────────────────────────────────── */
@media (min-width: 761px) {
  body.avc-preview-page .pricing-card-featured {
    position: relative !important;
  }

  body.avc-preview-page .pricing-card-featured .pricing-head {
    padding-right: 190px !important;
  }

  body.avc-preview-page .pricing-card-featured .pricing-best {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    padding: 9px 14px !important;
    z-index: 4 !important;
    white-space: nowrap !important;
  }
}

body.avc-preview-page .expanding-mobile-carousel {
  display: none !important;
}

@media (max-width: 760px) {
  body.avc-preview-page .expanding-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .06em !important;
    text-align: center !important;
  }

  body.avc-preview-page .expanding-title > span {
    display: block !important;
    width: 100% !important;
  }

  body.avc-preview-page .expanding-grid {
    display: none !important;
  }

  body.avc-preview-page .expanding-mobile-carousel {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 22px !important;
  }

  body.avc-preview-page .expanding-mobile-viewport {
    overflow: hidden !important;
    width: 100% !important;
  }

  body.avc-preview-page .expanding-mobile-track {
    display: flex !important;
    width: 100% !important;
    transition: transform .35s ease !important;
    will-change: transform !important;
  }

  body.avc-preview-page .expanding-card-mobile {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
  }

  body.avc-preview-page .expanding-carousel-btn {
    appearance: none !important;
    border: 1px solid rgba(254,127,0,.55) !important;
    background: rgba(10,10,10,.92) !important;
    color: #fe7f00 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 1px rgba(254,127,0,.08), 0 8px 18px rgba(0,0,0,.28) !important;
  }

  body.avc-preview-page .expanding-carousel-btn:disabled {
    opacity: .34 !important;
    cursor: default !important;
  }

  body.avc-preview-page .expanding-carousel-dots {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  body.avc-preview-page .expanding-carousel-dots button {
    appearance: none !important;
    border: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.28) !important;
    padding: 0 !important;
  }

  body.avc-preview-page .expanding-carousel-dots button.is-active {
    background: #fe7f00 !important;
    box-shadow: 0 0 10px rgba(254,127,0,.38) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V26 — Mobile pricing carousel only. Desktop unchanged.
───────────────────────────────────────────────────────── */
body.avc-preview-page .pricing-mobile-carousel {
  display: none !important;
}

@media (max-width: 760px) {
  body.avc-preview-page .pricing-section .pricing-grid {
    display: none !important;
  }

  body.avc-preview-page .pricing-mobile-carousel {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    margin-top: clamp(26px, 8vw, 38px) !important;
  }

  body.avc-preview-page .pricing-mobile-viewport {
    overflow: hidden !important;
    width: 100% !important;
  }

  body.avc-preview-page .pricing-mobile-track {
    display: flex !important;
    width: 100% !important;
    transition: transform .35s ease !important;
    will-change: transform !important;
  }

  body.avc-preview-page .pricing-card-mobile {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-card-featured .pricing-best {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto clamp(22px, 6vw, 30px) !important;
    font-size: clamp(9px, 2.45vw, 11px) !important;
    letter-spacing: .13em !important;
  }

  body.avc-preview-page .pricing-carousel-btn {
    appearance: none !important;
    border: 1px solid rgba(254,127,0,.55) !important;
    background: rgba(10,10,10,.92) !important;
    color: #fe7f00 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 0 0 1px rgba(254,127,0,.08), 0 8px 18px rgba(0,0,0,.28) !important;
    z-index: 3 !important;
  }

  body.avc-preview-page .pricing-carousel-btn:disabled {
    opacity: .34 !important;
    cursor: default !important;
  }

  body.avc-preview-page .pricing-carousel-dots {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.avc-preview-page .pricing-carousel-dots button {
    appearance: none !important;
    border: 0 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.28) !important;
    padding: 0 !important;
  }

  body.avc-preview-page .pricing-carousel-dots button.is-active {
    background: #fe7f00 !important;
    box-shadow: 0 0 10px rgba(254,127,0,.38) !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta {
    width: 100% !important;
    min-height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    gap: 0 !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-label,
  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    line-height: 1.16 !important;
    font-size: clamp(12px, 3.25vw, 15px) !important;
    letter-spacing: .095em !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta-tail {
    white-space: nowrap !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V27 — Mobile pricing carousel width + internal arrows
   Desktop unchanged.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page .pricing-mobile-carousel {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: clamp(26px, 8vw, 38px) !important;
    padding: 0 !important;
  }

  body.avc-preview-page .pricing-mobile-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.avc-preview-page .pricing-mobile-track {
    display: flex !important;
    width: 100% !important;
    transition: transform .35s ease !important;
    will-change: transform !important;
  }

  body.avc-preview-page .pricing-card-mobile {
    min-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Arrows stay inside the pricing card area, not outside the card.
     This preserves the full mobile card width. */
  body.avc-preview-page .pricing-carousel-btn {
    position: absolute !important;
    top: clamp(318px, 69vw, 392px) !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: rgba(5,5,5,.68) !important;
    border: 1px solid rgba(254,127,0,.62) !important;
    color: #fe7f00 !important;
    box-shadow:
      0 0 0 1px rgba(254,127,0,.08),
      0 8px 20px rgba(0,0,0,.34),
      0 0 18px rgba(254,127,0,.12) !important;
  }

  body.avc-preview-page .pricing-carousel-prev {
    left: clamp(10px, 3.1vw, 16px) !important;
  }

  body.avc-preview-page .pricing-carousel-next {
    right: clamp(10px, 3.1vw, 16px) !important;
  }

  body.avc-preview-page .pricing-carousel-btn:disabled {
    opacity: .38 !important;
    cursor: default !important;
  }

  body.avc-preview-page .pricing-carousel-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  /* Pricing mobile CTA: keep the price and arrow on the same visual level,
     with no larger price styling inside the button. */
  body.avc-preview-page .pricing-mobile-carousel .pricing-cta {
    width: 100% !important;
    min-height: 58px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-label,
  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-text {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    line-height: 1.16 !important;
    font-size: clamp(12px, 3.25vw, 15px) !important;
    letter-spacing: .095em !important;
    font-weight: 700 !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta-tail {
    display: inline !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-weight: inherit !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V28 — Pricing mobile carousel final layout fix
   Desktop unchanged. Card uses full mobile width; arrows are inside the card.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page .pricing-section {
    overflow-x: hidden !important;
  }

  /* Escape any inherited narrow parent/card grid behavior and restore
     a wide mobile card similar to the original stacked layout. */
  body.avc-preview-page .pricing-mobile-carousel {
    display: block !important;
    position: relative !important;
    width: calc(100vw - 28px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.avc-preview-page .pricing-mobile-viewport {
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.avc-preview-page .pricing-mobile-track {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    transition: transform .35s ease !important;
    will-change: transform !important;
  }

  body.avc-preview-page .pricing-card-mobile {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* The arrows are overlaid inside the card, around the price area.
     They no longer take layout width away from the card. */
  body.avc-preview-page .pricing-carousel-btn {
    position: absolute !important;
    top: clamp(318px, 66vw, 390px) !important;
    transform: translateY(-50%) !important;
    z-index: 30 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 23px !important;
    line-height: 1 !important;
    background: rgba(4,4,4,.62) !important;
    border: 1px solid rgba(254,127,0,.68) !important;
    color: #fe7f00 !important;
    box-shadow:
      0 0 0 1px rgba(254,127,0,.08),
      0 8px 22px rgba(0,0,0,.38),
      0 0 18px rgba(254,127,0,.14) !important;
  }

  body.avc-preview-page .pricing-carousel-prev {
    left: clamp(14px, 4vw, 22px) !important;
  }

  body.avc-preview-page .pricing-carousel-next {
    right: clamp(14px, 4vw, 22px) !important;
  }

  body.avc-preview-page .pricing-carousel-btn:disabled {
    opacity: .34 !important;
    cursor: default !important;
  }

  body.avc-preview-page .pricing-carousel-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  /* Keep the pricing CTA compact and visually even.
     The price and arrow inherit the same font as the rest of the button. */
  body.avc-preview-page .pricing-mobile-carousel .pricing-cta {
    width: 100% !important;
    min-height: 58px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-label,
  body.avc-preview-page .pricing-mobile-carousel .pricing-cta .avc-button-text {
    display: inline !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: center !important;
    line-height: 1.14 !important;
    font-size: clamp(12px, 3.2vw, 15px) !important;
    letter-spacing: .09em !important;
    font-weight: 700 !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-cta-tail {
    display: inline !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-weight: inherit !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V29 — Mobile pricing price block centered
   Desktop unchanged. Only mobile carousel pricing cards affected.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page .pricing-mobile-carousel .pricing-price-block {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-label,
  body.avc-preview-page .pricing-mobile-carousel .pricing-price,
  body.avc-preview-page .pricing-mobile-carousel .pricing-regular {
    text-align: center !important;
    width: 100% !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-price-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: clamp(12px, 3.5vw, 18px) !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.avc-preview-page .pricing-mobile-carousel .pricing-regular {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V30 — Mobile secondary CTA inline arrow fix
   Desktop unchanged.
   Keeps buttons such as SEE BODY AND FACE CREATION + arrow on one line.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page a.avc-secondary-code-btn,
  body.avc-preview-page a.wrap-learn-btn.avc-secondary-code-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.avc-preview-page a.avc-secondary-code-btn .avc-button-text,
  body.avc-preview-page a.wrap-learn-btn.avc-secondary-code-btn .avc-button-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: calc(100% - 34px) !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(12px, 3.1vw, 14px) !important;
    line-height: 1.1 !important;
    letter-spacing: .085em !important;
  }

  body.avc-preview-page a.avc-secondary-code-btn::after,
  body.avc-preview-page a.wrap-learn-btn.avc-secondary-code-btn::after {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V31 — Mobile-only Avatar Creator Skin title line-break fix
   Desktop unchanged.
   Mobile: ADD REALISTIC / SKIN DETAILS / AND EYES
───────────────────────────────────────────────────────── */
body.avc-preview-page .avc-main-skin-title-mobile {
  display: none !important;
}

body.avc-preview-page .avc-main-skin-title-desktop {
  display: block !important;
}

@media (max-width: 760px) {
  body.avc-preview-page .avc-main-skin-title-desktop {
    display: none !important;
  }

  body.avc-preview-page .avc-main-skin-title-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.avc-preview-page .avc-main-skin-title-mobile span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}


/* ─────────────────────────────────────────────────────────
   V32 — Mobile legal/footer cleanup
   Desktop unchanged.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.avc-preview-page .legal-bar {
    padding: clamp(42px, 10vw, 58px) 24px clamp(26px, 7vw, 38px) !important;
    text-align: center !important;
  }

  body.avc-preview-page .legal-copyright {
    max-width: 320px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
    line-height: 1.65 !important;
    letter-spacing: .16em !important;
  }

  body.avc-preview-page .legal-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 13px !important;
    text-align: center !important;
  }

  body.avc-preview-page .legal-dot {
    display: none !important;
  }

  body.avc-preview-page .legal-link {
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    letter-spacing: .15em !important;
  }

  body.avc-preview-page footer {
    padding: 30px 24px 64px !important;
    text-align: center !important;
  }

  body.avc-preview-page footer p {
    text-align: center !important;
  }
}