/* treatment-finder-fixed: copy of treatment-finder-local (the Webflow rules that hit #onboarding, live order) with bug fixes only, marked FIX 1–4.
   Look unchanged. */

@font-face{font-family:Wfvisualsans;src:url(/fonts/WFVisualSans-RegularText.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Wfvisualsans;src:url(/fonts/WFVisualSans-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}

:where(#onboarding) {
  --beige-light: #f7f4ef;
  --body-bg-glowbal: #fafaf8;
  --body-black: #1d1127;
  --body-shade-1: #efeeec;
  --border-black: #747474;
  --glow-violet: #7c45a6;
  --indigo: #5d1a8b;
  --links: var(--body-black);
  --perlwinkie: #e8e4ff;
  --relume-library-lite--rl-white: white;
  --tiffany-2: #b2f6e3;
  --transparent: #0000;
  --white-down: #fefefe;
  --yellow: #f1ff9f;
}

/* inherited from html / body / main on live (in cascade order) */

:where(#onboarding) {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}
:where(#onboarding) {
  color: #333;
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 20px;
}
:where(#onboarding) {
  color: #333;
  font-family: Wfvisualsans,Arial,sans-serif;
  font-size: .875rem;
  line-height: 1.25rem;
}
@media screen and (min-width:1280px) {
  :where(#onboarding) {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
@media screen and (min-width:1920px) {
  :where(#onboarding) {
    font-size: 1.125rem;
    line-height: 1.7rem;
  }
}
:where(#onboarding) {
  color: var(--body-black);
  font-family: Wfvisualsans,Arial,sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
@media screen and (min-width:1280px) {
  :where(#onboarding) {
    font-size: 1rem;
    line-height: 1.7;
  }
}
@media screen and (min-width:1440px) {
  :where(#onboarding) {
    color: var(--body-black);
    font-size: 1.05rem;
  }
}
@media screen and (min-width:1920px) {
  :where(#onboarding) {
    color: var(--body-black);
    font-family: Wfvisualsans,Arial,sans-serif;
  }
}
@media screen and (max-width:991px) {
  :where(#onboarding) {
    font-size: 1rem;
  }
}
@media screen and (max-width:479px) {
  :where(#onboarding) {
    line-height: 1.5;
  }
}



/* from beauty-directory-700d57.shared.3bfad05b3.min.css */
article:where(#onboarding, #onboarding *),
nav:where(#onboarding, #onboarding *),
section:where(#onboarding, #onboarding *) {
  display: block;
}
a:where(#onboarding, #onboarding *) {
  background-color: #0000;
}
a:active:where(#onboarding, #onboarding *),
a:hover:where(#onboarding, #onboarding *) {
  outline: 0;
}
*:where(#onboarding, #onboarding *) {
  box-sizing: border-box;
}
.w-inline-block {
  max-width: 100%;
  display: inline-block;
}
.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}
.w-embed:before,
.w-embed:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.w-embed:after {
  clear: both;
}
.w-tabs {
  position: relative;
}
.w-tabs:before,
.w-tabs:after {
  content: " ";
  grid-area: 1/1/2/2;
  display: table;
}
.w-tabs:after {
  clear: both;
}
.w-tab-menu {
  position: relative;
}
.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.w-tab-link.w--current {
  background-color: #c8c8c8;
}
.w-tab-link:focus {
  outline: 0;
}
.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}
.w-tab-pane {
  display: none;
  position: relative;
}
.w--tab-active {
  display: block;
}
@media screen and (max-width:479px) {
  .w-tab-link {
    display: block;
  }
}

/* from beauty-directory-700d57.6935f3667fdc7bc032d67a9b.355fac503.opt.min.css */
a:where(#onboarding, #onboarding *) {
  color: var(--glow-violet);
  background-color: #b2f6e300;
  padding-bottom: 2px;
  text-decoration: none;
  transition: all .2s;
}
.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}
.hide {
  height: 0;
  display: none;
  overflow: hidden;
}
.text-style-allcaps {
  text-transform: uppercase;
}
.tiny-label {
  background-color: var(--perlwinkie);
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: .875rem;
  line-height: 1;
  display: flex;
}
.tiny-label.teal {
  background-color: var(--tiffany-2);
}
.tiny-label.teal.text-style-allcaps {
  flex-flow: column;
  padding-top: 3px;
  font-size: .6rem;
  line-height: .6;
}
.tiny-label.teal.text-style-allcaps.rel-tag {
  color: var(--body-black);
  position: absolute;
  inset: 4px 4px auto auto;
}
.tiny-label.teal.text-style-allcaps.rel-tag.hide {
  display: none;
}
.body-part {
  background-color: var(--body-bg-glowbal);
  max-width: 12.5%;
  box-shadow: inset -1px 0 0 0 var(--border-black);
  text-align: center;
  white-space: nowrap;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  display: flex;
}
.body-part:hover {
  background-color: var(--yellow);
}
.body-part.w--current {
  background-color: var(--body-black);
  color: var(--body-shade-1);
}
.body-part-selector {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-top: 1px solid var(--border-black);
  border-bottom: 1px solid var(--border-black);
  background-color: var(--body-shade-1);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.concerns-buttons-holder {
  background-color: var(--body-bg-glowbal);
  width: 25%;
  box-shadow: inset -1px 0 0 0 var(--border-black);
  flex-flow: column;
  align-items: stretch;
}
.concern-panels {
  width: 75%;
  display: flex;
}
.concerns-layout {
  align-items: stretch;
  height: calc(100vh - 40px);
}
.panel-inner {
  opacity: 1;
  align-items: stretch;
  height: 100%;
}
.one-from-two {
  background-color: var(--body-bg-glowbal);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  flex: 1;
}
.panel {
  opacity: 1;
  width: 75%;
  height: 100%;
}
.panel.is-hidden {
  opacity: 0;
  opacity: 0;
  display: none;
}
.is-active {
  background-color: var(--links);
}
.button-concern {
  border-bottom: 1px solid var(--border-black);
  background-color: var(--transparent);
  color: var(--body-black);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.2rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
}
.button-concern:hover {
  background-color: var(--white-down);
  box-shadow: inset -1px 0 0 0 var(--border-black);
}
.button-concern:lang(en) {
  font-size: 1.3rem;
}
.button-concern.is-active {
  background-color: var(--body-bg-glowbal);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  color: var(--body-black);
  background-color: var(--body-bg-glowbal);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  padding-right: 5%;
}
.pic-hero {
  background-image: linear-gradient(#471e6226,#110f1347),url(images/1.avif);
  background-position: 0 0,50%;
  background-repeat: repeat,no-repeat;
  background-size: auto,cover;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.pic-hero.breast {
  background-image: linear-gradient(#471e6200 61%,#431e4ba8),url(images/nnnoise.svg),url(images/2.avif);
  background-position: 0 0,0 0,50%;
  background-repeat: repeat,repeat,no-repeat;
  background-size: auto,auto,cover;
}
.pic-hero.tummy {
  background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/6.avif);
}
.pic-hero.legs {
  background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/4.avif);
}
.pic-hero.hair {
  background-image: linear-gradient(#471e6226,#110f1347),url(images/7.avif);
}
.pic-hero.butt {
  background-image: linear-gradient(#471e6236,#110f13a8),url(images/fess-v3.avif);
  background-position: 0 0,50% 100%;
  background-repeat: repeat,no-repeat;
  background-size: auto,cover;
}
.pic-hero.intime {
  background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/5.avif);
}
.pic-hero.tg {
  background-image: linear-gradient(#130f1652,#130f1652),linear-gradient(#471e6236,#110f13a8),url(images/8.avif);
  background-position: 0 0,0 0,50%;
  background-repeat: repeat,repeat,no-repeat;
  background-size: auto,auto,cover;
}
.please--select {
  background-color: var(--body-shade-1);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  color: var(--body-black);
  letter-spacing: .05em;
  text-transform: uppercase;
  background-image: url(images/arrow-down.svg);
  background-position: 95%;
  background-repeat: no-repeat;
  background-size: auto;
  border-bottom: 1px solid #000;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: .5rem 1rem;
  font-size: .625rem;
  font-weight: 400;
  display: flex;
}
.please--select.is-active {
  background-color: var(--body-bg-glowbal);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  color: var(--body-black);
}
.button-solution {
  border-bottom: 1px solid var(--border-black);
  background-color: var(--transparent);
  color: var(--body-black);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  padding: 1.2rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  position: relative;
}
.button-solution:hover {
  background-color: var(--white-down);
  box-shadow: inset -1px 0 0 0 var(--border-black);
}
.button-solution:lang(en) {
  font-size: 1.3rem;
}
.button-solution.is-active {
  background-color: var(--body-bg-glowbal);
  box-shadow: inset -1px 0 0 0 var(--border-black);
  color: var(--body-black);
}
.button-solution.double {
  height: 119px;
  padding-right: .5rem;
  line-height: 1.65rem;
}
.button-solution.double.is-hidden {
  display: none;
}
.hero-label {
  opacity: .11;
  text-transform: uppercase;
  font-size: 6rem;
}
.adj {
  line-height: .5;
}
.scrollable {
  height: 90vh;
  padding-bottom: 6rem;
  overflow: visible;
}
.back-btn.back-concern {
  width: 100%;
  display: none;
}
.btn-back-body {
  display: none;
}
.mobile-flow-overlay {
  width: 100%;
  height: auto;
  min-height: 100px;
  padding-top: 0;
  position: relative;
}
.close-flow,
.flow-path {
  display: none;
}
@media screen and (min-width:1280px) {
  .tiny-label.teal.text-style-allcaps.rel-tag.hide {
    display: none;
  }
  .panel {
    width: 83.3333%;
  }
  .button-concern {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-size: 1.2rem;
  }
  .button-concern:lang(en) {
    font-size: 1.5rem;
  }
  .button-concern.is-active {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  .pic-hero.hair {
    background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/7.avif);
  }
  .pic-hero.butt {
    background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/buttocks.avif);
    background-position: 0 0,0 0,50%;
  }
  .button-solution {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-size: 1.2rem;
  }
  .button-solution:lang(en) {
    font-size: 1.5rem;
  }
  .button-solution.double {
    height: 123.5px;
    padding-right: 1rem;
    line-height: 1.83rem;
  }
  .mobile-flow-overlay {
    height: auto;
    min-height: 100vh;
  }
}
@media screen and (min-width:1440px) {
  .tiny-label.teal.text-style-allcaps.rel-tag {
    letter-spacing: .5px;
    letter-spacing: .5px;
    inset: 6px 7px auto auto;
    letter-spacing: .5px;
    inset: 6px 7px auto auto;
    display: inline-flex;
    position: absolute;
    inset: 6px 7px auto auto;
  }
  .body-part.w--current {
    background-color: var(--body-black);
    color: var(--body-bg-glowbal);
  }
  .one-from-two,
  .one-from-two.color-2,
  .one-from-two.color-2 {
    background-color: var(--body-bg-glowbal);
  }
  .panel {
    width: 66.6667%;
  }
  .button-concern,
  .button-concern:lang(en) {
    font-size: 1.3rem;
  }
  .please--select {
    background-color: var(--body-shade-1);
  }
  .button-solution {
    font-size: 1.3rem;
    position: relative;
  }
  .button-solution:lang(en) {
    font-size: 1.3rem;
  }
  .button-solution.double {
    height: 123.5px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 2.2rem;
  }
  .button-solution.double.is-hidden {
    line-height: 2.2rem;
  }
  .hero-label {
    opacity: .1;
    display: block;
  }
}
@media screen and (min-width:1920px) {
  .concerns-buttons-holder {
    box-shadow: inset -1px 0 0 0 var(--border-black);
  }
  .panel {
    width: 50%;
  }
  .button-concern {
    font-size: 1.3rem;
  }
  .pic-hero.tummy {
    background-image: linear-gradient(#471e6236,#110f13a8),url(images/nnnoise.svg),url(images/6.avif);
  }
  .pic-hero.intime {
    background-position: 0 0,0 0,50%;
  }
  .button-solution {
    font-weight: 500;
  }
  .button-solution:lang(en) {
    font-size: 1.3rem;
  }
  .button-solution.double {
    height: 127px;
  }
}
@media screen and (max-width:991px) {
  .body-part {
    max-width: none;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .body-part.w--current {
    max-width: none;
  }
  .body-part._3 {
    max-width: 11.66%;
  }
  .concerns-buttons-holder {
    width: 35%;
    height: auto;
  }
  .concern-panels {
    width: 65%;
    height: auto;
  }
  .concerns-layout {
    height: auto;
  }
  .panel-inner {
    flex-flow: column;
    height: 80vh;
  }
  .panel {
    width: 100%;
    height: calc(100vh - 100px);
    padding-bottom: 80px;
  }
  .button-concern {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .button-concern:lang(en) {
    font-size: 1.25rem;
  }
  .button-concern.is-active {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pic-hero {
    display: none;
  }
  .please--select {
    letter-spacing: .02em;
    text-transform: none;
    font-size: .9rem;
    font-weight: 500;
  }
  .button-solution {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .button-solution:lang(en) {
    font-size: 1.25rem;
  }
  .scrollable {
    height: auto;
    overflow: hidden;
  }
  .back-btn.back-concern,
  .btn-back-body {
    display: none;
  }
  .mobile-flow-overlay {
    height: auto;
    min-height: auto;
  }
  .flow-path {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .body-part {
    background-image: linear-gradient(257deg,#d6c8f0,#f1e6d9);
    border-radius: 16px;
    justify-content: flex-end;
    align-items: flex-start;
    min-width: auto;
    max-width: none;
    height: 8rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: .9375rem;
    font-weight: 500;
    box-shadow: 0 5px 5px #0003;
  }
  .body-part:hover {
    background-color: var(--beige-light);
  }
  .body-part.w--current {
    background-color: var(--beige-light);
    color: var(--body-black);
    background-image: linear-gradient(194deg,#d7fbfe,#e7c7c1);
  }
  .body-part._3 {
    min-width: 100%;
    max-width: 100%;
  }
  .body-part._3.w--current {
    background-color: var(--body-bg-glowbal);
    max-width: 25%;
    color: var(--body-black);
  }
  .body-part._3.visage {
    background-image: linear-gradient(21deg,#fec5bb,#d8e2dc 63%);
  }
  .body-part._3.visage.w--current {
    background-image: linear-gradient(195deg,#fec5bb,#d8e2dc 53%);
  }
  .body-part._3.breast {
    background-image: linear-gradient(187deg,#f8e3ca 33%,#a5adff);
  }
  .body-part._3.tummy {
    background-image: linear-gradient(140deg,#ffcef0,#d2fcff 75%);
  }
  .body-part.legs {
    background-image: linear-gradient(157deg,#ffe3e5,#fff 54%);
  }
  .body-part.fesse {
    background-image: linear-gradient(153deg,#fff4ce,#c8b6ff);
  }
  .body-part.intime {
    background-image: linear-gradient(211deg,#b8e0db,#f0efcd);
  }
  .body-part.hair {
    background-image: linear-gradient(149deg,#dffdff 35%,#efb0a8);
  }
  .body-part.trans {
    background-image: linear-gradient(226deg,#b1affe,#befbe5 60%);
  }
  .body-part-selector {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    border-top: 0px none var(--transparent);
    border-bottom: 0px none var(--transparent);
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: grid;
  }
  .body-part-selector.mob {
    grid-column-gap: 1.1rem;
    grid-row-gap: 1.1rem;
    background-color: var(--transparent);
    grid-column-gap: 1.1rem;
    grid-row-gap: 1.1rem;
    background-color: var(--transparent);
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 1rem;
    display: grid;
  }
  .concerns-buttons-holder {
    background-color: var(--transparent);
    width: 100%;
    height: auto;
    box-shadow: none;
    padding-bottom: 80px;
    position: relative;
    overflow: visible;
  }
  .concern-panels {
    width: 100%;
    height: auto;
  }
  .concerns-layout {
    display: block;
    position: static;
  }
  .panel-inner {
    flex-flow: column;
    height: auto;
    padding-bottom: 40px;
  }
  .one-from-two {
    background-color: var(--transparent);
    box-shadow: none;
  }
  .one-from-two.color-2 {
    box-shadow: none;
    box-shadow: none;
    padding-bottom: 40px;
  }
  .panel {
    width: 100%;
    height: auto;
    padding-bottom: 40px;
    position: relative;
  }
  .button-concern {
    border-bottom: 0px none var(--transparent);
    background-color: var(--relume-library-lite--rl-white);
    background-image: url(images/arrow-right.svg),linear-gradient(#fff,#f3f3f3);
    background-position: 96%,0 0;
    background-repeat: no-repeat,repeat;
    background-size: 20px 20px,auto;
    border-radius: .7rem;
    margin-bottom: .75rem;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow: 0 3px 5px #00000029;
  }
  .button-concern:hover {
    background-color: var(--transparent);
    background-position: 98%,0 0;
  }
  .button-concern:lang(en) {
    font-size: 1rem;
  }
  .button-concern.is-active {
    box-shadow: none;
    color: var(--links);
    box-shadow: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .pic-hero {
    background-image: none;
    display: none;
  }
  .please--select {
    border-bottom: 0px none var(--transparent);
    background-color: var(--transparent);
    box-shadow: none;
    color: var(--body-bg-glowbal);
    text-align: center;
    letter-spacing: 0;
    background-image: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    display: block;
  }
  .button-solution {
    border-bottom: 0px none var(--transparent);
    background-color: var(--relume-library-lite--rl-white);
    text-align: center;
    letter-spacing: -.01em;
    background-image: linear-gradient(#fff,#f3f3f3);
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    margin-bottom: .75rem;
    margin-left: 1rem;
    margin-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    box-shadow: 0 2px 5px #0000000d;
  }
  .button-solution:hover {
    box-shadow: none;
  }
  .button-solution:lang(en) {
    font-size: 1rem;
  }
  .list-treatments {
    padding-bottom: 60px;
  }
  .scrollable {
    padding-bottom: 3rem;
  }
  .back-btn.back-concern {
    opacity: .8;
    opacity: .8;
    background-color: #fff0;
    width: 200px;
    font-size: .75rem;
    display: block;
    position: sticky;
    top: 19px;
  }
  .btn-back-body {
    z-index: 2;
    background-color: var(--transparent);
    border: 1px #000;
    width: 200px;
    padding-left: 1rem;
    font-size: .75rem;
    display: none;
    position: absolute;
    inset: .5rem auto auto 0%;
  }
  .btn-back-body:lang(en) {
    width: 160px;
  }
  .btn-back-body.is-visible {
    display: block;
  }
  .mobile-flow-overlay {
    z-index: 1000;
    background-color: var(--indigo);
    filter: none;
    background-image: url(images/nnnoise.svg),url(images/Frame-465.avif);
    background-position: 0 0,0 0;
    background-size: 350px 350px,cover;
    padding-top: 2rem;
    position: relative;
    transform: none;
  }
  .mobile-flow-overlay.flow-open {
    z-index: 2;
    z-index: 2;
    inset: 0%;
    height: 100vh;
    height: 100dvh; /* FIX 4: visible height on phones (address bar) */
    padding-top: 6rem;
    position: fixed;
    inset: 0%;
    overflow: hidden;
  }
  .close-flow {
    z-index: 2;
    background-image: url(images/close.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    display: flex;
    position: absolute;
    inset: .5rem .25rem auto auto;
  }
  .code-embed-4 {
    padding-bottom: 60px;
  }
  .tabs-3 {
    position: static;
  }
  .flow-path {
    opacity: 1;
    height: auto;
    color: var(--relume-library-lite--rl-white);
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.6rem;
    line-height: 2rem;
    display: block;
    position: absolute;
    inset: 57px 0% auto;
  }
}
@media screen and (max-width:479px) {
  .body-part {
    height: 7rem;
  }
  .body-part-selector,
  .body-part-selector.mob,
  .body-part-selector.mob {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr 1fr;
  }
  .concerns-buttons-holder {
    height: auto;
  }
  .button-concern {
    letter-spacing: .02em;
    font-weight: 500;
  }
  .button-solution {
    text-align: center;
    letter-spacing: -.03em;
    font-weight: 400;
  }
  .btn-back-body {
    border-width: 0;
  }
  .mobile-flow-overlay {
    padding-bottom: 2rem;
  }
}

/* from page inline style 6 */
:where(#onboarding, #onboarding *)::selection {
  background: #e9e9e0;
  color: #1d1127;
  text-shadow: none;
}
:where(#onboarding, #onboarding *)::-moz-selection {
  background: #e9e9e0;
  color: #1d1127;
  text-shadow: none;
}

/* finder <style> blocks (unchanged) */

@media (min-width: 768px) {
  .one-from-two {
    background: #dff2ed;
  }

  .one-from-two.color-2 {
    background: #eeedff;
  }
}

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}

 .scrollable  {overflow-y: auto;}
 .scrollable {
  
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.scrollable::-webkit-scrollbar {
  width: 6px;
}
.scrollable::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.15);
  border-radius: 3px;
}
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}

 
.scrollable::after {
 /* content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #f9f9f8 90%);
  pointer-events: none;*/
}
.info{background: #f1ff9f;}

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}
.hero-label.breast{font-size: 15.5rem;}

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}
/*.legs{font-size: 9rem;letter-spacing: -.04em;}*/

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}

/* Container keeps label outside of normal flow */
/* Ensure your image container is positioned and has height */
.pic-hero{
  position: relative;
  background-size: cover;
  background-position: center;
 
  overflow: hidden;
}

/* Full overlay that vertically centers the label */
.hero-label-rail{
  position: absolute; left:-80px;
  inset: 0;
  display: flex;
  align-items: center;         /* vertical centering */
  justify-content: flex-start; /* stick to left */
  pointer-events: none;
  z-index: 2;
}

/* Vertical word — no rotate math */
.hero-label{
  writing-mode: vertical-rl;   /* vertical text */
  text-orientation: mixed;
  transform: rotate(180deg); /* so it reads top→bottom on the left edge */
  font-size: 15rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  /* how much it peeks in from the left */
  margin-inline-start: 0;  /* tweak between -0.1em and -0.5em */
}

/* MOBILE FLOW ONLY */
@media (max-width: 767px) {
  /* 0) Defaults on mobile */
  .body-part-selector { display: flex; }        /* tab menu visible on load */
  .concerns-buttons-holder { display: none; }   /* hidden on load */
  .concern-panels { display: none; }            /* hidden on load */

  /* 1) Visibility toggles */
  .concerns-buttons-holder.is-visible { display: flex; }
  .concern-panels.is-visible { display: block; }
  .panel { display: none; }
  .panel.is-visible { display: block; }

  /* 2) Back buttons */
  .btn-back-body,
  .back-btn.back-concern { display: none; }
  .btn-back-body.is-visible,
  .back-btn.back-concern.is-visible { display: block; margin-bottom: 0.75rem; }

  /* 3) Optional: hide body selector when inside a body part */
  .body-part-selector.is-hidden { display: none; }
}

/*FLOW STYLES*/

.close-flow {
    display: none;
}

.mobile-flow-overlay.flow-open .close-flow {display:block}

.mobile-flow-overlay.flow-open .btn-back-body {display:none}
.mobile-flow-overlay.flow-open .btn-back-body.w-button.is-visible{display:block}

/*arrows and text on 4 cards*/
/* --- ARROW --- */

/* Default (mouse OUT) */
@media screen and (min-width: 768px) {
.arrow-card {
    transform: rotate(45deg);
    opacity: 1;
    transition:
        transform 350ms ease-out 350ms, /* rotate AFTER fade-in */
        opacity 300ms ease-out 200ms;   /* fade-in starts AFTER text is gone */
}

/* Hover (mouse IN) */
.card_image-wrapper:hover .arrow-card {
    transform: rotate(0deg);
    opacity: 0;
    transition:
        transform 250ms ease-out,         /* rotate immediately */
        opacity 250ms ease-out 250ms;     /* fade AFTER rotation */
}


/* --- TEXT --- */

/* Default (mouse OUT) */
.card-text-animate {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 350ms ease-out,           /* slow fade out */
        transform 350ms ease-out;         /* slow slide down */
}

/* Hover (mouse IN) */
.card_image-wrapper:hover .card-text-animate {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 350ms ease-out 500ms,     /* wait for arrow fade */
        transform 350ms ease-out 500ms;
}
}

/* --- Hidden panels --- */
.is-hidden {
  display: none !important;
}

/* --- Active button styling --- */
.concerns-buttons-holder .is-active {
  background-color: #1c1127;
  color: #fafaf8;
}

/* --- Slide-in animation for the 3 columns --- */
.one-from-two {
  opacity: 0;
  transform: translateY(24px);
}

@keyframes fadeLift {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel.animate .one-from-two {
  animation: fadeLift 0.6s cubic-bezier(.25,.1,.25,1) forwards;
}

.panel.animate .one-from-two:nth-child(1) { animation-delay: 0.1s; }
.panel.animate .one-from-two:nth-child(2) { animation-delay: 0.25s; }
.one-from-two {
  opacity: 0;
  transform: translateX(0);
  clip-path: inset(0 100% 0 0);
}

@keyframes maskReveal {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.panel.animate .one-from-two {
  animation: maskReveal 0.6s ease forwards;
}
.panel.animate .one-from-two:nth-child(1) { animation-delay: 0.1s; }
.panel.animate .one-from-two:nth-child(2) { animation-delay: 0.25s; }

@media (max-width: 767px) {
  .button-solution {
    opacity: 1 !important; transition: none !important;
   /* transform: translateY(16px);
    transition: opacity .4s ease, transform .4s ease;*/
  }
  .button-solution.visible {
    opacity: 1 !important; transition: none !important;
   /* transform: translateY(0);*/
  }
      .button-concern.is-active {
        color: var(--links);}
       
.concerns-buttons-holder {
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px); /* FIX 4 */ /* adjust 100px to leave space for header/back etc */
  overflow-y: auto;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box; overflow-x: none;
}

 
.panel-inner {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px); /* FIX 4 */ /* adjust 100px to leave space for header/back etc */
  overflow-y: auto;
  padding-bottom: 80px;
  overflow-x: none;
 -webkit-overflow-scrolling: touch;
  
  box-sizing: border-box;
  
}
}

@media screen and (min-width: 768px) {
  .mobile-flow-overlay {
    position: relative;
    z-index: 2; /* above hero */
  }

  .body-part-selector.w-tab-menu {
    position: sticky; /* stays pinned inside onboarding */
    top: 0;
    z-index: 50; /* above .w-tab-content */
    pointer-events: auto;
    background: #fff; /* optional */
  }

  .w-tab-content {
    position: relative;
    z-index: 1; /* keep it below the tab menu */
  }
}

@media screen and (max-width: 767px) {
/*section.mobile-flow-overlay a.btn-back-body.w-button.is-visible, section.mobile-flow-overlay .flow-path  {display:none}*/
section.mobile-flow-overlay.flow-open a.btn-back-body.w-button.is-visible, 
section.mobile-flow-overlay.flow-open .flow-path{display:block}


.concern-panels.is-visible {padding-top: 2rem;}



}

/* FIX 2: the ✕ is a real <button> (keyboard + screen readers); keep the old <div> look */
.close-flow {
  font: inherit;
  color: inherit;
  text-align: inherit;
  border: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
}

/* v2: concern groups (owner): color1 / color2 alternate per group */
.color1 {
  background-color: #f7f4ef; /* beige */
}
.color2 {
  background-color: #fefeff; /* very light lilac */
}
@media screen and (max-width: 767px) {
  .color1,
  .color2 {
    background-image: url(images/arrow-right.svg); /* phone cards: keep the arrow, no white gradient over the colour */
  }
  /* the desktop active state (dark) has no gradient over it here: the active card keeps its group colour, as live */
  .concerns-buttons-holder .color1.is-active {
    background-color: #f7f4ef;
  }
  .concerns-buttons-holder .color2.is-active {
    background-color: #fefeff;
  }
  /* v2 wraps the concerns in .scrollable (not on live): on phones the column itself scrolls to the bottom, as live */
  .concerns-buttons-holder .scrollable {
    height: auto;
    overflow: visible;
  }
}

/* Owner (2026-10-15): 768-991 px, finder = one screen minus the navbar; both columns scroll inside */
@media (min-width: 768px) and (max-width: 991px) {
  .tabs-3 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--height-nav));
    height: calc(100dvh - var(--height-nav));
  }
  .tabs-3 > .w-tab-content {
    flex: 1;
    min-height: 0;
  }
  .tabs-3 .w-tab-pane,
  .concerns-layout,
  .concern-panels {
    height: 100%;
  }
  .panel {
    height: 100%;
    padding-bottom: 0;
  }
  .concerns-buttons-holder {
    flex-direction: column;
  }
  .concerns-buttons-holder .scrollable {
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .panel-inner {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    scrollbar-width: thin; /* same scrollbar as .scrollable */
    scrollbar-color: rgba(0,0,0,0.15) transparent;
  }
  .panel-inner::-webkit-scrollbar {
    width: 6px;
  }
  .panel-inner::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.15);
    border-radius: 3px;
  }
}