/* The Pilates page (pilates.html), in the homepage's language (31 Oct 2026). Linked after site.css.
   Feminine voice. Built from the shared inner-page kit (.ih, .ih-stage, .st-card, .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-*,
   .price-card, .faq3, .closing2). Nothing here is driven by site.js: the calendar sits in .pcal, not .cl, so the homepage's
   calendar story never picks it up, and every mockup holds its finished state. */

/* ---------- Hero: the homepage's copy (rating line, the title with the logo inline, two buttons, a note) ---------- */
.pl-hero { padding-top: clamp(26px, 4vh, 50px); }
.pl-hero .ih-sub { margin-top: 20px; text-wrap: balance; }
.pl-hero .ih-note { margin-top: 18px; }

/* The stage: the Pilates 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 class and a punch card on the start side, the waiting list and the agent on the other */
.pl-stage { --pw: clamp(380px, 36vw, 460px); --m: 46px; --cw: 290px; --ov: 70px;
  height: calc(var(--pw) * 1.3392 + 2 * var(--m)); }
.pl-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: #1B1612; box-shadow: 0 44px 80px -40px rgba(0, 0, 0, .6); }
.pl-photo img { width: 100%; height: 100%; object-fit: cover; }
.pl-stage .st-card { width: var(--cw); }
.pl-now, .pl-punch { inset-inline-start: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.pl-wait, .pl-ai { inset-inline-end: calc(50% - var(--pw) / 2 - var(--cw) + var(--ov)); }
.pl-now { top: calc(var(--m) - 12px); }
.pl-punch { bottom: calc(var(--m) + 28px); }
.pl-wait { top: calc(var(--m) + 40px); }
.pl-ai { --cw: 304px; bottom: calc(var(--m) - 12px); display: grid; gap: 8px; }

/* the next class: eight reformer beds, one square each (the homepage's twelve mats), all taken */
.pl-now-t { display: block; margin-top: 7px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.pl-beds { direction: ltr; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.pl-beds i { position: relative; aspect-ratio: 2.2 / 1; border-radius: 4px; background: #000; }
.pl-beds i::after { content: ""; position: absolute; top: 24%; bottom: 24%; left: 11%; width: 30%; border-radius: 2px; background: rgba(255, 255, 255, .28); } /* the carriage */
.pl-now-f { margin-top: 11px; font-size: 14.5px; color: var(--ink-2); }
.pl-now-f b { color: #000; font-weight: 700; }
.pl-now-f span::before { content: " · "; }

/* the waiting list and the punch card */
.pl-card-t { display: block; margin-top: 7px; font-size: 20px; font-weight: 700; line-height: 1.2; }
.pl-who { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-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; }
.pl-who > span { display: grid; min-width: 0; line-height: 1.3; }
.pl-who b { font-size: 15px; font-weight: 700; }
.pl-who small { font-size: 13px; }
.pl-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; }
.pl-who em::before, .pl-done::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #000 var(--tick-white) center / 10px no-repeat; }
.pl-holes { direction: ltr; display: flex; gap: 5px; margin-top: 12px; }
.pl-holes i { flex: 1; max-width: 20px; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, .1); } /* the used entries: a tint, so they read over the photo's edge too */
.pl-holes i.on { background: #000; }
.pl-done { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }

/* the agent in WhatsApp, with Claude's mark (the homepage's .gh-ai card) */
.pl-ai .st-card-h svg.claude { width: 19px; height: 19px; }
.pl-ai .b { max-width: 88%; padding: 8px 12px; border-radius: 15px; font-size: 14.5px; line-height: 1.4; }
.pl-ai .them { justify-self: start; background: var(--panel); border-start-start-radius: 4px; }
.pl-ai .me { justify-self: end; background: #000; color: #fff; border-start-end-radius: 4px; }
.pl-ai .pl-done { margin-top: 0; }

@media (max-width: 999px) {
  .pl-stage { --pw: 300px; --m: 34px; --cw: min(236px, calc(50% - var(--pw) / 2 + var(--ov) - 12px)); --ov: 48px; }
  .pl-ai { --cw: min(236px, calc(50% - var(--pw) / 2 + var(--ov) - 12px)); }
  .pl-wait { top: calc(var(--m) - 12px); }
  .pl-stage .st-card { padding: 12px 14px 13px; }
  .pl-stage .st-card-h { font-size: 14px; }
  .pl-now-t { font-size: 19px; }
  .pl-card-t { font-size: 18px; }
  .pl-now-f, .pl-done, .pl-who em { font-size: 13px; }
  .pl-ai .b { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .pl-hero .ih-sub { margin-top: 16px; font-size: 18px; }
  .pl-hero .actions { width: 100%; flex-direction: column; margin-top: 22px; }
  .pl-hero .btn { width: 100%; min-height: 56px; font-size: 17.5px; }
  .pl-hero .ih-note { text-wrap: balance; }
}
/* phones: the photo, and two cards (the class and the waiting list) side by side over its bottom edge */
@media (max-width: 699px) {
  .pl-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; height: auto; padding: 12px 12px 12px; }
  .pl-photo { position: relative; grid-column: 1 / -1; top: auto; left: auto; width: 100%; margin: 0; border-radius: 16px; }
  .pl-stage .st-card { position: relative; inset: auto; width: auto; margin-top: -92px; padding: 11px 11px 12px; border-radius: 16px; }
  .pl-punch, .pl-ai { display: none; }
  .pl-stage .st-card-h { gap: 6px; font-size: 12.5px; }
  .pl-stage .st-card-h > svg:not(.ic) { width: 10px; height: 13px; }
  .pl-now-t, .pl-card-t { font-size: 16px; }
  .pl-beds { gap: 4px; margin-top: 9px; }
  .pl-now-f { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
  .pl-now-f span { display: block; }
  .pl-now-f span::before { content: none; }
  .pl-who { flex-wrap: wrap; gap: 6px 8px; margin-top: 9px; padding-top: 9px; }
  .pl-who > i { width: 28px; height: 28px; font-size: 12px; }
  .pl-who b { font-size: 13.5px; }
  .pl-who small { font-size: 12px; }
  .pl-who em { margin-inline-start: 0; font-size: 12.5px; }
}

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

/* ---------- The calendar: the product's יומן, the 07:00 reformer class 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.
   Pink is the reformer class's own colour in the product's calendar, so its list wears it too */
.pcal-stage { position: relative; height: 640px; overflow: hidden; isolation: isolate; container: pcal / 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%); }
.pcal { position: absolute; inset: 0; --cl-end: 40px; --ok: #16A34A; --pk: #E6004F; --pk-soft: #FCEDF2; --pk-ink: #B0003C; }
.pcal .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcal p { margin: 0; }
.pcal-win { top: 36px; }
.pcal .cl-win::after { opacity: 1; }
/* site.css hides .pd-nav inside any container under 760px (the products tabs' unnamed @container rules); keep it here */
.pcal .pd-nav { display: flex; }
.pcal-main { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px 22px 0; }
.pcal-head { display: flex; align-items: center; gap: 8px; }
.pcal-title { margin-inline-end: auto; }
.pcal-title small { display: block; font-size: 11.5px; color: var(--ink-2); }
.pcal-title b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.pcal-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -6px -8px 0; }
.pcal-sel { z-index: 2; box-shadow: inset 0 0 0 1.5px var(--pk), 0 10px 24px -10px rgba(176, 0, 60, .45); }

.pcal-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); }
.pcal-pop-top { display: grid; gap: 9px; padding: 16px 18px 14px; background: var(--pk-soft); }
.pcal-pop .cl-d-h b { font-size: 17px; }
.pcal-pop .cl-d-h em { background: var(--pk-ink); color: #fff; }
.pcal-pop .cl-meta { gap: 5px 14px; font-size: 11.5px; color: #6E3446; }
.pcal-body { padding: 12px 16px 14px; }
.pcal .cl-th, .pcal .cl-r { grid-template-columns: minmax(0, 1fr) 66px 60px; gap: 8px; }
.pcal .cl-th { margin-top: 12px; }
.pcal .cl-r { min-height: 42px; padding-block: 4px; }
.pcal .cl-who { column-gap: 8px; grid-template-columns: 28px minmax(0, 1fr); }
.pcal .cl-who > i { width: 28px; height: 28px; font-size: 11.5px; }
.pcal .cl-who b { font-size: 12.5px; }
.pcal .cl-bal { font-size: 11.5px; }
.pcal .cl-att i { width: 25px; height: 25px; }
.pcal .cl-att .ic { width: 13px; height: 13px; }
/* the finished state: everyone in the list, the marks on, the attendance taken */
.pcal .cl-r, .pcal .cl-sum, .pcal .cl-r em { opacity: 1; transform: none; }
.pcal .cl-att i:first-child { background: var(--ok); color: #fff; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .6); }
.pcal .cl-att i:last-child { opacity: .3; }

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

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

/* ---------- The Pilates customers' logos, under the app (eleven, without links) ---------- */
/* six and five on desktop, three a row on phones: every logo file is the same 5:3 canvas, so each cell gets that width */
.pl-logos { margin-top: clamp(64px, 8vw, 104px); }
.pl-logos ul { max-width: 1040px; margin-inline: auto; gap: 18px clamp(24px, 4vw, 56px); }
.pl-logos li { width: 126px; height: 76px; }
.pl-logos img { max-width: 100%; transition: filter .2s; }
.pl-logos li:hover img { filter: none; }
@media (max-width: 599px) {
  .pl-logos ul { gap: 14px 22px; }
  .pl-logos li { width: 96px; height: 58px; }
}

/* ---------- Price: the two plans for a Pilates studio, and the homepage's black "בכל מסלול" side ---------- */
.pl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-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); }
.pl-plan.on { background: #000; color: #fff; box-shadow: none; }
.pl-plan h3 { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.pl-plan.on h3 { color: #A9A9AE; }
.pl-p { 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; }
.pl-p small { margin-top: 8px; font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.pl-plan.on .pl-p small { color: #A9A9AE; }
.pl-for { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.pl-plan.on .pl-for { color: #D4D4D8; }
.pl-more { margin-top: 18px; font-size: 16px; color: var(--ink-2); }
.pl-price .actions { margin-top: 24px; }
.pl-price .side > b { font-size: 20px; font-weight: 700; }
.pl-price .side .ticks { font-size: 17px; }
@media (max-width: 459px) {
  .pl-plans { grid-template-columns: minmax(0, 1fr); }
  .pl-price .actions .btn { flex: 1 1 100%; }
}