/* =========================================================

   AVC WRAP PAGE — minimal overrides

   The page keeps the main landing typography/layout from ../css/style.css.

   This file only adds Wrap-specific media fallbacks and a few spacing fixes.

   ========================================================= */



body.wrap-page {

  background: #000 !important;

}



/* Hero: same structure as the main landing hero. Only the media changes. */

.wrap-page .wrap-hero .hero-slideshow {

  background:

    radial-gradient(circle at 86% 46%, rgba(11, 5, 9, .96) 0 10%, rgba(254, 127, 0, .72) 16%, rgba(255, 226, 186, .92) 28%, rgba(254, 127, 0, .76) 44%, rgba(207, 46, 137, .46) 58%, rgba(74, 28, 118, .48) 72%, rgba(0,0,0,0) 83%),

    radial-gradient(circle at 74% 60%, rgba(254,127,0,.34), rgba(207,46,137,.18) 38%, rgba(0,0,0,0) 70%),

    #000 !important;

}



.wrap-page .wrap-hero .hero-slide {

  background-position: center right !important;

  background-size: cover !important;

  background-repeat: no-repeat !important;

}



.wrap-page .wrap-hero-emphasis {

  display: block;

  margin-top: clamp(12px, 1.4vw, 18px);

  color: rgba(242, 238, 232, .96);

}



/* Keeps the second core-value line compact without changing global section typography. */

.wrap-page .wrap-strong-line {

  color: rgba(255,250,243,.99) !important;

  text-transform: uppercase;

  letter-spacing: .12em !important;

  line-height: 1.5 !important;

}



.wrap-page .wrap-copy-gap {

  margin-top: clamp(18px, 2vw, 28px) !important;

}



.wrap-page .wrap-wow-line {

  margin-top: clamp(26px, 3vw, 42px) !important;

  color: rgba(255,250,243,.99) !important;

}



/* Media fallback: avoids broken icons and keeps the layout visually clean until real videos are uploaded. */

.wrap-page .wrap-media-fallback {

  position: relative;

  background:

    radial-gradient(circle at 66% 46%, rgba(254,127,0,.24), rgba(195,45,130,.16) 34%, rgba(69,25,116,.22) 55%, rgba(0,0,0,0) 76%),

    #000 !important;

}



.wrap-page .wrap-media-fallback::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:

    linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%, rgba(0,0,0,.22)),

    radial-gradient(circle at 50% 50%, rgba(254,127,0,.10), rgba(0,0,0,0) 62%);

}



.wrap-page .wrap-media-fallback video,

.wrap-page .wrap-media-fallback img {

  position: relative;

  z-index: 1;

}



/* Final CTA: uses the existing system-summary-section style and only adds the paragraph/button spacing. */

.wrap-page .wrap-final-cta .section-tag {

  margin-left: auto !important;

  margin-right: auto !important;

  width: fit-content !important;

}



.wrap-page .wrap-final-copy {

  max-width: 720px;

  margin: clamp(22px, 2.4vw, 34px) auto clamp(30px, 3vw, 44px) !important;

  color: rgba(255,250,243,.88) !important;

  font-size: clamp(15px, .92vw, 17px) !important;

  line-height: 1.58 !important;

}



.wrap-page .wrap-final-cta .avc-code-btn {

  margin-left: 0 !important;

}



/* Mobile safety only: preserves readability without changing the desktop landing look. */

@media (max-width: 760px) {

  .wrap-page .hero-subtitle br {

    display: block;

  }



  .wrap-page .wrap-strong-line {

    letter-spacing: .07em !important;

  }

}



/* V2 copy refinements requested 2026-06-04 */

.wrap-page .wrap-hero .hero-sub {

  max-width: 720px !important;

}



.wrap-page .wrap-final-button {

  min-width: min(100%, 460px) !important;

  min-height: 58px !important;

  margin-top: clamp(8px, 1vw, 14px) !important;

}



