/* TKMMAFIT · membership sign-up: pick an option, and one big box opens with everything for it.
   Gym only wears steel, Full access wears TK red, so the box changes with the choice. */
.su-sec{position:relative}
.su-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.su-head .h2{margin-top:18px;max-width:14ch}
.su-head .lead{max-width:34ch;margin:0}
.su{--acc:#C9CCD1;--acc-a:rgba(201,204,209,.38);--acc-g:rgba(201,204,209,.10)}
.su[data-tier="Full access"]{--acc:#E3262E;--acc-a:rgba(227,38,46,.5);--acc-g:rgba(227,38,46,.13)}

/* ---------- the two options ---------- */
.su-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.su-opt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(270px,27vw,360px);padding:clamp(22px,2.4vw,30px);border-radius:20px;overflow:hidden;text-align:start;color:var(--txt);cursor:pointer;
  background:#111113;box-shadow:inset 0 0 0 1px rgba(244,243,239,.12);isolation:isolate;
  transition:min-height .7s var(--out),box-shadow .45s var(--out),opacity .45s var(--out),transform .6s var(--out)}
.su-oph{position:absolute;inset:0;z-index:-2}
.su-oph img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--out),filter .6s var(--out);filter:saturate(.85) brightness(.75)}
.su-opt::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.15) 0%,rgba(11,11,12,.55) 45%,rgba(11,11,12,.94) 100%)}
.su-opt:hover .su-oph img{transform:scale(1.06)}
.su-opt:hover{box-shadow:inset 0 0 0 1px rgba(244,243,239,.32)}
.su-opt:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}
.su-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,243,239,.6)}
.su-otx{display:flex;flex-direction:column;gap:8px}
.su-otx b{font-family:var(--disp);font-stretch:118%;font-weight:600;font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.02em}
.su-d{color:rgba(244,243,239,.78);font-size:14.5px;line-height:1.55;max-width:42ch;transition:opacity .4s var(--out),max-height .6s var(--out);max-height:6em;overflow:hidden}
.su-go{position:absolute;top:clamp(18px,2vw,24px);inset-inline-end:clamp(18px,2vw,24px);display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 18px;border-radius:99px;background:#fff;color:#0B0B0C;font-weight:600;font-size:14px;transition:background .4s var(--out),color .4s var(--out)}
.su-go i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0B0B0C;color:#fff}
.su-go i svg{width:14px;height:14px}
.su-go-c{display:none}

/* chosen: the options shrink into a slim switch, the chosen one stays lit */
.su.is-open .su-opt{min-height:96px}
.su.is-open .su-d{max-height:0;opacity:0}
.su.is-open .su-otx b{font-size:clamp(20px,1.8vw,26px)}
.su.is-open .su-opt[aria-checked="false"]{opacity:.55}
.su.is-open .su-opt[aria-checked="false"]:hover{opacity:.9}
.su.is-open .su-opt[aria-checked="false"] .su-go{background:rgba(255,255,255,.1);color:var(--txt);box-shadow:inset 0 0 0 1px rgba(244,243,239,.22)}
.su.is-open .su-opt[aria-checked="false"] .su-go i{background:rgba(255,255,255,.12)}
.su.is-open .su-opt[aria-checked="false"] .su-go-t::before{content:""}
.su-opt[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--acc-a),0 24px 60px -30px var(--acc-a)}
.su-opt[aria-checked="true"] .su-go-t{display:none}
.su-opt[aria-checked="true"] .su-go-c{display:inline}
.su-opt[aria-checked="true"] .su-go i{background:var(--acc);color:#0B0B0C}
.su[data-tier="Full access"] .su-opt[aria-checked="true"] .su-go i{color:#fff}
.su-opt[aria-checked="true"] .su-go i svg{transform:rotate(90deg)}

/* ---------- the big box ---------- */
.su-open{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--out)}
.su.is-open .su-open{grid-template-rows:1fr}
.su-open>.su-in{min-height:0;overflow:hidden}
.su-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin-top:16px;border-radius:24px;
  background:linear-gradient(180deg,#161618,#0f0f11);box-shadow:inset 0 0 0 1px rgba(244,243,239,.12),inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.9);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--out) .1s,transform .8s var(--out) .1s,box-shadow .6s var(--out)}
.su.is-open .su-in{opacity:1;transform:none;box-shadow:inset 0 0 0 1px var(--acc-a),inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.9),0 0 120px -40px var(--acc-g)}

/* left: the chosen option, stacked so the switch is a crossfade, not a jump */
.su-panes{display:grid;border-inline-end:1px solid rgba(244,243,239,.1)}
.su-pane{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .5s var(--out),visibility 0s linear .5s}
.su-pane.on{opacity:1;visibility:visible;transition:opacity .6s var(--out) .05s,visibility 0s}
.su-hero{position:relative;aspect-ratio:16/10;overflow:hidden;border-start-start-radius:24px;isolation:isolate}
.su-hph{position:absolute;inset:0;z-index:-2}
.su-hph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--out)}
.su-pane.on .su-hph img{transform:scale(1)}
.su-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,15,17,0) 30%,rgba(15,15,17,.65) 70%,#141416 100%)}
.su-htx{position:absolute;inset-inline:clamp(22px,2.6vw,34px);bottom:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:8px}
.su-h{margin:0;font-family:var(--monu);font-weight:800;text-transform:uppercase;font-size:clamp(54px,6.4vw,104px);line-height:.82;letter-spacing:-.005em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:.06em}
.su-htx p{margin:0;color:rgba(244,243,239,.87);font-size:15.5px}
.su-incl{padding:clamp(22px,2.6vw,34px)}
.su-incl ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.su-incl li{display:flex;gap:12px;align-items:flex-start;color:rgba(244,243,239,.87);font-size:15px;line-height:1.5}
.su-incl li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--acc)}
.su-incl li.no{color:rgba(244,243,239,.55)}
.su-incl li.no svg{color:rgba(244,243,239,.45);width:16px;height:16px;margin:3px 1px 0}

