/* "מתאמים שיעור" (Hagar 8.11.26): the look of the sketch's booking block (version 20) */
.bk-box{border-radius:26px;padding:22px;border:1.5px solid rgba(140,192,170,.55);background:linear-gradient(150deg,rgba(140,192,170,.14),rgba(140,192,170,.04))}
.bk-cta{display:grid;gap:10px;justify-items:center;text-align:center}
.bk-cta .h{margin:0;font-size:clamp(26px,3vw,38px)}
.bk-cta p{margin:0;color:rgba(255,255,255,.9);font-size:clamp(16px,1.4vw,19px);text-wrap:balance}
.bk-f{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.bk-f[hidden]{display:none}
.bk-f[aria-busy="true"] .days{min-height:52px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04))}
.bk-f fieldset{border:0;margin:0;padding:0;min-width:0}
.bk-f legend,.bk-f .fld>label{display:block;padding:0;margin-bottom:8px;font-size:13.5px;font-weight:700}
.bk-f input:not([type="radio"]),.bk-f textarea{display:block;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;font:inherit;font-size:16px}
.bk-f input:focus-visible,.bk-f textarea:focus-visible,.bk-f .chip:focus-visible,.bk-f .pills label:has(input:focus-visible){outline:2px solid var(--mint);outline-offset:2px}
.bk-f .pills{display:flex;flex-wrap:wrap;gap:8px}
.bk-f .pills label{flex:1 1 auto;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:15px}
.bk-f .pills label:has(input:checked){border-color:var(--mint);background:rgba(140,192,170,.16);color:var(--mint)}
.bk-f .pills input{accent-color:#8CC0AA;margin:0;width:18px;height:18px;padding:0;flex:none;border:0;box-shadow:none;background:none}
.bk-f .days,.bk-f .times{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.bk-f .times{margin-top:10px;flex-wrap:wrap;overflow:visible}
.bk-f .chip{flex:none;display:grid;justify-items:center;gap:2px;min-width:58px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;font:inherit;font-size:15px;cursor:pointer}
.bk-f .chip b{font-size:12.5px;color:var(--dim)}
.bk-f .chip.t{min-width:74px}
.bk-f .chip[aria-pressed="true"]{border-color:var(--mint);background:rgba(140,192,170,.2);color:var(--mint)}
.bk-f .dr-fs{display:block;text-align:start;margin-top:8px;color:var(--dim)}
.bk-msg{margin:0;font-size:15px;line-height:1.5}
.bk-msg:empty{display:none}
.bk-msg .btn{margin-top:8px}
.bk-sub{font-family:"Secular One",sans-serif;font-size:20px;color:#fff;margin-top:6px}
.bk-pay{display:grid;gap:8px;justify-items:start;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.22)}
.bk-dep{font-size:17px}
.bk-dep b{color:var(--amber)}
.bk-cancel{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5;text-wrap:pretty}
.bk-pay button[disabled]{opacity:.6;cursor:wait}
@media (min-width:900px){ .bk-box{padding:30px 36px} .bk-f{grid-template-columns:1fr 1fr;gap:16px 22px} .bk-f .wide{grid-column:1/-1} }
/* her ask (9.11.26): a red note right beside what's missing, and the bottom line as clear as it */
.bk-err,.bk-msg.pay:not(:empty){display:flex;align-items:flex-start;gap:9px;margin:8px 0 0;padding:9px 12px;border-radius:12px;background:rgba(255,107,91,.14);border:1px solid rgba(255,123,107,.6);color:#ffc4ba;font-size:15px;font-weight:700;line-height:1.45;text-wrap:pretty}
.bk-msg.pay:not(:empty){display:block;margin:0}
.bk-err::before{content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#ff7b6b;color:#1d1d1d;font-size:13px;font-weight:800;line-height:1}
.bk-err{animation:bk-in .22s ease-out}
@keyframes bk-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bk-err{animation:none}}
.bk-f .bk-bad>label,.bk-f .bk-bad>legend{color:#ffc4ba}
.bk-f .bk-bad input{border-color:#ff7b6b;box-shadow:0 0 0 3px rgba(255,123,107,.18)}
.bk-f .bk-bad .times .chip{border-color:rgba(255,123,107,.65)}
.bk-f .bk-x{margin-top:8px}
.bk-f .bk-x[hidden]{display:none}
/* her offer under the hour's price (9.11.26) */
.sc .pr-x{margin:-2px 0 10px;color:var(--mint);font-size:14.5px;font-weight:700}
.sc .pr-x{display:grid;gap:2px}
.sc .pr-x .pr-xt{color:#fff;font-size:15.5px}
.sc .pr-x span{color:rgba(255,255,255,.86);font-weight:500}
.sc .pr-x strong{color:var(--mint);font-weight:800}
/* Only what the rearrangement needs. Everything else is the live site's own styling. */
.dr-off{display:none!important}
.buddy,.askb{display:none!important}
.hero .wrap{max-width:1120px}
.hero-biz{display:block;margin-top:14px;color:var(--dim);font-size:15.5px;font-weight:600}

/* spacing: the live rules for each section, one for a computer and one for a phone */
html body>section#exp{padding-top:22px!important;padding-bottom:48px!important}
html body>section#bk1,html body>section#bk2,html body>section#bk3,html body>section#how2,html body>section#rv1,html body>section#rv2,html body>section#revp,html body>section#team,html body>section#sessions,html body>section#revs,html body>section#about,html body>section#faq2,html body>section#faq3,html body>section#door,html body>section#bizform{padding-top:42px!important;padding-bottom:48px!important}
html[data-world="learn"] body>section#work{padding-top:42px!important}
/* the first thing after the opening peeks into the first screen, so people scroll */
html body .hero{padding-top:18px!important;padding-bottom:10px!important}
html body .hero .hero-cta{margin-top:20px!important}
@media (max-width:899px){
  html body>section#exp{padding-top:12px!important;padding-bottom:34px!important}
  html body>section#bk1,html body>section#bk2,html body>section#bk3,html body>section#how2,html body>section#rv1,html body>section#rv2,html body>section#revp,html body>section#team,html body>section#sessions,html body>section#revs,html body>section#about,html body>section#faq2,html body>section#faq3,html body>section#door,html body>section#bizform{padding-top:28px!important;padding-bottom:34px!important}
  html[data-world="learn"] body>section#work{padding-top:28px!important}
  html body .hero{padding-bottom:6px!important}
  html body .hero .hero-cta{margin-top:16px!important}
  html body .hero-who{font-size:17px!important;line-height:1.35;margin-top:10px!important}
  html body .hero .sub{margin-top:8px}
  .sw{margin-bottom:10px!important}
}

/* a review: her words flow on the photo, over a soft shade */
.rc{position:relative;display:flex;align-items:flex-end;min-height:440px;border-radius:24px;overflow:hidden;background:var(--sea2);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.rc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,32,0) 26%,rgba(8,22,32,.72) 58%,rgba(8,22,32,.94) 100%)}
.rev{position:relative;z-index:1;width:100%;padding:150px 22px 20px;display:grid;gap:8px}
.rev p{margin:0;color:#fff;font-size:16.5px;line-height:1.55;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.rev footer{color:rgba(255,255,255,.72);font-size:13.5px}
.rev footer b{color:var(--amber)}
.rc{text-align:start}
.rc-luna{min-height:clamp(440px,122vw,520px)}
.rc-luna::after{display:none}
.rc-luna .rev{padding:0 20px 16px}
.rc-luna .rev::before{content:'';position:absolute;inset:-130px 0 0;z-index:-1;background:linear-gradient(to bottom,rgba(11,30,42,0) 0,rgba(11,30,42,.12) 14%,rgba(11,30,42,.34) 28%,rgba(11,30,42,.62) 44%,rgba(11,30,42,.84) 60%,rgba(11,30,42,.94) 78%,rgba(11,30,42,.97) 100%)}
.rc-site{display:block;min-height:0;background:#0f2736}
.rc-site>img{position:static;display:block;width:100%;height:210px;object-fit:cover}
.rc-site::after{display:none}
.rc-site .rev{position:relative;padding:18px 24px 20px}
.hero-rev{display:none}

/* four moments side by side, each with its words on its clip */
.mom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.mom article{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4.3;background:var(--sea2)}
.mom video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mom article::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,32,0) 42%,rgba(8,22,32,.82) 78%,rgba(8,22,32,.94) 100%)}
.mom .cap{position:absolute;z-index:1;inset-inline:0;bottom:0;padding:12px 14px 14px;display:grid;gap:4px}
.mom h3{font-family:"Secular One","Miriam Libre",sans-serif;font-weight:400;font-size:clamp(21px,2.1vw,27px);margin:0;color:#fff}
.mom p{margin:0;color:rgba(255,255,255,.9);font-size:14.5px;line-height:1.35}

/* the two sessions */
#sessions .two{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.sc{border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;background:rgba(255,255,255,.05);border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.sc .v{aspect-ratio:1/1;background:var(--sea2)}
.sc video{width:100%;height:100%;object-fit:cover;display:block;min-width:0}
.sc .in{padding:22px;display:grid;gap:10px;align-content:start}
.sc .ttl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sc .dur{padding:4px 12px;border-radius:999px;border:1px solid var(--mint);color:var(--mint);font-size:14.5px;font-weight:800;white-space:nowrap}
.sc .ex summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:var(--amber);font-size:15.5px;font-weight:800}
.sc .ex summary::-webkit-details-marker{display:none}
.sc .ex summary::after{content:'+';font-size:20px;line-height:1}
.sc .ex[open] summary::after{content:'−'}
.sc .ex ul{margin-top:10px}
.sc h3{font-family:"Secular One","Miriam Libre",sans-serif;font-weight:400;font-size:clamp(26px,2.6vw,34px);margin:0;line-height:1.1}
.sc .pr{font-size:clamp(30px,3vw,42px);font-weight:900;color:var(--amber);line-height:1}
.sc p{margin:0;color:#fff;font-size:17px;font-weight:700;line-height:1.4}
.sc ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sc li{position:relative;padding-inline-start:18px;color:rgba(255,255,255,.88);font-size:16px;line-height:1.4}
.sc li::before{content:'';position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.sc .od-fitb{justify-self:start;margin-top:6px;background:none;cursor:pointer}

/* two reviews side by side on the business side */
.rl{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}

/* נעים להכיר: three layouts, none of them a photo with words on it like the reviews */
.ab{display:grid;gap:22px;align-items:center}
.ab .ph{margin:0;position:relative;overflow:hidden}
.ab .me2{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 22%}
.ab video.me2{object-position:50% 30%}
html[data-world="order"] .ab img.me2,html[data-world="learn"] .ab video.me2{display:none}
.ab figcaption{display:none}
.ab .tx{display:grid;gap:14px;justify-items:start}
.ab .h{margin:0}
.ab p{margin:0;color:rgba(255,255,255,.92);font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.ab .facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ab .facts li{padding:6px 14px;border-radius:999px;font-size:15px;font-weight:700;border:1px solid var(--mint);color:var(--mint)}
/* 1, light: the one bright card on a dark page, the photo in an arch */
html[data-ab="0"] .ab{background:#EDF5F8;color:#223641;border-radius:26px;padding:22px}
html[data-ab="0"] .ab .ph{border-radius:999px 999px 22px 22px;aspect-ratio:4/5;max-width:300px;width:100%;justify-self:center}
html[data-ab="0"] .ab .h{color:#223641}
html[data-ab="0"] .ab p{color:#223641}
html[data-ab="0"] .ab .facts li{background:#DCEDE5;border-color:transparent;color:#2F6E56}
html[data-ab="0"] .ab .od-fitb{background:#223641;color:#fff;border-color:#223641}
/* 2, framed: one photo in a white frame with her name, words beside it on the page itself */
html[data-ab="1"] .ab .ph{background:#fff;padding:12px 12px 0;border-radius:6px;transform:rotate(-2.5deg);box-shadow:0 28px 50px -24px rgba(0,0,0,.85);max-width:320px;width:86%;justify-self:center}
html[data-ab="1"] .ab .me2{aspect-ratio:4/5;height:auto;border-radius:2px}
html[data-ab="1"] .ab figcaption{display:block;padding:10px 4px 14px;text-align:center;color:#223641;font-family:"Secular One","Miriam Libre",sans-serif;font-size:20px}
/* 3, round: a round photo in the middle with a mint ring, everything centred */
html[data-ab="2"] .ab{justify-items:center;text-align:center;max-width:760px;margin-inline:auto}
/* a big circle, her whole upper body and the place around her, not only the face */
html[data-ab="2"] .ab .ph{width:clamp(260px,34vw,380px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 5px var(--sea3),0 0 0 8px var(--mint)}
html[data-ab="2"] .ab img.me2{object-position:50% 10%}
html[data-ab="2"] .ab .tx{justify-items:center}
html[data-ab="2"] .ab .facts{justify-content:center}

/* the door to the business side, on the photo of the four */
#door .box{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:440px;border-radius:26px;overflow:hidden;background:var(--sea2)}
#door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
#door .box::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,32,.05) 25%,rgba(8,22,32,.82) 70%,rgba(8,22,32,.95) 100%)}
#door .in{position:relative;z-index:1;display:grid;gap:16px;justify-items:center;text-align:center;padding:24px}
#door .h{margin:0;font-size:clamp(26px,3.4vw,42px)}
#door p{margin:0;color:rgba(255,255,255,.92);font-size:clamp(17px,1.5vw,20px);line-height:1.5}
#door .od-fitb{background:rgba(8,22,32,.4)}

/* the business side: training stands out, before the products */
#team .box{position:relative;display:flex;align-items:flex-end;min-height:480px;border-radius:26px;overflow:hidden;background:linear-gradient(150deg,rgba(221,190,133,.2),rgba(221,190,133,.06));border:1.5px solid rgba(221,190,133,.75);box-shadow:0 0 0 5px rgba(221,190,133,.08),0 40px 80px -40px rgba(0,0,0,.9)}
#team img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
#team .box::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,22,32,0) 30%,rgba(8,22,32,.84) 64%,rgba(8,22,32,.96) 100%)}
#team .in{position:relative;z-index:1;display:grid;gap:12px;justify-items:start;padding:22px}
#team .h{margin:0;font-size:clamp(30px,4.4vw,56px);color:#f0dcb4}
#team p{margin:0;color:rgba(255,255,255,.92);font-size:clamp(17px,1.6vw,21px);line-height:1.5}
@media (min-width:900px){
  #team .box,#door .box{display:flex;align-items:center;justify-content:flex-start;min-height:500px}
  #team .box::after,#door .box::after{display:none}
  #team img,#door img{inset:0 auto 0 0;width:58%;height:100%;object-position:50% 32%;-webkit-mask-image:linear-gradient(to left,transparent,#000 9%);mask-image:linear-gradient(to left,transparent,#000 9%)}
  #team .in,#door .in{width:42%;align-content:center;justify-items:start;text-align:start;padding:36px 44px}
  #team .h{font-size:clamp(34px,3.6vw,50px)}
  #door .h{font-size:clamp(28px,2.8vw,40px)}
}
/* the team form opens under the gold box */
#team .tf{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;padding:22px;border-radius:22px;border:1.5px solid rgba(221,190,133,.6);background:rgba(221,190,133,.07)}
#team .tf[hidden]{display:none}
#team .tf fieldset{border:0;margin:0;padding:0;min-width:0}
#team .tf legend{padding:0;margin-bottom:8px;font-size:13.5px;font-weight:700}
#team .tf .pills{display:flex;flex-wrap:wrap;gap:8px}
#team .tf .pills label{flex:1 1 220px;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-weight:700}
#team .tf .pills label:has(input:checked){border-color:#f0dcb4;background:rgba(221,190,133,.16);color:#f0dcb4}
#team .tf .pills input{accent-color:#ddbe85;margin:0;width:18px;height:18px;padding:0;flex:none;border:0;box-shadow:none;background:none}
#team .tf textarea{width:100%;resize:vertical}
#team .tf .tf-go{display:grid;justify-items:start;gap:6px}
#team .tf .tf-go .dr-fs{text-align:start}
#team .tf .ok2{display:none}
@media (min-width:900px){ #team .tf{grid-template-columns:1fr 1fr;padding:28px 32px} #team .tf .wide{grid-column:1/-1} }
/* the link on the full session's card that goes to the team section */
.sc .sc-team{justify-self:start;color:#f0dcb4;font-weight:800;font-size:15.5px;text-decoration:underline;text-underline-offset:4px}
/* the font, three options to compare. 0 is the live site today */
html[data-font="1"] body,html[data-font="1"] button,html[data-font="1"] input,html[data-font="1"] textarea,html[data-font="1"] select,
html[data-font="2"] body,html[data-font="2"] button,html[data-font="2"] input,html[data-font="2"] textarea,html[data-font="2"] select{font-family:Heebo,system-ui,'Segoe UI',Arial,sans-serif!important}
html[data-font="2"] :is(h1,h2,h3,h4,.h,.bt-h,.bg-t,.count,.wc-s h3,.ava .lb b,.mom h3,.sc h3,.ab figcaption){font-family:Heebo,system-ui,sans-serif!important;font-weight:800!important;letter-spacing:-.01em}
#work .dr-wh{margin:0 0 14px}
.bt[data-n="הדרכת עובדים"] .bt-m img{object-position:50% 36%}
#bizform .five form{align-self:start}
#bizform .five h2{margin:0 0 10px}
#bizform .lead{margin:0 0 16px}
#bizform .ok2{display:none}

/* the form */
.dr-fp{margin:6px 0 10px;color:var(--dim)}
.dr-fs{display:block;text-align:center;margin-top:8px;opacity:.75}

/* the switch at the top of the site */
.sw{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);margin-bottom:22px}
.sw button{font:inherit;font-weight:800;font-size:15.5px;color:var(--dim);background:none;border:0;border-radius:999px;padding:9px 22px;cursor:pointer;white-space:nowrap}
.sw button[aria-pressed="true"]{background:#fff;color:var(--ink)}

@media (min-width:900px){
  /* Luna's review beside the headline */
  html[data-world="learn"] .hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px 40px;align-items:center}
  html[data-world="learn"] .hero .sw{grid-column:1/-1;justify-self:center;margin-bottom:0}
  html[data-world="learn"] .hero h1{font-size:clamp(52px,6vw,84px)}
  html[data-world="learn"] .hero-rev{display:block}
  html body .hero{padding-bottom:24px!important}
  .rc-luna{min-height:clamp(480px,38vw,560px)}
  .mom{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .mom p{font-size:15.5px}
  #sessions .two{grid-template-columns:1fr 1fr}
  .sc .v{aspect-ratio:auto;height:460px}
  .sc .in{padding:28px 30px 30px}
  .rl{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  /* one review further down the page, wide */
  .rc-wide{max-width:760px;margin-inline:auto;min-height:560px}
  .rc-wide .rev{padding-top:260px}
  html[data-ab="0"] .ab,html[data-ab="1"] .ab{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
  html[data-ab="0"] .ab{padding:44px 56px}
  html[data-ab="0"] .ab .ph{max-width:340px}
  html[data-ab="1"] .ab{padding:10px 30px}
  html[data-ab="1"] .ab .ph{max-width:360px}
  .ab .tx{gap:18px}
  }

/* phone: the chapter words are short now (round 13), so the clips are a little shorter */
@media (max-width:899px){
  .mom article{aspect-ratio:3/4.7}
  .mom article::after{background:linear-gradient(180deg,rgba(8,22,32,0) 18%,rgba(8,22,32,.5) 36%,rgba(8,22,32,.86) 52%,rgba(8,22,32,.95) 100%)}
}

/* booking a session: a band with a clear call, and the form opens under it */
.bk-box{border-radius:26px;padding:22px;border:1.5px solid rgba(140,192,170,.55);background:linear-gradient(150deg,rgba(140,192,170,.14),rgba(140,192,170,.04))}
.bk-cta{display:grid;gap:10px;justify-items:center;text-align:center}
.bk-cta .h{margin:0;font-size:clamp(26px,3vw,38px)}
.bk-cta p{margin:0;color:rgba(255,255,255,.9);font-size:clamp(16px,1.4vw,19px)}
.bk-f{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.bk-f[hidden]{display:none}
.bk-f fieldset{border:0;margin:0;padding:0;min-width:0}
.bk-f legend{padding:0;margin-bottom:8px;font-size:13.5px;font-weight:700}
.bk-f .pills{display:flex;flex-wrap:wrap;gap:8px}
.bk-f .pills label{flex:1 1 auto;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:15px}
.bk-f .pills label:has(input:checked){border-color:var(--mint);background:rgba(140,192,170,.16);color:var(--mint)}
.bk-f .pills input{accent-color:#8CC0AA;margin:0;width:18px;height:18px;padding:0;flex:none;border:0;box-shadow:none;background:none}
.bk-f .days,.bk-f .times{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.bk-f .times{margin-top:10px;flex-wrap:wrap;overflow:visible}
.bk-f .chip{flex:none;display:grid;justify-items:center;gap:2px;min-width:58px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#fff;font:inherit;font-size:15px;cursor:pointer}
.bk-f .chip b{font-size:12.5px;color:var(--dim)}
.bk-f .chip.t{min-width:74px}
.bk-f .chip[aria-pressed="true"]{border-color:var(--mint);background:rgba(140,192,170,.2);color:var(--mint)}
.bk-f .dr-fs{text-align:start;margin-top:8px}
.bk-sub{font-family:"Secular One","Miriam Libre",sans-serif;font-size:20px;color:#fff;margin-top:6px}
.bk-pay{display:grid;gap:8px;justify-items:start;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.22)}
.bk-dep{font-size:17px}
.bk-dep b{color:var(--amber)}
.bk-cancel{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5}
.bk-f .ok2{display:none}
@media (min-width:900px){ .bk-box{padding:30px 36px} .bk-f{grid-template-columns:1fr 1fr;gap:16px 22px} .bk-f .wide{grid-column:1/-1} }
/* the text font, her pick: IBM Plex Sans Hebrew; headings stay Secular One */
html[data-font="4"] body,html[data-font="4"] button,html[data-font="4"] input,html[data-font="4"] textarea,html[data-font="4"] select{font-family:'IBM Plex Sans Hebrew',Heebo,system-ui,sans-serif!important}
/* IBM Plex Sans Hebrew, her pick for the text (8.11), inlined */
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-hebrew-400.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-hebrew-700.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* no line ends with one lonely word: headings and short lines are balanced, paragraphs wrap "pretty" (her note, 8.11) */
html body :is(h1,h2,h3,.h,.sub,.hero-who,.mom p,.sc p,.bk-cta p,#door p,#team p){text-wrap:balance}
html body :is(p,li,summary,label,legend,blockquote,.rev p,.bk-cancel){text-wrap:pretty}
/* Luna's review: bigger words, with room around them */
.rc-luna .rev{padding:0 24px 22px;gap:10px}
.rc-luna .rev p{font-size:clamp(18px,1.55vw,21px);line-height:1.5}
.rc-luna .rev footer{font-size:15px}
#rv1 .h{margin:0 0 18px}

/* the business matching-call form: details, the services as ticks, team details when מנשנשים AI is ticked */
#bizform .five{display:grid;grid-template-columns:1fr;gap:18px}
#bizform .bf{display:grid;grid-template-columns:1fr;gap:14px}
#bizform .bf fieldset{border:0;margin:0;padding:0;min-width:0}
#bizform .bf legend{padding:0;margin-bottom:8px;font-size:13.5px;font-weight:700}
#bizform .bf .pills{display:flex;flex-wrap:wrap;gap:8px}
#bizform .bf .pills label{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:15px}
#bizform .bf .pills label.first{border-color:rgba(221,190,133,.75);color:#f0dcb4}
#bizform .bf .pills label:has(input:checked){border-color:var(--mint);background:rgba(140,192,170,.16);color:var(--mint)}
#bizform .bf .pills input{accent-color:#8CC0AA;margin:0;width:18px;height:18px;padding:0;flex:none;border:0;box-shadow:none;background:none}
#bizform .bf-team{display:grid;grid-template-columns:1fr;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(221,190,133,.07);border:1px solid rgba(221,190,133,.4)}
#bizform .bf-team[hidden]{display:none}
#bizform .bf-go{display:grid;justify-items:start;gap:6px}
#bizform .bf-go .dr-fs{text-align:start}
#bizform .bf textarea{width:100%;resize:vertical}
@media (min-width:900px){ #bizform .five{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:40px;align-items:start} #bizform .bf{grid-template-columns:1fr 1fr;gap:16px 22px} #bizform .bf .wide{grid-column:1/-1} #bizform .bf-team{grid-template-columns:.6fr 1.4fr} }

/* the button at the top: on a phone, a phone icon and one word, so it stays clear of the logo */
header.top .btn.pri .tp-i,header.top .btn.pri .tp-s{display:none}
@media (max-width:899px){
  html body header.top .btn.pri{display:inline-flex;align-items:center;gap:6px;padding:8px 13px!important;font-size:14px!important;min-width:0}
  header.top .btn.pri .tp-l{display:none}
  header.top .btn.pri .tp-i{display:block;width:15px;height:15px}
  header.top .btn.pri .tp-s{display:inline}
}
/* "ככה זה עובד" on a phone, three layouts. 0: the grid with a lighter shade, so the clips show */
@media (max-width:899px){
  html[data-how="0"] .mom article{aspect-ratio:3/4.4}
  html[data-how="0"] .mom article::after{background:linear-gradient(180deg,rgba(8,22,32,0) 48%,rgba(8,22,32,.55) 66%,rgba(8,22,32,.88) 100%)}
  html[data-how="0"] .mom .cap p{text-shadow:0 1px 8px rgba(0,0,0,.6)}
  /* 1: one at a time, side by side, swiped; the next one peeks in */
  html[data-how="1"] .mom{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 6px;scrollbar-width:none}
  html[data-how="1"] .mom::-webkit-scrollbar{display:none}
  html[data-how="1"] .mom article{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:3/4}
  html[data-how="1"] .mom article::after{background:linear-gradient(180deg,rgba(8,22,32,0) 55%,rgba(8,22,32,.6) 72%,rgba(8,22,32,.9) 100%)}
  html[data-how="1"] .mom .cap{padding:14px 16px 16px}
  html[data-how="1"] .mom h3{font-size:24px}
  html[data-how="1"] .mom p{font-size:15.5px}
  /* 2: strips, the clip on one side and the words beside it, nothing on top of the clip */
  html[data-how="2"] .mom{grid-template-columns:1fr;gap:10px}
  html[data-how="2"] .mom article{display:grid;grid-template-columns:60% 1fr;aspect-ratio:auto;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line)}
  html[data-how="2"] .mom article::after{display:none}
  html[data-how="2"] .mom video{position:relative;inset:auto;aspect-ratio:1/1;height:auto}
  html[data-how="2"] .mom .cap{position:static;padding:10px 12px;gap:6px}
  html[data-how="2"] .mom h3{font-size:20px}
  html[data-how="2"] .mom p{font-size:14.5px;line-height:1.45}
}

/* the accessibility button a little higher, clear of the bottom edge (her note, 8.11) */
html body .a11y{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
html body .a11y-menu{bottom:calc(140px + env(safe-area-inset-bottom,0px))!important}

/* the phone opening, more air in both options; her words never sit on the photo */
.hero-ph{display:none}
@media (max-width:899px){
  html[data-world="learn"] body .hero{padding-top:30px!important;padding-bottom:26px!important}
  html[data-world="learn"] .sw{margin-bottom:26px!important}
  html[data-world="learn"] body .hero .sub{margin-top:14px}
  html[data-world="learn"] body .hero-who{margin-top:20px!important}
  html[data-world="learn"] body .hero .hero-cta{margin-top:30px!important}
  /* 0: the opening on its own, then Luna's whole photo with her words under it */
  html[data-op="0"] #exp .rc-luna{display:block;min-height:0}
  html[data-op="0"] #exp .rc-luna>img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/3}
  html[data-op="0"] #exp .rc-luna .rev{padding:22px 22px 26px;gap:12px}
  html[data-op="0"] #exp .rc-luna .rev::before{display:none}
  html[data-op="0"] #exp .rc-luna .rev p{font-size:18px;line-height:1.6;text-shadow:none}
  /* 1: Luna's photo is the background of the opening's end, the button rests on its faded top; her words come right after */
  html[data-op="1"][data-world="learn"] body .hero{padding-bottom:0!important}
  html[data-op="1"][data-world="learn"] .hero-tx{position:relative;z-index:1}
  html[data-op="1"][data-world="learn"] .hero-ph{display:block;position:relative;z-index:0;margin:-18px calc(50% - 50vw) 0;height:max(min(60svh,128vw),75vw);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 88%,transparent 100%)}
  html[data-op="1"][data-world="learn"] .hero-ph img{width:100%;height:100%;object-fit:cover;object-position:56% 40%;display:block}
  html[data-op="1"] body>section#exp{padding-top:0!important;padding-bottom:40px!important}
  html[data-op="1"] #exp .rc-luna{display:block;min-height:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  html[data-op="1"] #exp .rc-luna>img{display:none}
  html[data-op="1"] #exp .rc-luna .rev{padding:0 6px;gap:14px}
  html[data-op="1"] #exp .rc-luna .rev::before{display:none}
  html[data-op="1"] #exp .rc-luna .rev p{font-size:19px;line-height:1.65;text-shadow:none}
  html[data-op="1"] #exp .rc-luna .rev footer{font-size:15px}
}

/* the team box on a phone: the heading up top, the words and the button at the bottom, a light shade at each end so all four and the table show (her note, 8.11) */
@media (max-width:899px){
  #team .box{align-items:stretch;min-height:0;aspect-ratio:1125/1900}
  #team .box::after{background:linear-gradient(180deg,rgba(8,22,32,.82) 0,rgba(8,22,32,.5) 14%,rgba(8,22,32,0) 27%,rgba(8,22,32,0) 58%,rgba(8,22,32,.55) 74%,rgba(8,22,32,.86) 100%)}
  #team img{object-position:50% 60%}
  #team .in{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:22px 20px 20px}
  #team .in .h{margin-bottom:auto;font-size:28px;line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  #team .in p{text-shadow:0 1px 10px rgba(0,0,0,.7)}
}

/* the portfolio's product buttons lead to the business products, so the private side leaves them out (her note, 8.11) */
html[data-world="learn"] #work .go2{display:none}
/* strips on a wide phone or a narrow window: two side by side, and the words grow with the screen */
@media (min-width:600px) and (max-width:899px){
  html[data-how="2"] .mom{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:899px){
  html[data-how="2"] .mom h3{font-size:clamp(20px,2.9vw,26px)}
  html[data-how="2"] .mom p{font-size:clamp(14.5px,2.1vw,18px)}
}
/* "ככה זה עובד" on a computer: the words grow with the clip (her note, 8.11) */
@media (min-width:900px){
  html body #how2 .mom h3{font-size:clamp(24px,2vw,30px)}
  html body #how2 .mom p{font-size:clamp(16px,1.3vw,19px);line-height:1.45}
  html body #how2 .mom .cap{padding:16px 18px 18px;gap:6px}
}
/* the team box on a phone: her longer paragraph a touch smaller, the box a touch taller, so the table still shows */
@media (max-width:899px){
  #team .box{aspect-ratio:1125/2100}
  #team .in p{font-size:16px;line-height:1.45}
}

/* the team box on a phone: a shade behind the words at the bottom, so they read; the faces and the laptop above stay clear (her note, 8.11) */
@media (max-width:899px){
  #team .box::after{background:linear-gradient(180deg,rgba(8,22,32,.82) 0,rgba(8,22,32,.5) 14%,rgba(8,22,32,0) 27%,rgba(8,22,32,0) 58%,rgba(8,22,32,.72) 69%,rgba(8,22,32,.92) 80%,rgba(8,22,32,.96) 100%)}
}
/* the build: every section is in the page, and each side shows only its own (the sketch moved them in and out instead) */
html[data-world="learn"] [data-side="order"],html[data-world="order"] [data-side="learn"]{display:none!important}
@media (min-width:900px){html .ph-only{display:none!important}}
@media (max-width:899px){html .dk-only{display:none!important}}
.lf-err{margin:8px 0 0;color:#ffb3a7;font-size:14.5px;line-height:1.45}
.lf-err:empty{display:none}