.wrap-page .wrap-back-link {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  margin-top: clamp(18px, 2vw, 28px) !important;

  color: rgba(242, 238, 232, .72) !important;

  text-decoration: none !important;

  text-transform: uppercase !important;

  letter-spacing: .18em !important;

  font-size: clamp(10px, .78vw, 12px) !important;

  line-height: 1.4 !important;

  transition: color .18s ease, opacity .18s ease;

}



.wrap-page .wrap-back-link:hover {

  color: #fe7f00 !important;

}





/* V3 surgical refinements requested 2026-06-04 */

.wrap-page .wrap-hero .hero-sub {

  max-width: 880px !important;

  color: rgba(255,250,243,.92) !important;

  opacity: 1 !important;

}



.wrap-page .wrap-hero .hero-sub br {

  display: block !important;

}



.wrap-page .wrap-hero .avc-code-btn,

.wrap-page .wrap-final-cta .avc-code-btn {

  position: relative !important;

  overflow: hidden !important;

  color: #fff !important;

  min-height: 58px !important;

  box-shadow: 0 0 24px rgba(254,127,0,.22), 0 18px 46px rgba(254,127,0,.10) !important;

  text-shadow: 0 1px 12px rgba(0,0,0,.28) !important;

  isolation: isolate !important;

}



.wrap-page .wrap-hero .avc-code-btn strong,

.wrap-page .wrap-final-cta .avc-code-btn strong {

  position: relative !important;

  z-index: 2 !important;

}



.wrap-page .wrap-hero .avc-code-btn::before,

.wrap-page .wrap-final-cta .avc-code-btn::before {

  content: "" !important;

  position: absolute !important;

  inset: -30% auto -30% -70% !important;

  width: 52% !important;

  z-index: 1 !important;

  pointer-events: none !important;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent) !important;

  transform: skewX(-18deg) !important;

  animation: wrapButtonShine 3.2s ease-in-out infinite !important;

}



@keyframes wrapButtonShine {

  0%, 42% { left: -70%; opacity: 0; }

  52% { opacity: .9; }

  72%, 100% { left: 125%; opacity: 0; }

}



.wrap-page .wrap-workflow-section .col-item,

.wrap-page .wrap-result-section .col-item {

  border-bottom: 0 !important;

}



.wrap-page .wrap-beta-note {

  opacity: .72;

  font-size: .9em;

  letter-spacing: .08em;

}



.wrap-page .wrap-ecosystem-intro {

  max-width: 760px !important;

  color: rgba(255,250,243,.92) !important;

}



.wrap-page .wrap-final-cta .system-summary-inner {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

}



.wrap-page .wrap-final-cta .avc-code-btn.wrap-final-button {

  display: inline-flex !important;

  width: auto !important;

  min-width: min(100%, 520px) !important;

  margin: 0 auto !important;

  color: #fff !important;

}



.wrap-page .wrap-back-link {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: fit-content !important;

  margin: clamp(20px, 2.3vw, 32px) auto 0 !important;

  padding: 10px 14px !important;

  color: rgba(255,250,243,.86) !important;

  border: 1px solid rgba(254,127,0,.28) !important;

  background: rgba(254,127,0,.045) !important;

  text-decoration: none !important;

  text-transform: uppercase !important;

  letter-spacing: .16em !important;

  font-size: clamp(10px, .78vw, 12px) !important;

  line-height: 1.2 !important;

  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease !important;

}



.wrap-page .wrap-back-link:hover {

  color: #fe7f00 !important;

  border-color: rgba(254,127,0,.62) !important;

  background: rgba(254,127,0,.09) !important;

  transform: translateY(-1px) !important;

}



@media (max-width: 980px) {

  .wrap-page .wrap-hero .hero-sub br {

    display: none !important;

  }

}



/* ─────────────────────────────────────────────────────────
   WRAP UPDATE V1 — landing-style dynamic CTA blade + seamless sections
   Scoped to the AVC Wrap subpage only.
───────────────────────────────────────────────────────── */

