/* Apex Performance Club — Professional UI v10
   Final visual/responsive layer. Kept separate from legacy CSS so backend markup remains stable. */
:root{
  --ui-bg:#f4f6f8;
  --ui-surface:#ffffff;
  --ui-ink:#111820;
  --ui-muted:#6d7883;
  --ui-line:#dfe5ea;
  --ui-dark:#0a0e13;
  --ui-dark-2:#111821;
  --ui-radius:18px;
  --ui-radius-sm:12px;
  --ui-shadow:0 18px 48px rgba(10,18,28,.08);
  --ui-shadow-hover:0 24px 64px rgba(10,18,28,.14);
}

html{background:var(--ui-dark);scroll-padding-top:84px}
body{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 62%,white);outline-offset:3px}
.container{width:min(1220px,calc(100% - 40px))}
.narrow{width:min(880px,calc(100% - 40px))}

/* Header */
.announcement{min-height:34px;display:flex;align-items:center;justify-content:center;padding:7px 16px;font-size:11px;letter-spacing:1.05px}
.site-header{z-index:60;border-bottom-color:rgba(255,255,255,.09);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.nav-wrap{height:76px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:0;line-height:1.05}
.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:#071015;font-size:21px;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 18%,transparent)}
.nav-links{gap:7px}
.nav-links>a:not(.btn){padding:10px 11px;border-radius:9px;color:#c8d0d8;transition:background .18s ease,color .18s ease}
.nav-links>a:not(.btn):hover{background:#151b22;color:#fff}
.nav-divider{width:1px;height:25px;background:#29313a;margin:0 4px}
.nav-toggle{width:46px;height:46px;border:1px solid #303946!important;border-radius:14px;background:rgba(14,19,25,.96)!important;box-shadow:0 14px 34px rgba(0,0,0,.24);padding:0!important;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:99px;background:#fff;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.public-nav-overlay{position:fixed;inset:0;z-index:68;background:rgba(4,8,13,.54);backdrop-filter:blur(2px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
.public-nav-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
body.public-menu-open{overflow:hidden}

/* Buttons */
.btn{min-height:44px;border-radius:11px;padding:12px 19px;letter-spacing:.32px;box-shadow:0 7px 18px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.13)}
.btn-small{min-height:38px;padding:9px 14px}
.btn-ghost{border-color:#49535f}

/* Public page sections */
.section{padding:88px 0;background:#f5f6f3}
.section-dark{background:#090d12}
.section-head{gap:24px;margin-bottom:34px}
.section-head>div{max-width:780px}
.section-copy{color:#68737e;max-width:720px}
.section-dark .section-copy{color:#9ca7b1}
.page-hero,.article-hero{padding:92px 0 62px;background:radial-gradient(circle at 82% 18%,rgba(215,255,54,.08),transparent 28%),#0d1116;border-bottom:1px solid #202730}
.page-hero h1,.article-hero h1{letter-spacing:-1px}

/* Cards — common professional treatment */
.image-card,.trainer-card,.price-card,.transformation,.testimonial-grid blockquote,.calculator-card,.lead-form,.contact-panel,.how-card,.signature-card,.support-channel,.public-branch-card,.legal-card,.video-card{
  border-radius:var(--ui-radius)!important;
  border:1px solid var(--ui-line);
  overflow:hidden;
  box-shadow:var(--ui-shadow);
}
.image-card,.trainer-card,.price-card,.transformation,.testimonial-grid blockquote,.how-card,.support-channel,.public-branch-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.image-card:hover,.trainer-card:hover,.price-card:hover,.transformation:hover,.testimonial-grid blockquote:hover,.how-card:hover,.support-channel:hover,.public-branch-card:hover{
  transform:translateY(-4px);box-shadow:var(--ui-shadow-hover)
}
.section-dark .image-card,.section-dark .trainer-card,.section-dark .testimonial-grid blockquote,.section-dark .how-card{border-color:#242c35;box-shadow:0 20px 55px rgba(0,0,0,.18)}
.image-card-body,.trainer-card>div{padding:22px}
.image-card h3,.trainer-card h3,.price-card h3,.transformation h3{line-height:1.05;letter-spacing:-.35px}
.image-card>img,.trainer-card img{background:#111821}
.price-card{padding:27px}
.price-card.featured{transform:none;background:linear-gradient(160deg,#10151b,#080b0f);box-shadow:0 24px 60px rgba(8,11,15,.18)}
.price-card.featured:hover{transform:translateY(-4px)}
.testimonial-grid blockquote{padding:26px}
.testimonial-grid p{line-height:1.7}
.signature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 15%,rgba(0,0,0,.8) 100%);pointer-events:none}
.signature-card>*{position:relative;z-index:1}

/* Forms */
.lead-form,.contact-panel,.calculator-card{padding:28px}
.lead-form input,.lead-form textarea,.lead-form select,.bmi-form input,.newsletter-form input{
  border-radius:11px;border-color:#d4dbe1;min-height:46px;outline:none;transition:border-color .16s ease,box-shadow .16s ease
}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus,.bmi-form input:focus,.newsletter-form input:focus{border-color:#94a04e;box-shadow:0 0 0 4px rgba(165,184,77,.13)}

/* Tables */
.table-wrap{border-radius:14px;background:#fff;border:1px solid #e1e6ea;box-shadow:0 12px 34px rgba(11,17,24,.05)}
.schedule-table th{background:#111821;font-size:11px;letter-spacing:.6px;text-transform:uppercase}
.schedule-table td{font-size:13px;color:#34404a}
.schedule-table tbody tr:hover{background:#f8fafb}

/* Footer */
.footer{padding:58px 0 90px;background:#05080c;border-top:1px solid #171d24}
.footer-top>div{min-width:0}
.footer h4{letter-spacing:.55px}
.footer-top>div:not(:first-child){display:flex;flex-direction:column;gap:8px}
.footer-top>div:not(:first-child)>a{color:#a7b0b9;font-size:13px}
.footer-top>div:not(:first-child)>a:hover{color:#fff}
.footer-bottom{align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.footer-legal-links{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}
.footer-copyright{order:3;flex:1 0 100%;text-align:center;color:#8a949e}
.footer-credit{color:#6f7a84}

/* Member area */
.member-site{background:#f1f4f6}
.member-site .site-header.member-header{box-shadow:0 8px 26px rgba(0,0,0,.12)}
.portal{padding:26px 0 48px;background:linear-gradient(180deg,#eef2f5,#f7f8f9)}
.portal-head h1{letter-spacing:-.55px}
.portal-nav{background:rgba(255,255,255,.7);border:1px solid #e0e5e9;border-radius:14px;padding:6px;box-shadow:0 8px 22px rgba(12,18,25,.04)}
.portal-nav a{min-height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px!important}
.portal-panel,.portal-card,.member-status-card,.checkout-card,.member-auth-card,.receipt{
  border-color:#dde3e8!important;border-radius:16px!important;box-shadow:0 12px 34px rgba(10,18,28,.055)!important;
}
.portal-panel,.checkout-card{padding:20px}
.portal-card,.member-status-card{transition:transform .18s ease,box-shadow .18s ease}
.portal-card:hover,.member-status-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(10,18,28,.09)!important}
.member-status-card.dark{background:linear-gradient(150deg,#121922,#0b1016)}
.member-form-stack input,.member-form-stack select,.member-form-stack textarea,.member-form-grid input:not([type=checkbox]),.member-form-grid select,.member-form-grid textarea,.checkout-card input,.checkout-card select,.checkout-card textarea{
  border-radius:11px!important;border-color:#d2d9df!important;background:#fff!important
}
.member-footer{box-shadow:0 -7px 24px rgba(12,18,25,.05)}

/* Phone / tablet — left-centre public menu */
@media(max-width:900px){
  .container,.narrow{width:calc(100% - 28px)!important}
  .site-header .nav-wrap{height:64px!important;justify-content:center!important}
  .site-header .brand{margin-inline:auto;max-width:calc(100% - 70px)}
  .nav-toggle{
    display:flex!important;position:fixed!important;left:max(10px,env(safe-area-inset-left))!important;top:50%!important;
    transform:translateY(-50%)!important;z-index:72!important;margin:0!important
  }
  .nav-links{
    display:flex!important;position:fixed!important;top:50%!important;left:66px!important;right:auto!important;
    width:min(290px,calc(100vw - 82px))!important;max-height:min(72dvh,620px)!important;padding:10px!important;
    flex-direction:column!important;align-items:stretch!important;gap:3px!important;background:rgba(10,14,19,.985)!important;
    border:1px solid #29323d!important;border-radius:16px!important;box-shadow:0 28px 80px rgba(0,0,0,.44)!important;
    overflow-y:auto!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transform:translate(-14px,-50%) scale(.98)!important;transform-origin:left center!important;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;z-index:71!important
  }
  .nav-links.open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(0,-50%) scale(1)!important}
  .nav-links>a:not(.btn){padding:11px 12px!important;font-size:12px!important;border-radius:9px!important}
  .nav-links .btn{margin-top:3px!important;min-height:42px!important;font-size:11px!important}
  .nav-divider{width:100%;height:1px;margin:4px 0;background:#29323d}
  .card-grid,.trainer-grid{gap:16px}
  .pricing-grid{gap:14px}
  .footer-grid,.footer-top{gap:24px}
}

@media(max-width:600px){
  body{font-size:14px!important}
  .container,.narrow{width:calc(100% - 22px)!important}
  .announcement{font-size:9px!important;min-height:31px}
  .smart-announcement .container{min-height:34px;font-size:9px!important}
  .smart-announcement strong{font-size:8px;padding:4px 6px}
  .site-header .nav-wrap{height:58px!important}
  .brand{font-size:18px!important}
  .brand img{height:33px!important;max-width:150px!important}
  .brand-mark{width:35px;height:35px;font-size:18px;border-radius:10px}
  .nav-toggle{left:8px!important;width:42px;height:42px}
  .nav-links{left:57px!important;width:min(270px,calc(100vw - 68px))!important;padding:8px!important}
  .nav-links>a:not(.btn){font-size:11px!important;padding:10px!important}
  .section{padding:50px 0!important}
  .section h2,.cta h2{font-size:34px!important}
  .section-copy,.page-hero p{font-size:13px!important;line-height:1.65}
  .page-hero,.article-hero{padding:72px 0 44px!important}
  .page-hero h1,.article-hero h1{font-size:44px!important}
  .card-grid,.trainer-grid,.pricing-grid,.testimonial-grid,.support-channel-grid,.public-branch-grid{gap:12px!important}
  .image-card-body,.trainer-card>div,.price-card{padding:18px!important}
  .image-card>img,.trainer-card img{height:250px!important}
  .image-card h3,.trainer-card h3,.price-card h3,.transformation h3{font-size:25px!important}
  .testimonial-grid blockquote{padding:20px!important}
  .lead-form,.contact-panel,.calculator-card{padding:19px!important}
  .footer{padding-top:42px}
  .footer-top{grid-template-columns:1fr!important;gap:12px!important}
  .footer-top>div{padding:16px!important;border:1px solid #171f28;border-radius:14px;background:#090d12}
  .footer-bottom{gap:10px;padding-bottom:10px!important}
  .footer-credit{font-size:9px}
  .mobile-cta{border-top-color:#242c35;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  .mobile-cta a{min-height:44px;display:grid;place-items:center;font-size:10px!important}

  .member-site .nav-wrap{justify-content:space-between!important;padding-left:0}
  .member-site .brand{margin:0;max-width:52%}
  .member-header-actions>a{min-height:34px;font-size:9.5px!important;padding:7px 9px!important}
  .portal{padding:18px 0 34px!important}
  .portal-head h1{font-size:30px!important}
  .portal-head p{font-size:11px!important;line-height:1.5}
  .portal-nav{padding:6px!important;gap:6px!important}
  .portal-nav-main{gap:6px!important}
  .portal-nav-main a{min-height:38px;font-size:9.5px!important;padding:8px 5px!important}
  .portal-logout{min-height:38px!important;font-size:9.5px!important}
  .portal-grid,.member-overview-grid{gap:9px!important}
  .portal-card,.member-status-card{padding:14px!important}
  .portal-card strong,.member-status-card strong{font-size:23px!important}
  .portal-panel,.checkout-card{padding:15px!important}
  .member-form-stack label,.member-form-grid label{font-size:10px!important}
  .member-form-stack input,.member-form-stack select,.member-form-stack textarea,.member-form-grid input:not([type=checkbox]),.member-form-grid select,.member-form-grid textarea{font-size:13px!important;min-height:43px!important}
}

@media(max-width:390px){
  .container,.narrow{width:calc(100% - 18px)!important}
  .nav-toggle{left:6px!important;width:40px;height:40px}
  .nav-links{left:52px!important;width:calc(100vw - 60px)!important}
  .portal-grid,.member-overview-grid{grid-template-columns:1fr 1fr!important}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* Standalone member app card polish */
.pwa-login-card,.pwa-member-card,.pwa-access-card,.pwa-announcements,.pwa-section-card,.pwa-plan-list,.login-install-box{
  border-radius:16px!important;border-color:#26303b!important;box-shadow:0 16px 42px rgba(0,0,0,.16)!important
}
.pwa-section-card,.pwa-announcements,.pwa-plan-list{overflow:hidden}
.pwa-quick-grid a{border-radius:14px!important;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.pwa-quick-grid a:active{transform:scale(.985)}
.training-card .pwa-plan-content{border-radius:12px;padding:13px;overflow:auto}
.support-live-card{border-radius:20px!important;box-shadow:0 22px 60px rgba(8,14,20,.17)!important}
.login-install-box{overflow:hidden}