/* Treatment hero family — approved Microneedling / Barbed Threads grammar.
   Opt-in on current treatment candidates only; no clinical content changes.
   Route palettes remain owned by their existing stylesheets. */
.mn5-hero[data-hero-family] {
  --hero-title-phone: 49px;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.mn5-hero[data-hero-family] .treatment-hero-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0);
  pointer-events: none;
}
.mn5-hero[data-hero-family] .treatment-hero-wallpaper .mn45-codex-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow: visible;
  transform: none !important;
  animation: none !important;
}
.mn5-hero[data-hero-family] .mn45-codex-field::before {
  content: "";
  display: block;
  position: absolute;
  inset: 18% -65vw auto auto;
  width: 112vw;
  height: 112vw;
  border: 1px solid rgba(219,235,221,.11);
  border-radius: 44% 56% 62% 38% / 56% 43% 57% 44%;
  background: none;
  box-shadow: 0 0 0 13vw rgba(132,176,145,.018), 0 0 0 27vw rgba(132,176,145,.012), inset 0 0 80px rgba(199,163,107,.055);
  filter: none;
  transform: rotate(-18deg) !important;
  transform-origin: 48% 52%;
  animation: none !important;
}
.mn5-hero[data-hero-family] .mn45-codex-field::after {
  content: "";
  display: block;
  position: absolute;
  inset: 21% auto auto 10%;
  width: 1px;
  height: 46%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg,transparent,rgba(199,163,107,.72) 22%,rgba(237,232,223,.15) 75%,transparent);
  box-shadow: 0 0 6px rgba(214,186,126,.05);
  transform: none !important;
  animation: none !important;
}
.mn5-hero[data-hero-family] .mn45-codex-field > span {
  position: absolute;
  display: block;
  left: calc(10% - 3px);
  right: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: none !important;
  animation: none !important;
}
.mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(1) { top: 29%; opacity: 1; }
.mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(2) { top: 39%; opacity: .78; }
.mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(3) { top: 49%; opacity: .58; }
.mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(4) { top: 59%; opacity: .36; }
/* The shared contour replaces route-specific decorative figures, not content. */
.mn5-hero[data-hero-family] :is(.bt2-thread-lines,.ph2-follicle-field,.ps2-strata,.sb2-membrane) { display: none; }
.mn5-hero[data-hero-family].lp2-hero .lp2-contour-field { background: inherit !important; }
.mn5-hero[data-hero-family].lp2-hero .treatment-hero-wallpaper { background: inherit; }
.mn5-hero[data-hero-family].lp2-hero::after { background-image: none; }

