/* Pricing page (rebuilt 31 Oct 2026, in the homepage's language).
   The hero's stage is the homepage's price card; then the customers' logos, what's included
   (six groups, as the homepage names the product), what costs extra (the monthly bill, said plainly), the 14-day trial,
   switching from another system (moved here from the switching page), the FAQ panel and the closing.
   Shared pieces come from site.css ("Inner pages, in the homepage's language"). */

/* ---------- Hero: the price card on the grey dot stage ---------- */
.pr-stage { height: auto; display: grid; gap: 12px; max-width: 1040px; margin-inline: auto; padding: clamp(12px, 3.4vw, 40px); }
.pr-stage .price-card { box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 80px -48px rgba(0, 0, 0, .4); }
.pr-stage .price-card .actions { margin-top: 26px; }
.pr-stage .price-card .btn svg { width: 20px; height: 20px; }
.pr-stage .price-plan { font-size: 17px; }
@media (max-width: 599px) {
  .pr-stage { border-radius: 22px; }
  .pr-stage .price-card { border-radius: 20px; }
  .pr-stage .price-card .actions { flex-direction: column; }
  .pr-stage .price-card .btn { width: 100%; }
}

/* ---------- Customers' logos, close to the price ---------- */
.pr-logos > .wrap { padding-top: 8px; }
.pr-logos .logos-row { gap: clamp(22px, 3vw, 36px); }
.pr-logos .logos-row ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px) clamp(12px, 3vw, 40px); }
.pr-logos .logos-row li, .pr-logos .logos-row a { display: grid; place-items: center; height: 80px; min-width: 0; }
.pr-logos .logos-row a { width: 100%; border-radius: 12px; }
.pr-logos .logos-row img { max-width: 100%; transition: filter .2s; }
.pr-logos .logos-row a:hover img { filter: none; }
@media (max-width: 599px) {
  .pr-logos .logos-row ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-logos .logos-row li, .pr-logos .logos-row a { height: 56px; }
  .pr-logos .logos-row li:nth-child(10) { display: none; } /* three rows of three */
}

