/* Codex white-label hero sizing. Shared by every brand under /codex-sites.
 * Layout and sizing only: the hero (headline, copy, CTAs, photo) fits the
 * first screen on short laptops, and phones show the photo with faces intact.
 * --cx-bar is the closed-enrollment preview bar added by codex-guard.js. */
:root{--cx-bar:36px}

/* ---- PrimeRx-template brands (hero grid) ---- */
@media (min-width:1024px){
  .primerx-hero-grid{min-height:0!important;max-height:calc(100vh - 128px - var(--cx-bar));max-height:calc(100dvh - 128px - var(--cx-bar))}
  .primerx-hero-copy{padding-top:clamp(12px,4vh,48px)!important;padding-bottom:clamp(12px,4vh,48px)!important}
  .primerx-hero-copy h1{font-size:clamp(34px,min(4.6vw,8.4vh),64px)!important;margin-bottom:clamp(6px,1.6vh,16px)!important}
  .primerx-hero-lede{font-size:clamp(15px,2.6vh,20px)!important;line-height:1.5!important;margin-bottom:clamp(10px,2.6vh,32px)!important}
  .primerx-hero-eyebrow{margin-bottom:clamp(8px,2.4vh,24px)!important}
  .primerx-hero-actions{margin-bottom:clamp(6px,2vh,24px)!important}
  .primerx-hero-media{margin-top:clamp(8px,3vh,24px)!important;margin-bottom:clamp(8px,3vh,24px)!important;min-height:0!important}
  .primerx-hero-media img{object-position:center 25%!important}
  .primerx-hero-float{transform-origin:bottom left;bottom:clamp(10px,3vh,32px)!important}
}
@media (min-width:1024px) and (max-height:700px){
  .primerx-hero-facts{display:none!important}
  .primerx-hero-float{transform:scale(.85)}
}
@media (min-width:1024px) and (max-height:560px){
  .primerx-hero-eyebrow{padding-top:4px!important;padding-bottom:4px!important;font-size:12px!important}
  .primerx-hero-actions a{min-height:44px!important;padding-top:10px!important;padding-bottom:10px!important}
  .primerx-hero-float{transform:scale(.72)}
}
/* Landscape phones and short tablets: two columns so the photo stays in view. */
@media (min-width:640px) and (max-width:1023px) and (max-height:600px){
  .primerx-hero-grid{grid-template-columns:1.1fr .9fr!important;min-height:0!important}
  .primerx-hero-copy{padding:16px 24px!important}
  .primerx-hero-copy h1{font-size:clamp(28px,9vh,44px)!important;margin-bottom:8px!important}
  .primerx-hero-lede{font-size:15px!important;margin-bottom:12px!important}
  .primerx-hero-facts,.primerx-hero-float{display:none!important}
  .primerx-hero-media{min-height:0!important;margin:16px 16px 16px 0!important}
  .primerx-hero-media img{object-position:center 25%!important}
}
/* Short phones: tighten type so the photo starts on the first screen. */
@media (max-width:639px) and (max-height:760px){
  .primerx-hero-copy{padding-top:16px!important;padding-bottom:16px!important}
  .primerx-hero-copy h1{font-size:clamp(32px,6.4vh,44px)!important;margin-bottom:10px!important}
  .primerx-hero-lede{font-size:16px!important;line-height:1.5!important;margin-bottom:14px!important}
  .primerx-hero-eyebrow{margin-bottom:12px!important}
  .primerx-hero-actions{margin-bottom:12px!important}
  .primerx-hero-media{min-height:clamp(200px,34vh,288px)!important}
  .primerx-hero-media img{object-position:center 30%!important}
}

/* ---- Evermere (bf hero) ---- */
@media (min-width:900px){
  .bf-hero{padding-top:clamp(16px,5vh,65px)!important;padding-bottom:clamp(16px,5vh,70px)!important;align-items:center!important}
  .bf-hero h1{font-size:clamp(34px,min(4.8vw,9vh),87px)!important;line-height:1.02!important;margin-bottom:clamp(8px,2vh,24px)!important}
  .bf-kicker{margin-bottom:clamp(6px,1.8vh,20px)!important}
  .bf-lede{font-size:clamp(15px,2.6vh,19px)!important;margin-bottom:clamp(10px,2.6vh,30px)!important}
  .bf-hero-media{height:min(560px,calc(100vh - 105px - var(--cx-bar) - 2*clamp(16px,5vh,65px)))!important;height:min(560px,calc(100dvh - 105px - var(--cx-bar) - 2*clamp(16px,5vh,65px)))!important;min-height:220px;overflow:hidden;border-radius:120px 12px 12px 12px}
  .bf-hero-media .hero-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 20%!important}
}
@media (min-width:900px) and (max-height:560px){
  .site-header{padding-top:4px!important;padding-bottom:4px!important}
  .bf-hero .photo-caption{display:none!important}
}
@media (min-width:600px) and (max-width:899px) and (max-height:600px){
  .bf-hero{grid-template-columns:1.1fr .9fr!important;gap:20px!important;padding-top:16px!important;padding-bottom:16px!important;align-items:center!important}
  .bf-hero h1{font-size:clamp(28px,9vh,44px)!important;margin-bottom:8px!important}
  .bf-lede{font-size:15px!important;margin-bottom:12px!important}
  .bf-hero-media{height:calc(100dvh - 105px - var(--cx-bar) - 32px)!important;min-height:200px;overflow:hidden}
  .bf-hero-media .hero-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 20%!important}
  .bf-hero .photo-caption{display:none!important}
}
@media (max-width:599px){
  .bf-hero{padding-top:20px!important;padding-bottom:32px!important}
  .bf-kicker{font-size:12px!important;margin-bottom:10px!important}
  .bf-hero h1{font-size:clamp(32px,6vh,46px)!important;margin-bottom:12px!important}
  .bf-lede{font-size:16px!important;line-height:1.55!important;margin-bottom:16px!important}
  .bf-hero .bf-cta{margin-bottom:0!important}
  .bf-hero-media{margin-top:16px!important;height:clamp(240px,46vh,380px)!important;overflow:hidden}
  .bf-hero-media .hero-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 22%!important}
}