/* right: plan, details and send, shared by both options */
.su-form{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column}
.su-st{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,243,239,.6)}
.su-st i{font-style:normal;color:var(--txt)}
.su-form .su-st:not(:first-child){margin-top:26px}
.su-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.su-plans button{height:48px;border-radius:12px;font-size:14px;font-weight:500;color:rgba(244,243,239,.8);box-shadow:inset 0 0 0 1px rgba(244,243,239,.14);transition:background .35s var(--out),color .35s var(--out),box-shadow .35s var(--out);white-space:nowrap;padding:0 6px}
.su-plans button:hover{box-shadow:inset 0 0 0 1px rgba(244,243,239,.4);color:#fff}
.su-plans button[aria-checked="true"]{background:#fff;color:#0B0B0C;box-shadow:none}
.su-plans button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.su-fields{display:grid;gap:12px}
.su-f{display:flex;flex-direction:column;gap:7px}
.su-f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.6)}
.su-f input{height:54px;border-radius:10px;padding:0 16px;background:#0B0B0C;color:var(--txt);box-shadow:inset 0 0 0 1px rgba(244,243,239,.14);font-size:15.5px;outline:none;transition:box-shadow .3s var(--out);color-scheme:dark;width:100%}
.su-f input:focus{box-shadow:inset 0 0 0 1px rgba(244,243,239,.6)}
.su-f.bad input{box-shadow:inset 0 0 0 1px #ff6b6b}
.su-sum{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin-top:22px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(244,243,239,.1)}
.su-sum-l{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,243,239,.5)}
.su-sum b{font-family:var(--disp);font-stretch:112%;font-weight:600;font-size:17px;color:var(--txt)}
.su-price{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,243,239,.75);white-space:nowrap}
.su-err{display:none;margin:12px 0 0;color:#ff8a8a;font-size:14px}
.su-err.show{display:block}
.su-send{margin-top:16px;width:100%;justify-content:space-between}
.su-note{margin:12px 0 0;color:rgba(244,243,239,.5);font-size:13px;line-height:1.5}
.su-alt{margin:20px 0 0;text-align:center}

/* before a choice is made, the box is out of the way (it is always open without JavaScript) */
.no-js .su-open{grid-template-rows:1fr}
.no-js .su-in{opacity:1;transform:none}
.no-js .su-pane:last-child{opacity:1;visibility:visible}

@media (max-width:900px){
  .su-pick{grid-template-columns:minmax(0,1fr)}
  .su-opt{min-height:230px}
  .su.is-open .su-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .su.is-open .su-opt{min-height:78px;padding:14px 16px;border-radius:16px}
  .su.is-open .su-go{display:none}
  .su.is-open .su-k{display:none}
  .su.is-open .su-otx b{font-size:17px}
  .su-in{grid-template-columns:minmax(0,1fr);border-radius:20px}
  .su-panes{border-inline-end:0;border-bottom:1px solid rgba(244,243,239,.1)}
  .su-hero{aspect-ratio:4/3;border-start-end-radius:20px;border-start-start-radius:20px}
  .su-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-sum{grid-template-columns:minmax(0,1fr)}
  .su-head{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .su-open,.su-in,.su-pane,.su-opt,.su-oph img,.su-hph img,.su-d{transition:none!important}
}

/* Arabic pages: phone numbers still type left to right (+971 50 ...) */
[dir="rtl"] .su-f input[type="tel"]{direction:ltr;text-align:right}