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

   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-title-extra {

  width: min(100%, 900px);

  margin: 0 0 12px -6px;

  color: var(--fg);

  font-family: 'Overpass', 'Helvetica Neue', Arial, sans-serif;

  font-size: clamp(90px, 9vw, 165px);

  font-weight: 500;

  letter-spacing: -0.06em;

  line-height: 0.84;

  text-transform: uppercase;

}



.hero-title-extra span {

  display: block;

}



@media (max-width: 768px) {

  .hero-title-extra {

    width: min(100%, 520px);

    font-size: clamp(58px, 13vw, 100px);

    line-height: 0.9;

    letter-spacing: -0.045em;

  }

}



@media (max-width: 480px) {

  .hero-title-extra {

    width: 100%;

    font-size: clamp(46px, 15vw, 74px);

    line-height: 0.92;

    letter-spacing: -0.035em;

  }

}





/* 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-page .wrap-hero .hero-slide video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  pointer-events: none;

}

/* ─────────────────────────────────────────────────────────
   MORPH V1 — CTA blade shine from landing, scoped to Morph page only
   - Applies to main CTA buttons only (.avc-shine-btn)
   - Back link intentionally excluded
   - Uses real DOM .avc-button-blade, not pseudo shimmer stacking
───────────────────────────────────────────────────────── */
.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;
}

/* Disable old pseudo shimmer on Morph CTAs only. Keep ::after arrow intact. */
.wrap-page .avc-shine-btn::before,
.wrap-page .wrap-hero .avc-code-btn::before,
.wrap-page .wrap-final-cta .avc-code-btn::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

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

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

.wrap-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,.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: morphButtonBladeV1 3s linear infinite !important;
}

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

@media (max-width: 760px) {
  .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;
  }

  .wrap-page .avc-button-blade {
    width: clamp(58px, 20vw, 98px) !important;
  }

  .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;
  }
}


/* ─────────────────────────────────────────────────────────
   MORPH V2 — mobile-safe blade + seamless black sections
   Surgical override: scoped only to Morph page.
───────────────────────────────────────────────────────── */

/* Remove thin separators between Morph page sections only. */
body.wrap-page .hero,
body.wrap-page main > section,
body.wrap-page main > .system-summary-section,
body.wrap-page main > .legal-bar,
body.wrap-page main > footer,
body.wrap-page .section-flush-left,
body.wrap-page .section-flush-right,
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 section + section,
body.wrap-page .hero + section,
body.wrap-page section + .system-summary-section,
body.wrap-page .system-summary-section + .legal-bar {
  margin-top: 0 !important;
}

/* Stable button base: identical logic to the final landing CTA, scoped to Morph. */
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;
}

/* Back link intentionally excluded because it has no .avc-shine-btn class. */
body.wrap-page .avc-shine-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 morphButtonBladeV2 {
  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: morphButtonBladeV2 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;
}

@media (max-width: 760px) {
  body.wrap-page .avc-shine-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    overflow: hidden !important;
  }

  body.wrap-page .avc-shine-btn .avc-button-blade {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: clamp(58px, 20vw, 98px) !important;
    animation: morphButtonBladeV2 3s linear infinite !important;
  }

  body.wrap-page .avc-shine-btn .avc-button-text,
  body.wrap-page .avc-shine-btn > strong,
  body.wrap-page .avc-shine-btn > span:not(.avc-button-blade) {
    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;
    max-width: 100% !important;
    text-align: center !important;
  }
}


/* ─────────────────────────────────────────────────────────
   MORPH V3 — mobile-only typography/CTA final refinements
   1) Body Types heading uses 3 lines on mobile instead of 4.
   2) Final CTA mobile label removes price and keeps arrow inline.
   Desktop remains unchanged.
───────────────────────────────────────────────────────── */

/* Default desktop/tablet: keep original two-line title behavior. */
body.wrap-page .morph-body-title-mobile {
  display: none !important;
}

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

/* Default desktop/tablet: keep original full CTA label with price. */
body.wrap-page .morph-final-label-mobile {
  display: none !important;
}

body.wrap-page .morph-final-label-desktop {
  display: inline !important;
}