/* Very short laptop windows (about 460px tall under the browser bars). */
@media (min-width:900px) and (max-height:560px){
  .primerx-hero-copy{padding-top:10px!important;padding-bottom:10px!important}
  .primerx-hero-copy h1{font-size:clamp(30px,7.2vh,44px)!important;line-height:1.04!important}
  .primerx-hero-eyebrow{margin-bottom:8px!important}
  .primerx-hero-lede{font-size:15px!important;margin-bottom:10px!important}
  .primerx-hero-media{margin-top:10px!important;margin-bottom:10px!important}
  .bf-hero{padding-top:12px!important;padding-bottom:12px!important}
  .bf-kicker{margin-bottom:6px!important;font-size:12px!important}
  .bf-hero h1{font-size:clamp(30px,7.4vh,44px)!important;margin-bottom:8px!important}
  .bf-lede{font-size:15px!important;line-height:1.45!important;margin-bottom:10px!important}
  .bf-hero-media{height:calc(100dvh - 90px - var(--cx-bar) - 24px)!important}
}
@media (min-width:900px) and (max-height:560px){
  .primerx-announcement{padding-top:5px!important;padding-bottom:5px!important;font-size:13px!important}
  .primerx-experience>header>div{height:60px!important}
  .primerx-hero-grid{max-height:none}
  .primerx-hero-actions a{white-space:nowrap!important;padding-left:24px!important;padding-right:24px!important;font-size:17px!important}
  .site-header .brand img{height:60px!important;width:auto!important}
  .bf-lede{margin-top:12px!important}
  .bf-hero-media{height:calc(100dvh - 76px - var(--cx-bar) - 24px)!important}
}
@media (min-width:900px) and (max-height:560px){
  .site-header .header-inner{min-height:0!important;height:auto!important;padding-top:4px!important;padding-bottom:4px!important}
  .bf-hero .bf-cta{margin-top:8px!important}
  .bf-hero-media{height:calc(100dvh - var(--cx-bar) - 110px)!important}
}

/* Phones whose browser bars leave a short first screen. */
@media (max-width:639px) and (max-height:760px){
  .primerx-announcement{padding-top:6px!important;padding-bottom:6px!important;font-size:12px!important;line-height:1.35!important}
  .primerx-experience>header>div{height:56px!important}
  .primerx-hero-media{margin-top:4px!important}
  .site-header .brand img{height:58px!important;width:auto!important}
  .site-header .header-inner{min-height:0!important;height:auto!important;padding-top:4px!important;padding-bottom:4px!important}
  .bf-hero{padding-top:14px!important}
  .bf-lede{margin-top:10px!important}
  .bf-hero .bf-cta{margin-top:14px!important}
  .bf-hero-media{margin-top:20px!important;border-radius:80px 12px 12px 12px}
  .bf-hero-media .hero-photo{object-position:center 12%!important}
}
@media (max-width:639px) and (max-height:620px){
  .primerx-hero-copy h1{font-size:31px!important}
  .primerx-hero-lede{font-size:15px!important;margin-bottom:10px!important}
  .primerx-hero-facts{display:none!important}
  .primerx-hero-eyebrow{margin-bottom:8px!important}
  .bf-hero h1{font-size:31px!important}
  .bf-lede{font-size:15px!important}
}

/* ---- Shared mobile CTA bar (one for every brand; mounted by codex-guard.js) ---- */
.primerx-mobile-cta{display:none!important}
.primerx-experience{padding-bottom:0!important}
.codex-mobile-cta{position:fixed;left:0;right:0;bottom:var(--cx-bar);z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--cx-cta-bg);border-top:1px solid var(--cx-cta-line);box-shadow:0 -4px 24px rgba(0,0,0,.08);
  transform:translateY(calc(100% + var(--cx-bar) + 8px));transition:transform .25s ease;pointer-events:none}
.codex-mobile-cta.is-shown{transform:none;pointer-events:auto}
.codex-mobile-cta a{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;box-sizing:border-box;border-radius:12px;
  background:var(--cx-cta-button);color:#fff;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.12)}
@media (min-width:768px){.codex-mobile-cta{display:none!important}}
/* On mobile the bar is the main CTA: the header button steps aside while it shows. */
@media (max-width:767px){body.codex-cta-on .site-header .header-actions .button,
  body.codex-cta-on header a[href^="/coming-soon"],body.codex-cta-on header a[href^="/primerx/intake"]{visibility:hidden}}
