/* The CrossFit page (crossfit.html), in the homepage's language (31 Oct 2026). Linked after site.css.
   Masculine voice. Built like pilates.html, from the shared inner-page kit (.ih, .ih-stage, .st-card, .win, .logos-row) and the
   homepage's own pieces (.gh-rate, .gh-title and .gh-logo in the hero; the calendar's .cl-* parts, the trainee app's .ta-* and .pt-note-*,
   .gh-quote, .price-card, .faq3, .closing2). Nothing here is driven by site.js: the calendar sits in .bxcal, not .cl, so the homepage's
   calendar story never picks it up, and every mockup holds its finished state. Prefix bx- (the box); .cf-* belongs to the closing. */

/* ---------- Hero: the homepage's copy (crumbs, rating line, the title with the logo inline, two buttons, a note) ---------- */
.bx-hero { padding-top: clamp(22px, 3.5vh, 44px); }
.bx-hero .ih-sub { margin-top: 20px; text-wrap: balance; }
.bx-hero .ih-note { margin-top: 18px; }
.gh-title .nw, .closing2 .nw { white-space: nowrap; }

/* The stage: the CrossFit photo as a tall rounded block in the middle of a light dot grid, the whole photo (nobody cropped),
   and four frosted cards over its edges: the next WOD and the drop-in on the start side, the registration opening and the month on the other */
.bx-stage { --pw: clamp(380px, 36vw, 460px); --m: 46px; --cw: 290px; --ov: 70px;
  height: calc(var(--pw) * 1.3392 + 2 * var(--m)); }