@media (max-width: 760px) {
  /* BODY TYPES title: force exactly three clean lines:
     EVERY BODY TYPE / IS ALREADY / THERE. */
  body.wrap-page .morph-body-types-title .morph-body-title-desktop {
    display: none !important;
  }

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

  body.wrap-page .morph-body-types-title .morph-body-title-mobile:first-of-type {
    white-space: nowrap !important;
  }

  body.wrap-page .morph-body-types-title {
    font-size: clamp(34px, 9.25vw, 42px) !important;
    line-height: 1.085 !important;
    letter-spacing: .07em !important;
  }

  /* Final CTA: mobile-only shorter label, one visual line when possible,
     no price, inline arrow. */
  body.wrap-page .wrap-final-button .morph-final-label-desktop {
    display: none !important;
  }

  body.wrap-page .wrap-final-button .morph-final-label-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45em !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.wrap-page .wrap-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-final-button .avc-button-text {
    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;
  }

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

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


/* ─────────────────────────────────────────────────────────
   MORPH V4 — definitive Body Types title fix
   - Desktop: only one title, two lines.
   - Mobile: dedicated title, max three lines.
   - Prevents the duplicate desktop title from V3.
───────────────────────────────────────────────────────── */

/* Desktop/tablet: show only the original 2-line title. */
body.wrap-page .morph-body-types-title-desktop {
  display: block !important;
}

body.wrap-page .morph-body-types-title-mobile,
body.wrap-page .morph-body-title-mobile {
  display: none !important;
}

/* Defensive cleanup for the old V3 span-based title, in case stale markup is cached. */
body.wrap-page .morph-body-types-title .morph-body-title-desktop {
  display: block !important;
}

@media (max-width: 760px) {
  /* Mobile: hide desktop title completely, show the clean 3-line mobile title. */
  body.wrap-page .morph-body-types-title-desktop {
    display: none !important;
  }

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

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

  body.wrap-page .morph-body-types-title-mobile {
    font-size: clamp(29px, 7.65vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: .062em !important;
  }
}


/* ─────────────────────────────────────────────────────────
   SKIN V2 — definitive surgical fixes
   This block is deliberately scoped to wrap-page CTAs used by Skin/Morph.
   - Real blade layer is visible on desktop + mobile.
   - Back link remains static because it does not have .avc-shine-btn.
   - Section separators stay removed for seamless black background.
───────────────────────────────────────────────────────── */

/* Reinforce seamless black continuity between Skin 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-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;
}

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

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

body.wrap-page .skin-final-button .skin-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 .skin-inline-arrow {
  display: inline-block !important;
  white-space: nowrap !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

/* Hard override for the real blade, in case previous CSS is cached above. */
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: morphButtonBladeV2 3s linear infinite !important;
}

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

@media (max-width: 760px) {
  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: morphButtonBladeV2 3s linear infinite !important;
  }

  body.wrap-page .skin-final-button,
  body.wrap-page .wrap-final-button.skin-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 .skin-final-button .avc-button-text,
  body.wrap-page .skin-final-button .skin-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;
  }
}


/* ─────────────────────────────────────────────────────────
   SKIN V3 — final back-link + mobile Skin Presets title fix
   - Desktop Skin Presets title unchanged: 2 lines.
   - Mobile Skin Presets title forced to 3 lines.
   - Back link restored to Morph-like history.back behavior.
───────────────────────────────────────────────────────── */

/* Desktop/tablet: show the original two-line Skin Presets title only. */
body.wrap-page .skin-presets-title-desktop {
  display: block !important;
}

body.wrap-page .skin-presets-title-mobile {
  display: none !important;
}

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

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

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

  body.wrap-page .skin-presets-title-mobile {
    font-size: clamp(29px, 7.55vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: .062em !important;
  }
}


/* ─────────────────────────────────────────────────────────
   SKIN V4 — Mobile-only Skin Presets title size alignment
   Desktop unchanged.
   Mobile title uses the same visual scale as the following Skin subpage titles.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.wrap-page .skin-presets-title-mobile {
    font-size: clamp(34px, 9.25vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: .062em !important;
  }

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


/* ─────────────────────────────────────────────────────────
   EXTRA V5 — Mobile legal/footer cleanup for Morph/Skin subpages
   Desktop unchanged.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  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;
  }
}


/* ─────────────────────────────────────────────────────────
   EXTRA V6 — Morph mobile Body Types title final size fix
   Desktop unchanged.
   Mobile keeps the existing 3-line structure but matches the scale
   of the other Morph subpage section titles.
───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body.wrap-page .morph-body-types-title-mobile {
    font-size: clamp(34px, 9.25vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: .062em !important;
  }

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