/* EvolvdRX identity. Layout and motion remain the reference build source implementation. */
/* 2026-10-04 EvolvdRX role fix: --gp-ink is a text-ink role (its own name
   says so), not a field colour, so it now matches --gp-text/Ink #202723
   instead of the Storm 900 #28332D the blind rebrand pass gave it. Every
   sitewide "color: var(--gp-ink)" rule in public/assets/evolvdrx-theme.css
   (headings, eyebrows, dialog text, etc.) now resolves correctly. --dark,
   --navy, --fern and the other field/background aliases below stay pinned
   to Storm 900 here directly, so they are unaffected by this change. */
html:root{--gp-canvas:#FFFFFF!important;--gp-surface:#FFFFFF!important;--gp-surface-strong:#FFFFFF!important;--gp-stone:#F0F2EC!important;--gp-stone-strong:#D3D9CE!important;--gp-ice:#F0F2EC!important;--gp-mint:#D3D9CE!important;--gp-moss:#556454!important;--gp-teal:#28332D!important;--gp-teal-dark:#28332D!important;--gp-evergreen:#28332D!important;--gp-ink:#202723!important;--gp-text:#202723!important;--gp-muted:#67716A!important;--gp-line:#D3D9CE!important;--gp-line-strong:#556454!important;--fern:#28332D!important;--sage:#C7C8AC!important;--dark:#28332D!important;--dark-mid:#202723!important;--body:#202723!important;--muted:#67716A!important;--white:#FFFFFF!important;--cream:#FFFFFF!important;--sky:#FFFFFF!important;--navy:#28332D!important;--navy-mid:#202723!important;--gold:#556454!important;--gold-light:#C7C8AC!important;--cream-dark:#F0F2EC!important}
html,body{background:#FFFFFF!important}
body,button,input,select,textarea{font-family:Geist,sans-serif!important}
h1,h2,h3,h4,.h-line,.h-word,.c-headline,.cc-title,.quiz-title,.quiz-question,.quiz-intake-title,.quiz-result-title,.q-title,.fixed-line,#trust .trust-number{font-family:var(--brand-display-font),system-ui,-apple-system,'Segoe UI',sans-serif!important;font-weight:600!important;letter-spacing:-.025em}
h3,h4{font-weight:500!important}
.fixed-line{font-weight:400!important}
/* Montserrat's descenders need more room than the source's 88px display row.
   Keep the clipping window and every animation step the same height. */
#hero .clip{--evolvdrx-rotator-size:clamp(44px,7vw,84px);--evolvdrx-rotator-height:max(clamp(60px,8vw,88px),calc(var(--evolvdrx-rotator-size)*1.25));height:var(--evolvdrx-rotator-height)}
#hero .rotating span{height:var(--evolvdrx-rotator-height);font-size:var(--evolvdrx-rotator-size);line-height:1.2;white-space:nowrap;overflow:hidden}
@media(max-width:640px){#hero .clip{--evolvdrx-rotator-size:clamp(32px,9vw,52px);--evolvdrx-rotator-height:clamp(48px,11vw,68px)}}
nav,.mobile-menu,.mobile-menu-header{background:#FFFFFF!important}
.logo img{width:126px!important;height:auto!important;max-height:42px!important;object-fit:contain}
.quiz-brand-text{display:block;width:116px;height:35px;font-size:0!important;background:#28332D;mask:url('/assets/evolvdrx/wordmark.svg') center/contain no-repeat;-webkit-mask:url('/assets/evolvdrx/wordmark.svg') center/contain no-repeat}
.ft-wm-text{font-size:0!important;width:100%;height:clamp(100px,19vw,280px);background:#C7C8AC;mask:url('/assets/evolvdrx/wordmark.svg') center/contain no-repeat;-webkit-mask:url('/assets/evolvdrx/wordmark.svg') center/contain no-repeat}
.ft-pay{display:none!important}
/* 2026-10-04 EvolvdRX role fix: solid CTA on a light ground is Storm
   #556454 with a White label, hover darkens to #424F43 (was Storm 900
   #28332D base with an Ink hover, a dark-field colour in a button-fill
   role with no visible hover feedback since base and hover matched). */
.btn-gold{background:#556454!important;color:#FFFFFF!important;border-color:#556454!important}
.btn-navy,.btn-dark{color:#FFFFFF!important}
.btn-navy:hover,.btn-gold:hover,.btn-dark:hover{background:#424F43!important}
html body :is(.btn-navy,.hims-btn-solid,.quiz-continue,.next-btn,.products-continue){background:var(--sov-btn-primary-light-bg)!important}
.evolvdrx-preview-badge{position:fixed;left:12px;bottom:12px;z-index:99999;border:1px solid rgba(32,39,35,.12);border-radius:6px;background:#FFFFFFeF;color:#202723;font:500 10px/1.4 Geist,sans-serif!important;letter-spacing:.06em;padding:8px 10px;cursor:pointer;backdrop-filter:blur(8px)}
body:has(#intakeWrapper.active) #evolvdrx-preview-badge { display: none; }
.evolvdrx-preview-dialog{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:85dvh;padding:32px;background:#FFFFFF;color:#28332D;border:1px solid rgba(32,39,35,.12);border-radius:20px;box-shadow:0 30px 90px #28332D40}
.evolvdrx-preview-dialog::backdrop{background:#28332D99;backdrop-filter:blur(8px)}
.evolvdrx-preview-dialog h2{font:400 36px/1.1 var(--brand-display-font),system-ui,-apple-system,'Segoe UI',sans-serif!important;margin:16px 0}
.evolvdrx-preview-dialog p{font:400 14px/1.7 Geist,sans-serif;color:#202723;margin:16px 0}
.evolvdrx-preview-dialog button{padding:12px 20px;background:#28332D;color:#FFFFFF;border:0;border-radius:999px;cursor:pointer;font:500 13px Geist,sans-serif}
:focus-visible{outline:2px solid #556454!important;outline-offset:4px}
@media(max-width:767px){.logo img{width:108px!important;max-height:35px!important}.evolvdrx-preview-badge{font-size:9px!important;padding:6px 8px;bottom:8px;left:8px}.ft-wm-text{height:110px}.quiz-page{padding-bottom:56px}}
.pc.pc-a{background:linear-gradient(125deg,#28332D 5%,#202723 52%,#556454 100%)!important}
.pc.pc-b{background:linear-gradient(125deg,#202723 5%,#556454 62%,#C7C8AC 100%)!important}
html body .c-headline em,html body .c-headline span,html body .fixed-line em,html body .cc-title em,body :is(h1,h2,h3)[class] :is(span,em,strong){font-family:var(--brand-display-font),system-ui,-apple-system,'Segoe UI',sans-serif!important;font-weight:400!important}
body :is(h1,h2,h3) :is(span,em,strong){font-family:var(--brand-display-font),system-ui,-apple-system,'Segoe UI',sans-serif!important}
/* Keep the source expert split inside its grid at intermediate widths. */
.expert-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
.expert-inner>*{min-width:0}
.expert-photo{max-width:100%}
.expert-photo>img{max-width:min(520px,100%)}
.expert-creds{right:0}
@media(max-width:900px){.expert-inner{grid-template-columns:1fr}}
.expert-photo picture{display:block;max-width:100%}
.expert-photo picture img{display:block;width:100%;max-width:520px;height:auto;border-radius:var(--r-card,24px)}
/* The complete vial group must stay visible in the source's portrait media wells. */
.product-landing .hero-slide img[src*="/assets/evolvdrx/product-"],
.product-landing img.membership-tile[src*="/assets/evolvdrx/product-"]{
  object-fit:contain!important;
  background:#F0F2EC;
}
/* Product catalog: shared framing and readable product choices across categories. */
.evolvdrx-catalog{position:relative;z-index:5;padding:0 clamp(18px,3vw,48px) 26px;margin-top:30px;color:#28332D}
.evolvdrx-catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}
.evolvdrx-catalog-kicker{display:block;font-size:13px;font-weight:600;line-height:1.5;letter-spacing:.01em;text-transform:none;color:#202723}
.evolvdrx-catalog-heading h3,.evolvdrx-catalog-heading h2{font-size:clamp(28px,3vw,42px);line-height:1.08;margin:8px 0 0;color:#28332D;text-shadow:none}
.evolvdrx-catalog-hint{white-space:nowrap;font-size:11px;letter-spacing:.05em;padding-bottom:3px}
.evolvdrx-catalog-hint span{font-size:23px;margin-left:10px}
.evolvdrx-product-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:2px 2px 16px;scrollbar-width:thin;scrollbar-color:#556454 transparent;align-items:stretch}
.evolvdrx-product-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;border-radius:20px;background:#FFFFFF;color:#28332D;border:1px solid rgba(32,39,35,.12);scroll-snap-align:start;text-decoration:none!important;box-shadow:0 7px 18px #28332D06;transition:transform .2s,border-color .2s}
.evolvdrx-product-card:hover{border-color:#556454;transform:translateY(-2px)}
.evolvdrx-product-card:focus-visible{outline-offset:-4px}
.evolvdrx-product-meta{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:19px 20px 0;font-size:13px;font-weight:450;letter-spacing:0;color:#202723;text-transform:none;line-height:1.5;min-height:34px}
.evolvdrx-product-meta span:last-child{font-size:19px}
.evolvdrx-product-art{height:238px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 85%,#ded3bb80,transparent 68%);margin:0 10px}
.evolvdrx-product-art img{display:block;width:100%;height:100%;object-fit:contain;max-width:270px;transition:transform .4s ease}
.evolvdrx-product-card:hover .evolvdrx-product-art img{transform:translateY(-4px)}
.evolvdrx-product-copy{padding:14px 20px 24px;display:flex;flex-direction:column;flex:1;gap:12px}
.evolvdrx-product-copy h3,.evolvdrx-product-copy h4{font-family:var(--brand-display-font),system-ui,-apple-system,'Segoe UI',sans-serif!important;font-size:28px!important;line-height:1.04!important;font-weight:400!important;margin:0!important;letter-spacing:-.025em!important;color:#28332D!important;text-shadow:none!important;min-height:58px}
.evolvdrx-product-copy p{font-size:12px!important;line-height:1.6!important;color:#202723!important;margin:0!important;font-weight:450!important;min-height:58px}
/* textLink role (card action label, emphasis-order ruling 2026-10-02):
   weight 600, size unchanged at 13px - it was the emphasized line under
   the product card copy before the type pass dropped it to 450. */
.evolvdrx-product-link{margin-top:auto;padding-top:14px;border-top:1px solid rgba(32,39,35,.12);font-size:13px;font-weight:600;display:flex;justify-content:space-between;color:#28332D}
.evolvdrx-treatment-page{background:#FFFFFF;color:#28332D}
.evolvdrx-detail-main{max-width:1440px;padding:100px 48px 72px;margin:0 auto}
.evolvdrx-back{display:inline-block;font-size:13px;font-weight:600;letter-spacing:0;color:#28332D;margin:18px 0 30px;text-decoration:none}
.evolvdrx-detail-hero{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(32px,5vw,78px);align-items:start}
.evolvdrx-detail-visual{min-height:620px;position:sticky;top:92px;background:radial-gradient(ellipse at 50% 75%,#FFFFFF,#D3D9CE);border-radius:26px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}
.evolvdrx-detail-brand{font-size:12px;font-weight:450;letter-spacing:0;color:#202723}
.evolvdrx-detail-visual img{width:100%;height:510px;object-fit:contain}
.evolvdrx-detail-packnote{font-size:12px;font-weight:450;color:#202723}
.evolvdrx-detail-copy{padding:24px 0}
.evolvdrx-detail-copy h1{font-size:clamp(44px,5.7vw,78px);line-height:1;margin:18px 0 24px;letter-spacing:-.025em}
.evolvdrx-detail-copy>p{font-size:14px;line-height:1.85;font-weight:450;color:#202723;margin:18px 0}
.evolvdrx-detail-copy .evolvdrx-detail-lead{font-size:19px;line-height:1.5;font-weight:450;color:#28332D}
.evolvdrx-detail-facts{border-top:1px solid rgba(32,39,35,.12);margin:28px 0}
.evolvdrx-detail-facts>div{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid rgba(32,39,35,.12);font-size:12px}
.evolvdrx-detail-facts span{font-weight:450;color:#202723}
.evolvdrx-detail-facts strong{font-weight:700;text-align:right}
.evolvdrx-detail-primary{display:inline-flex;justify-content:center;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:9999px;background:#28332D;color:#FFFFFF;text-decoration:none;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:none}
.evolvdrx-detail-primary:hover{background:#202723}
.evolvdrx-detail-secondary{display:inline-flex;justify-content:center;align-items:center;height:48px;padding:0 24px;border-radius:9999px;border:0;background:rgba(40,51,45,.08);color:#28332D;margin-top:10px;font-size:15px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none}
.evolvdrx-detail-secondary:hover{background:rgba(40,51,45,.14)}
.evolvdrx-detail-copy .evolvdrx-detail-small{font-size:12px;font-weight:450;line-height:1.65;margin:15px 12px;color:#202723}
.evolvdrx-detail-safety{border-top:1px solid rgba(32,39,35,.12);margin-top:26px;font-size:12px;font-weight:450;color:#202723;line-height:1.8}
.evolvdrx-detail-safety summary{padding:18px 0;cursor:pointer;color:#28332D;font-size:16px;font-weight:600}
.evolvdrx-detail-safety p{margin-bottom:16px;color:#202723}
.evolvdrx-detail-next{padding:100px 0 80px;border-bottom:1px solid rgba(32,39,35,.12)}
.evolvdrx-detail-next h2,.evolvdrx-detail-related h2{font-size:clamp(34px,4vw,54px);line-height:1.1;margin:16px 0 34px}
.evolvdrx-detail-next>div{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
/* glyph role (spec 8/8.1): weight 500 or more. Emphasis-order ruling
   (2026-10-02): round 4's bump to 600 overshot - it is a supporting
   numeral beside the 450 description just below (.evolvdrx-detail-next p),
   not the emphasized piece in its group; before the type pass it was
   400. 500 restores the glyph floor without the under-floor 450. */
.evolvdrx-detail-next article>span{font-size:12px;font-weight:500;color:#202723}
.evolvdrx-detail-next h3{font-size:29px;line-height:1.1;margin:15px 0}
.evolvdrx-detail-next p{font-size:13px;font-weight:450;line-height:1.8;color:#202723}
.evolvdrx-detail-related{padding-top:68px}
.evolvdrx-detail-related .evolvdrx-catalog-heading a{font-size:13px;font-weight:600;letter-spacing:0;color:#202723;white-space:nowrap;margin-bottom:34px}
@media(min-width:901px){.evolvdrx-product-rail{grid-template-columns:none;grid-auto-columns:calc((100% - 42px)/4);justify-content:safe center}}
@media(min-width:901px){.evolvdrx-product-rail:has(>.evolvdrx-product-card:nth-child(5)){grid-template-columns:none;grid-auto-columns:calc((100% - 56px)/4.3)}}
@media(max-width:900px){.evolvdrx-product-rail{grid-template-columns:none;grid-auto-columns:265px}.evolvdrx-catalog-heading{margin-bottom:18px;align-items:center}.evolvdrx-catalog-heading h3{font-size:28px}.evolvdrx-catalog-hint{font-size:9px}.evolvdrx-catalog-kicker{font-size:12px}.evolvdrx-product-meta{font-size:12px}.evolvdrx-product-art{height:220px}.evolvdrx-detail-main{padding:80px 22px 45px}.evolvdrx-detail-hero{grid-template-columns:1fr;gap:22px}.evolvdrx-detail-visual{position:relative;top:auto;min-height:0;padding:24px}.evolvdrx-detail-visual img{height:310px}.evolvdrx-detail-copy{padding:10px 0}.evolvdrx-detail-copy h1{font-size:48px}.evolvdrx-detail-primary{height:44px;padding:0 22px;font-size:14px}.evolvdrx-detail-secondary{height:44px;padding:0 22px;font-size:14px}.evolvdrx-detail-next{padding:60px 0 44px}.evolvdrx-detail-next>div{grid-template-columns:1fr;gap:30px}.evolvdrx-detail-next h3{margin:10px 0}.evolvdrx-detail-related .evolvdrx-catalog-heading{display:block}.evolvdrx-detail-related .evolvdrx-catalog-heading a{display:inline-block;margin:0 0 20px}.evolvdrx-detail-related .evolvdrx-product-rail{margin-right:-22px}.evolvdrx-detail-related{padding-top:44px}}
@media(prefers-reduced-motion:reduce){.evolvdrx-product-card,.evolvdrx-product-art img{transition:none}.evolvdrx-product-card:hover,.evolvdrx-product-card:hover .evolvdrx-product-art img{transform:none}}


/* The weight-loss card rail replaces the glass cards inside each scene.
   Its dimensions, spacing, scrolling and hover treatment come from .hims-cards
   and .wlcard; lifestyle photography and backgrounds retain their source rules. */
.evolvdrx-home-catalog{order:4}
.cond:has(> .evolvdrx-home-catalog){min-height:0;padding-bottom:32px}
.evolvdrx-scene-visual{position:relative;min-height:120vh}
.cond>.evolvdrx-home-catalog{margin-top:-200px}
.evolvdrx-home-catalog .wlcard-catalog-summary{min-height:4.5em;margin:10px 0 0;color:var(--wlcard-text);font:400 13px/1.5 Geist,sans-serif}
/* textLink role (card action label, emphasis-order ruling 2026-10-02):
   weight 600, size unchanged at 13px (textLink's set is 13 to 16) - it
   was the emphasized line under the catalog summary before the type
   pass dropped it to 500. */
.evolvdrx-home-catalog .wlcard-catalog-link{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--wlcard-text);font:600 13px/1.5 Geist,sans-serif}
/* The reference build's desktop cutouts are bottom-anchored and up to 875px tall.
   A 120vh stage is shorter than those photos in a windowed browser. Keep the
   source widths/alignment, but reserve enough height for the complete photo.
   Width-based staging also avoids pushing people far below the headline on
   tall displays. The source's mobile composition remains in normal flow. */
@media(min-width:901px){
  .evolvdrx-scene-visual{min-height:1000px}
  /* Like weight loss, the photo continues behind the product rail. Fade at
     the photo's own bottom, never at the card tops; the card gaps must reveal
     the continuing image and its soft lower edge. */
  html body :is(#menopause,#hair,#bloodwork) .evolvdrx-scene-visual :is(.hormone-people-img,.hair-img-wrap-img){
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)!important;
  }
}
@media(min-width:641px) and (max-width:900px){
  /* Use the source's mobile reading order at tablet widths too. Its desktop
     fallback makes portraits translucent behind the headline and buttons. */
  .evolvdrx-scene-visual{display:contents}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .cond-text{display:contents!important}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .c-eyebrow{order:1;padding:24px 32px 0;position:relative;z-index:6}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .c-headline{order:1;padding:0 32px;font-size:48px;margin-bottom:0;position:relative;z-index:6}
  /* 2026-09-30 client round 3, item I: #bloodwork's new lead line ("Better
     decisions start with better data.") joins the eyebrow/headline order
     tier at this tablet width too, so it renders directly under the
     headline. #bloodwork only; it is the only section with a .c-lead. */
  html body #bloodwork .c-lead{order:1;padding:0 32px;position:relative;z-index:6}
  /* 2026-09-30: .c-sub had no explicit order here either, so it defaulted
     to order:0, tied with .cond-bg, and rendered before the eyebrow and
     headline (document order breaks the tie) for every section in the
     :is() list, not just #bloodwork, the same bug the max-width:640px
     block in app/legacy-home.css had for
     #hormones/#menopause/#hair/#sexual-health. Folded into the shared
     group instead of staying #bloodwork only. The order fix alone left
     .c-sub without the 32px side padding every other order:1 element here
     carries (.c-eyebrow, .c-headline, .c-btns), so it rendered flush
     against the screen edge once .cond-text's own padding stopped applying
     under display:contents; added the same 32px gutter here too. */
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .c-sub{order:1;padding:0 32px}
  /* 2026-09-30 contrast pass: the shared .c-sub rule above never picked up
     the position/z-index its order:1 siblings (.c-eyebrow, .c-headline,
     .c-lead) carry. Left position:static, .c-sub paints BEHIND the
     section's own absolutely positioned, z-index:0 .cond-bg (CSS stacking
     rule: any positioned box paints above static in-flow content
     regardless of flex order), so it rendered dimmed by whatever sits on
     top of it instead of in front where the color/contrast rules can
     reach it. Scoped to #bloodwork only for this fix, matching this
     round's #bloodwork-only scope; not rolled into the shared :is() list
     above the way the order/padding fix was. */
  html body #bloodwork .c-sub{position:relative;z-index:6}
  /* Same fix, #menopause's own tablet contrast pass (client round 3): its
     .c-sub washes out over the lighter upper area of the section's photo
     at this breakpoint for the same reason #bloodwork's did, staying
     position:static and painting behind .cond-bg. Scoped to #menopause
     only, same as the #bloodwork line above it. */
  html body #menopause .c-sub{position:relative;z-index:6}
  /* Same fix, #hormones/#hair/#sexual-health's own tablet contrast pass:
     .c-sub washes out over the lighter upper area of each section's photo
     at this breakpoint for the same reason #bloodwork's and #menopause's
     did, staying position:static and painting behind .cond-bg. */
  html body #hormones .c-sub{position:relative;z-index:6}
  html body #hair .c-sub{position:relative;z-index:6}
  html body #sexual-health .c-sub{position:relative;z-index:6}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .c-btns{order:3;position:relative;z-index:7;margin-top:-40px;margin-bottom:10px;padding:0 32px;gap:8px}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) :is(.hormone-img-wrap,.longevity-img-wrap,.hair-img-wrap,.sexual-img-wrap){order:2;position:relative!important;inset:auto!important;width:100%!important;height:600px!important;min-height:0!important;overflow:hidden!important;z-index:2!important}
  /* Carry the source phone fades into this extended stacked composition. */
  html body .cond:is(#hormones,#menopause,#hair,#sexual-health,#bloodwork) :is(.hormone-img-wrap,.hair-img-wrap,.sexual-img-wrap){-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)!important}
  html body #longevity .longevity-img-wrap{-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 88%,transparent 100%)!important}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) :is(.hormone-people-img,.longevity-img-wrap-img,.hair-img-wrap-img,.sexual-img-wrap-img){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;object-position:center top!important;transform:none!important;opacity:1!important}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) :is(.hormone-img-wrap,.longevity-img-wrap,.hair-img-wrap,.sexual-img-wrap)::before{display:none!important}
  html body .cond:is(#hormones,#menopause,#longevity,#hair,#sexual-health,#bloodwork) .cond-path{display:none}
  .cond>.evolvdrx-home-catalog{margin-top:0}
}
/* Preserve the source weight-loss composition at a stable photo size instead
   of shrinking the painted couple whenever the browser becomes shorter. */
@media(min-width:641px){
  html body #weight-loss{--evolvdrx-wl-photo-height:clamp(720px,72vw,1000px)}
  html body #weight-loss.hims-section{min-height:calc(var(--evolvdrx-wl-photo-height) + 520px)!important}
  html body #weight-loss .hims-person-img{max-height:var(--evolvdrx-wl-photo-height)!important}
}
@media(max-width:640px){
  .evolvdrx-scene-visual{display:contents}
  .cond>.evolvdrx-home-catalog{margin-top:0}
  /* emphasis-order ruling (2026-10-02): the link stays out of this phone
     rule - textLink's size set is 13 to 16, and shrinking it to 12px here
     would put it back below that floor. Only the summary drops to 12px. */
  .evolvdrx-home-catalog .wlcard-catalog-summary{font-size:12px}
}
/* /consult final CTA band (#final-cta) is an Evergreen gradient; restore the
   heading's intended Old Lace color, which evolvdrx-theme.css's h1,h2,h3
   color override otherwise paints Evergreen-on-Evergreen. */
#final-cta .fcta-h2{color:#FFFFFF!important}

/* ===========================================================================
   2026-10-01 TYPE PASS, system layer (spec: evolvdrx-copy-verification/
   client-round-2026-10-01/type-pass/spec.md, sections 4 and 5).
   Homepage (app/page.tsx sections) and shared chrome (header/nav, mobile
   menu, footer, preview badge, FAQ, generic button classes) ONLY. The
   service-page routes (testosterone/hormones/sexual-health/consult/
   founder/treatments/quiz) are a separate builder's scope and are
   untouched here. #bloodwork and its labs- and lp-prefixed classes are the
   approved hers labs block and are explicitly excluded below wherever a
   shared class (.btn-w, .btn-o, .c-eyebrow) would otherwise reach it.
   Every selector here is prefixed `html body` (or carries an id) to
   out-specificity the legacy `!important` layers in
   public/assets/evolvdrx-theme.css, app/global-style.ts and the home-only
   inline stylesheet from app/legacy-home-style.ts, which renders INSIDE
   <body> (after this file's own <link>, which sits in <head>) and would
   otherwise win plain-class ties on document order.
   =========================================================================== */

:root{
  /* Display headline font, loaded from Google Fonts at runtime (see the
     preconnect/stylesheet links in app/layout.tsx and the static HTML
     heads) since the CSP is self-only and we cannot ship font files right
     now. To self-host later, drop the woff2 files in
     public/assets/evolvdrx/ and swap this for an @font-face plus this same
     token. */
  --brand-display-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Weight scale: one job per weight (spec section 4). */
  --sov-w-body:400;       /* body, leads, fine print, prices on light grounds */
  --sov-w-body-dark:400;  /* same roles on dark/photo grounds */
  --sov-w-ui:500;         /* nav links, list items, chip labels */
  --sov-w-strong:600;     /* buttons, eyebrows, card/step titles, footer headings */
  --sov-w-emph:600;       /* short inline `strong` emphasis only */

  /* Colour tokens (spec section 4). Most already exist as --fern/--body/
     --muted/--accent-light/--white/--sage; named again here under the
     spec's own vocabulary for this pass's rules to read either way. */
  --sov-ink:#28332D;
  --sov-c-body:#202723;
  --sov-muted:#67716A;
  --sov-on-dark:#FFFFFF;
  --sov-on-dark-muted:rgba(255,255,255,.82);
  --sov-on-dark-accent:#C7C8AC;

  /* Button tokens (spec section 5). */
  --sov-btn-radius:9999px;
  --sov-btn-h:48px;
  --sov-btn-h-phone:44px;
  --sov-btn-h-header:40px;
  --sov-btn-pad:0 24px;
  --sov-btn-pad-phone:0 22px;
  --sov-btn-pad-phone-pair:0 20px;
  --sov-btn-primary-light-bg:#556454;
  --sov-btn-primary-light-fg:#FFFFFF;
  --sov-btn-primary-light-hover:#424F43;
  --sov-btn-primary-dark-bg:#FFFFFF;
  --sov-btn-primary-dark-fg:#202723;
  --sov-btn-primary-dark-hover:#F0F2EC;
  --sov-btn-secondary-light-bg:rgba(32,39,35,.06);
  --sov-btn-secondary-light-hover:rgba(32,39,35,.12);
  --sov-btn-secondary-dark-bg:rgba(0,0,0,.33);
  --sov-btn-secondary-dark-hover:rgba(0,0,0,.42);
}

/* --- Hero rotating line: the light display role (type-pass spec 10.8,
   owner ruling 2026-10-03). Montserrat 200 at -0.02em and line-height
   1.2, sized by #hero .clip above (clamp(44px,7vw,84px), and
   clamp(32px,9vw,52px) at 640px and under), exactly as it shipped before
   the type pass. The one selector allowed a weight under 400, listed in
   DISPLAY_ALLOWLIST (app/type-system-guard.test.ts) and
   LIGHT_DISPLAY_LINES (scripts/type-roles.mjs). --- */
html body #hero .rotating span{font-weight:200!important}

/* --- Eyebrows and kickers: sentence case, 13/12px, 600, 0.01em tracking.
   Colour is left alone everywhere in this group: every one of these
   classes already resolves Evergreen on a light ground or Khaki Beige on
   a dark ground through an existing, more specific rule (verified live at
   4191), so recolouring here would only risk fighting that rule for no
   visual change. #footer .ft-col-title's own colour is handled in the
   footer block below (it is not yet Khaki Beige). --- */
html body .c-eyebrow,
html body .hims-eyebrow,
html body .eyebrow,
html body .nav-tagline,
html body .pc-label,
html body .pc-kicker,
html body .hn-label,
html body .trust-label,
html body #footer .ft-col-title{
  text-transform:none!important;
  font-weight:var(--sov-w-strong)!important;
  font-size:13px!important;
  letter-spacing:.01em!important;
}
@media(max-width:767px){
  /* #footer .ft-col-title is excluded here: footer heading stays 13px at
     every width (spec 8.1), unlike the rest of this group which drops to
     12px under 768px. */
  html body .c-eyebrow,
  html body .hims-eyebrow,
  html body .eyebrow,
  html body .nav-tagline,
  html body .pc-label,
  html body .pc-kicker,
  html body .hn-label,
  html body .trust-label{
    font-size:12px!important;
  }
}
/* emphasis-order ruling (2026-10-02): .hsc-label is the lead-in ("Raise
   your", "Unsure where") that introduces each hero shortcut card's key
   term below it, not an eyebrow - the type pass had it matching the
   shared eyebrow group above (600, sentence case), which made it heavier
   than .hsc-name, the piece it introduces. Lead-in role: weight 500
   (var(--sov-w-ui)), 13px desktop / 12px phone, 0 tracking, sentence
   case, no colour set here - the existing rules already give it Dark
   Khaki on the light cards, and html body .hsc-start .hsc-label below
   keeps its own light-ink colour for the dark start card. */
html body .hsc-label{text-transform:none!important;font-weight:var(--sov-w-ui)!important;font-size:13px!important;letter-spacing:0!important}
@media(max-width:767px){
  html body .hsc-label{font-size:12px!important}
}
/* .hsc-name (and its em accent): emphasis-order ruling (2026-10-02) - key
   term role, weight 600 (var(--sov-w-strong)) at every width, tracking 0.
   The old dark-ground 500 override below (hsc-start's "to begin?" and its
   em "Start here") is gone so every hsc-name reads at the same emphasized
   weight, light or dark card alike. */
html body .hsc-name,
html body .hsc-name em{
  font-weight:var(--sov-w-strong)!important;
  letter-spacing:0!important;
}
/* .hsc-start's label sat under the 0.8 alpha floor for light ink on a
   dark ground. */
html body .hsc-start .hsc-label{color:rgba(255,255,255,.82)!important}

/* --- Nav links: 14px 500 Dark Khaki (desktop nav and the home page's own
   embedded nav share this class; mobile menu links are already 17px 500
   Evergreen and are left alone). --- */
html body .nav-links a{color:var(--sov-c-body)!important;font-weight:var(--sov-w-ui)!important}

/* --- Leads and body on the homepage: 450 on light grounds, 500 on dark or
   photo grounds. Ground is assigned per actual rendered section (verified
   live at 4191): #hormones/#menopause/#sexual-health/#consult sit on the
   light "hormone-grayblue"/"bg-warm"/"bg-blue" main background; #hair and
   #system/#trust's card/panel text are dark. #bloodwork is
   excluded throughout (approved labs block). --- */
html body #hormones .c-sub,
html body #menopause .c-sub,
html body #sexual-health .c-sub,
html body .hims-sub,
html body #trust .sec-sub,
html body #faq .faq-sub,
html body .cc-sub,
html body #faq .faq-answer p{
  font-weight:var(--sov-w-body)!important;
}
html body #hair .c-sub,
html body #system .sys-desc,
html body #trust .trust-desc,
html body .wlcard-catalog-summary,
html body .wlcard-benefit,
html body .wlcard-price,
html body .pc-sub{
  font-weight:var(--sov-w-body-dark)!important;
}

/* cc-sub only renders in #consult (light); its own global-style.ts colour
   override (id+2 classes, !important) still wins the size/weight edit
   already made at the source (app/legacy-home-style.ts), so it is undone
   here with matching specificity plus this file's extra type selectors. */
html body #consult.bg-blue .cc-sub{color:var(--sov-c-body)!important}
html body #faq .faq-answer p{color:var(--sov-c-body)!important}
html body .hims-disc{font-size:12px!important;font-weight:var(--sov-w-body)!important;color:var(--sov-muted)!important}
html body .wlcard-price-note{font-size:12px!important;font-weight:var(--sov-w-body-dark)!important;color:rgba(255,255,255,.88)!important}

/* --- Footer: links 14px 500 Old Lace .82; .ft-tag 14px 450 Old Lace .82;
   .ft-legal/.ft-disc 12px 450 Old Lace .72; .ft-col-title Khaki Beige (its
   type is handled by the eyebrow-group rule above). Sizes/weights for
   .ft-tag/.ft-links a/.ft-contact/.ft-legal/.ft-disc were already moved
   to these exact values at the source (app/legacy-home-style.ts,
   app/legacy-home.css, public/assets/evolvdrx-theme.css); only the
   off-palette mint rgba(240,242,236) colour needs overriding here. --- */
html body #footer .ft-tag,
html body #footer .ft-contact,
html body #footer .ft-links a,
html body #footer .ft-contact a{
  color:var(--sov-on-dark-muted)!important;
}
html body #footer .ft-col-title{color:var(--sov-on-dark-accent)!important}
html body #footer .ft-legal,
html body #footer .ft-disc{
  color:rgba(255,255,255,.72)!important;
}

/* --- Titles --- */
html body .wlcard-title{font-weight:var(--sov-w-strong)!important;letter-spacing:-.01em!important}
html body .sys-name{font-weight:var(--sov-w-strong)!important}
html body #faq .faq-item summary{font-weight:var(--sov-w-strong)!important;font-size:16px!important;color:var(--sov-ink)!important}
/* .faq-section-label stays the display font; raised to its 28px floor (was 26px).
   2026-10-01 type pass (spec 8.1): every headline tracks at exactly
   -0.025em, which supersedes the earlier -0.01em client tweak (was
   +0.02em before that). */
html body .faq-section-label{font-size:28px!important;letter-spacing:-.025em!important}
/* .cc-title (#consult only) was the display font at 16px, under its 28px floor;
   becomes a Montserrat step/small-card title at the same 16px, with its
   em accent moved from Faded Copper to Dark Khaki. */
html body #consult .cc-title{
  font-family:Geist,sans-serif!important;
  font-weight:var(--sov-w-strong)!important;
  font-size:16px!important;
  letter-spacing:-.01em!important;
}
/* The em is a colour accent only (Dark Khaki); type pass round 4 sets its
   weight/tracking to inherit from the title's own 600 at -0.01em (html
   body #consult .cc-title, above) instead of the body-role 450/0 it had.
   Plain inherit alone is not enough: line 33's generic
   "html body .cc-title em{font-weight:400!important}" still matches this
   em, so font-weight needs its own !important inherit here to out-
   specify that rule rather than fall through to it. */
html body #consult.bg-blue .cc-title em{
  font-family:Geist,sans-serif!important;
  font-style:normal!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
  color:var(--sov-c-body)!important;
}
/* .cc-cta: textLink role (card action label, emphasis-order ruling
   2026-10-02 - it is the "Explore treatment" style line under each
   condition card title, sitting inside the card's own <a> ancestor).
   Weight 600 everywhere now: the light-variant cond sections
   (hormones/menopause/longevity/sexual-health/consult) here, and the
   base value in legacy-home.css/legacy-home-style.ts (#hair, the one
   dark cond section) - it was the emphasized line in its group before
   the type pass dropped it to finePrint's 450, and this restores that. */
html body #hormones .cc-cta,
html body #menopause .cc-cta,
html body #longevity .cc-cta,
html body #sexual-health .cc-cta,
html body #consult .cc-cta{
  font-weight:var(--sov-w-strong)!important;
}

/* ===========================================================================
   Buttons (spec section 5): one pill shape everywhere in scope. Light vs
   dark/photo fill is assigned per actual rendered section ground, verified
   live at 4191 (same grounds as the leads/body block above). #hair is the
   one dark cond-section btn-w/btn-o pair in scope; #bloodwork's
   .btn-w/.btn-o (both carry a .labs-btn modifier) are excluded throughout.
   =========================================================================== */
html body :is(.btn-w,.btn-o):not(.labs-btn),
html body .btn-navy{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:var(--sov-btn-h)!important;
  padding:var(--sov-btn-pad)!important;
  border:0!important;
  border-radius:var(--sov-btn-radius)!important;
  font-family:Geist,sans-serif!important;
  font-size:15px!important;
  font-weight:var(--sov-w-strong)!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  background-image:none!important;
}
html body .btn-navy.nav-cta-desktop{height:var(--sov-btn-h-header)!important}
/* The header CTA is a desktop control; under 1100px the menu carries its
   own CTA and evolvdrx-theme.css hides this one, which the .btn-navy display
   rule above had overridden on the static /consult and /hormones pages. */
@media(max-width:1100px){html body nav .btn-navy.nav-cta-desktop{display:none!important}}
@media(max-width:767px){
  html body :is(.btn-w,.btn-o):not(.labs-btn),
  html body .btn-navy{
    height:var(--sov-btn-h-phone)!important;
    padding:var(--sov-btn-pad-phone)!important;
    font-size:14px!important;
  }
  /* Two buttons side by side (every .c-btns pair) get the tighter phone
     padding; a single full-width button (the mobile menu CTA) keeps the
     default phone padding above. */
  html body .c-btns .btn-w,
  html body .c-btns .btn-o{
    padding:var(--sov-btn-pad-phone-pair)!important;
  }
}
html body :is(.btn-w,.btn-o,.btn-navy):focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}

/* Light-ground cond buttons: Evergreen fill + Old Lace label (primary),
   Evergreen-tinted fill + Evergreen label (secondary, replacing the old
   20% white hairline outline). */
html body #hormones .btn-w,
html body #menopause .btn-w,
html body #sexual-health .btn-w,
html body #consult .btn-w{
  background:var(--sov-btn-primary-light-bg)!important;
  color:var(--sov-btn-primary-light-fg)!important;
}
html body #hormones .btn-w:hover,
html body #menopause .btn-w:hover,
html body #sexual-health .btn-w:hover,
html body #consult .btn-w:hover{
  background:var(--sov-btn-primary-light-hover)!important;
  box-shadow:none!important;
}
html body #hormones .btn-o,
html body #menopause .btn-o,
html body #sexual-health .btn-o,
html body #consult .btn-o{
  background:var(--sov-btn-secondary-light-bg)!important;
  color:var(--sov-ink)!important;
}
html body #hormones .btn-o:hover,
html body #menopause .btn-o:hover,
html body #sexual-health .btn-o:hover,
html body #consult .btn-o:hover{
  background:var(--sov-btn-secondary-light-hover)!important;
  box-shadow:none!important;
}

/* Dark-ground cond button (#hair): Old Lace fill + Evergreen label
   (primary), 33% black fill + Old Lace label (secondary). */
html body #hair .btn-w{
  background:var(--sov-btn-primary-dark-bg)!important;
  color:var(--sov-btn-primary-dark-fg)!important;
}
html body #hair .btn-w:hover{
  background:var(--sov-btn-primary-dark-hover)!important;
  box-shadow:none!important;
}
html body #hair .btn-o{
  background:var(--sov-btn-secondary-dark-bg)!important;
  color:var(--sov-on-dark)!important;
}
html body #hair .btn-o:hover{
  background:var(--sov-btn-secondary-dark-hover)!important;
  box-shadow:none!important;
}

/* Header CTA + mobile menu CTA (.btn-navy, every route): light ground
   (nav/mobile-menu are both an Old-Lace-ish white). Fixes the mobile menu
   CTA's label, which public/assets/evolvdrx-theme.css's
   ".nav-links a, .mobile-menu a, .quiz-header-link{color:var(--gp-muted)}"
   (specificity 0,1,1) was winning over this file's earlier
   ".btn-navy,.btn-dark{color:#FFFFFF}" (0,1,0); this rule's `html body`
   prefix (0,1,2) outranks both regardless of source order. */
html body .btn-navy{
  background:var(--sov-btn-primary-light-bg)!important;
  color:var(--sov-btn-primary-light-fg)!important;
}
html body .btn-navy:hover{
  background:var(--sov-btn-primary-light-hover)!important;
  box-shadow:none!important;
}

/* ===========================================================================
   2026-10-01 TYPE PASS CYCLE 2 (spec section 5): /consult's .btn-ghost
   ("Support" in the desktop nav and mobile menu, "What's included" in the
   hero CTA row) becomes the spec's solid secondary on light ground, replacing
   the 20% hairline-outline glass look public/assets/evolvdrx-theme.css gives it
   (background rgba(255,255,255,.88), 1px border, a bare box-shadow with no
   !important, and no explicit weight, which is why it rendered 400). Only
   public/consult.html (and its root mirror) renders a .btn-ghost element.
   This stays unscoped to a page id, same as .btn-navy's shared-chrome rule
   just above, since no other route carries the class. */
html body .btn-ghost{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:var(--sov-btn-h)!important;
  padding:var(--sov-btn-pad)!important;
  background:var(--sov-btn-secondary-light-bg)!important;
  border:0!important;
  border-radius:var(--sov-btn-radius)!important;
  color:var(--sov-ink)!important;
  font-family:Geist,sans-serif!important;
  font-size:15px!important;
  font-weight:var(--sov-w-strong)!important;
  line-height:1!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  background-image:none!important;
}
html body .btn-ghost:hover{
  background:var(--sov-btn-secondary-light-hover)!important;
  box-shadow:none!important;
}
html body .btn-ghost:focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:2px!important;
}
/* Desktop nav CTA row: 40px, matching .btn-navy.nav-cta-desktop right next
   to it. Two class selectors out-specify the plain ".btn-ghost" the
   under-768px rule below carries, so this wins at every width. */
html body .nav-r .btn-ghost{height:var(--sov-btn-h-header)!important}
@media(max-width:767px){
  html body .btn-ghost{
    height:var(--sov-btn-h-phone)!important;
    padding:var(--sov-btn-pad-phone)!important;
    font-size:14px!important;
  }
}
/* Header tagline: "Care that evolves with you." measures 176px in Geist 12px; below 380px it would meet the menu button, so it hides there. */
@media(max-width:379px){html body nav .nav-tagline{display:none!important}}
/* Instrument Sans needs the spec Display 2 leading (48/50, mobile 34/36); the old 0.92 leading let wrapped lines collide. */
html body .c-headline,html body .cond .c-headline{line-height:1.04!important}
/* Quiz header: the text logo becomes the Steel caps wordmark, same 125x32 box so the header does not move. */
html body a.quiz-logo{width:125px!important;height:32px!important;font-size:0!important;color:transparent!important;background:#202723!important;-webkit-mask:url('/assets/evolvdrx/wordmark.svg') left center/125px auto no-repeat;mask:url('/assets/evolvdrx/wordmark.svg') left center/125px auto no-repeat}