/* members.html, מתאמנים ומנויים (31 Oct 2026, in the homepage's language). Linked after site.css.
   Built from the shared inner-page kit (.ih, .ih-stage, .st-card, .win with the homepage's .pd-nav, .phone2, .feat, .faq3,
   .closing2) and the homepage's own pieces: the dashboard's .pd-c cards, the כרטסת's payment marks (.fl-m) and avatars, the
   trainee app's .ta-* and .pt-note-*. Every mockup holds its finished state; nothing here is driven by site.js.
   Page pieces are prefixed mb-. */

.nw { white-space: nowrap; }
.mb-p { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.mb-feat { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.mb-feat.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } /* flipped, the picture takes the first track */
@media (max-width: 899px) { .mb-feat, .mb-feat.flip { grid-template-columns: minmax(0, 1fr); } }
.mb-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.mb-tools { display: flex; gap: 14px; }
.mb-tools .ic { width: 18px; height: 18px; }
/* a status as the product shows it: a soft pill, green with a dot when it's good */
.mb-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #F4F4F6; color: #333;
  font-size: 11.5px; font-weight: 700; font-style: normal; white-space: nowrap; }
.mb-chip.ok { background: #E3FBEF; color: var(--pd-green-ink, #1A7F4B); }
.mb-chip.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #18E588; }
.mb-pdf { display: grid; place-items: center; flex: none; width: 32px; height: 36px; border-radius: 7px; background: #FDECEC; color: #D92D20;
  font-family: "Wix Madefor Text", var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: .02em; }

/* ---------- Hero: the studio wall, the product's window open on Daniel's file, his membership in his app beside it ---------- */
.mb-stage { height: clamp(560px, 50vw, 610px); }
.mb-win { top: 40px; bottom: -30px; inset-inline-start: 40px; width: min(790px, calc(100% - 330px)); font-size: 12.5px; }
.mb-win p { margin: 0; }
.mb-win .win-main { gap: 12px; }
.mb-win .win-main > * { flex-shrink: 0; } /* the cards are cut by the window's bottom; nothing above them gives way */
.mb-head { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.mb-av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 18px; font-weight: 700; font-style: normal; }
.mb-head p { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.mb-head b { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.mb-head small { overflow: hidden; font-size: 12px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
/* the product's underline tabs */
.mb-tabs { display: flex; gap: 20px; margin: 0 -18px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.mb-tabs i { position: relative; padding-bottom: 9px; font-style: normal; font-weight: 600; }
.mb-tabs i.on { color: #000; }
.mb-tabs i.on::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; border-radius: 2px; background: #000; }
/* the file, in four cards */
.mb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mb-c { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mb-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.mb-ch > span:not(.mb-chip) { font-size: 11px; font-weight: 500; color: var(--ink-2); }
.mb-pt { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.mb-ps { margin-top: -4px !important; font-size: 11.5px; color: var(--ink-2); }
.mb-bal, .mb-exp { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.mb-bal b, .mb-exp b { color: #000; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-seg { display: flex; gap: 4px; margin-top: -2px; }
.mb-seg i { flex: 1; height: 7px; border-radius: 4px; background: #EDEDF0; }
.mb-seg i.on { background: var(--pd-green); }
.mb-att, .mb-pay, .mb-docs { display: grid; margin: 0; padding: 0; list-style: none; }
.mb-att li, .mb-pay li { display: grid; align-items: center; gap: 8px; min-height: 36px; border-top: 1px solid #F0F0F3; }
.mb-att li:first-child, .mb-pay li:first-child, .mb-docs li:first-child { border-top: 0; }
.mb-att li { grid-template-columns: 36px minmax(0, 1fr) auto; }
.mb-d { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mb-att b { overflow: hidden; font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.mb-att em, .mb-pay em, .mb-st em { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-style: normal; color: var(--ink-2); white-space: nowrap; }
.mb-att em::before, .mb-pay em::before, .mb-st em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C9C9CF; }
.mb-att em.ok, .mb-pay em, .mb-st em { color: #000; }
.mb-att em.ok::before, .mb-pay em::before, .mb-st em::before { background: #16A34A; box-shadow: 0 0 0 3px #E8F7EE; }
.mb-pay li { grid-template-columns: 36px auto minmax(0, 1fr) auto; }
.mb-pay b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-docs li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #F0F0F3; }
.mb-docs p { display: grid; min-width: 0; line-height: 1.3; }
.mb-docs b { font-size: 12.5px; font-weight: 700; }
.mb-docs small { overflow: hidden; font-size: 11px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.mb-docs .ic { width: 17px; height: 17px; color: var(--ink-2); }
/* the same membership in Daniel's app, as a frosted card (the app's own card inside) */
.mb-mine { top: 76px; left: clamp(20px, 3cqw, 36px); width: 272px; display: grid; gap: 10px; }
.mb-ta { background: none; font-size: 11px; }
.mb-ta .ta-card { margin-top: 0; padding: 12px; border-radius: 12px; background: #fff; }
.mb-ta .ta-plan b { font-size: 13.5px; }
.mb-ta .ta-plan small { font-size: 11px; }
.mb-ta .ta-left { font-size: 11.5px; }
.mb-ta .ta-dots i { height: 7px; }
.mb-same { font-size: 13.5px; color: var(--ink-2); }

@container ihs (max-width: 979px) {
  /* tablets: the file across the stage; the app's card goes */
  .mb-win { top: 28px; inset-inline: 28px; width: auto; }
  .mb-mine { display: none; }
}
@container ihs (max-width: 599px) {
  /* phones: one column (the membership, then attendance and payments, cut by the stage's bottom) */
  .mb-win { top: 12px; inset-inline: 12px; bottom: -20px; }
  .mb-win .win-main { padding: 0 14px 14px; }
  .mb-win .win-top { margin: 0 -14px; padding: 0 14px; }
  .mb-tabs { margin-inline: -14px; padding-inline: 14px; gap: 16px; }
  .mb-tabs i:nth-child(n+4) { display: none; }
  .mb-head b { font-size: 18px; }
  .mb-av { width: 40px; height: 40px; font-size: 16px; }
  .mb-grid { grid-template-columns: minmax(0, 1fr); }
  .mb-grid .mb-c:nth-child(4) { display: none; }
}
@media (max-width: 599px) { .mb-stage { height: 600px; } }
@media (max-width: 760px) {
  .mb-hero .ih-sub { margin-top: 16px; font-size: 18px; }
  .mb-hero .actions { width: 100%; flex-direction: column; margin-top: 22px; }
  .mb-hero .btn { width: 100%; min-height: 56px; font-size: 17.5px; }
  .mb-hero .ih-note { text-wrap: balance; }
}

/* ---------- Memberships and limits: the studio's plans, and the app explaining a weekly limit ---------- */
.mb-pstage, .mb-rstage, .mb-fstage { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px;
  background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.mb-pstage p, .mb-rstage p, .mb-fstage p { margin: 0; }
.mb-pstage .ic, .mb-rstage .ic, .mb-fstage .ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tint .mb-pstage, .tint .mb-fstage { background-color: #fff; }
.mb-pstage { height: 660px; container: mbp / inline-size; }
.mb-panel { position: absolute; z-index: 2; top: 28px; right: 24px; width: min(500px, calc(100% - 48px)); padding: 18px 18px 8px; border-radius: 20px; background: #fff; color: #0B0B0C;
  font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -24px rgba(0, 0, 0, .3); }
.mb-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.mb-panel-h p { display: grid; min-width: 0; }
.mb-panel-h small { font-size: 11.5px; color: var(--ink-2); }
.mb-panel-h b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.mb-add { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: #0B0B0C; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mb-add .ic { width: 14px; height: 14px; stroke-width: 2.2; }
.mb-plans { display: grid; margin: 0; padding: 0; list-style: none; }
.mb-plans li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 60px; gap: 12px; align-items: center; min-height: 62px; border-top: 1px solid #F0F0F3; }
.mb-pi { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.mb-pi .ic { width: 18px; height: 18px; }
.mb-pi.pink { background: #FCEDF2; color: #B0003C; }
.mb-pi.blue { background: #EBF2FC; color: #2050B0; }
.mb-pi.gold { background: #FCF5E6; color: #8A5A08; }
.mb-pi.teal { background: #E6F6F7; color: #126E6A; }
.mb-plans p { display: grid; min-width: 0; line-height: 1.35; }
.mb-plans p b { font-size: 13.5px; font-weight: 700; }
.mb-plans p small { overflow: hidden; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.mb-pp { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-pn { display: grid; justify-items: end; font-size: 10.5px; line-height: 1.2; color: var(--ink-2); }
.mb-pn b { font-size: 15px; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.mb-quota { display: grid; bottom: 24px; left: 24px; width: 300px; }
.mb-quota .pt-note-c span .ic { width: 16px; height: 16px; }
@container mbp (max-width: 559px) {
  .mb-panel { top: 16px; right: 14px; width: calc(100% - 28px); padding: 14px 14px 4px; }
  .mb-plans li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .mb-pi { width: 32px; height: 32px; }
  .mb-pn { display: none; }
  .mb-plans p small { white-space: normal; }
  .mb-quota { left: 50%; bottom: 16px; width: min(300px, calc(100% - 28px)); transform: translateX(-50%); }
}
@media (max-width: 599px) { .mb-pstage { height: 670px; } }

/* ---------- Renewals: the owner's dashboard, and the app asking for a new card ---------- */
.mb-rstage { height: 680px; container: mbr / inline-size; }
.mb-dash { top: 28px; bottom: -40px; inset-inline: 28px; font-size: 12.5px; }
.mb-dash .win-main { gap: 12px; }
.mb-dash .win-main > * { flex-shrink: 0; }
.mb-dash .pd-hi { padding-top: 2px; }
.mb-dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mb-dgrid .pd-c { align-self: stretch; }
.mb-hok { display: grid; gap: 6px; padding: 12px 14px 4px; border: 1px solid var(--line); border-radius: 12px; }
.mb-hok ul { display: grid; margin: 0; padding: 0; list-style: none; }
.mb-hok li { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1.15fr); gap: 10px; align-items: center; min-height: 56px; border-top: 1px solid #F0F0F3; }
.mb-hok .fl-who b { font-size: 12.5px; }
.mb-amt { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-st { display: grid; gap: 2px; min-width: 0; }
.mb-st small { padding-inline-start: 13px; font-size: 11px; color: var(--ink-2); }
.mb-st em.bad { color: var(--pd-red-ink); }
.mb-st em.bad::before { background: var(--pd-red); box-shadow: 0 0 0 3px #FDE8EA; }
.mb-fail { display: grid; bottom: 18px; left: 24px; width: 290px; }
@container mbr (max-width: 559px) {
  .mb-dash { top: 14px; inset-inline-start: 14px; grid-template-columns: minmax(0, 1fr); }
  .mb-dash .pd-nav { display: none; }
  .mb-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-dash .pd-hi { display: none; } /* the greeting goes, so the standing orders stay above the app's card */
  .mb-hok li { grid-template-columns: minmax(0, 1fr) 44px; }
  .mb-st { grid-column: 1 / -1; padding-bottom: 8px; margin-top: -6px; }
  .mb-fail { left: 50%; bottom: 16px; width: min(290px, calc(100% - 28px)); transform: translateX(-50%); }
}
@media (max-width: 599px) { .mb-rstage { height: 660px; } }

/* ---------- The trainee's side: the health declaration on the phone, saved to the file; the app's rating ---------- */
.mb-fstage { height: 640px; container: mbf / inline-size; }
.mb-phone { top: 40px; inset-inline-start: 11%; width: 262px; }
.mb-phone .phone2-screen { display: flex; flex-direction: column; background: #fff; }
.mb-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.mb-sig i { width: 3px; border-radius: 1px; background: #000; }
.mb-sig i:nth-child(1) { height: 4px; } .mb-sig i:nth-child(2) { height: 6px; } .mb-sig i:nth-child(3) { height: 8px; } .mb-sig i:nth-child(4) { height: 10.5px; }
.mb-form { display: grid; align-content: start; gap: 10px; padding: 18px 14px 14px; }
.mb-fh { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #EEE; }
.mb-fh > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #000; color: #fff; font-size: 14px; font-weight: 700; font-style: normal; }
.mb-fh span { display: grid; line-height: 1.3; }
.mb-fh b { font-size: 15px; font-weight: 800; }
.mb-fh small { font-size: 10.5px; color: #777; }
.mb-fq { display: flex; align-items: center; gap: 10px; }
.mb-lines { display: grid; flex: 1; gap: 5px; }
.mb-lines i { height: 6px; border-radius: 3px; background: #E4E4E7; }
.mb-lines i.s { width: 62%; }
.mb-yn { display: flex; flex: none; gap: 4px; }
.mb-yn i { display: grid; place-items: center; width: 30px; height: 24px; border-radius: 7px; background: #F4F4F6; color: #555; font-size: 10.5px; font-weight: 600; font-style: normal; }
.mb-yn i.on { background: #000; color: #fff; }
.mb-fk { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.mb-fk > i { flex: none; width: 18px; height: 18px; border-radius: 5px; background: #000 var(--tick-white) center / 12px no-repeat; }
.mb-sign { display: grid; gap: 2px; padding: 8px 10px 9px; border: 1.5px dashed #C9C9CF; border-radius: 12px; }
.mb-sign small { font-size: 10px; color: #777; }
.mb-sign svg { width: 100%; height: 46px; fill: none; stroke: #1F3FA8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mb-sign span { font-size: 10px; color: #777; }
.mb-send { display: grid; place-items: center; height: 40px; border-radius: 12px; background: #000; color: #fff; font-size: 13px; font-weight: 700; }
.mb-saved { top: 92px; left: 20px; width: 254px; display: grid; gap: 10px; }
.mb-sv { display: flex; align-items: center; gap: 10px; }
.mb-sv > span:nth-child(2) { display: grid; flex: 1; line-height: 1.3; }
.mb-sv b { font-size: 15px; font-weight: 700; }
.mb-sv small { font-size: 12.5px; }
.mb-ok { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #18E588 var(--tick-ink) center / 13px no-repeat; }
.mb-rate { position: absolute; z-index: 3; bottom: 32px; left: 20px; display: grid; gap: 1px; width: 250px; padding: 14px 16px 15px; border-radius: 16px;
  background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -20px rgba(0, 0, 0, .5); }
.mb-rate-n { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.mb-rate-n b { font-family: "Wix Madefor Display", var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.mb-rate-n .stars svg { width: 13px; height: 13px; }
.mb-rate small { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
@container mbf (max-width: 559px) {
  /* phones: the phone in the middle, the saved file over its lower edge; no rating card */
  .mb-phone { inset-inline-start: auto; left: 50%; top: 24px; margin-left: -124px; width: 248px; }
  .mb-saved { top: auto; bottom: 16px; left: 14px; right: 14px; width: auto; }
  .mb-rate { display: none; }
}
@media (max-width: 599px) { .mb-fstage { height: 620px; } }
.mb-rate-k { margin-bottom: 4px !important; font-size: 12.5px; font-weight: 700; }