/* Seamless black background between Wrap sections. */
body.wrap-page .hero,
body.wrap-page main > section,
body.wrap-page main > .system-summary-section,
body.wrap-page .section-flush-left,
body.wrap-page .section-flush-right,
body.wrap-page .wrap-core-section,
body.wrap-page .wrap-result-section,
body.wrap-page .wrap-workflow-section,
body.wrap-page .wrap-final-cta {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.wrap-page .hero + section,
body.wrap-page section + section,
body.wrap-page section + .system-summary-section {
  margin-top: 0 !important;
}

/* Stable CTA base. Back link is excluded because it does not use .avc-shine-btn. */
body.wrap-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;
  transform-origin: center center !important;
}

/* Disable old pseudo shimmer. The blade is a real child element. */
body.wrap-page .avc-shine-btn::before,
body.wrap-page .wrap-hero .avc-code-btn::before,
body.wrap-page .wrap-final-cta .avc-code-btn::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.wrap-page .avc-shine-btn > *:not(.avc-button-blade),
body.wrap-page .avc-shine-btn::after {
  position: relative !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
}

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

body.wrap-page .avc-shine-btn .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;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  pointer-events: none !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,.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: wrapButtonBladeV1 3s linear infinite !important;
}

body.wrap-page .avc-shine-btn:hover {
  transform: translateY(-2px) scale(1.015) !important;
  filter: brightness(1.12) saturate(1.05) !important;
}

/* Final CTA: remove price, keep label and arrow inline. */
body.wrap-page .wrap-page-final-button,
body.wrap-page .wrap-final-button.wrap-page-final-button {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  justify-content: center !important;
  text-align: center !important;
}

body.wrap-page .wrap-page-final-button::after,
body.wrap-page .wrap-final-button.wrap-page-final-button::after {
  content: none !important;
  display: none !important;
}

body.wrap-page .wrap-page-final-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body.wrap-page .wrap-page-inline-arrow {
  display: inline-block !important;
  white-space: nowrap !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  body.wrap-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.wrap-page .avc-shine-btn .avc-button-blade {
    width: clamp(58px, 20vw, 98px) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: wrapButtonBladeV1 3s linear infinite !important;
  }

  body.wrap-page .avc-shine-btn > *:not(.avc-button-blade) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  body.wrap-page .wrap-page-final-button,
  body.wrap-page .wrap-final-button.wrap-page-final-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  body.wrap-page .wrap-page-final-button .avc-button-text,
  body.wrap-page .wrap-page-final-button .wrap-page-final-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(12px, 3.25vw, 14px) !important;
    letter-spacing: .085em !important;
    line-height: 1.12 !important;
  }
}


/* ─────────────────────────────────────────────────────────
   WRAP UPDATE V2 — mobile hero crop + HOW IT WORKS title + footer cleanup
   Desktop unchanged.
───────────────────────────────────────────────────────── */

/* Desktop/tablet: keep original HOW IT WORKS title. */
body.wrap-page .wrap-how-title-mobile {
  display: none !important;
}

body.wrap-page .wrap-how-title-desktop {
  display: block !important;
}

@media (max-width: 760px) {
  /* Mobile hero crop: avoid right-justified framing. */
  body.wrap-page .wrap-hero .hero-slide {
    background-position: center center !important;
    background-size: cover !important;
  }

  body.wrap-page .wrap-hero .hero-slideshow {
    background-position: center center !important;
  }

  /* Mobile HOW IT WORKS title forced to exactly:
     FROM CUSTOM / MESH TO AVC / CHARACTER */
  body.wrap-page .wrap-how-title-desktop {
    display: none !important;
  }

  body.wrap-page .wrap-how-title-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.wrap-page .wrap-how-title-mobile span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* Mobile legal/footer cleanup. */
  body.wrap-page .legal-bar {
    padding: clamp(42px, 10vw, 58px) 24px clamp(26px, 7vw, 38px) !important;
    text-align: center !important;
  }

  body.wrap-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.wrap-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.wrap-page .legal-dot {
    display: none !important;
  }

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

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

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