.mn5-hero[data-hero-family] .mn45-codex-copy {
  position: relative;
  z-index: 3;
  inset: auto;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: auto 0;
  padding: 34px 24px 112px 52px;
  transform: none !important;
}
.mn5-hero[data-hero-family] .mn45-codex-copy h1 {
  max-width: 100%;
  margin: 0;
  font: 400 var(--hero-title-phone)/.93 var(--font-serif);
  letter-spacing: -.037em;
  white-space: normal;
  overflow-wrap: normal;
}
.mn5-hero[data-hero-family] .mn45-codex-copy h1 i {
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 50px;
  margin-top: 8px;
  font-size: clamp(23px,7.2vw,27px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.012em;
  white-space: normal;
}
/* Pages with one introductory paragraph use the lead role, not small metadata. */
.mn5-hero[data-hero-family] .mn45-codex-copy:not(:has(.mn45-codex-lead)) > .mn45-codex-note {
  max-width: 285px;
  margin-top: 29px;
  font: 300 17px/1.48 var(--font-sans);
  color: rgba(239,233,222,.87);
}

.mn5-hero[data-hero-family] .mn45-codex-cue {
  height: 78px;
  bottom: 12px;
}
.mn5-hero[data-hero-family] .mn45-codex-cue::before {
  width: 1px;
  height: 58px;
  background: linear-gradient(180deg,rgba(214,186,126,.09),rgba(182,144,90,.23),rgba(182,144,90,.035));
}
.mn5-hero[data-hero-family] .mn45-codex-cue span {
  width: 1px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg,rgba(234,210,156,0),rgba(222,195,139,.12) 22%,rgba(226,200,145,.32) 44%,rgba(226,200,145,.32) 58%,rgba(182,144,90,.12) 80%,rgba(182,144,90,0) 100%);
  box-shadow: none;
  transform-origin: top;
  animation: none !important;
}
@keyframes treatment-hero-soft-trace {
  0% { transform: translateX(-50%) translateY(-12px) scaleY(.85); opacity: 0; }
  18% { opacity: .42; }
  76% { opacity: .32; }
  100% { transform: translateX(-50%) translateY(50px) scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  body.mn452-hero-live .mn5-hero[data-hero-family] .mn45-codex-cue span {
    animation: treatment-hero-soft-trace 4.4s cubic-bezier(.45,0,.25,1) infinite !important;
  }
}
@media (min-width: 601px) {
  .mn5-hero[data-hero-family] .mn45-codex-field::before {
    top: 8%; right: -24vw;
    width: min(78vw,980px); height: min(78vw,980px);
    border-color: rgba(219,235,221,.12);
    box-shadow: 0 0 0 8vw rgba(132,176,145,.017), 0 0 0 17vw rgba(132,176,145,.01), inset 0 0 110px rgba(199,163,107,.055);
  }
  .mn5-hero[data-hero-family] .mn45-codex-field::after { top: 20%; left: var(--mn5-wide-gutter); height: 52%; }
  .mn5-hero[data-hero-family] .mn45-codex-field > span { left: calc(var(--mn5-wide-gutter) - 4px); width: 9px; height: 9px; }
  .mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(2) { top: 41%; }
  .mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(3) { top: 53%; }
  .mn5-hero[data-hero-family] .mn45-codex-field > span:nth-child(4) { top: 65%; }
  .mn5-hero[data-hero-family] .mn45-codex-copy {
    position: absolute;
    top: 51%;
    left: var(--mn5-wide-gutter);
    width: min(72vw,680px);
    margin: 0;
    padding: 36px 42px 40px;
    transform: translate3d(0,calc(-50% - (var(--mn452-hero-progress) * 30px)),0) !important;
  }
  .mn5-hero[data-hero-family] .mn45-codex-copy h1 {
    font-size: clamp(68px,9vw,92px);
    line-height: .88;
    letter-spacing: -.045em;
  }
  .mn5-hero[data-hero-family] .mn45-codex-copy h1 i {
    min-height: 0;
    margin-top: 14px;
    font-size: clamp(25px,3.2vw,34px);
    line-height: 1;
    letter-spacing: -.015em;
  }
  .mn5-hero[data-hero-family] .mn45-codex-copy:not(:has(.mn45-codex-lead)) > .mn45-codex-note {
    max-width: 42ch;
    margin-top: 32px;
    font-size: clamp(17px,2vw,20px);
    line-height: 1.48;
    color: rgba(239,233,222,.9);
  }
  .mn5-hero[data-hero-family] .mn45-codex-cue::before {
    background: linear-gradient(180deg,rgba(214,186,126,.11),rgba(182,144,90,.28),rgba(182,144,90,.045));
  }
}
@media (min-width: 861px) {
  .mn5-hero[data-hero-family] .mn45-codex-cue::before { height: 74px; }
  .mn5-hero[data-hero-family] .mn45-codex-cue span { height: 40px; }
}
@media (min-width: 1100px) {
  .mn5-hero[data-hero-family] .mn45-codex-field::before {
    top: -4%; right: -14vw;
    width: min(70vw,1040px); height: min(70vw,1040px);
  }
  .mn5-hero[data-hero-family] .mn45-codex-field::after { left: 7.5vw; height: 55%; }
  .mn5-hero[data-hero-family] .mn45-codex-field > span { left: calc(7.5vw - 4px); }
  .mn5-hero[data-hero-family] .mn45-codex-copy {
    left: max(7.5vw,calc((100vw - 1280px) / 2));
    width: min(50vw,720px);
    padding-left: 50px;
  }
  .mn5-hero[data-hero-family] .mn45-codex-copy h1 { font-size: clamp(84px,7.2vw,96px); }
  .mn5-hero[data-hero-family] .mn45-codex-copy h1 i { font-size: clamp(24px,2.15vw,31px); }
}
/* Short landscape viewports must scroll rather than crop long titles or links. */
@media (min-width: 601px) and (max-height: 700px) {
  .mn5-hero[data-hero-family] .mn45-codex-copy {
    position: relative;
    top: auto;
    margin-block: 36px 74px;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mn5-hero[data-hero-family] .mn45-codex-cue span { animation: none !important; }
}
@media (min-width: 601px) and (min-height: 701px) and (prefers-reduced-motion: reduce) {
  .mn5-hero[data-hero-family] .mn45-codex-copy { transform: translateY(-50%) !important; }
}

/* Approved Anti-Wrinkle refinements transferred to the opt-in treatment family. */
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy h1 i {
  color: #e4cfaa;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-eyebrow {
  color: #c8c2b7;
}
/* The rule sits above the eyebrow box: reveal them together without clipping it. */
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-eyebrow::before {
  width: 68px;
  background: linear-gradient(90deg,rgba(214,193,158,.88) 0%,rgba(202,180,142,.68) 32%,rgba(192,169,129,.3) 68%,rgba(192,169,129,0) 100%);
  opacity: .74;
  box-shadow: none;
  transform: scaleY(.35);
  transform-origin: left center;
  animation: none;
}
@keyframes treatment-family-eyebrow-enter {
  from { opacity: 0; transform: none; }
  to { opacity: 1; transform: none; }
}
@keyframes treatment-family-rule-unfold {
  from { transform: scaleX(0) scaleY(.35); }
  to { transform: scaleX(1) scaleY(.35); }
}
body.mn452-page.mn452-intro .mn5-hero[data-hero-family] .mn45-codex-eyebrow {
  animation-name: treatment-family-eyebrow-enter;
  animation-timing-function: cubic-bezier(.25,.46,.45,.94);
  clip-path: none;
}
body.mn452-page.mn452-intro .mn5-hero[data-hero-family] .mn45-codex-eyebrow::before {
  animation: treatment-family-rule-unfold 1.05s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: inherit;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-lead {
  color: #dededc;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-note {
  color: #a3a3a3;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-field > span {
  border-color: rgba(228,207,170,.62);
  box-shadow: 0 0 0 6px rgba(228,207,170,.045);
}

/* HOME 1.1's approved outlined action, restricted to treatment-family heroes. */
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: min(100%,340px);
  min-width: 0;
  min-height: 60px;
  padding: 0 18px 0 23px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid rgba(226,204,168,.46);
  border-radius: 0;
  color: #f0dfc1;
  background: rgba(8,14,21,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045),0 18px 42px -36px rgba(192,154,99,.2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font: 400 9px/1.2 var(--font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .65s cubic-bezier(.16,1,.3,1),border-color .4s ease,background .5s ease;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta::before {
  position: absolute;
  inset: -70% -25%;
  background: linear-gradient(108deg,transparent 35%,rgba(255,255,255,.14) 49%,transparent 63%);
  content: '';
  pointer-events: none;
  translate: -115% 0;
  transition: translate .85s cubic-bezier(.16,1,.3,1);
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta > span {
  position: relative;
  z-index: 1;
  color: inherit;
  font: inherit;
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:hover,
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(226,204,168,.82);
  background: rgba(226,204,168,.06);
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:hover::before,
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:focus-visible::before {
  translate: 115% 0;
}
@media (max-width: 600px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
    min-height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta,
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta::before {
    transition: none;
  }
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:hover,
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:focus-visible {
    transform: none;
  }
}

/* Keep backdrop and glint edges on the rail across phone widths, not at a fixed 36px. */
@media (max-width: 600px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy::before,
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy::after {
    left: 10%;
  }
}
/* Larger views retain the approved backdrop-to-rail relationship. */
@media (min-width: 601px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
    left: 0;
  }
}
@media (min-width: 1100px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
    left: calc(7.5vw - max(7.5vw,calc((100vw - 1280px) / 2)));
  }
}

/* Tablet introductions share a measure while keeping the second paragraph readable. */
@media (min-width: 601px) and (max-width: 1099px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-lead,
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-note {
    max-width: clamp(25.5rem,48vw,30rem);
  }
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-note {
    font-size: 16px;
    line-height: 1.58;
  }
}

/* The longer introduction must not pull the title above the family anchor.
   Keep it in flow so shorter desktop windows can grow rather than crop it. */
@media (min-width: 1100px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy h1 {
    font-size: calc(clamp(84px,7.2vw,96px) - 2px);
  }
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-lead,
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-note {
    max-width: 35rem;
  }
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-note {
    font-size: 17px;
    line-height: 1.58;
  }
}
@media (min-width: 1100px) and (min-height: 761px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy {
    position: relative;
    top: auto;
    margin: max(24px,calc(24.6svh - 114px)) 0 48px;
    transform: translate3d(0,calc(var(--mn452-hero-progress) * -30px),0) !important;
  }
}

/* Biostimulators' faint route override hid the shared shaded reading layer.
   Restore the approved coverage and opacity in its own dark plum family. */
body.bi2-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
  background: radial-gradient(130% 108% at 0 30%,rgba(14,8,12,.64) 0 48%,rgba(25,15,20,.42) 69%,rgba(25,15,20,0) 100%) !important;
}
@media (min-width: 601px) {
  body.bi2-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
    background: radial-gradient(120% 100% at 0 40%,rgba(14,8,12,.7) 0 46%,rgba(25,15,20,.43) 69%,transparent 100%) !important;
  }
}

/* Patient-reading refinement: approved treatment-family hierarchy.
   Keep the outlined action and its label intact at narrow phone widths. */
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
  font-size: 12px;
  letter-spacing: .08em;
  gap: 12px;
}

/* Phone label is refined further below, preserving a comfortable button target. */
@media (max-width: 600px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
    font-size: 11px;
  }
}

/* Anchor the first title line rather than centring variable-length copy.
   In-flow layout lets a short landscape screen scroll without clipping.
   Barbed's existing pilot banner is six pixels shorter than its sisters. */
@media (min-width: 601px) and (max-width: 1099px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy {
    position: relative;
    top: auto;
    margin: clamp(24px,calc(50svh - 416px),174px) 0 74px;
    transform: translate3d(0,calc(var(--mn452-hero-progress) * -30px),0) !important;
  }
  body.bt2-page .mn5-hero[data-hero-family] .mn45-codex-copy {
    margin-top: calc(clamp(24px,calc(50svh - 416px),174px) + 6px);
  }
}

/* Tablet-only breathing room below the compact navigation. Trim the panel's
   top edge, not its paint box: the original gradient, opacity, bottom edge
   and text positions stay intact. Desktop/phone keep the approved geometry. */
@media (min-width: 601px) and (max-width: 1099px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
    clip-path: inset(max(0px,calc(16vh + 12px - clamp(24px,calc(50svh - 416px),174px))) 0 0 0);
  }
  body.bt2-page .mn5-hero[data-hero-family] .mn45-codex-copy::before {
    clip-path: inset(max(0px,calc(16vh + 6px - clamp(24px,calc(50svh - 416px),174px))) 0 0 0);
  }
}

