/* ============================================================
   eos.apexmd.com — site layer
   Design tokens and page-frame rules only. All component styling
   lives inline on the markup, exactly as authored in the design,
   so nothing here restyles the page.
   ============================================================ */

:root {
  --color-accent: #6FA02F;
  --color-accent-100: #F1F7E6;
  --color-accent-200: #D8EBBF;
  --color-accent-600: #558021;
  --color-accent-700: #456B1D;
  --color-accent-800: #335014;
  --color-bg: #F5F2ED;
  --color-surface: #E9E7E1;
  --color-text: #101010;
  --color-divider: color-mix(in srgb, #101010 40%, transparent);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-wrap: pretty;
  overflow-x: hidden;             /* no horizontal scrolling, ever */
}

img { display: block; max-width: 100%; height: auto; }
/* height:auto pairs with the intrinsic width/height attributes stamped by
   _build/optimize.py: the attributes give the browser an aspect ratio to
   reserve space with, and height:auto stops max-width from distorting it.
   Images carrying an explicit inline height are unaffected — inline wins. */
[hidden] { display: none !important; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
details[open] .faq-plus { transform: rotate(45deg); }

a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — the two page renderings authored in the design — */
.page { position: relative; background: var(--color-bg); }
.page--desktop { max-width: 1440px; margin: 0 auto; }
.page--mobile  { max-width: 390px;  margin: 0 auto; display: none; }

/* Tablet and below get the mobile rendering (the design's own
   small-screen layout) rather than a squeezed desktop grid.

   It is authored at 390px. Letting it stretch to the full 1023px of a
   tablet pushed body copy to ~130 characters a line and upscaled several
   images past their intrinsic size, so it is capped and centred: phones
   are unaffected (their viewport is below the cap) and tablets get a
   comfortable measure instead of a stretched phone layout. */
@media (max-width: 1023px) {
  .page--desktop { display: none; }
  .page--mobile  { display: block; max-width: 600px; margin: 0 auto; }
}

/* Between 1024 and 1440 the desktop rendering flexes: its grids are
   all minmax(0,1fr) based, so only the outer gutters need to shrink. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .page--desktop [style*="padding:76px 64px"],
  .page--desktop [style*="padding:72px 64px"],
  .page--desktop [style*="padding:80px 64px"],
  .page--desktop [style*="padding:68px 64px"],
  .page--desktop [style*="padding:64px 64px"],
  .page--desktop [style*="padding:56px 64px"],
  .page--desktop [style*="padding:16px 64px"] { padding-left: 40px !important; padding-right: 40px !important; }
}

/* Minimum reading size on small screens.
   The mobile rendering sets 11–11.5px on its disclaimer and legal paragraphs.
   That is fine for the uppercase tracking labels around them, but this is
   prose a member has to actually read — prescribing conditions, the EōS
   marketing disclosure, the compounding notice. Raised to 12.5px for
   <p> only, so eyebrows, badges and the "Powered by" lockup label keep
   their intended size. Scoped to the mobile rendering; desktop untouched. */
@media (max-width: 1023px) {
  .page--mobile p[style*="font-size:11px"],
  .page--mobile p[style*="font-size:11.5px"] {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
}

/* — wide screens: full-bleed backgrounds, contained content —
   The design is authored at 1440px. Simply centring it left a light gutter
   down both sides of any wider monitor, which reads as the page being
   cropped rather than deliberately contained. Instead the page fills the
   viewport and each section's own horizontal padding grows to keep the
   content column at 1440px — so dark sections and photography run edge to
   edge while line lengths stay exactly as designed.
   Overlays are excluded: they are position:fixed and set their own box. */
@media (min-width: 1441px) {
  .page--desktop { max-width: 100%; }
  .page--desktop > div:not(.overlay) {
    padding-left:  calc((100vw - 1440px) / 2 + 64px) !important;
    padding-right: calc((100vw - 1440px) / 2 + 64px) !important;
  }
}

/* — header: the logo lockup must never be overlapped by the nav —
   The bar is a flex row with nowrap text. Once the nav no longer fits, the
   items shrink but their text cannot wrap, so the nav ran back over the
   "POWERED BY Apex MD" lockup. Pinning the lockup and letting the nav be
   the thing that gives keeps them apart at every width. */
.page--desktop > div:first-child > div:first-child { flex: none; }
.page--desktop > div:first-child > div:nth-child(2) { min-width: 0; flex-shrink: 1; }

/* — overlays (assessment modal, mobile club sheet) — */
.overlay { position: fixed; inset: 0; z-index: 60; }


/* — scroll motion (see assets/js/motion.js) —
   Nothing here applies until motion.js adds .js-motion to <html>, so a
   JS failure or a reduced-motion preference leaves a plain static page. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),
              transform .62s cubic-bezier(.22,.61,.36,1);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* large imagery settles from a slight over-scale as its block arrives */
.js-motion [data-reveal] img[data-settle] {
  transform: scale(1.035);
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.js-motion [data-reveal].is-in img[data-settle] { transform: none; }

/* the reveal transform would otherwise fight position:sticky */
.js-motion [data-reveal][style*="position:sticky"] { opacity: 1; transform: none; }

/* — reduced motion — */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js-motion [data-reveal] img[data-settle] { transform: none !important; }
}

/* — print — */
@media print {
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .page--mobile { display: none !important; }
  .overlay { display: none !important; }
}

/* ============================================================
   Dynamic layer (see assets/js/dynamic.js)
   Everything below is additive and hidden until the script opts
   an element in, so the static page is unaffected if JS fails.
   ============================================================ */

/* — 1. condensed sticky header — */
.eos-stickybar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 2px solid var(--color-divider);
  transform: translateY(-100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.eos-stickybar.is-shown { transform: none; }
.eos-stickybar__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 10px 64px;
}
.eos-stickybar__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.eos-stickybar__logo img:first-child { height: 20px; width: auto; }
.eos-stickybar__logo img:last-child  { height: 11px; width: auto; }
.eos-stickybar__logo span {
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: #6B6B6B; white-space: nowrap;
  border-left: 1px solid var(--color-divider); padding-left: 12px;
}
.eos-stickybar__cta { min-height: 36px; padding: 0 16px; font-size: 13.5px; }
@media (min-width: 1441px) {
  .eos-stickybar__inner { padding-left: calc((100vw - 1440px) / 2 + 64px);
                          padding-right: calc((100vw - 1440px) / 2 + 64px); max-width: 100%; }
}
@media (max-width: 1023px) {
  .eos-stickybar__inner { padding: 8px 18px; }
  .eos-stickybar__logo span { display: none; }
}

/* — 2. timeline progress rail — */
.eos-rail { height: 3px; background: var(--color-divider); margin: 0 0 2px; overflow: hidden; }
.eos-rail i { display: block; height: 100%; width: 0;
              background: var(--color-accent); transition: width .12s linear; }
.page--desktop .eos-rail i, .page--mobile .eos-rail i { background: #96CA4F; }

/* — 3. sticky price bar — */
.eos-pricebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
  background: rgba(13,16,19,.96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #242424;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.eos-pricebar.is-shown { transform: none; }
.eos-pricebar__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px; padding: 12px 64px;
}
.eos-pricebar__label { font-size: 14px; font-weight: 700; color: #F5F2ED;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eos-pricebar__price { font-size: 22px; font-weight: 800; letter-spacing: -.02em;
                       color: #96CA4F; margin-left: auto; white-space: nowrap; }
.eos-pricebar .btn { min-height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
@media (min-width: 1441px) {
  .eos-pricebar__inner { padding-left: calc((100vw - 1440px) / 2 + 64px);
                         padding-right: calc((100vw - 1440px) / 2 + 64px); max-width: 100%; }
}
@media (max-width: 1023px) {
  .eos-pricebar__inner { padding: 10px 18px; gap: 12px; }
  .eos-pricebar__label { display: none; }
}

/* — 4. directional entry — */
.js-motion [data-reveal] .eos-from-side  { transform: translateX(26px); opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js-motion [data-reveal] .eos-from-below { transform: translateY(20px); opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js-motion [data-reveal].is-in .eos-from-side,
.js-motion [data-reveal].is-in .eos-from-below { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eos-stickybar, .eos-pricebar { transition: none; }
  .js-motion [data-reveal] .eos-from-side,
  .js-motion [data-reveal] .eos-from-below { opacity: 1 !important; transform: none !important; }
}
@media print { .eos-stickybar, .eos-pricebar { display: none !important; } }

  .hp-offerbar{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 14px;
    background:#6FA02F;color:#fff;padding:10px 20px;text-align:center;
    font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.01em}
  .hp-offerbar strong{font-weight:800}
  .hp-offerbar__sep{opacity:.55}
  @media (max-width:720px){ .hp-offerbar{font-size:11.5px;padding:9px 14px;gap:4px 10px} }


/* ============================================================
   Homepage UX layer
   ============================================================ */

/* — offer tiles are links: give them a hover/focus state — */
.hp-tile { transition: transform .18s ease, box-shadow .18s ease; }
.hp-tile:hover, .hp-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
@media (prefers-reduced-motion: reduce) { .hp-tile:hover, .hp-tile:focus-visible { transform: none; } }

/* — mobile menu (opened by the header button, see app.js) — */
.hp-menu {
  position: absolute; inset: 0; overflow: auto;
  display: flex; flex-direction: column;
  background: #101010; color: #F5F2ED;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
}
.hp-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #2A2A2A; }
.hp-menu__close {
  min-width: 44px; min-height: 44px; margin-right: -10px;
  background: none; border: 0; color: #F5F2ED; cursor: pointer;
  font: 400 32px/1 Archivo, system-ui, sans-serif;
}
.hp-menu__links { display: flex; flex-direction: column; }
.hp-menu__links a {
  display: flex; align-items: center; min-height: 50px;
  border-bottom: 1px solid #2A2A2A;
  color: #F5F2ED; text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.005em;
}
.hp-menu__links a:hover, .hp-menu__links a:focus-visible { color: #96CA4F; }
.hp-menu__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 22px; margin-top: auto; }
.hp-menu__assess { color: #96CA4F; font-size: 15px; font-weight: 700; }
.hp-menu__assess:hover { color: #B4DB7C; }

/* — chat launcher vs. the sticky offer bar —
   The vendor pins its launcher 20px off the bottom-right corner, which on the
   mobile rendering is exactly where the sticky bar's "Claim your offer" button
   sits. Lift the launcher clear of the bar, and take it off screen entirely
   while a full-screen overlay (menu, assessment) is open. */
@media (max-width: 1023px) {
  #chatbot-icon { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}
body:has(.overlay:not([hidden])) #chatbot-icon { display: none !important; }

/* — minimum label size on small screens —
   The mobile rendering sets its eyebrows, card kickers and footer labels at
   9–11px. They are uppercase and tracked, but at arm's length on a phone
   that is still too small to read comfortably. 12px is the floor; the
   "Powered by" lockup label is part of a logo lockup and only goes to 10px
   so it does not outgrow the marks beside it. */
@media (max-width: 1023px) {
  .page--mobile [style*="font-size:9px"],
  .page--mobile [style*="font-size:10px"],
  .page--mobile [style*="font-size:10.5px"],
  .page--mobile [style*="font-size:11px"] { font-size: 12px !important; }
  .page--mobile [style*="font-size:8.5px"] { font-size: 10px !important; }
}

/* ---------- Homepage top bar, narrow-desktop handling ----------
   The desktop rendering starts at 1024px, but the bar's contents (lockup +
   links + Login + CTA) needed ~1060px even before the Performance Peptides
   link was added, so it already overlapped between 1024 and ~1060. Adding a
   9th item widened that to ~1220.

   The row is white-space:nowrap, so when it runs out of width the children
   overlap rather than push the page wider -- no horizontal scrollbar, just
   text sitting on top of the Login link. Shrinking the type enough to fit
   meant 10px, and folding links away hid product pages that have no other
   route at these widths (the hamburger only exists in the mobile rendering).
   So the row tightens, then wraps to a second line. Nothing is hidden and
   the bar grows by 4px. */
@media (max-width: 1340px) {
  .hp-topbar { gap: 14px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .hp-topbar__links { gap: 10px !important; font-size: 11.75px !important; }
}
@media (max-width: 1180px) {
  .hp-topbar { gap: 12px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .hp-topbar__links {
    gap: 9px !important;
    row-gap: 4px !important;
    font-size: 11.5px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}

/* ---------- Longevity Peptides dropdown (homepage top bar) ----------
   Sermorelin and NAD+ / B-12 MIC were two flat links; they now share one
   item. The panel is absolutely positioned so opening it never reflows the
   bar, and a ::before bridge covers the gap between button and panel so the
   pointer can cross without the hover dropping. */
.hp-drop { position: relative; display: inline-flex; }
.hp-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.hp-drop__btn svg { flex: none; transition: transform .18s ease; }
.hp-drop.is-open .hp-drop__btn { color: #6FA02F; }
.hp-drop.is-open .hp-drop__btn svg { transform: rotate(180deg); }

.hp-drop__menu {
  position: absolute;
  top: calc(100% + 13px);
  left: -16px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  min-width: 236px;
  padding: 9px;
  background: #fff;
  border: 2px solid var(--color-divider);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
  white-space: nowrap;
  text-align: left;
}
.hp-drop__menu[hidden] { display: none; }
.hp-drop__menu::before { content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
.hp-drop__menu a {
  display: block;
  padding: 9px 11px;
  color: #101010;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.hp-drop__menu a small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #6B6B6B;
}
.hp-drop__menu a:hover,
.hp-drop__menu a:focus-visible { background: #F5F2ED; color: #6FA02F; }
.hp-drop__menu a:hover small,
.hp-drop__menu a:focus-visible small { color: #6FA02F; }

/* Mobile slide-out: the same two pages, grouped under one label. */
.hp-menu__group {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8C8C8C;
}
.hp-menu__links a.hp-menu__sub { padding-left: 14px; }
.hp-menu__links a.hp-menu__sub small {
  display: inline;
  margin-left: 6px;
  font-size: .72em;
  font-weight: 500;
  color: #8C8C8C;
  text-transform: none;
  letter-spacing: 0;
}

/* The bar was position:static, so the dropdown panel -- despite z-index 1200 --
   had no stacking context to rise out of and the hero painted straight over
   it. Lifting the bar itself puts the panel above everything below it. */
.hp-topbar { position: relative; z-index: 900; }