/* JASFIT Integrated Revision — global header, interaction and rendering QC */
html{
  scroll-padding-top:88px;
  scrollbar-gutter:stable;
}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:auto;
}
img,video,.site-header,.header-shell,.jasmine-chat-panel,.jasmine-chat-launcher{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* One consistent public header across every website page. */
.site-header{
  contain:layout style;
  transition:height .34s cubic-bezier(.16,1,.3,1)!important;
}
.header-shell{
  transform:translateZ(0);
  transition:padding .34s cubic-bezier(.16,1,.3,1),background-color .34s ease,border-color .34s ease,box-shadow .34s ease!important;
}
.site-header .site-logo{width:152px!important}
.desktop-nav a,
.header-login{
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.035em!important;
}
.header-register,
.mobile-register{
  font-weight:600!important;
  letter-spacing:.025em!important;
}


/* Checkout uses the same primary brand scale as the shared public header. */
body[data-page="checkout"] .brand-logo{
  width:152px!important;
  height:auto!important;
  max-height:54px!important;
  object-fit:contain;
}

/* Membership hero uses the full first viewport and keeps copy clear of the header. */
@media (min-width:901px){
  body[data-page="membership"] .jfi-membership .hero{min-height:100svh!important}
  body[data-page="membership"] .jfi-membership .hero-inner{
    padding-top:clamp(148px,17vh,196px)!important;
    padding-bottom:clamp(72px,9vh,104px)!important;
  }
  body[data-page="membership"] .site-header:not(.scrolled) .desktop-nav a,
  body[data-page="membership"] .site-header:not(.scrolled) .header-login{
    color:#fff!important;
    text-shadow:0 2px 14px rgba(0,0,0,.22);
  }
  body[data-page="membership"] .site-header:not(.scrolled) .desktop-nav a:hover,
  body[data-page="membership"] .site-header:not(.scrolled) .desktop-nav a.active{
    color:#7ce9e5!important;
  }
}

/* Explicit heading weight requested on the program page. */
body[data-page="program"] .jfi-program .section-heading h2{
  font-weight:800!important;
}

/* Chat isolation prevents page-specific transforms/overflow from breaking the popup. */
.jasmine-chat-launcher,
.jasmine-chat-panel{
  position:fixed!important;
  transform:translateZ(0);
  will-change:transform,opacity;
}
.jasmine-chat-panel{
  contain:layout paint style;
}
body[data-page="membership"] .jasmine-chat-launcher,
body[data-page="membership"] .jasmine-chat-panel,
body[data-page="program"] .jasmine-chat-launcher,
body[data-page="program"] .jasmine-chat-panel,
body[data-page="trainer"] .jasmine-chat-launcher,
body[data-page="trainer"] .jasmine-chat-panel{
  z-index:1800!important;
}
body[data-page="membership"] .jasmine-chat-launcher,
body[data-page="program"] .jasmine-chat-launcher,
body[data-page="trainer"] .jasmine-chat-launcher{
  z-index:1801!important;
}

/* Smooth, stable scroll rendering without changing the existing visual design. */
.site-header.scrolled .header-shell,
.mobile-dock,
.jasmine-chat-panel{
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.reveal,
.jfi-membership .hero-media,
.jfi-program .program-card,
.jfi-trainer .trainer-card{
  transform-style:preserve-3d;
}

/* Auth pages: preserve the visual while allowing wheel/touch scroll chaining from focused forms. */
.auth-public-page .form-panel{
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}
.auth-public-page.auth-form-focused{
  overflow-y:auto!important;
}
.auth-public-page .site-header .desktop-nav a,
.auth-public-page .site-header .header-login{
  font-weight:500!important;
}

/* Checkout and long pages: reduce repaint jitter during scroll. */
body[data-page="checkout"]{
  scroll-behavior:smooth;
  overflow-x:hidden;
}
body[data-page="checkout"] .topbar,
body[data-page="checkout"] .checkout-card,
body[data-page="checkout"] .summary-card{
  transform:translateZ(0);
  backface-visibility:hidden;
}
body[data-page="checkout"] .summary-card{
  will-change:transform;
}

@media(max-width:820px){
  .site-header .site-logo{width:122px!important}
  .desktop-nav a,.header-login{font-size:10px!important;font-weight:500!important}
}
@media(max-width:560px){
  .site-header .site-logo{width:112px!important}
  body[data-page="checkout"] .brand-logo{width:112px!important;max-height:44px!important}
}

@media(prefers-reduced-motion:reduce){
  .site-header,.header-shell,.jasmine-chat-panel,.jasmine-chat-launcher{will-change:auto!important}
}

/* Homepage CTA logo: stronger white brand presence without changing the layout. */
body[data-page="home"] .cta-copy .site-logo{
  width:142px!important;
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}
@media(max-width:820px){
  body[data-page="home"] .cta-copy .site-logo{width:132px!important}
}


/* Targeted revision — headline typography and native form scrolling (2026-08-03 R2). */
/* Homepage hero is deliberately excluded so its established visual remains untouched. */
body[data-page="home"] main h2,
body[data-page="home"] main h3,
body[data-page="home"] main h4,
body[data-page="home"] main h5,
body[data-page="home"] main h6,
body[data-page="facility"] main h1,
body[data-page="facility"] main h2,
body[data-page="facility"] main h3,
body[data-page="facility"] main h4,
body[data-page="facility"] main h5,
body[data-page="facility"] main h6,
body[data-page="contact"] main h1,
body[data-page="contact"] main h2,
body[data-page="contact"] main h3,
body[data-page="contact"] main h4,
body[data-page="contact"] main h5,
body[data-page="contact"] main h6{
  font-family:"Plus Jakarta Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body[data-page="home"] main p,
body[data-page="facility"] main p,
body[data-page="contact"] main p{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Login/register: use one native scroll container with no wheel interception. */
@media(min-width:901px){
  .auth-public-page .form-panel,
  .auth-public-page .auth-card.login-mode .form-panel{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior-y:auto!important;
    scroll-behavior:smooth!important;
    scroll-snap-type:none!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    scrollbar-gutter:stable;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(5,191,197,.28) transparent!important;
  }
  .auth-public-page .form-shell{
    flex:0 0 auto;
    margin-block:auto!important;
  }
  .auth-public-page .form-panel::-webkit-scrollbar{
    display:block!important;
    width:6px!important;
    height:6px!important;
  }
  .auth-public-page .form-panel::-webkit-scrollbar-thumb{
    background:rgba(5,191,197,.24)!important;
    border-radius:20px!important;
  }
  #registerForm > .register-goal-field{grid-column:1/-1}
}
.auth-public-page .field,
.auth-public-page input,
.auth-public-page select,
.auth-public-page button{
  scroll-margin-block:28px;
}

/* Checkout: preserve the visual while avoiding unnecessary transformed layers during page scroll. */
body[data-page="checkout"]{
  overflow-x:hidden!important;
  overflow-y:auto;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
body[data-page="checkout"] .topbar,
body[data-page="checkout"] .checkout-card,
body[data-page="checkout"] .summary-card{
  transform:none!important;
  backface-visibility:visible!important;
}
body[data-page="checkout"] .summary-card{will-change:auto!important}
body[data-page="checkout"] input,
body[data-page="checkout"] select,
body[data-page="checkout"] button,
body[data-page="checkout"] .field{
  scroll-margin-block:92px 34px;
}
body[data-page="checkout"] .modal,
body[data-page="checkout"] .package-picker-body{
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}

/* ==================================================================
   MOBILE PUBLIC PAGE COMPACTION — 2026-08-08
   Scope: website mobile only. Prevent shared homepage .hero-copy rules
   from creating excessive spacing on Membership/Trainer headers.
   ================================================================== */
@media (max-width:760px){
  body[data-page="membership"] .jfi-membership .hero-copy{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    max-width:320px!important;
    padding:0!important;
    margin-top:14px!important;
  }
  body[data-page="membership"] .jfi-membership .hero h1{
    max-width:330px!important;
  }
}

@media (max-width:620px){
  body[data-page="trainer"] .jfi-trainer .hero-inner{
    width:min(100%,350px)!important;
    margin-inline:auto!important;
  }
  body[data-page="trainer"] .jfi-trainer h1{
    max-width:330px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body[data-page="trainer"] .jfi-trainer .hero-copy{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    max-width:310px!important;
    padding:0!important;
    margin:0 auto!important;
  }
}

@media (max-width:720px){
  /* Body already reserves space for the fixed mobile dock; avoid a second
     oversized empty reserve inside the dark footer itself. */
  .site-footer{
    padding-bottom:38px!important;
  }
}

/* ==================================================================
   FINAL MOBILE MEMBERSHIP + TRAINER / CONTACT ICON FIX — 2026-08-08
   High-specificity page scopes ensure later shared/runtime styles cannot
   undo the requested public website refinements.
   ================================================================== */
@media (max-width:760px){
  body[data-page="membership"] .jfi-membership .hero{
    min-height:100svh!important;
    height:auto!important;
    align-items:end!important;
  }
  body[data-page="membership"] .jfi-membership .hero-media{
    background-size:auto 40%!important;
    background-position:74% 0!important;
  }
  body[data-page="membership"] .jfi-membership .hero-inner{
    padding:clamp(196px,33svh,248px) 0 92px!important;
  }
  body[data-page="membership"] .jfi-membership .hero h1{
    max-width:330px!important;
    font-size:clamp(1.58rem,7.4vw,2.05rem)!important;
    line-height:1.01!important;
  }
  body[data-page="membership"] .jfi-membership .hero-copy{
    max-width:330px!important;
    margin-top:12px!important;
    font-size:.75rem!important;
    line-height:1.48!important;
  }
  body[data-page="membership"] .jfi-membership .benefits{
    margin-top:16px!important;
    padding:10px 11px!important;
    gap:6px 9px!important;
  }
  body[data-page="membership"] .jfi-membership .benefit{
    grid-template-columns:21px minmax(0,1fr)!important;
    gap:6px!important;
    min-height:28px!important;
    font-size:.63rem!important;
    line-height:1.18!important;
  }
  body[data-page="membership"] .jfi-membership .benefit-icon{width:21px!important;height:21px!important}
  body[data-page="membership"] .jfi-membership .benefit-icon svg{width:17px!important;height:17px!important}
}
@media (max-width:430px) and (max-height:700px){
  body[data-page="membership"] .jfi-membership .hero-media{background-size:auto 37%!important}
  body[data-page="membership"] .jfi-membership .hero-inner{padding-top:186px!important;padding-bottom:88px!important}
  body[data-page="membership"] .jfi-membership .hero h1{font-size:1.48rem!important}
  body[data-page="membership"] .jfi-membership .hero-copy{font-size:.69rem!important;line-height:1.42!important;margin-top:10px!important}
  body[data-page="membership"] .jfi-membership .benefits{margin-top:12px!important;padding:8px 10px!important;gap:4px 8px!important}
  body[data-page="membership"] .jfi-membership .benefit{min-height:25px!important;font-size:.58rem!important}
}
@media (max-width:620px){
  body[data-page="trainer"] .jfi-trainer .hero{
    min-height:500px!important;
    padding:76px 14px 30px!important;
  }
  body[data-page="trainer"] .jfi-trainer .hero-inner{width:min(100%,350px)!important;margin-inline:auto!important}
  body[data-page="trainer"] .jfi-trainer .eyebrow{font-size:8.5px!important;letter-spacing:.16em!important}
  body[data-page="trainer"] .jfi-trainer .eyebrow::before,
  body[data-page="trainer"] .jfi-trainer .eyebrow::after{width:14px!important}
  body[data-page="trainer"] .jfi-trainer h1{
    max-width:285px!important;
    margin:12px auto 11px!important;
    font-size:clamp(27px,8.3vw,34px)!important;
    line-height:.98!important;
    letter-spacing:-.05em!important;
  }
  body[data-page="trainer"] .jfi-trainer .hero-copy{max-width:305px!important;margin:0 auto!important;font-size:11.5px!important;line-height:1.52!important}
  body[data-page="trainer"] .jfi-trainer .trust-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:min(100%,350px)!important;
    gap:7px!important;
    margin:18px auto 0!important;
  }
  body[data-page="trainer"] .jfi-trainer .trust-item{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:9px 5px 8px!important;
    border-radius:14px!important;
    text-align:center!important;
  }
  body[data-page="trainer"] .jfi-trainer .trust-icon{width:32px!important;height:32px!important;border-radius:10px!important}
  body[data-page="trainer"] .jfi-trainer .trust-icon svg{width:17px!important;height:17px!important}
  body[data-page="trainer"] .jfi-trainer .trust-title{font-size:7.4px!important;line-height:1.15!important;letter-spacing:.025em!important;white-space:normal!important}
  body[data-page="trainer"] .jfi-trainer .trust-sub{margin-top:2px!important;font-size:8.5px!important;line-height:1.18!important}
}
body[data-page="contact"] .contact-item i .whatsapp-brand{
  width:21px!important;
  height:21px!important;
  display:block!important;
  fill:currentColor!important;
  stroke:none!important;
}