/* True mobile rebuild for the six image-led care pathways.
   Desktop remains the approved image-led presentation. */
.mobile-care{display:none}
@media(max-width:900px){
  html,body{overflow-x:hidden!important;background:#001a14}
  .mockup-page{display:none!important}
  .mobile-care{
    display:block;
    font-family:Manrope,Arial,sans-serif;
    color:#fff;
    background:
      radial-gradient(circle at 85% 4%,rgba(49,225,193,.10),transparent 22%),
      radial-gradient(circle at 5% 29%,rgba(255,42,161,.10),transparent 18%),
      #001a14;
  }
  .mc-shell{width:min(100% - 28px,680px);margin:0 auto}
  .mc-topbar{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;gap:10px;
    min-height:64px;padding:10px 14px;
    background:rgba(0,22,18,.90);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
  }
  .mc-brand{display:flex;align-items:center;text-decoration:none;color:#fff}
  .mc-brand img{width:96px;height:auto;display:block}
  .mc-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
  .mc-portal,.mc-start{
    min-height:38px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 12px;border-radius:999px;text-decoration:none;
    font-size:10px;font-weight:900;letter-spacing:.02em;
  }
  .mc-portal{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.04)}
  .mc-start{background:#b5ff19;color:#041a13;box-shadow:0 8px 24px rgba(181,255,25,.16)}
  .mc-path-nav{
    display:flex;gap:8px;overflow-x:auto;padding:12px 14px 2px;
    scrollbar-width:none;background:#001a14;
  }
  .mc-path-nav::-webkit-scrollbar{display:none}
  .mc-path-nav a{
    flex:0 0 auto;min-height:36px;display:inline-flex;align-items:center;
    padding:0 12px;border-radius:999px;text-decoration:none;
    border:1px solid rgba(255,255,255,.12);color:#c9d7d2;
    background:rgba(255,255,255,.025);font-size:10px;font-weight:800;
  }
  .mc-path-nav a[aria-current="page"]{
    color:#fff;border-color:#ff2aa1;background:rgba(255,42,161,.14);
    box-shadow:0 0 20px rgba(255,42,161,.09);
  }
  .mc-hero{padding:18px 0 34px}
  .mc-hero-visual{
    position:relative;overflow:hidden;min-height:292px;border-radius:28px;
    border:1px solid rgba(255,255,255,.10);
    background-position:center 20%;background-size:cover;
    box-shadow:0 24px 62px rgba(0,0,0,.28);
  }
  .mc-hero-visual::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(0,18,14,.05) 15%,rgba(0,26,20,.40) 56%,#001a14 100%);
  }
  .mc-hero-visual::after{
    content:"";position:absolute;width:180px;height:180px;border-radius:50%;
    right:-55px;top:-42px;border:1px solid rgba(181,255,25,.25);
    box-shadow:0 0 0 24px rgba(181,255,25,.025),0 0 0 50px rgba(49,225,193,.018);
  }
  .mc-hero-copy{position:relative;margin-top:-84px;z-index:2;padding:0 16px}
  .mc-kicker{margin:0 0 9px;color:#31e1c1;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
  .mc-hero h1{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:46px;line-height:.92;letter-spacing:-1.8px;font-weight:400}
  .mc-hero h1 span{color:#ff2aa1}
  .mc-hero-copy>p:not(.mc-kicker){margin:16px 0 0;color:#c4d2cd;font-size:14px;line-height:1.65}
  .mc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  .mc-btn{
    min-height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 16px;text-decoration:none;border:1px solid transparent;
    font:900 11px/1 Manrope,Arial,sans-serif;cursor:pointer;
  }
  .mc-btn-primary{background:linear-gradient(135deg,#b5ff19,#68ef8c);color:#041a13}
  .mc-btn-secondary{border-color:rgba(49,225,193,.45);background:rgba(49,225,193,.07);color:#fff}
  .mc-section{padding:34px 0}
  .mc-section-head{margin-bottom:18px}
  .mc-section-head .mc-kicker{margin-bottom:8px}
  .mc-section-head h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:38px;line-height:1;letter-spacing:-1px;font-weight:400}
  .mc-section-head p{margin:12px 0 0;color:#aebdb8;font-size:13px;line-height:1.6}
  .mc-products{display:grid;gap:14px}
  .mc-product{
    overflow:hidden;border-radius:24px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(145deg,rgba(5,55,45,.92),rgba(0,27,22,.96));
    box-shadow:0 16px 40px rgba(0,0,0,.16);
  }
  .mc-product-art{
    position:relative;height:204px;display:grid;place-items:center;overflow:hidden;
    background:
      radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--mc-product-accent,#31e1c1) 22%,transparent),transparent 34%),
      linear-gradient(150deg,rgba(255,42,161,.055),transparent 48%);
  }
  .mc-product-art::before,.mc-product-art::after{
    content:"";position:absolute;border-radius:50%;pointer-events:none
  }
  .mc-product-art::before{
    width:230px;height:230px;border:1px solid rgba(255,255,255,.07);
    box-shadow:0 0 0 28px rgba(255,255,255,.012);
  }
  .mc-product-art::after{
    width:146px;height:146px;border:1px solid color-mix(in srgb,var(--mc-product-accent,#31e1c1) 25%,transparent);
    filter:drop-shadow(0 0 22px color-mix(in srgb,var(--mc-product-accent,#31e1c1) 16%,transparent));
  }
  .mc-packshot{
    position:relative;z-index:2;display:block;width:min(90%,320px);height:184px;
    overflow:visible;filter:drop-shadow(0 20px 24px rgba(0,0,0,.28));
  }
  .mc-product:hover .mc-packshot{transform:translateY(-2px)}
  .mc-packshot{transition:transform .28s ease}
  .mc-product-copy{padding:20px}
  .mc-product-top{display:flex;align-items:flex-start;gap:12px}
  .mc-product-top div{min-width:0;flex:1}
  .mc-product .mc-tag{
    display:inline-flex;padding:6px 8px;border-radius:999px;
    background:rgba(255,42,161,.10);border:1px solid rgba(255,42,161,.24);
    color:#ff91cf;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  }
  .mc-product h3{margin:9px 0 8px;font-size:23px;line-height:1.05;letter-spacing:-.5px}
  .mc-product p{margin:0;color:#b9c8c3;font-size:12px;line-height:1.55}
  .mc-product .mc-btn{width:100%;margin-top:17px}
  .mc-principles{display:grid;gap:10px}
  .mc-principle{
    display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;
    min-height:88px;padding:14px;border-radius:20px;
    border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);
  }
  .mc-principle-icon{
    width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
    border:1px solid rgba(49,225,193,.6);color:#b5ff19;font-size:18px;font-weight:900;
  }
  .mc-principle h3{margin:0 0 5px;font-size:14px}
  .mc-principle p{margin:0;color:#aebdb8;font-size:11px;line-height:1.45}
  .mc-final{
    margin-top:8px;padding:30px 20px;border-radius:28px;text-align:center;
    background:
      radial-gradient(circle at 50% 0%,rgba(255,42,161,.15),transparent 38%),
      linear-gradient(180deg,#07382d,#002018);
    border:1px solid rgba(181,255,25,.20)
  }
  .mc-final h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-size:36px;line-height:1}
  .mc-final p{margin:12px auto 0;max-width:440px;color:#c1d0cb;font-size:12px;line-height:1.55}
  .mc-final .mc-btn{width:100%;margin-top:18px}
  .care-information{padding-top:28px!important}
}
@media(max-width:420px){
  .mc-topbar{padding-inline:10px}
  .mc-brand img{width:86px}
  .mc-portal{display:none}
  .mc-shell{width:calc(100% - 22px)}
  .mc-hero-visual{min-height:270px}
  .mc-hero h1{font-size:42px}
  .mc-actions{grid-template-columns:1fr}
}


/* Mobile care product renders: standalone transparent assets. Desktop remains unchanged. */
@media(max-width:900px){
  .mc-product-art-image{height:236px;padding:10px;isolation:isolate;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--mc-product-accent) 18%,transparent),transparent 42%),linear-gradient(160deg,rgba(255,255,255,.025),rgba(0,0,0,.08))}
  .mc-product-art-image::before{width:260px;height:260px;border-color:color-mix(in srgb,var(--mc-product-accent) 22%,transparent);opacity:.75}
  .mc-product-art-image::after{display:none}
  .mc-packshot-image-wrap{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .mc-packshot-image{display:block;width:100%;height:100%;max-width:96%;max-height:216px;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 24px rgba(0,0,0,.28))}
  .mc-product-art-image + .mc-product-copy{border-top:1px solid color-mix(in srgb,var(--mc-product-accent) 20%,transparent)}
}
@media(max-width:420px){
  .mc-product-art-image{height:218px}
  .mc-packshot-image{max-height:198px}
}

/* Sexual Wellness mobile hero: dedicated PT-141 composition. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-sexual{
    min-height:332px;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
    border-radius:26px;
  }
  .mc-hero-visual.mc-hero-sexual::before{
    background:linear-gradient(180deg,rgba(0,18,14,0) 48%,rgba(0,26,20,.18) 72%,#001a14 100%);
  }
  .mc-hero-visual.mc-hero-sexual::after{display:none}
  .mc-hero:has(.mc-hero-sexual) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
  .mc-hero:has(.mc-hero-sexual) .mc-kicker{
    color:#ff2aa1;
    margin-bottom:8px;
  }
  .mc-hero:has(.mc-hero-sexual) h1{
    max-width:520px;
    font-size:44px;
    line-height:.94;
    letter-spacing:-1.5px;
  }
  .mc-hero:has(.mc-hero-sexual) .mc-hero-copy>p:not(.mc-kicker){
    max-width:560px;
    margin-top:14px;
    font-size:14px;
    line-height:1.58;
  }
}
@media(max-width:420px){
  .mc-hero-visual.mc-hero-sexual{
    min-height:300px;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
  }
  .mc-hero:has(.mc-hero-sexual) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
  .mc-hero:has(.mc-hero-sexual) h1{font-size:41px}
}


/* Mind & Sleep mobile hero: fill the full banner container. Desktop remains unchanged. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-mind-sleep{
    min-height:332px;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center 42%!important;
    background-color:#001a14;
    border-radius:26px;
    overflow:hidden;
  }
  .mc-hero-visual.mc-hero-mind-sleep::before{
    background:linear-gradient(180deg,rgba(0,18,14,.04) 20%,rgba(0,26,20,.16) 62%,#001a14 100%);
  }
  .mc-hero-visual.mc-hero-mind-sleep::after{display:none}
  .mc-hero:has(.mc-hero-mind-sleep) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
  .mc-hero:has(.mc-hero-mind-sleep) .mc-kicker{
    color:#ff2aa1;
    margin-bottom:8px;
  }
}
@media(max-width:420px){
  .mc-hero-visual.mc-hero-mind-sleep{
    min-height:300px;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center 42%!important;
  }
  .mc-hero:has(.mc-hero-mind-sleep) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
}

/* Dedicated Recovery mobile header: activates after the uploaded banner loads. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-recovery{
    aspect-ratio:5/4;
    min-height:0;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
    border-radius:26px;
    overflow:hidden;
  }
  .mc-hero-visual.mc-hero-recovery::before{
    background:linear-gradient(180deg,rgba(0,18,14,.01),rgba(0,26,20,.08));
  }
  .mc-hero-visual.mc-hero-recovery::after{display:none}
  .mc-hero:has(.mc-hero-recovery) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
}
@media(max-width:420px){
  .mc-hero:has(.mc-hero-recovery) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
}

/* Give the Glutathione PNG definite mobile dimensions before it decodes. */
@media(max-width:900px){
  .mobile-care .mc-glutathione-image{
    position:relative;
    z-index:2;
    width:auto;
    height:216px;
    min-width:0;
    max-width:96%;
    max-height:216px;
    object-fit:contain;
    object-position:center;
  }
}
@media(max-width:420px){
  .mobile-care .mc-glutathione-image{
    height:198px;
    max-height:198px;
  }
}

/* Dedicated Longevity mobile header: match the uploaded 5:4 artwork. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-longevity{
    aspect-ratio:5/4;
    min-height:0;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
    border-radius:26px;
    overflow:hidden;
  }
  .mc-hero-visual.mc-hero-longevity::before{
    background:linear-gradient(180deg,rgba(0,18,14,.01),rgba(0,26,20,.08));
  }
  .mc-hero-visual.mc-hero-longevity::after{display:none}
  .mc-hero:has(.mc-hero-longevity) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
}
@media(max-width:420px){
  .mc-hero:has(.mc-hero-longevity) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
}

/* Dedicated Performance mobile header: preserve the uploaded artwork and its safe margins. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-performance{
    aspect-ratio:5/4;
    min-height:0;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
    border-radius:26px;
    overflow:hidden;
  }
  .mc-hero-visual.mc-hero-performance::before{
    background:linear-gradient(180deg,rgba(0,18,14,.01),rgba(0,26,20,.08));
  }
  .mc-hero-visual.mc-hero-performance::after{display:none}
  .mc-hero:has(.mc-hero-performance) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
}
@media(max-width:420px){
  .mc-hero:has(.mc-hero-performance) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
}

/* Hair & Skin mobile header: match the image proportions so the full artwork stays visible. */
@media(max-width:900px){
  .mc-hero-visual.mc-hero-hair-skin{
    aspect-ratio:1468/1071;
    min-height:0;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-color:#001a14;
    border-radius:26px;
    overflow:hidden;
  }
  .mc-hero-visual.mc-hero-hair-skin::before,
  .mc-hero-visual.mc-hero-hair-skin::after{display:none}
  .mc-hero:has(.mc-hero-hair-skin) .mc-hero-copy{
    margin-top:22px;
    padding:0 8px;
  }
}
@media(max-width:420px){
  .mc-hero:has(.mc-hero-hair-skin) .mc-hero-copy{
    margin-top:18px;
    padding:0 4px;
  }
}

/* Mobile care buttons: plain labels and clear pointer, touch, and keyboard states. */
@media(max-width:900px){
  .mobile-care .mc-btn{
    transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  .mobile-care .mc-product .mc-btn{
    min-height:50px;
    font-size:12px;
    letter-spacing:.01em;
  }
  .mobile-care .mc-btn:focus-visible{
    outline:3px solid #31e1c1;
    outline-offset:4px;
  }
  .mobile-care .mc-btn:active{transform:translateY(0)}
}
@media(max-width:900px) and (hover:hover) and (pointer:fine){
  .mobile-care .mc-btn:hover{transform:translateY(-1px)}
  .mobile-care .mc-btn-primary:hover{
    background:#ff2aa1;
    border-color:#ff2aa1;
    color:#041a13;
    box-shadow:0 8px 22px rgba(255,42,161,.22);
  }
  .mobile-care .mc-btn-secondary:hover{
    background:rgba(255,42,161,.10);
    border-color:#ff2aa1;
    box-shadow:0 6px 18px rgba(255,42,161,.12);
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .mobile-care .mc-btn{transition:none}
  .mobile-care .mc-btn:hover{transform:none}
}

/* Mobile genetic-test CTA: a hot-pink outline with a traveling edge highlight. */
@media(max-width:900px){
  .mobile-care .mc-btn-test{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:2px solid #ff2aa1;
    background:#04251e;
    box-shadow:0 0 16px rgba(255,42,161,.24);
  }
  .mobile-care .mc-btn-test::before,
  .mobile-care .mc-btn-test::after{
    content:"";
    position:absolute;
    pointer-events:none;
  }
  .mobile-care .mc-btn-test::before{
    z-index:-2;
    left:50%;
    top:50%;
    width:200%;
    aspect-ratio:1;
    background:#ff2aa1;
    background:conic-gradient(#ff2aa1 0deg,#ff2aa1 265deg,#ffd1eb 300deg,#ff65bc 330deg,#ff2aa1 360deg);
    transform:translate(-50%,-50%) rotate(0turn);
    animation:mcGeneticBorderSweep 5s linear infinite;
  }
  .mobile-care .mc-btn-test::after{
    z-index:-1;
    inset:1px;
    border-radius:inherit;
    background:#04251e;
    transition:background-color .18s ease;
  }
  @keyframes mcGeneticBorderSweep{
    to{transform:translate(-50%,-50%) rotate(1turn)}
  }
}
@media(max-width:900px) and (hover:hover) and (pointer:fine){
  .mobile-care .mc-btn-test:hover::after{background:#142b22}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .mobile-care .mc-btn-test::before{
    animation:none;
    background:#ff2aa1;
  }
  .mobile-care .mc-btn-test::after{transition:none}
}