.bx-photo { position: absolute; z-index: 1; top: var(--m); left: 50%; width: var(--pw); margin-left: calc(var(--pw) / -2); aspect-ratio: 1200 / 1607;
  overflow: hidden; border-radius: 30px; background: #1A1A1A; box-shadow: 0 44px 80px -40px rgba(0, 0, 0, .6); }
.bx-photo img { width: 100%; height: 100%; object-fit: cover; }
.bx-stage .st-card { width: var(--cw); }
.bx-now, .bx-drop { inset-inline-start: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.bx-open, .bx-month { inset-inline-end: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.bx-now { top: calc(var(--m) - 12px); }
.bx-drop { bottom: calc(var(--m) + 28px); }
.bx-open { top: calc(var(--m) + 40px); }
.bx-month { bottom: calc(var(--m) - 12px); }

/* the next WOD: sixteen places, one square each (the homepage's twelve mats), all taken */
.bx-now-t { display: block; margin-top: 7px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.bx-spots { direction: ltr; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 12px; }
.bx-spots i { aspect-ratio: 1; border-radius: 4px; background: #000; }
.bx-now-f { margin-top: 11px; font-size: 14.5px; color: var(--ink-2); }
.bx-now-f b { color: #000; font-weight: 700; }
.bx-now-f span::before { content: " · "; }

/* registration opening at the time the owner set, a drop-in, the month's standing orders */
.bx-card-t { display: block; margin-top: 7px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.st-card-h .bx-chip { padding: 2px 9px; border-radius: 999px; background: #E3F8EA; color: #14532D; font-size: 12.5px; font-weight: 700; }
.bx-when { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 15px; font-weight: 600; }
.bx-tags { direction: ltr; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.bx-tags span { padding: 3px 8px; border-radius: 6px; background: #EBF2FC; color: #2050B0; font-size: 12px; font-weight: 700; }
.bx-tags span:nth-child(2) { background: #FCF5E6; color: #8A5A08; }
.bx-tags span:nth-child(3) { background: #EAF7EF; color: #156B3F; }
.bx-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bx-who > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #000; color: #fff; font-size: 14px; font-weight: 700; font-style: normal; }
.bx-who > span { display: grid; min-width: 0; line-height: 1.3; }
.bx-who b { font-size: 15px; font-weight: 700; }
.bx-who small { font-size: 13px; }
.bx-who em { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-inline-start: auto; font-size: 14px; font-weight: 700; font-style: normal; }
.bx-who em::before, .bx-done::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #000 var(--tick-white) center / 10px no-repeat; }
.bx-bar { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 4px; background: rgba(0, 0, 0, .1); }
.bx-bar i { display: block; width: 97.6%; height: 100%; border-radius: inherit; background: #000; } /* 82 of 84 */
.bx-done { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }

@media (max-width: 999px) {
  .bx-stage { --pw: 300px; --m: 34px; --cw: min(236px, calc(50% - var(--pw) / 2 + var(--ov) - 12px)); --ov: 48px; }
  .bx-open { top: calc(var(--m) - 12px); }
  .bx-stage .st-card { padding: 12px 14px 13px; }
  .bx-stage .st-card-h { font-size: 14px; }
  .bx-now-t { font-size: 19px; }
  .bx-card-t { font-size: 18px; }
  .bx-now-f, .bx-done, .bx-who em, .bx-when { font-size: 13px; }
}
@media (max-width: 760px) {
  .bx-hero .ih-sub { margin-top: 16px; font-size: 18px; }
  .bx-hero .actions { width: 100%; flex-direction: column; margin-top: 22px; }
  .bx-hero .btn { width: 100%; min-height: 56px; font-size: 17.5px; }
  .bx-hero .ih-note { text-wrap: balance; }
}
/* phones: the photo, and two cards (the next WOD and the registration opening) side by side over its bottom edge */
@media (max-width: 699px) {
  .bx-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; height: auto; padding: 12px; }
  .bx-photo { position: relative; grid-column: 1 / -1; top: auto; left: auto; width: 100%; margin: 0; border-radius: 16px; }
  .bx-stage .st-card { position: relative; inset: auto; width: auto; margin-top: -92px; padding: 11px 11px 12px; border-radius: 16px; }
  .bx-drop, .bx-month { display: none; }
  .bx-stage .st-card-h { gap: 6px; font-size: 12.5px; }
  .bx-stage .st-card-h > svg:not(.ic) { width: 10px; height: 13px; }
  .st-card-h .bx-chip { padding: 1px 7px; font-size: 11px; }
  .bx-now-t, .bx-card-t { font-size: 16px; }
  .bx-spots { gap: 3px; margin-top: 9px; }
  .bx-now-f { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
  .bx-now-f span { display: block; }
  .bx-now-f span::before { content: none; }
  .bx-when { margin-top: 8px; font-size: 12.5px; }
  .bx-when .ic { width: 14px; height: 14px; }
  .bx-tags { gap: 4px; margin-top: 8px; padding-top: 8px; }
  .bx-tags span { padding: 2px 6px; font-size: 10.5px; }
}

/* ---------- Copy beside the product ---------- */
.bx-lead { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.bx-cal .feat { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.bx-app .feat { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.bx-bill .feat { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 899px) { .bx-cal .feat, .bx-app .feat, .bx-bill .feat { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The calendar: the product's יומן, the 07:00 WOD open over it (the homepage's calendar, end state) ----------
   The window is cut by the stage's start edge and bottom; it dims behind the class's list, and the class stays lit.
   Blue is the WOD's colour in this calendar, so its list wears it too; the popup carries the day's WOD */
.bxcal-stage { position: relative; height: 660px; overflow: hidden; isolation: isolate; container: bxcal / inline-size; border-radius: 26px;
  background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(165deg, #FCFCFD 0%, #E3E3E8 100%); }
.bxcal { position: absolute; inset: 0; --cl-end: 40px; --ok: #16A34A; --c: #2B59C3; --c-soft: #EBF2FC; --c-ink: #2050B0; }
.bxcal .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bxcal p { margin: 0; }
.bxcal-win { top: 36px; }
.bxcal .cl-win::after { opacity: 1; }
/* site.css hides .pd-nav inside any container under 760px (the products tabs' unnamed @container rules); keep it here */
.bxcal .pd-nav { display: flex; }
.bxcal-main { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px 22px 0; }
.bxcal-head { display: flex; align-items: center; gap: 8px; }
.bxcal-title { margin-inline-end: auto; }
.bxcal-title small { display: block; font-size: 11.5px; color: var(--ink-2); }
.bxcal-title b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.bxcal-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -6px -8px 0; }
.bxcal .cl-c > b { font-family: "Wix Madefor Text", var(--sans); }
.bxcal-sel { z-index: 2; box-shadow: inset 0 0 0 1.5px var(--c), 0 10px 24px -10px rgba(32, 80, 176, .45); }

.bxcal-pop { position: absolute; z-index: 2; top: 52px; left: 18px; width: 356px; overflow: hidden; 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 -20px rgba(0, 0, 0, .45); }
.bxcal-pop-top { display: grid; gap: 9px; padding: 16px 18px 14px; background: var(--c-soft); }
.bxcal-pop .cl-d-h b { font-family: "Wix Madefor Display", var(--display); font-size: 17px; }
.bxcal-pop .cl-d-h em { background: var(--c-ink); color: #fff; }
.bxcal-pop .cl-meta { gap: 5px 14px; font-size: 11.5px; color: #34466E; }
/* the day's WOD, as the coach published it */
.bxcal-wod { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 10px; background: #fff; }
.bxcal-wod small { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.bxcal-wod bdi { font-family: "Wix Madefor Text", var(--sans); font-size: 12px; font-weight: 700; color: var(--c-ink); white-space: nowrap; }
.bxcal-body { padding: 12px 16px 14px; }
.bxcal .cl-th, .bxcal .cl-r { grid-template-columns: minmax(0, 1fr) 66px 60px; gap: 8px; }
.bxcal .cl-th { margin-top: 12px; }
.bxcal .cl-r { min-height: 42px; padding-block: 4px; }
.bxcal .cl-who { column-gap: 8px; grid-template-columns: 28px minmax(0, 1fr); }
.bxcal .cl-who > i { width: 28px; height: 28px; font-size: 11.5px; }
.bxcal .cl-who b { font-size: 12.5px; }
.bxcal .cl-bal { font-size: 11.5px; }
.bxcal .cl-att i { width: 25px; height: 25px; }
.bxcal .cl-att .ic { width: 13px; height: 13px; }
.bxcal .cl-r .t-drop { background: #EAF7EF; color: #156B3F; font-family: "Wix Madefor Text", var(--sans); }
/* the finished state: everyone in the list, the marks on, the attendance taken */
.bxcal .cl-r, .bxcal .cl-sum, .bxcal .cl-r em { opacity: 1; transform: none; }
.bxcal .cl-att i:first-child { background: var(--ok); color: #fff; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .6); }
.bxcal .cl-att i:last-child { opacity: .3; }

@container bxcal (max-width: 599px) {
  /* phones: no menu strip, two days (today and tomorrow), and the class's list over their lower part, without the balance */
  .bxcal { --cl-end: 12px; }
  .bxcal-win { top: 12px; inset-inline-start: 12px; grid-template-columns: minmax(0, 1fr); }
  .bxcal-win .pd-nav, .bxcal .cl-nav { display: none; }
  .bxcal-main { gap: 12px; padding: 16px 14px 0; }
  .bxcal-title b { font-size: 19px; }
  .bxcal-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: -6px; }
  .bxcal-cols .cl-col:nth-child(3) { display: none; }
  .bxcal-pop { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .bxcal-pop .cl-meta span:not(:nth-child(2)), .bxcal .cl-seg span:last-child, .bxcal .cl-th span:nth-child(2), .bxcal .cl-bal { display: none; }
  .bxcal .cl-th, .bxcal .cl-r { grid-template-columns: minmax(0, 1fr) 60px; }
  .bxcal-list .cl-r:nth-child(n+5) { display: none; }
}

/* ---------- The trainee app, in its own colours, on the studio-wall photo (the homepage's app tab, without the cart) ---------- */
.bxapp-stage { position: relative; height: 620px; overflow: hidden; isolation: isolate; container: bxapp / inline-size; border-radius: 26px; background: #E6DCCD; }
.bxapp-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
.bxapp-phone { position: absolute; z-index: 2; top: 40px; inset-inline-start: 48px; }
.bxapp-phone .phone { width: 262px; box-shadow: 0 50px 80px -40px rgba(40, 30, 10, .55); }
.bx-dots { gap: 2px; }
.bxapp-offer { display: grid; top: 96px; inset-inline-end: 24px; width: 284px; } /* display: site.css hides .pt-note in any container under 580px */
.bxapp-rate { position: absolute; z-index: 3; bottom: 24px; inset-inline-end: 24px; display: grid; gap: 1px; width: 230px; 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); }
.bxapp-rate p { margin: 0; }
.bxapp-rate-n { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.bxapp-rate-n b { font-family: "Wix Madefor Display", var(--display); font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.bxapp-rate-n .stars svg { width: 13px; height: 13px; }
.bxapp-rate small { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 599px) { .bxapp-stage { height: 690px; } } /* a container query can't size the container itself */
@container bxapp (max-width: 559px) {
  /* narrower: the waiting list's notice on top, the phone under it, cut by the stage's bottom edge, no rating card */
  .bxapp-offer { top: 16px; inset-inline: 16px; width: auto; }
  .bxapp-phone { inset-inline: 0; display: flex; justify-content: center; top: 150px; }
  .bxapp-rate { display: none; }
}

/* ---------- Proof: Stas Kor's quote (the homepage's) and ten boxes' logos, without links ---------- */
.bx-proof .gh-quote { margin: 0 auto; }
.bx-logos { margin-top: clamp(48px, 6vw, 80px); }
/* five a row on desktop, three on phones: every logo file is the same 5:3 canvas, so each cell gets that width
   (left to the image, the cell takes the image's max-width and only four fit) */
.bx-logos ul { max-width: 980px; margin-inline: auto; gap: 18px clamp(28px, 5vw, 64px); }
.bx-logos li { width: 140px; height: 84px; }
.bx-logos img { max-width: 100%; transition: filter .2s; }
.bx-logos li:hover img { filter: none; }
@media (max-width: 599px) { .bx-logos ul { gap: 14px 16px; } .bx-logos li { width: 100px; height: 60px; } }

/* ---------- Monthly memberships: the product's window on תשלום, the 1st of the month's standing orders ---------- */
.bxbill-stage { position: relative; height: 620px; overflow: hidden; isolation: isolate; container: bxbill / inline-size; border-radius: 26px;
  background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.bxbill-win { top: 36px; bottom: -40px; inset-inline-start: -2px; inset-inline-end: 40px; }
.bxbill-win .win-main { gap: 14px; }
.bxbill-win .win-main > * { flex-shrink: 0; }
.bx-tools { display: flex; gap: 14px; }
.win-h .bx-ok { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #E3F8EA; color: #14532D; font-size: 12px; font-weight: 700; white-space: nowrap; }
.win-h .bx-ok .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.bx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bx-stats p { display: grid; gap: 3px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #F6F6F8; }
.bx-stats small { font-size: 11px; color: var(--ink-2); }
.bx-stats b { font-family: "Wix Madefor Display", var(--display); font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bx-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bx-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 52px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 46px; border-top: 1px solid var(--paper-2); }
.bx-list li.bx-lh { min-height: 0; padding-bottom: 6px; border-top: 0; font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.bx-p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bx-p i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; font-style: normal; }
.bx-p b { overflow: hidden; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.bx-m { overflow: hidden; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.bx-a { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bx-list em { justify-self: start; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.bx-list em::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bx-list em.ok { background: #E3F8EA; color: #1A7F4B; }
.bx-list em.warn { background: #FFF4DB; color: #8A5A08; }
.bxbill-report { left: 20px; bottom: 18px; display: grid; width: 270px; }
.bxbill-report .bx-card-t { font-size: 18px; }
@container bxbill (max-width: 759px) { .bxbill-win { grid-template-columns: minmax(0, 1fr); } .bxbill-win .pd-nav { display: none; } }
@container bxbill (max-width: 559px) {
  .bxbill-win { inset-inline: 12px; top: 12px; }
  .bx-list li { grid-template-columns: minmax(0, 1fr) 46px minmax(0, .9fr); }
  .bx-m, .bx-lh span:nth-child(2) { display: none; }
  .bx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-stats p:last-child { display: none; }
  .win-h .bx-ok { display: none; }
  .bxbill-report { inset-inline: 12px; bottom: 12px; width: auto; }
}

/* ---------- Price: the two plans for a box, and the homepage's black "בכל מסלול" side ---------- */
.bx-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bx-plan { display: grid; gap: 6px; align-content: start; padding: 22px 22px 24px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bx-plan.on { background: #000; color: #fff; box-shadow: none; }
.bx-plan h3 { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.bx-plan.on h3 { color: #A9A9AE; }
.bx-p-n { display: grid; font-family: "Wix Madefor Display", var(--display); font-size: clamp(46px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.bx-p-n small { margin-top: 8px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.bx-plan.on .bx-p-n small { color: #A9A9AE; }
.bx-for { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.bx-plan.on .bx-for { color: #D4D4D8; }
.bx-more { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.bx-price .actions { margin-top: 24px; }
.bx-price .side > b { font-size: 20px; font-weight: 700; }
.bx-price .side .ticks { font-size: 17px; }
@media (max-width: 459px) {
  .bx-plans { grid-template-columns: minmax(0, 1fr); }
  .bx-price .actions .btn { flex: 1 1 100%; }
}