/* Responsive web enhancement for image-led care pages.
   Desktop (901px+) is intentionally untouched. */
html{overflow-x:clip}
.care-information,
.care-page-shell>footer{content-visibility:auto;contain-intrinsic-size:1px 900px}
.mockup-page>img{image-rendering:auto}
@media(max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-x:none}
  .care-page-shell{width:100%;overflow:hidden}
  .mockup-page{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:12px 14px 0;
    overflow:hidden!important;
    transform:none!important;
    background:
      radial-gradient(circle at 85% 6%,rgba(44,229,193,.10),transparent 27%),
      linear-gradient(180deg,#001a14,#00130f);
  }
  .mockup-page>img{
    order:20;
    flex:0 0 calc(100% + 28px);
    width:calc(100% + 28px)!important;
    max-width:none!important;
    height:auto!important;
    margin:8px -14px -7.4vw;
    clip-path:inset(0 0 9.8% 0)!important;
    user-select:none;
    -webkit-user-drag:none;
  }

  /* Turn the invisible desktop navigation hotspots into real touch targets. */
  .mockup-page>.hotspot{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;height:auto!important;
    min-width:0;
    text-indent:0!important;
    overflow:visible!important;
    border-radius:999px!important;
    white-space:nowrap;
    font-family:Manrope,Arial,sans-serif;
    text-decoration:none;
  }
  .mockup-page>.hs-explore-care,
  .mockup-page>.hs-how,
  .mockup-page>.hs-about,
  .mockup-page>.hs-resources,
  .mockup-page>.hs-search,
  .mockup-page>.hs-login{display:none!important}

  .mockup-page>.hs-home{
    order:1;
    display:inline-flex!important;
    align-items:center;
    min-height:42px;
    padding:0 15px;
    border:1px solid rgba(44,229,193,.34);
    background:rgba(0,40,32,.8);
    color:#fff;
    font-size:12px;
    font-weight:850;
  }
  .mockup-page>.hs-home::before{content:"← ";color:#b2ff19}
  .mockup-page>.hs-getstarted{
    order:2;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:42px;
    margin-left:auto;
    padding:0 17px;
    border:1px solid #b2ff19;
    background:#b2ff19;
    color:#062019;
    font-size:12px;
    font-weight:900;
    box-shadow:0 10px 24px rgba(178,255,25,.15);
  }

  .mockup-page>.hs-back,
  .mockup-page>.hs-weight,
  .mockup-page>.hs-recovery,
  .mockup-page>.hs-performance,
  .mockup-page>.hs-longevity,
  .mockup-page>.hs-hair,
  .mockup-page>.hs-mind,
  .mockup-page>.hs-sexual{
    order:10;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.035);
    color:#dce9e4;
    font-size:10px;
    font-weight:800;
  }
  .mockup-page>.hs-back{display:none!important}
  .mockup-page>.hotspot[aria-current="page"]{
    border-color:#ff2aa1!important;
    background:rgba(255,42,161,.13)!important;
    color:#fff!important;
    box-shadow:0 0 18px rgba(255,42,161,.12);
  }

  .mockup-page>.hs-qualify,
  .mockup-page>.hs-explore{
    order:30;
    display:inline-flex!important;
    flex:1 1 calc(50% - 5px);
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 14px;
    font-size:12px;
    font-weight:900;
    border:1px solid transparent;
  }
  .mockup-page>.hs-qualify{
    background:linear-gradient(135deg,#b2ff19,#61ef88);
    color:#061b15;
  }
  .mockup-page>.hs-explore{
    border-color:rgba(44,229,193,.45);
    background:rgba(44,229,193,.08);
    color:#fff;
  }

  .mockup-page>[class*="hs-learn-"]{
    order:31;
    display:inline-flex!important;
    flex:1 1 100%;
    align-items:center;
    justify-content:space-between;
    min-height:46px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
    color:#eef9f5;
    font-size:11px;
    font-weight:800;
    text-align:left;
  }
  .mockup-page>[class*="hs-learn-"]::after{
    content:"↗";
    margin-left:10px;
    color:#b2ff19;
    font-size:14px;
  }

  .mockup-page>.care-principles-overlay{
    position:relative!important;
    order:40;
    left:auto!important;right:auto!important;bottom:auto!important;
    width:calc(100% + 28px)!important;
    height:auto!important;
    margin:8px -14px 0;
    padding:20px 16px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    border-top:1px solid rgba(44,229,193,.22);
    background:linear-gradient(180deg,#00251e,#001913)!important;
    box-shadow:none!important;
  }
  .care-principle{
    min-height:72px;
    padding:12px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.09);
    gap:12px!important;
  }
  .care-principle:last-child{border-bottom:0}
  .care-principle-icon{width:42px!important;height:42px!important}
  .care-principle h3{font-size:14px!important;line-height:1.2!important}
  .care-principle p{font-size:11px!important;line-height:1.45!important}

  .care-information{padding:38px 0!important}
  .care-information-inner{width:calc(100% - 32px)!important}
  .care-footer-cta{content-visibility:auto;contain-intrinsic-size:1px 620px}
}
@media(max-width:520px){
  .mockup-page{padding-inline:12px}
  .mockup-page>img,
  .mockup-page>.care-principles-overlay{width:calc(100% + 24px)!important;margin-left:-12px;margin-right:-12px}
  .mockup-page>.hs-weight,
  .mockup-page>.hs-recovery,
  .mockup-page>.hs-performance,
  .mockup-page>.hs-longevity,
  .mockup-page>.hs-hair,
  .mockup-page>.hs-mind,
  .mockup-page>.hs-sexual{font-size:9.5px;padding-inline:10px}
  .mockup-page>.hs-qualify,
  .mockup-page>.hs-explore{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}