/* Shared membership presentation, scoped to pass pages and the membership catalogue. */
.tf-memberships{max-width:1248px;margin:auto;padding:72px 32px;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','DM Sans',system-ui,sans-serif;color:#f5f5f2;scroll-margin-top:110px}
.tf-memberships-heading{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:36px}.tf-kicker{font-size:10px;letter-spacing:.15em;color:#ffd700;margin:0 0 16px}.tf-memberships-heading h2{font-size:clamp(32px,4vw,48px);font-weight:350;line-height:1.12;letter-spacing:-.035em;margin:0}.tf-memberships-heading>p{max-width:420px;color:#a4a6a2;line-height:1.65;font-size:14px;margin:0}
.tf-memberships-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tf-plan{min-width:0;background:#ffd700;color:#000000;border:none;border-radius:20px;padding:32px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,0.25);transition:transform .25s ease,box-shadow .25s ease}
.tf-plan:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(255,215,0,0.35)}
.tf-plan-top{display:flex;justify-content:space-between;align-items:center;color:#000000;font-size:11px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;opacity:0.85;margin-bottom:24px}
.tf-plan-top>span:last-child{color:#000000;font-size:22px;line-height:1;font-weight:700;opacity:1}
.tf-plan h3{font-size:28px;font-weight:400;line-height:1.16;letter-spacing:-.03em;margin:0 0 12px;min-height:66px;color:#000000}
.tf-plan-duration{font-size:12px;color:#000000;font-weight:500;margin:0 0 24px;min-height:20px}
.tf-plan-price{font-size:34px;font-weight:400;letter-spacing:-.04em;color:#000000;margin-bottom:26px}
.tf-plan-price small{display:block;letter-spacing:0;font-size:11px;color:#000000;margin-top:3px;font-weight:500}
.tf-plan ul{list-style:none;padding:20px 0 0;margin:0 0 28px;border-top:1px solid rgba(0,0,0,0.18);font-size:13px;color:#000000;line-height:1.5;font-weight:500}
.tf-plan li{margin:0 0 12px;display:flex;gap:10px}
.tf-plan li:before{content:'✓';color:#000000;font-weight:800}
.tf-plan-cta{margin-top:auto;background:#000000;color:#ffd700;border-radius:99px;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,0.25);transition:background .2s,color .2s,transform .2s}
.tf-plan-cta:hover{background:#1a1a1a;color:#ffd700;transform:translateY(-2px)}
/* Global yellow-card rules force links and spans to black text; keep the black CTA's label yellow. */
html body .tf-plan a.tf-plan-cta,html body .tf-plan a.tf-plan-cta span,html body .tf-plan a.tf-plan-cta:hover{background:#000000!important;color:#ffd700!important;-webkit-text-fill-color:#ffd700!important}
.tf-plan-empty{color:#a4a6a2;grid-column:1/-1}

#memberships #active-membership-status-card{background:#ffd700!important;color:#000000!important;border:none!important;box-shadow:0 10px 30px rgba(0,0,0,0.25)!important;border-radius:18px!important;padding:24px 28px!important;margin:0 0 28px!important}
#memberships #active-membership-status-card h3{font-size:20px!important;font-weight:400!important;color:#000000!important}
#memberships #active-membership-status-card p{color:#000000!important;font-weight:500!important}
#memberships #active-membership-status-card .button{background:#000000!important;color:#ffd700!important;-webkit-text-fill-color:#ffd700!important;box-shadow:0 4px 14px rgba(0,0,0,0.25)!important;font-weight:700!important;border-radius:99px!important}
#memberships #active-membership-status-card .button:hover{background:#1a1a1a!important;color:#ffd700!important;-webkit-text-fill-color:#ffd700!important}

.tf-membership-detail{padding-top:42px;padding-bottom:80px}.tf-membership-detail .breadcrumbs{margin-bottom:40px}.tf-pass-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}.tf-pass-visual{background:#ffd700;color:#000000;border-radius:20px;padding:32px;aspect-ratio:1.05;display:flex;flex-direction:column;overflow:hidden}.tf-pass-top,.tf-pass-foot,.tf-pass-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#000000}.tf-pass-top>span:first-child{font-size:22px;letter-spacing:-1px;font-weight:500;color:#000000}.tf-pass-top>span:last-child,.tf-pass-foot{font-size:9px;letter-spacing:.12em;color:#000000}.tf-pass-symbol{display:flex;align-items:center;justify-content:space-between;flex:1;font-size:clamp(100px,13vw,185px);font-weight:400;letter-spacing:-.06em;line-height:1;color:#000000}.tf-pass-symbol>span{font-size:.6em;font-weight:300;letter-spacing:0;color:#000000}.tf-pass-bottom{align-items:flex-end;margin-bottom:28px}.tf-pass-bottom>span:first-child{font-size:12px;color:#000000}.tf-pass-bottom strong{display:block;max-width:260px;font-size:26px;line-height:1.15;font-weight:400;letter-spacing:-.025em;margin-top:8px;color:#000000}.tf-pass-bottom>span:last-child{font-size:10px;line-height:1.5;letter-spacing:.09em;color:#000000}.tf-pass-foot{border-top:1px solid rgba(0,0,0,0.18);padding-top:18px}.tf-pass-caption{font-size:12px;color:#a4a6a2;margin-top:16px}.tf-pass-info{padding:12px 0}.tf-pass-info h1{font-size:clamp(36px,4.5vw,58px);font-weight:350;line-height:1.08;letter-spacing:-.035em;color:#f5f5f2;margin:0 0 16px}.tf-pass-intro{font-size:16px;color:#a4a6a2;margin-bottom:30px}.tf-pass-price{font-size:34px;letter-spacing:-.04em;line-height:1.2}.tf-pass-price small{display:block;color:#a4a6a2;font-size:12px;letter-spacing:0;margin-top:8px}.tf-pass-facts{display:flex;gap:32px;margin-top:30px;padding:24px 0;border-top:1px solid #ffffff19;border-bottom:1px solid #ffffff19;font-size:11px;color:#a4a6a2}.tf-pass-facts strong{display:block;font-size:22px;color:#f5f5f2;font-weight:400;letter-spacing:-.03em;margin-bottom:4px}.tf-pass-info .purchase-row{margin-top:20px}.tf-pass-info #add-button{border-radius:10px;padding:18px}.tf-pass-checkout-note{font-size:11px;color:#a4a6a2;margin:12px 0 0}.tf-pass-info .product-information{margin-top:28px}.tf-pass-info .product-information h2{font-size:16px}

/* Auto-Renew & FitPoints Toggle Card */
.tf-auto-renew-card{background:#ffd700;color:#000000;border:none;border-radius:18px;padding:24px;margin-top:24px;box-shadow:0 10px 30px rgba(0,0,0,0.25);transition:transform .2s ease,box-shadow .2s ease}
.tf-auto-renew-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,215,0,0.3)}
.tf-auto-renew-header{display:flex;align-items:center;gap:14px}
.tf-toggle-wrapper{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.tf-toggle-input{opacity:0;width:0;height:0;position:absolute}
.tf-toggle-label{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.15);transition:.25s ease;border-radius:24px;border:1.5px solid rgba(0,0,0,0.3)}
.tf-toggle-slider{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background-color:#ffffff;transition:.25s ease;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tf-toggle-input:checked + .tf-toggle-label{background-color:#000000;border-color:#000000}
.tf-toggle-input:checked + .tf-toggle-label .tf-toggle-slider{transform:translateX(20px);background-color:#ffd700}
.tf-toggle-input:focus-visible + .tf-toggle-label{outline:2px solid #000000;outline-offset:2px}
.tf-toggle-title{font-size:15px;font-weight:700;color:#000000;cursor:pointer;user-select:none;letter-spacing:-.01em}
.tf-fit-points-info{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,0.18)}
.tf-fit-points-badge{display:flex;align-items:center;gap:8px;font-size:13px;color:#000000;line-height:1.45;font-weight:500}
.tf-fit-points-icon{font-size:15px;flex-shrink:0}
.tf-points-highlight{color:#000000;font-weight:800}
.tf-fit-points-subtext{font-size:12px;color:#000000;margin:6px 0 0;line-height:1.5}
.tf-renewal-disclaimer{font-size:11px;color:#000000;margin:8px 0 0;line-height:1.5}
.tf-renewal-disclaimer strong{color:#000000}
.tf-fit-points-off{margin-top:12px;font-size:13px;color:#000000;line-height:1.5;font-weight:500}

/* Global dark-card rules force white text on anything named *card*; this one is yellow. */
html body .tf-auto-renew-card,html body .tf-auto-renew-card :is(p,span,strong,label,div){color:#000000!important;-webkit-text-fill-color:#000000!important}
html body .tf-auto-renew-card .tf-points-highlight{font-weight:800}

@media(max-width:1050px){.tf-memberships-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tf-pass-layout{gap:36px}.tf-pass-visual{padding:24px}.tf-pass-top>span:first-child{font-size:18px}.tf-pass-top>span:last-child{font-size:8px}}
@media(max-width:700px){.tf-memberships{padding:44px 20px}.tf-memberships-heading{margin-bottom:26px}.tf-memberships-grid{grid-template-columns:1fr}.tf-plan h3{min-height:0}.tf-plan{padding:24px}.tf-plan-duration{min-height:0}.tf-pass-layout{grid-template-columns:1fr;gap:16px}.tf-membership-detail{padding:26px 20px 48px}.tf-membership-detail .breadcrumbs{font-size:11px;margin-bottom:24px;gap:8px}.tf-pass-visual{aspect-ratio:1.12;padding:24px}.tf-pass-symbol{font-size:110px}.tf-pass-bottom strong{font-size:22px}.tf-pass-foot{font-size:8px}.tf-pass-info{padding-top:12px}.tf-pass-info h1{font-size:38px}.tf-pass-facts{gap:24px}.tf-pass-facts strong{font-size:20px}.tf-pass-caption{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.tf-plan{transition:none}.tf-plan:hover{transform:none}}

@media(min-width:1051px){.tf-memberships-grid .tf-plan{padding:28px}.tf-memberships-grid .tf-plan-duration{min-height:3.4em}}