/* Accepted treatment-family phone detail: align the original logo's dot with the rail.
   SVG dot centre = (9.403 + 1245 * .1) / 142.165 times rendered logo height.
   Compensate the existing 22px nav inset without reflowing the menu. */
@media (max-width: 600px) {
  body.mn452-page .mn5-hero[data-hero-family] #heroNav .hero-mark {
    translate: calc(10vw + .5px - 22px - var(--odn-h) * .94188443) 0;
  }
  /* Phone refinement: a little more breathing room and a subtly smaller label.
     Preserve the button size, surrounding text, logo and reading panel. */
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
    top: 12px;
    font-size: 10.5px;
  }
}

/* Treatment-family tablet heroes: lower the 60px action by half its height, without
   changing paragraph spacing, the reading-panel geometry or desktop. */
@media (min-width: 601px) and (max-width: 1099px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta {
    top: 30px;
  }
}

/* A single introductory paragraph remains the lead, not secondary metadata. */
/* Long clinical titles and existing secondary actions need in-flow space in
   short desktop windows. Keep the same type scale and navigation clearance. */
@media (min-width: 1100px) and (max-height: 760px) {
  body:is(.four-lesion,.four-weight) .mn5-hero[data-hero-family] .mn45-codex-copy {
    position: relative;
    top: auto;
    margin: max(24px,calc(24.6svh - 114px)) 0 48px;
    transform: translate3d(0,calc(var(--mn452-hero-progress) * -30px),0) !important;
  }
}
body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy:not(:has(.mn45-codex-lead)) > .mn45-codex-note {
  color: #dededc;
  font-size: 17px;
  line-height: 1.48;
}
@media (min-width: 1100px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-copy:not(:has(.mn45-codex-lead)) > .mn45-codex-note {
    font-size: 20px;
  }
}
/* Lowered primary actions retain breathing room before existing secondary links. */
@media (max-width: 600px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:has(+ *) { margin-bottom: 12px; }
}
@media (min-width: 601px) and (max-width: 1099px) {
  body.mn452-page .mn5-hero[data-hero-family] .mn45-codex-cta:has(+ *) { margin-bottom: 30px; }
}