/* ============================================================
   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: #00a7e1;
  --color-accent-100: #e6f4fb;
  --color-accent-200: #c3e5f6;
  --color-accent-600: #0082af;
  --color-accent-700: #00678b;
  --color-accent-800: #00506c;
  --color-bg: #f2f3f4;
  --color-surface: #e8eaec;
  --color-text: #16191c;
  --color-divider: color-mix(in srgb, #16191c 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; }

  /* The header needs a class rather than the [style*=…] rule above, which has
     never actually reached it. dynamic.js's sticky-header code writes to
     header.style, and the browser re-serialises the whole attribute when it
     does: "padding:16px 64px" becomes "padding: 16px 64px", with spaces, and
     the substring selector stops matching. A class is immune to that rewrite.

     This matters now because the nav carries eight items instead of seven.
     The nav alone wants ~885px (the labels sum to 759 plus seven 18px gaps),
     which put the header's min-content width at ~1287px — so it overflowed
     every viewport from 1024 up to that. Four reductions bring it back under
     1024, and none of them touch the design above 1440. */
  .eos-header {
    gap: 20px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* the nav is the second div in the header; targeted structurally so the
     markup (and patch_index's regex against it) stays untouched */
  .eos-header > div:nth-of-type(2) {
    gap: 10px !important;
    font-size: 12px !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):not(.amx):not(.pr):not(.prh) {
    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; text-decoration: none; }
.eos-stickybar__logo img { height: 36px; width: auto; }
.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 img { height: 32px; }
}

/* — 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: #00a7e1; }

/* — 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 #2b3238;
  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: #f2f3f4;
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eos-pricebar__price { font-size: 22px; font-weight: 800; letter-spacing: -.02em;
                       color: #00a7e1; 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; } }

/* — nav dropdown (Men's Optimal Health) —
   Opens on hover and on keyboard focus (:focus-within), so it works without
   JS. The menu hangs below the nav item; a transparent bridge (padding-top)
   keeps it open while the pointer travels down into it. */
.eos-dd { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.eos-dd__caret { font-size: 10px; line-height: 1; opacity: .6; transition: transform .15s ease; }
.eos-dd__menu {
  position: absolute; top: 100%; left: -16px; z-index: 200;
  padding-top: 14px; min-width: 220px;
  display: none; flex-direction: column;
  white-space: nowrap; font-weight: 500;
}
.eos-dd__menu::before {
  content: ""; position: absolute; inset: 14px 0 0 0; z-index: -1;
  background: #fff; border: 1px solid var(--color-divider);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 12px 28px rgba(22, 25, 28, .14);
}
.eos-dd__item {
  display: block; padding: 11px 18px; color: #16191c; text-decoration: none; font-size: 13.5px;
}
.eos-dd__item:first-child { padding-top: 14px; }
.eos-dd__item:last-child { padding-bottom: 14px; }
.eos-dd__item:hover, .eos-dd__item:focus-visible { background: #f2f4f6; color: var(--color-accent); }
.eos-dd:hover .eos-dd__menu, .eos-dd:focus-within .eos-dd__menu { display: flex; }
.eos-dd:hover .eos-dd__caret, .eos-dd:focus-within .eos-dd__caret { transform: rotate(180deg); }

/* keep the anchored sections clear of the sticky header when jumped to */
#moh-plans, #moh-how, #moh-results, #moh-faq { scroll-margin-top: 90px; }

/* The header has to sit above the page for the dropdown to show: sections
   below it are positioned (and motion.js gives revealed ones transforms), so
   they paint later in the stacking order and covered the open menu. */
.eos-header { position: relative; z-index: 300; }

/* — mobile menu —
   The hamburger opens a full-width panel under the mobile header. Built on
   <details>, so it needs no JS; Men's Optimal Health is its own expandable
   group inside it, separate from Men's Vitality. */
.eos-mheader { position: relative; z-index: 300; }
.eos-mnav > summary { list-style: none; }
.eos-mnav > summary::-webkit-details-marker { display: none; }
.eos-mnav__toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; padding: 10px; cursor: pointer; margin-right: -10px;
}
.eos-mnav__toggle span {
  display: block; width: 22px; height: 2px; background: #16191c;
  transition: transform .2s ease, opacity .2s ease;
}
/* bars become an X while open */
.eos-mnav[open] .eos-mnav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.eos-mnav[open] .eos-mnav__toggle span:nth-child(2) { opacity: 0; }
.eos-mnav[open] .eos-mnav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.eos-mnav__panel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 2px solid var(--color-divider);
  box-shadow: 0 16px 32px rgba(22, 25, 28, .16);
  padding: 6px 18px 18px;
  max-height: calc(100vh - 70px); overflow-y: auto;
  display: flex; flex-direction: column;
}
.eos-mnav__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid #e6e9ec;
  font-size: 16px; font-weight: 600; color: #16191c; text-decoration: none;
  cursor: pointer; list-style: none;
}
.eos-mnav__group > summary::-webkit-details-marker { display: none; }
.eos-mnav__chev { font-size: 12px; opacity: .55; transition: transform .2s ease; }
.eos-mnav__group[open] .eos-mnav__chev { transform: rotate(180deg); }
.eos-mnav__group[open] > summary { color: var(--color-accent); border-bottom-color: transparent; }
.eos-mnav__sub {
  display: block; padding: 11px 0 11px 16px; margin-left: 2px;
  border-left: 2px solid var(--color-accent);
  font-size: 15px; color: #3a4148; text-decoration: none;
}
.eos-mnav__group[open] .eos-mnav__sub:last-child { margin-bottom: 10px; }
.eos-mnav__login { font-weight: 500; color: #3a4148; }
.eos-mnav__cta { margin-top: 16px; min-height: 48px; justify-content: center; font-size: 15px; }

/* The EoS chrome keeps the EoS typeface on every page. The Men's Optimal
   Health design sets its body in a serif (Vitesse / Roboto Slab), and the
   header, menus and footer were inheriting it there — serif nav labels are
   also wider, which helped push the nav past its box. */
.eos-header, .eos-mheader, .eos-dd__menu, .moh-chrome {
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* "Book free scan" must stay on one line. With eight nav items the header
   row is tight, and the button — the only flexible item left — was shrinking
   until its label wrapped onto three lines on every page. */
.eos-header .btn { white-space: nowrap; flex-shrink: 0; }

/* Eight nav items at 1440px and wider.
   Above 1440 the page holds content to a 1440px column (see the wide-screen
   rule above), so the header always has ~1,312px however large the monitor.
   At full spacing the header wants ~1,466px of content, so without this the
   lockup or the nav gave way at every desktop width from 1440 up — on the
   Men's Optimal Health page the "Powered by EōS" lockup spilled over the
   first nav items. Same reductions as the 1024–1439 band, with a slightly
   tighter row gap; the lockup never shrinks on any page. */
@media (min-width: 1440px) {
  .eos-header { gap: 16px !important; }
  .eos-header > div:nth-of-type(2) { gap: 10px !important; font-size: 12px !important; }
}
.eos-header > div:first-child { flex: none; }

/* Laptop widths: hamburger instead of the inline nav.
   Eight items need ~780px; between 1024 and 1439 the header can give them
   539–765px, so the last items ran under "Login" on every page. Below 1440
   the desktop header swaps its inline nav for the same menu phones use —
   logo lockup, Login and "Book free scan" stay put. */
.eos-hnav { display: none; }
@media (min-width: 1024px) and (max-width: 1439px) {
  .eos-header > div:nth-of-type(2) { display: none !important; }
  .eos-hnav { display: block; margin-left: auto; }
  .eos-hnav .eos-mnav__toggle { margin-right: 0; }
  .eos-hnav .eos-mnav__panel {
    left: auto; right: 40px; width: 340px;
    border: 1px solid var(--color-divider); border-top: 3px solid var(--color-accent);
  }
}
/* At 1440+ the full nav fits, but only just (the content column is capped
   at 1440 however wide the screen). A slightly tighter gap buys margin
   against font rendering differences between browsers and OSes. */
@media (min-width: 1440px) {
  .eos-header > div:nth-of-type(2) { gap: 8px !important; }
}

/* The brand name is spelled exactly "EōS". Several headings are styled
   text-transform:uppercase, which rendered it "EŌS"; the build wraps every
   visible EōS in .eos-word so the rest of the heading stays in capitals. */
.eos-word { text-transform: none !important; }

/* — header logo links home —
   Wrapped in an anchor rather than a click handler so it behaves like a
   link: middle-click and cmd-click open a new tab, and it is reachable by
   keyboard. The subtle fade is the only affordance; the logo must not move
   or change size, because it sits in a fixed-height header row. */
.eos-home-link { text-decoration: none; transition: opacity .18s ease; }
.eos-home-link:hover { opacity: .78; }
.eos-home-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Visually hidden, still announced by screen readers and read by crawlers.
   Used where a designed graphic carries the visible headline. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Apex MD concierge section (supplied by Blake) ===== */
.amx{--amx-acc:#00a7e1;--amx-hi:#00a7e1;background:#07202d;color:#f2f3f4;border-top:2px solid #15394d;font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
.amx *{box-sizing:border-box}
.amx__in{max-width:1440px;margin:0 auto;padding:76px 64px 84px;display:flex;flex-direction:column;gap:88px}
.amx__eyebrow{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--amx-hi);font-weight:700;margin-bottom:16px}
.amx h2{margin:0 0 18px;font-size:48px;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.amx h3{margin:0 0 14px;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.amx h2 span,.amx h3 span{color:var(--amx-hi)}
.amx__lede{margin:0;font-size:17px;line-height:1.65;color:#c8d1d7;max-width:46ch}
.amx__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.amx__ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.amx__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;background:var(--amx-acc);color:#f2f3f4!important;font-weight:800;font-size:15.5px;text-decoration:none;transition:filter .2s,transform .2s}
.amx__btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.amx__link{font-size:14.5px;font-weight:700;color:var(--amx-hi)!important;border-bottom:1px solid #25647f;text-decoration:none;padding-bottom:2px;transition:border-color .2s}
.amx__link:hover{border-color:var(--amx-hi)}
.amx__fine{margin:16px 0 0;font-size:13px;color:#79838b}
.amx__team{display:flex;flex-direction:column;align-items:center;gap:16px}
.amx__stage{--stage:430px;position:relative;width:100%;height:var(--stage);display:flex;justify-content:center;align-items:flex-end;background:radial-gradient(58% 72% at 50% 62%,rgba(0,167,225,.42) 0%,rgba(0,167,225,.2) 42%,rgba(7,32,45,0) 74%)}
.amx__halo{position:absolute;left:50%;bottom:8%;width:70%;height:70%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(143,220,250,.22),rgba(143,220,250,0))}
.amx__stage img{position:relative;flex-shrink:0;width:auto;max-width:none}
.amx__fade{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(7,32,45,0) 0%,rgba(7,32,45,.85) 65%,#07202d 100%);z-index:6}
.amx__names{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:#9fb0bd;text-align:center}
.amx__main{display:grid;grid-template-columns:380px minmax(0,1fr);gap:72px;align-items:center;border-top:2px solid #15394d;padding-top:64px}
.amx__phonecol{display:flex;flex-direction:column;align-items:center;gap:26px}
.amx__phone{position:relative;width:340px;height:700px;border-radius:56px;background:#04090d;padding:11px;box-shadow:0 0 0 1.5px #3a4a55,0 0 0 4px #0d1a22,0 40px 80px rgba(0,0,0,.45),0 0 120px rgba(0,167,225,.14)}
.amx__island{position:absolute;left:50%;top:22px;width:104px;height:30px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:2}
.amx__screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#0a2533;display:flex;flex-direction:column}
.amx__phead{padding:62px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#dce6ec}
.amx__wm{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.1em}.amx__wm b{font-weight:800;color:#fff}.amx__wm i{width:1px;height:12px;background:rgba(255,255,255,.3)}.amx__wm em{font-style:normal;font-weight:800;letter-spacing:.02em;color:var(--amx-hi)}
.amx__secure{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:rgba(0,167,225,.12);border:1px solid rgba(0,167,225,.35);color:#bfe9fa;font-size:10px;font-weight:700;transition:background-color .3s}
.amx__secure.is-on{background:var(--amx-acc)}
.amx__hello{padding:16px 18px 0;text-align:center}
.amx__hello strong{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.amx__hello span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:#9fb0bd}
.amx__pteam{margin:14px 14px 0;padding:10px 12px;border-radius:16px;background:#0f3448;border:1px solid rgba(0,167,225,.2);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;line-height:1.25}
.amx__avs{display:flex;align-items:center}
.amx__avs img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 6%;background:#113a50;border:2px solid #0f3448;margin-left:-8px}
.amx__avs i{margin-left:6px;width:22px;height:22px;border-radius:50%;background:var(--amx-acc);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px}
.amx__tiles{margin:12px 14px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.amx__tile{height:78px;border-radius:14px;background:#0f3144;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:4px;transition:background-color .3s,border-color .3s,transform .3s}
.amx__tile .ic{width:32px;height:32px;border-radius:50%;background:#154560;color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background-color .3s}
.amx__tile .t{font-size:10.5px;font-weight:600;line-height:1.15;color:#c8d1d7;text-align:center}
.amx__tile.is-on{background:#15506e;border-color:var(--amx-hi);transform:scale(1.05)}
.amx__tile.is-on .ic{background:var(--amx-acc)}
.amx__tile.is-on .t{color:#fff}
.amx__now{margin:10px 14px 0;padding:10px 12px;border-radius:14px;background:#0d2d3e;display:flex;align-items:center;gap:10px;min-height:54px}
.amx__now b{width:8px;height:8px;border-radius:50%;background:#5ce0a0;flex-shrink:0}
.amx__now strong{display:block;font-size:12px}
.amx__now span{display:block;font-size:10.5px;line-height:1.35;color:#9fb0bd;margin-top:2px}
.amx__nav{margin-top:auto;padding:10px 10px 22px;background:#07202d;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.amx__nav span{display:flex;flex-direction:column;align-items:center;gap:4px;color:#7f93a1;font-size:9.5px;font-weight:500}
.amx__nav span.is-on{color:var(--amx-hi)}
.amx__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.amx__feat{display:flex;align-items:flex-start;gap:14px;padding:18px;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:92px;background:#0b2736;border:1px solid #15394d;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal;transition:background-color .25s,border-color .25s,transform .25s}
.amx__feat:hover{border-color:#25647f;transform:translateY(-2px)}
.amx__feat:focus-visible,.amx__btn:focus-visible,.amx__link:focus-visible{outline:3px solid var(--amx-hi);outline-offset:3px}
.amx__feat .ic{flex-shrink:0;width:44px;height:44px;background:#113a50;color:var(--amx-hi);display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s,color .25s}
.amx__feat .ft{display:block;font-size:15.5px;font-weight:800;line-height:1.3;color:#f2f3f4;letter-spacing:-.01em}
.amx__feat .fd{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:#9fb0bd}
.amx__feat.is-on{background:#0f3448;border-color:var(--amx-hi)}
.amx__feat.is-on .ic{background:var(--amx-acc);color:#fff}
.amx__rise{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.amx.is-live .amx__rise{opacity:1;transform:none}
.amx__float{animation:amxFloat 7s ease-in-out infinite}
@keyframes amxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:1100px){.amx__hero{grid-template-columns:minmax(0,1fr)}.amx__main{display:flex;flex-direction:column;align-items:stretch;gap:36px}.amx__right{display:contents}.amx__intro{order:1}.amx__phonecol{order:2}.amx__list{order:3;margin-top:0}.amx__in{padding:56px 32px 64px;gap:64px}}
@media (max-width:640px){.amx__in{padding:40px 18px 56px;gap:56px}.amx h2{font-size:34px}.amx h3{font-size:28px}.amx__stage{--stage:250px}.amx__names{font-size:12px}.amx__ctas .amx__btn{width:100%}.amx__main{padding-top:44px;gap:32px}.amx__list{gap:10px}.amx__feat{flex-direction:column;gap:10px;padding:14px;min-height:112px}.amx__feat .fd{display:none}.amx__feat .ft{font-size:14px}}
@media (prefers-reduced-motion:reduce){.amx__rise{opacity:1;transform:none;transition:none}.amx__float{animation:none}}

/* Integration fix, not part of the supplied design: .amx__phone is a fixed
   340x700. Below ~380px that is wider than the column, so the frame was
   clipped on both edges (measured -10 / 330 inside a 326px viewport).

   --k must be a UNITLESS number: calc((100vw - 44px) / 340) yields a length,
   which makes scale() invalid and drops the transform entirely. Fixed steps
   instead. The float animation is redefined to carry the scale, because an
   animation overrides a normal transform declaration. */
@media (max-width: 400px) {
  .amx__phone {
    --k: .9;
    transform-origin: top center;
    margin-bottom: calc(700px * (var(--k) - 1));
    animation: amxFloatScaled 7s ease-in-out infinite;
  }
}
@media (max-width: 360px) { .amx__phone { --k: .8; } }
@keyframes amxFloatScaled {
  0%, 100% { transform: scale(var(--k)) translateY(0); }
  50%      { transform: scale(var(--k)) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .amx__phone { animation: none !important; transform: scale(var(--k, 1)); }
}

/* ==========================================================================
   Login nudge — "Returning user? Login here."
   Fixed to the viewport, top right, with a caret pointing up at the Login
   link in the header. One layer serves both renderings (see login-nudge.js).
   ========================================================================== */
.eos-nudge {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  right: 18px;
  z-index: 60;                      /* over the page, under the club sheet */
  display: flex;
  align-items: stretch;
  max-width: calc(100vw - 36px);
  background: #ffffff;
  border: 1px solid #d8dfe4;
  border-top: 3px solid #00a7e1;
  border-radius: 6px;
  box-shadow: 0 14px 34px -10px rgba(16, 24, 32, .28),
              0 2px 6px rgba(16, 24, 32, .08);
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .28s ease, transform .32s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.eos-nudge.is-in { opacity: 1; transform: none; pointer-events: auto; }

/* the caret, aimed at the Login link above it */
.eos-nudge::before {
  content: "";
  position: absolute;
  top: -8px; right: 26px;
  width: 11px; height: 11px;
  background: #00a7e1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.eos-nudge__link {
  display: block;
  padding: 11px 6px 12px 16px;
  text-decoration: none;
  color: #16191c !important;
  line-height: 1.3;
}
.eos-nudge__b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5c6873;
}
.eos-nudge__c {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0082b0;                   /* darkened for contrast on white */
}
.eos-nudge__link:hover .eos-nudge__c { color: #00a7e1; }

.eos-nudge__x {
  appearance: none;
  border: 0;
  border-left: 1px solid #e8edf0;
  background: transparent;
  width: 34px;
  flex: none;
  cursor: pointer;
  font: 400 19px/1 Archivo, system-ui, sans-serif;
  color: #93a0aa;
  border-radius: 0 4px 4px 0;
  transition: color .15s, background .15s;
}
.eos-nudge__x:hover { color: #16191c; background: #f4f7f9; }
.eos-nudge:focus-within { outline: 2px solid #00a7e1; outline-offset: 2px; }

@media (max-width: 1023px) {
  .eos-nudge { top: calc(env(safe-area-inset-top, 0px) + 62px); right: 12px; }
  .eos-nudge::before { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .eos-nudge { transition: none; transform: none; }
}
@media print { .eos-nudge { display: none !important; } }