/* ---------- What's included: six white cards, each with the product sidebar's icon ---------- */
.pr-inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-inc > li { display: grid; align-content: start; justify-items: start; gap: 16px; padding: 26px 26px 28px; border-radius: 24px; background: #fff; }
.pr-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #000; color: #fff; }
.pr-ic .ic { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pr-inc h3 { font-family: var(--display); font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.pr-inc .ticks { gap: 10px; font-size: 18px; line-height: 1.5; }
.pr-inc .text-link { margin-top: 2px; }
/* the hero quote's tilted lime marker, one phrase in the section */
.pr-inc mark { color: #000; padding: 0 .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8.6 100 4.2 100 16.4 0 19.6Z' fill='%23BAFD4F'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 999px) { .pr-inc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .pr-inc { grid-template-columns: 1fr; gap: 10px; } .pr-inc > li { padding: 22px 20px 24px; border-radius: 22px; } }

/* ---------- What costs extra: the monthly bill on the grey dot stage ---------- */
.pr-p { max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.pr-bill-stage { padding: clamp(14px, 4vw, 48px); border-radius: 28px; background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.pr-bill { max-width: 520px; margin-inline: auto; padding: 20px 24px 10px; border-radius: 22px; background: #fff; color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 80px -44px rgba(0, 0, 0, .42); }
.pr-bill-h { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pr-b { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #000; }
.pr-b svg { width: 14px; height: 18px; fill: #fff; }
.pr-bill-h b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.pr-bill-h small { display: block; font-size: 15px; color: var(--ink-2); }
.pr-bill dl { margin: 0; }
.pr-bill dl > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #EDEDF0; }
.pr-bill dl:last-of-type > div:last-child { border-bottom: 0; }
.pr-bill dt { min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.pr-bill dt a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pr-bill dt small { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--ink-2); }
.pr-bill dd { flex: none; margin: 0; text-align: end; font-family: "Wix Madefor Text", var(--sans); font-size: 18px; font-weight: 700; white-space: nowrap; }
.pr-bill dd small { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }
/* included / none, in the product's green (darker ink for the text) */
.pr-ok { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #E3FBEF; color: #1A7F4B; font-family: var(--sans); font-size: 15px; font-weight: 700; }
.pr-ok::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #18E588 var(--tick-ink) center / 10px no-repeat; }
.pr-bill-k { margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pr-talk { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: #000; color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; }
.pr-talk:hover { background: #2A2A2D; }
@media (max-width: 599px) {
  .pr-bill-stage { border-radius: 22px; }
  .pr-bill { padding: 16px 16px 6px; border-radius: 18px; }
  .pr-bill dl > div { gap: 12px; }
  .pr-bill dt { font-size: 16px; }
  .pr-bill dt small { font-size: 14px; }
  .pr-bill dd { font-size: 16px; }
}

/* ---------- The trial: three steps, then the buttons ---------- */
.pr-steps { --n: 3; }
@media (min-width: 560px) and (max-width: 899px) { .pr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-trial-go { margin-top: clamp(28px, 4vw, 40px); }
.pr-trial-go .btn svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .pr-trial-go { flex-direction: column; } .pr-trial-go .btn { width: 100%; } }
/* the hero's big buttons are for the hero's copy; inside the price card they keep the homepage's size and sit at the start */
.pr-stage .price-card .actions { justify-content: flex-start; }
.pr-stage .btn { min-height: 52px; padding: 0 24px; font-size: 16.5px; }

/* ---------- Switching from another system (moved here from the switching page, 31 Oct) ----------
   The copy beside the form, the form on a grey dot stage; then what we move (the product's window on the import), the week
   day by day, and what trainees do (the studio's WhatsApp message on a phone, and who has done it). */
.sw-fstage { height: auto; margin-top: 0; display: grid; place-items: center; padding: clamp(14px, 3.4vw, 44px); }
.sw-card { width: 100%; max-width: 460px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: #fff; color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 80px -48px rgba(0, 0, 0, .45); }
.sw-card h3 { margin-bottom: 4px; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.sw-card .body-2 { margin-bottom: 20px; font-size: 18px; }
.sw-card .form { gap: 14px; }
.sw-card .field label { font-size: 16px; font-weight: 600; }
.sw-card .field input, .sw-card .field select { height: 52px; border-color: #C9C9CF; border-radius: 12px; font-size: 17px; }
.sw-card .field input:focus, .sw-card .field select:focus { outline-color: #000; }
.sw-card .btn { min-height: 56px; margin-top: 4px; font-size: 17.5px; }
.sw-card .fine { text-align: center; }
.sw-card .form-ok { border-radius: 14px; background: #E3FBEF; color: #000; font-size: 17px; line-height: 1.6; }
@media (max-width: 599px) {
  .sw-fstage { border-radius: 22px; }
  .sw-card { border-radius: 20px; }
  .sw-card h3 { font-size: 26px; }
}
/* the header's and footer's links land on the section, and the form; keep both clear of the sticky header */
#switch, .sw-card { scroll-margin-top: 92px; }
.pr-p bdi { white-space: nowrap; }

/* ---------- What we move: the import screen in the product's own window, cut by the stage's edge and bottom ---------- */
.sw-stage, .sw-stage2 { position: relative; overflow: hidden; border-radius: 28px; background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.sw-stage { padding-block: clamp(28px, 4vw, 48px) 0; padding-inline: 0 clamp(28px, 4vw, 48px); }
.sw-win { position: relative; inset: auto; margin-bottom: -28px; border-radius: 0; border-start-end-radius: 16px; font-size: 13px; }
.sw-win .win-main { gap: 14px; padding-bottom: 44px; }
.sw-tools { display: flex; gap: 14px; }
.sw-tools .ic { width: 18px; height: 18px; }
.sw-win .win-h { align-items: center; padding-top: 4px; }
.sw-win .win-h b { font-size: 21px; }
.sw-done { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #E3FBEF; color: var(--pd-green-ink); font-size: 13px; font-weight: 700; }
.sw-done::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pd-green); }
.sw-prog { display: grid; gap: 7px; }
.sw-prog i { height: 6px; border-radius: 3px; background: var(--pd-green); }
.sw-prog small { font-size: 12px; color: var(--ink-2); }
.sw-prog small b { color: #000; }
.sw-rows li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 24px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #EDEDF0; }
.sw-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #F4F4F6; }
.sw-ic .ic { width: 18px; height: 18px; }
.sw-rows p { display: grid; min-width: 0; }
.sw-rows b { font-size: 14.5px; font-weight: 700; }
.sw-rows small { overflow: hidden; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.sw-rows em { font-family: "Wix Madefor Text", var(--sans); font-size: 16px; font-weight: 800; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-rows em span { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sw-rows em.t { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--pd-green-ink); }
/* done, as the product marks it: its green with a black tick */
.sw-ok { width: 24px; height: 24px; border-radius: 50%; background: var(--pd-green) var(--tick-ink) center / 13px no-repeat; }
@media (max-width: 599px) {
  .sw-stage, .sw-stage2 { border-radius: 22px; }
  .sw-stage { padding-block-start: 20px; padding-inline-end: 16px; }
  .sw-win { grid-template-columns: minmax(0, 1fr); }
  .sw-win .pd-nav { display: none; }
  .sw-win .win-main { padding-inline: 14px; }
  .sw-win .win-top { margin-inline: -14px; padding-inline: 14px; }
  .sw-win .win-h b { font-size: 18px; }
  .sw-rows li { grid-template-columns: 30px minmax(0, 1fr) auto 22px; gap: 9px; padding: 10px 0; }
  .sw-ic { width: 30px; height: 30px; border-radius: 9px; }
  .sw-ic .ic { width: 16px; height: 16px; }
  .sw-rows small { display: none; }
  .sw-rows em.t { max-width: 7.5em; white-space: normal; text-align: end; line-height: 1.25; }
  .sw-ok { width: 22px; height: 22px; background-size: 12px; }
}

/* ---------- What trainees do: the studio's WhatsApp on the phone, in WhatsApp's own look; and who has done it ---------- */
.sw-stage2 { height: 640px; }
.sw-phone { top: 44px; inset-inline-end: 9%; }
.sw-phone .phone2-screen { display: flex; flex-direction: column; background: #EFEAE2; }
.sw-phone .phone2-bar { flex: none; height: 44px; padding-top: 14px; background: #F6F5F3; }
.sw-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sw-sig i { width: 3px; border-radius: 1px; background: #000; }
.sw-sig i:nth-child(1) { height: 4px; } .sw-sig i:nth-child(2) { height: 6px; } .sw-sig i:nth-child(3) { height: 8px; } .sw-sig i:nth-child(4) { height: 10.5px; }
.sw-wa-h { display: flex; flex: none; align-items: center; gap: 9px; padding: 6px 12px 10px; background: #F6F5F3; border-bottom: 1px solid #E2DED8; }
.sw-back { width: 18px; height: 18px; fill: none; stroke: #007AFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-wa-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #000; color: #fff; font-size: 15px; font-weight: 700; }
.sw-wa-h p { display: grid; min-width: 0; line-height: 1.25; }
.sw-wa-h b { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sw-wa-h .vf { width: 14px; height: 14px; flex: none; }
.sw-wa-h small { font-size: 11px; color: #667781; }
.sw-wa-body { display: grid; align-content: start; gap: 8px; padding: 12px 10px; }
.sw-wa-day { justify-self: center; padding: 3px 10px; border-radius: 8px; background: #fff; color: #54656F; font-size: 11px; font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
/* in Hebrew, the received message is on the right, the sent one on the left */
.sw-wa-in { justify-self: start; display: grid; width: 88%; border-radius: 10px; border-start-start-radius: 2px; background: #fff; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.sw-wa-in p, .sw-wa-out p { padding: 7px 9px 6px; font-size: 12.5px; line-height: 1.45; color: #111B21; }
.sw-wa-in small, .sw-wa-out small { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 2px; direction: ltr; font-family: "Wix Madefor Text", var(--sans); font-size: 10px; color: #667781; }
.sw-wa-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-top: 1px solid #ECEAE6; color: #027EB5; font-size: 12.5px; font-weight: 600; }
.sw-wa-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sw-wa-out { justify-self: end; max-width: 80%; border-radius: 10px; border-start-end-radius: 2px; background: #D9FDD3; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.sw-wa-out small svg { width: 16px; height: 11px; fill: none; stroke: #53BDEB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* who has done it, as a frosted card like the hero's */
.sw-move { inset-inline-start: 6%; bottom: 44px; width: 286px; display: grid; gap: 12px; }
.sw-m { display: grid; gap: 6px; }
.sw-m p { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.sw-m p b { font-weight: 600; }
.sw-m p span { font-family: "Wix Madefor Text", var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-m i { height: 6px; border-radius: 3px; background: var(--panel) linear-gradient(#18E588, #18E588) no-repeat right / var(--w) 100%; }
.sw-move > small { font-size: 13px; }
@media (max-width: 1099px) and (min-width: 900px) { .sw-phone { inset-inline-end: 3%; } .sw-move { inset-inline-start: 3%; width: 250px; } }
@media (max-width: 599px) {
  .sw-stage2 { height: 640px; }
  .sw-phone { top: 22px; inset-inline-end: auto; left: 50%; width: 248px; margin-left: -124px; }
  .sw-move { inset-inline: 12px; bottom: 14px; width: auto; }
}
/* on the grey sections the stages turn white, as members.css does */
.tint .sw-stage, .tint .sw-stage2 { background-color: #fff; }