/* Prestige Fitness dress rehearsal — iPhone / small-screen overlay.
   Loaded after the hashed snapshot CSS. Do not redesign the brand. */

html {
  /* Do NOT set overflow-x:hidden on html — it clips position:fixed LiveChat on iOS. */
  scroll-padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}

/* Skip link: keep off-screen until keyboard focus (Playwright/Safari otherwise paints it on content). */
.skip-link:not(:focus):not(:focus-visible) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  transform: none !important;
}

@media (max-width: 768px) {
  /* Keep horizontal clip on the shell only — NOT html/body — or iOS hides fixed LiveChat. */
  .site-shell {
    overflow-x: hidden;
    max-width: 100%;
  }
  body {
    max-width: 100%;
  }

  /* ---- Desktop-row card grids → single column, full width ---- */
  .service-nutrition-experience,
  .service-lifestyle-experience,
  .service-nutrition-team,
  .service-nutrition-team > div,
  .team-grid,
  .team-grid[data-count="1"],
  .team-grid[data-count="2"],
  .additional-team,
  .additional-team-grid,
  .review-grid,
  .process-grid,
  .transformation-grid,
  .v3-voice-grid,
  .v3-goal-grid,
  .class-grid,
  .paid-coach-match,
  .paid-benefit-grid,
  .service-step-list-horizontal,
  .service-lifestyle-hero-visual > div,
  .edge-steps,
  .edge-v2-plan,
  .edge-v2-hero,
  .edge-v2-measurement-media,
  .edge-v2-step-grid,
  .service-testing-hero-media,
  .v3-hero,
  .v3-story-feature,
  .v3-voice-stack,
  .contact-grid,
  .related-path-grid,
  .performance-tool-grid,
  .client-video-grid,
  .included-grid,
  .pt-experience-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .service-nutrition-experience,
  .service-nutrition-team,
  .service-nutrition-team > div,
  .team-grid {
    display: grid !important;
    gap: 16px !important;
  }

  .service-nutrition-team article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }

  .service-nutrition-team article:nth-child(2) {
    transform: none !important;
  }

  .service-nutrition-team article img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
  }

  /* ---- Card / figure photos: keep faces in frame ---- */
  .edge-v2-step-grid figure,
  .edge-v2-step-grid article figure,
  .edge-v2-step-grid article:nth-child(4) figure {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .edge-v2-step-grid img,
  .edge-v2-step-grid article img,
  .edge-v2-step-grid article:nth-child(4) img,
  article figure img,
  .team-grid img,
  .team-profile-header > img,
  .team-hero > figure img,
  .v3-hero-media > img {
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ---- Less side gutter on phone ---- */
  .section-pad,
  .home-v3 .section-pad,
  .v3-hero,
  .edge-v2-hero,
  .edge-v2-proof,
  .edge-v2-plan,
  .edge-v2-steps,
  .edge-v2-intro,
  .interior-hero,
  .site-header,
  .utility-bar,
  .conversion-header,
  .footer-main,
  .team-roster,
  .service-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .v3-hero {
    padding-top: 28px !important;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .edge-v2-hero {
    padding-top: 32px !important;
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
  }

  /* Safari + Grok Bot bottom chrome: 72–96px was not enough on iPhone. */
  .edge-v2-proof {
    padding-top: 8px !important;
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .edge-v2-plan.section-pad,
  .edge-v2-steps,
  .edge-v2-intro.section-pad,
  .edge-v2-video.section-pad,
  .edge-v2-signals.section-pad,
  .edge-v2-optional.section-pad {
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #main-content {
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ================================================================== */
  /* Homepage client-story card: one full-width poster, no fake player  */
  /* Safari/WebKit paints a ghost inset when img uses height:100% +     */
  /* object-fit:cover. Kill play badge, overlays, and the duplicate.    */
  /* ================================================================== */
  .v3-story-feature {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .v3-story-feature > a {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    position: relative !important;
  }

  .v3-story-feature > a figure {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden !important;
    margin: 0 !important;
    background: #14242c;
  }

  .v3-story-feature > a figure::before,
  .v3-story-feature > a figure::after {
    content: none !important;
    display: none !important;
  }

  .v3-story-feature > a figure > span,
  .v3-story-feature > a figure > :not(img) {
    display: none !important;
  }

  .v3-story-feature > a img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    object-position: 70% center !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .v3-story-feature > a > div {
    min-height: 0 !important;
  }

  .v3-voice-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  /* Results story posters: same fake play chrome (JS not loaded). */
  .story-video-poster > span,
  .story-video-poster > strong,
  button.story-video-poster > span,
  button.story-video-poster > strong {
    display: none !important;
  }

  .story-video-poster::before,
  .story-video-poster::after {
    content: none !important;
    display: none !important;
  }

  .story-video-poster img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    object-position: 65% center !important;
    transform: none !important;
  }

  /* Ambient service / recovery play badge — video JS stripped. */
  .ambient-service-video button {
    display: none !important;
  }

  /* ================================================================== */
  /* Empty media slots: collapse so they cannot leave a black hole.     */
  /* ================================================================== */
  video:not([src]):not([poster]):not(:has(source[src])),
  main iframe:not([src]):not([id*="chat"]):not([class*="chat"]),
  main iframe[src=""]:not([id*="chat"]):not([class*="chat"]),
  .site-shell > iframe:not([src]):not([id*="chat"]):not([class*="chat"]) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .edge-v2-hero-media:not(:has(img[src], video[src], video[poster], video source[src])),
  .edge-v2-hero-visual:not(:has(img[src], video[src], video[poster])),
  .edge-v2-measurement-media:not(:has(img[src])),
  figure:not(:has(img[src], video[src], video[poster], video source[src])):not(:has(figcaption)) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hero media sizes to the photo — no reserved 390px void. */
  .edge-v2-hero-media {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }

  .edge-v2-hero-media img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 42% !important;
    display: block !important;
    position: static !important;
  }

  .edge-v2-hero-note:empty {
    display: none !important;
  }

  /* Measurement photos: hashed CSS keeps 2-col until 365px; stack at 375. */
  .edge-v2-measurement-media {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .edge-v2-measurement-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    display: block !important;
  }

  .edge-v2-video video:not([src]):not([poster]):not(:has(source[src])) {
    display: none !important;
    height: 0 !important;
  }

  /* Homepage hero poster: avoid absolute+height:100% WebKit ghost. */
  .v3-hero-media {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
  }

  .v3-hero-media > img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    display: block !important;
  }

  /* TEST banner is sticky; keep first-section headlines from sitting flush. */
  .v3-hero,
  .edge-v2-hero,
  .interior-hero,
  .service-hero,
  .team-hero,
  .results-hero,
  .conversion-hero,
  .paid-hero {
    scroll-margin-top: 56px;
  }
}


/* ==========================================================================
   Form + LiveChat click-through fixes (preview UX audit 2026-09-11)
   - Nested spans/headers must not steal taps from radio labels / Continue
   - Minimized LiveChat must not cover forms or resource cards (~300px ghost)
   - Never set overflow-x:hidden on html/body (keeps fixed LiveChat on iOS)
   ========================================================================== */

/* Radio cards: visual span is decorative; label owns the hit target */
.goal-choice > span,
.goal-choice span,
label.goal-choice > span,
.consent > span,
.form-heading h2,
.form-heading .eyebrow,
.form-heading p,
.form-progress,
.form-progress span {
  pointer-events: none;
}

label.goal-choice,
.goal-choice,
.goal-choice input,
button.form-next,
button.form-back,
button.submit-button,
.lead-form .button {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Keep sticky site chrome from eating taps over the in-view form controls */
.lead-form,
.lead-form fieldset.form-step,
.goal-choice-grid,
.goal-choice-field {
  position: relative;
  z-index: 3;
}

/* LiveChat: container is often a large fixed box; only children should receive clicks */
#chat-widget-container,
#chat-widget-container[style],
div[id^="chat-widget"] {
  pointer-events: none !important;
}

#chat-widget-container > *,
#chat-widget-minimized,
#chat-widget-minimized *,
#chat-widget-container iframe,
iframe[src*="livechatinc"],
iframe[src*="livechatinc.com"],
iframe[src*="cdn.livechat"],
iframe[id*="chat-widget"] {
  pointer-events: auto !important;
}

/* When maximized, allow the full chat UI; when minimized, shrink dead hit area */
#chat-widget-container:has(iframe[style*="display: none"]),
#chat-widget-container:has(#chat-widget[style*="display: none"]) {
  /* keep pointer-events:none on shell; launcher child still auto */
}

/* Safe area so last form fields / resource cards clear the minimized launcher */
@media (max-width: 900px) {
  .lead-form,
  main.resources,
  .resources-grid,
  .resource-list,
  section.resources,
  #main-content {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 901px) {
  /* Desktop minimized bubble still steals a tall strip on Resources */
  .resources-grid,
  .resource-list,
  main.resources,
  section.resources,
  #main-content:has(.resources-grid),
  #main-content:has(a[href*="/resources/"]) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}


/* ==========================================================================
   Desktop header CTA clip fix (QA 2026-09-14 ~1280px)
   Full "Start Longevity Assessment" was clipped past header edge.
   Compress nav/brand/CTA before the 1260px mobile-nav breakpoint.
   ========================================================================== */
@media (max-width: 1450px) and (min-width: 1261px) {
  .site-header {
    gap: 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .brand {
    width: 188px !important;
    margin-right: 0 !important;
  }
  .desktop-nav {
    gap: 9px !important;
    font-size: 11.5px !important;
  }
  .desktop-nav .member-link {
    padding-left: 10px !important;
  }
  .site-header > .button,
  .site-header > .button.button-small,
  .site-header > a.button.button-small {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    min-height: 40px !important;
  }
}

@media (max-width: 1340px) and (min-width: 1261px) {
  .site-header {
    gap: 8px !important;
  }
  .brand {
    width: 168px !important;
  }
  .desktop-nav {
    gap: 7px !important;
    font-size: 11px !important;
  }
  .site-header > .button,
  .site-header > .button.button-small,
  .site-header > a.button.button-small {
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}