/* marketing.html: שיווק ומכירות (built 31 Oct 2026, in the homepage's language). The shared pieces (.ih, .ih-stage, .st-card, .phone2, .feat,
   .ticks, .faq3, .closing2, and the homepage's social section .so with its lockup and tag) are in site.css; this file holds only this page's own.
   The lead cards, their source tags and the WhatsApp message are copied from the homepage's leads story (.ld-* in site.css), renamed mk-. */

.mk-hero, .mk-src, .mk-wel, .mk-sale { --ok: #16A34A; }
.mk-hero .ic, .mk-src .ic, .mk-wel .ic, .mk-sale .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.mk-fine { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.mk-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.nw { white-space: nowrap; }

/* ---------- Pieces of the product, as on the homepage ---------- */
/* a lead: name and age, phone, then its tags (where it came from, what happened) */
.mk-lc { position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 82px; padding: 10px 11px; border-radius: 11px; background: #fff; color: #000;
  font-size: 12px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .06); }
.mk-lc p { margin: 0; }
.mk-lc-h { display: flex; align-items: center; gap: 6px; }
.mk-lc-h b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.mk-lc-h small { flex: none; margin-inline-start: auto; font-size: 10.5px; color: var(--ink-2); }
.mk-ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mk-tags { display: flex; gap: 5px; margin-top: auto; padding-top: 4px; overflow: hidden; }
.mk-tags i { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; font-style: normal; white-space: nowrap; }
.mk-tags svg, .mk-tags .ic { flex: none; width: 11px; height: 11px; }
.mk-tags .ic { stroke-width: 2.2; }
.mk-tags .ig { background: #FCE7EF; color: #C2185B; }
.mk-tags .fb { background: #E7F0FE; color: #1877F2; }
.mk-tags .web { background: #EEEEF1; color: #2C2C2E; }
.mk-tags .lp { background: #E1F5F6; color: #126E6A; }
.mk-tags .wa { background: #E3F8EA; color: #128C4A; }
.mk-tags .paid { background: var(--ok); color: #fff; }
.mk-lc.paid { box-shadow: inset 0 0 0 1.5px var(--ok), 0 1px 2px rgba(0, 0, 0, .06); }
/* a stage of the pipeline: its dot and its count */
.mk-col-h { display: flex; align-items: center; gap: 7px; min-height: 26px; margin: 0; padding: 0 4px; font-size: 12.5px; }
.mk-col-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #8E8E93); }
.mk-col-h > b { font-weight: 700; white-space: nowrap; }
.mk-col-h span { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.mk-col-h span b { color: #000; font-weight: 700; }
/* WhatsApp as a round badge, and its own look: the wallpaper, the studio's message in green with blue ticks, the reply button */
.mk-ch { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #25D366; color: #fff; font-style: normal; }
.mk-ch svg { width: 14px; height: 14px; }
.mk-ch.big { width: 38px; height: 38px; }
.mk-ch.big svg { width: 19px; height: 19px; }
.mk-wall { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: #EFEAE2; color: #111B21; }
.mk-bub { justify-self: end; max-width: 94%; margin: 0; padding: 7px 9px 4px; border-radius: 0 10px 10px 10px; background: #D9FDD3; color: #111B21;
  font-size: 13px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.mk-bub > small { display: flex; align-items: center; justify-content: flex-start; gap: 3px; margin-top: 2px; direction: ltr; font-size: 10.5px; color: #667781; }
.mk-bub > small svg { width: 15px; height: 10px; fill: none; stroke: #53BDEB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-wbtn { justify-self: end; display: flex; align-items: center; justify-content: center; gap: 6px; width: 94%; height: 34px; border-radius: 10px; background: #fff; color: #008069;
  font-size: 13px; font-weight: 600; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.mk-wbtn .ic { width: 14px; height: 14px; }
/* a status line under a card: a dot and a few words */
.mk-into { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.mk-into i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; }
.mk-into b { color: #000; font-weight: 700; }
.mk-into.ok i { background: var(--ok); }
/* the phone's status bar */
.mk-sys { display: flex; align-items: center; gap: 5px; }
.mk-sys svg { width: 17px; height: 11px; fill: currentColor; }
.mk-sys svg + svg { width: 25px; }

/* ---------- Hero: the studio wall; the studio's ad on Instagram with its lead form (the phone), and three frosted cards ---------- */
.mk-stage { height: clamp(560px, 50vw, 640px); }
.mk-phone { top: 36px; inset-inline-start: clamp(28px, 8cqw, 110px); }
.mk-phone .phone2-screen { display: flex; flex-direction: column; color: #000; }
/* the sponsored post */
.mk-post { position: relative; display: flex; flex-direction: column; padding-top: 8px; }
.mk-post-h { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; }
.mk-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: conic-gradient(#FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); }
.mk-av i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #fff; color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; }
.mk-av.sm { width: 24px; height: 24px; padding: 0; background: none; }
.mk-post-h > span:not(.mk-av) { display: grid; min-width: 0; line-height: 1.2; }
.mk-post-h b { font-family: "Wix Madefor Text", var(--sans); font-size: 12px; font-weight: 700; }
.mk-post-h small { font-size: 10.5px; color: #555; }
.mk-more { width: 16px; height: 16px; margin-inline-start: auto; fill: #000; }
.mk-post > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mk-cta { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border-bottom: 1px solid #EFEFEF; background: #F7F7F7;
  font-size: 12.5px; font-weight: 700; }
.mk-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the lead form, a sheet over the post (Instagram's own: dimmed behind, a grabber, the fields, a blue button) */
.mk-phone .phone2-screen::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(0, 0, 0, .38); }
.mk-form { position: absolute; z-index: 2; inset: auto 0 0; display: grid; gap: 10px; padding: 8px 16px 22px; border-radius: 18px 18px 0 0; background: #fff;
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .35); }
.mk-grab { justify-self: center; width: 36px; height: 4px; margin-bottom: 4px; border-radius: 2px; background: #DBDBDB; }
.mk-form-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mk-form-h b { font-weight: 700; }
.mk-form-t { display: grid; gap: 2px; line-height: 1.3; }
.mk-form-t b { font-size: 16px; font-weight: 700; }
.mk-form-t small { font-size: 11.5px; color: #555; }
.mk-field { display: grid; gap: 3px; }
.mk-field small { font-size: 10.5px; font-weight: 600; color: #555; }
.mk-field > span { display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px #DBDBDB; font-size: 13px; }
.mk-send { display: grid; place-items: center; height: 38px; margin-top: 2px; border-radius: 9px; background: #0095F6; color: #fff; font-size: 13.5px; font-weight: 700; }
/* the frosted cards: the lead comes in, the welcome goes out, the first membership */
.mk-c1, .mk-c2, .mk-c3 { display: grid; gap: 10px; }
.mk-c1, .mk-c2 { inset-inline-start: calc(clamp(28px, 8cqw, 110px) + 270px + 44px); width: min(320px, 30cqw); }
.mk-c1 { top: 52px; }
.mk-c2 { top: 262px; }
.mk-c3 { top: 150px; inset-inline-end: clamp(24px, 3.5cqw, 44px); width: min(286px, 26cqw); }
.mk-c1 .mk-lc, .mk-c3 .mk-lc { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.mk-c3 .mk-lc.paid { box-shadow: inset 0 0 0 1.5px var(--ok); }
.st-card-h .mk-ch { width: 24px; height: 24px; }
/* narrower stages: the phone on the start side, the lead and the welcome beside it; the paid card goes */
@container ihs (max-width: 979px) {
  .mk-phone { inset-inline-start: 24px; }
  .mk-c1, .mk-c2 { inset-inline-start: auto; inset-inline-end: 24px; width: calc(100% - 270px - 88px); max-width: 360px; }
  .mk-c1 { top: 44px; }
  .mk-c2 { top: 256px; }
  .mk-c3 { display: none; }
}
/* phones: the phone a size down in the middle, the lead's card over its side, the welcome over its bottom */
@container ihs (max-width: 599px) {
  .mk-phone { top: 18px; inset-inline-start: 50%; margin-inline-start: -135px; transform: scale(.82); transform-origin: 50% 0; }
  .mk-c1 { top: 112px; inset-inline-end: 10px; width: 206px; padding: 10px 12px 11px; }
  .mk-c1 .mk-into { display: none; }
  .mk-c2 { top: auto; bottom: 12px; inset-inline: 10px; width: auto; max-width: none; }
}
@media (max-width: 599px) { .mk-stage { height: 680px; } }

/* ---------- Where the leads come from: the sources as tiles, each flowing into the product's first stage ---------- */
.mk-src-in { display: grid; grid-template-columns: minmax(0, 172px) minmax(0, 1fr); gap: 52px; align-items: center; padding: clamp(24px, 3.4vw, 44px) clamp(16px, 3vw, 40px);
  border-radius: 28px; background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
.mk-tiles { display: grid; gap: 12px; }
.mk-tiles li { position: relative; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 8px 18px -12px rgba(0, 0, 0, .3); }
/* a dashed line from each tile to the stage */
.mk-tiles li::after { content: ""; position: absolute; top: 50%; inset-inline-start: 100%; width: 52px; border-top: 1.5px dashed #B9B9C0; }
.mk-tiles .lg { display: grid; place-items: center; flex: none; width: 34px; height: 34px; font-style: normal; }
.mk-tiles .lg svg { width: 30px; height: 30px; }
.mk-tiles .lg.web { border-radius: 50%; background: #EEEEF1; color: #2C2C2E; }
.mk-tiles .lg.web .ic { width: 20px; height: 20px; }
.mk-tiles .lg.wa { color: #25D366; }
.mk-tiles .lg.zap svg { width: 36px; height: 17px; }
.mk-tiles span { display: grid; min-width: 0; line-height: 1.25; }
.mk-tiles b { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.mk-tiles small { font-size: 12px; color: var(--ink-2); }
.mk-col { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -28px rgba(0, 0, 0, .35); }
.mk-col .mk-lc { min-height: 0; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.mk-src .mk-col-h { --c: #8E8E93; }
@media (max-width: 599px) {
  /* phones: the six sources as a grid of small tiles over the stage, no lines */
  .mk-src-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mk-tiles li { flex-direction: column; justify-content: center; gap: 4px; height: 86px; padding: 8px 4px; text-align: center; }
  .mk-tiles li::after { display: none; }
  .mk-tiles span { justify-items: center; }
  .mk-tiles b { font-size: 12.5px; white-space: normal; }
  .mk-tiles small { display: none; }
}

/* ---------- The welcome: the lead, the automation's message beside it, the automation itself ---------- */
.mk-wel-in { position: relative; display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 600px; margin: 0 auto; }
.mk-wel-lead { margin-top: 26px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 18px 40px -20px rgba(0, 0, 0, .35); }
.mk-pop { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: #fff; color: #111B21;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -24px rgba(0, 0, 0, .4); }
.mk-pop::before { content: ""; position: absolute; top: 52px; right: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.mk-pop p { margin: 0; }
.mk-pop-h { display: flex; align-items: center; gap: 8px; padding: 0 2px; font-size: 13.5px; }
.mk-pop-h b { font-weight: 700; }
.mk-pop-h span { margin-inline-start: auto; font-size: 12px; color: var(--ink-2); }
.mk-pop .mk-wall { gap: 6px; padding: 14px 12px; }
.mk-pop .mk-bub { font-size: 14.5px; }
.mk-pop .mk-wbtn { height: 38px; font-size: 14px; }
.mk-pop-f { padding: 0 2px; font-size: 12.5px; color: var(--ink-2); }
/* the automation, on, with what it sent this month */
.mk-auto { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; width: min(420px, 100%); justify-self: start; margin-top: 2px; padding: 12px 14px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 40px -22px rgba(0, 0, 0, .35); }
.mk-auto p { display: grid; min-width: 0; margin: 0; line-height: 1.3; }
.mk-auto p b { font-size: 15.5px; font-weight: 800; }
.mk-auto p small { font-size: 12.5px; color: var(--ink-2); }
.mk-n { display: grid; justify-items: end; margin-inline-start: auto; font-size: 11.5px; line-height: 1.2; color: var(--ink-2); }
.mk-n b { font-size: 20px; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
/* the product's switch, on, in its green (the knob at the end, as in RTL) */
.mk-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #18E588; }
.mk-sw::after { content: ""; position: absolute; top: 2px; inset-inline-end: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
@media (max-width: 599px) {
  .mk-wel-in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mk-wel-lead { width: 220px; margin-top: 0; }
  .mk-pop::before { top: -6px; right: 40px; }
}

/* ---------- From the trial to the first membership: the payment link, the checkout on the phone, the paying client ---------- */
.mk-sale-in { position: relative; container: mks / inline-size; height: 620px; overflow: hidden; border-radius: 28px;
  background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; }
/* the phone on the end side, cut by the panel's bottom; the message and the paying client beside it on the start side */
.mk-phone2 { top: 44px; left: 18px; }
/* the checkout, as the homepage's: the membership on a soft pink card, the lines, the total, Apple Pay, bit and card */
.mk-co { display: flex; flex-direction: column; height: calc(100% - 30px); padding: 10px 14px 16px; }
.mk-co p { margin: 0; }
.mk-co-nav { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; margin-bottom: 14px; text-align: center; }
.mk-co-nav .ic { width: 18px; height: 18px; }
.mk-co-nav b { font-size: 14px; font-weight: 700; }
.mk-prod { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #FFF3F7, #FCE4EC); }
.mk-prod i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #E6004F; box-shadow: 0 3px 8px -2px rgba(230, 0, 79, .25); }
.mk-prod i .ic { width: 21px; height: 21px; }
.mk-prod p { display: grid; line-height: 1.3; }
.mk-prod b { font-size: 13.5px; font-weight: 800; }
.mk-prod small { font-size: 11px; color: #9A5A70; }
.mk-lines { display: grid; gap: 8px; margin-top: 14px; padding: 0 2px; font-size: 12px; }
.mk-lines p { display: flex; justify-content: space-between; color: var(--ink-2); }
.mk-lines b { color: #000; font-weight: 600; }
.mk-payer { display: flex; align-items: center; gap: 9px; margin-top: 16px !important; padding: 10px; border-radius: 12px; background: #F6F6F8; }
.mk-payer i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #FCE4EC; color: #C2185B; font-size: 12px; font-weight: 700; font-style: normal; }
.mk-payer span { display: grid; min-width: 0; line-height: 1.25; }
.mk-payer b { font-size: 12.5px; font-weight: 700; }
.mk-payer small { font-size: 11px; color: var(--ink-2); }
.mk-payer em { margin-inline-start: auto; font-size: 11.5px; font-style: normal; font-weight: 600; color: #E6004F; }
.mk-total { display: flex; align-items: baseline; justify-content: space-between; margin: auto 2px 12px !important; padding-top: 12px; border-top: 1px dashed #D9D9DE; font-size: 12.5px; }
.mk-total b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.mk-ap { display: flex; align-items: center; justify-content: center; gap: 2px; height: 44px; border-radius: 13px; background: #000; color: #fff; font-size: 18px; font-weight: 600; direction: ltr; }
.mk-ap svg { width: 17px; height: 17px; margin-top: -3px; fill: #fff; }
.mk-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px !important; }
.mk-alt span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 11px; font-size: 12px; font-weight: 600; }
.mk-alt .bit { background: #00353B; }
.mk-alt .bit svg { width: 28px; height: 16px; fill: #fff; }
.mk-alt .card { background: #F2F2F5; }
/* the studio's WhatsApp message with the link, over the phone's start side */
.mk-msg { position: absolute; z-index: 3; top: 56px; right: 16px; display: grid; gap: 8px; width: min(300px, calc(100% - 322px)); padding: 12px; border-radius: 20px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 26px 50px -22px rgba(0, 0, 0, .45); }
.mk-msg p { margin: 0; }
.mk-msg-h { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mk-msg-h b { font-weight: 700; }
.mk-msg-h span { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-2); }
.mk-msg .mk-bub { max-width: 100%; }
.mk-link { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; margin: 7px 0 2px; padding: 8px; border-radius: 10px; background: #fff; }
.mk-link > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #F2F2F3; color: #000; }
.mk-link > i .ic { width: 17px; height: 17px; }
.mk-link > span { display: grid; min-width: 0; line-height: 1.25; }
.mk-link b { font-size: 12.5px; font-weight: 700; }
.mk-link small { font-size: 11px; color: var(--ink-2); }
.mk-link em { grid-column: 1 / -1; display: grid; place-items: center; height: 30px; border-radius: 999px; background: #000; color: #fff; font-size: 12px; font-weight: 700; font-style: normal; }
/* the lead, now a paying client, in the pipeline's last stage */
.mk-done { position: absolute; z-index: 3; bottom: 56px; right: 16px; display: grid; gap: 8px; width: min(260px, calc(100% - 322px)); padding: 10px; border-radius: 16px; background: #F6F6F8;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 26px 50px -22px rgba(0, 0, 0, .45); --c: #16A34A; }
/* narrower panels: the message across the top, over the phone's top edge; the phone in the middle; the paying client is left out */
@container mks (max-width: 539px) {
  .mk-phone2 { top: 132px; left: 50%; margin-left: -135px; }
  .mk-msg { top: 14px; right: 12px; left: 12px; width: auto; }
  .mk-done { display: none; }
}
@media (max-width: 599px) { .mk-sale-in { height: 680px; } }
}

/* ---------- Social posts (the homepage's .so), on grey ---------- */
.mk-so .so-wall img { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35); }

/* the closing's notices: WhatsApp's icon is a filled glyph, not a line icon */
.cf-c svg.wa-i { fill: currentColor; stroke: none; }