/* ==========================================================================
   מורן לבבי · דף נחיתה
   מובייל קודם. נקודות שבירה: 768, 1024, 1280. רק logical properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. פונטים
   שני פונטים בלבד: Body לכל הטקסט והכותרות, Accent להדגשה בכתב יד.
   הכותרות נבדלות במשקל ובגודל. החלפת פונט: משנים רק את הנתיב.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Body"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/FUP%20Savyon%20-%20For%20Web/FUP%20Savyon%20-%20Regular/FUP%20Savyon%20-%20Regular.woff2") format("woff2"); }
@font-face { font-family: "Body"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/FUP%20Savyon%20-%20For%20Web/FUP%20Savyon%20-%20Medium/FUP%20Savyon%20-%20Medium.woff2") format("woff2"); }
@font-face { font-family: "Body"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../assets/fonts/FUP%20Savyon%20-%20For%20Web/FUP%20Savyon%20-%20SemiBold/FUP%20Savyon%20-%20SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Body"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/FUP%20Savyon%20-%20For%20Web/FUP%20Savyon%20-%20Bold/FUP%20Savyon%20-%20Bold.woff2") format("woff2"); }

@font-face { font-family: "Accent"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../assets/fonts/FUP%20Zamir%20-%20For%20Web/FUP%20Zamir%20-%20Medium/FUP%20Zamir%20-%20Medium.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   2. משתני עיצוב
   -------------------------------------------------------------------------- */
:root {
  /* צבעים */
  --pink: #EB6896;
  --pink-btn: #C93F74;
  --pink-btn-hover: #B13363;
  --green: #487948;
  --sage: #84A984;
  --mustard: #E0B16C;
  --cream: #F8F4EC;
  --pink-soft: #FBE6EE;
  --sage-soft: #E5EFE3;
  --mustard-soft: #F2E3C7;
  --white: #FFFFFF;
  --text: #2F3B30;
  --text-2: #5A6B5B;

  /* פונטים */
  --font-body: "Body", "Rubik", sans-serif;
  --font-heading: var(--font-body);
  --font-accent: "Accent", cursive;

  /* גדלים (מובייל) */
  --fs-h1: 36px;
  --fs-h2: 30px;
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 16px;
  --fs-sub: 22px;
  --accent-min: 26px;

  /* מרווחים: כפולות של 8px */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s7: 56px;
  --s8: 64px;
  --s9: 72px;
  --section: 48px;
  --gutter: 28px;
  --content: 1320px;
  --measure: 680px;

  /* צורות */
  --radius: 28px;
  --wave-h: 48px;
  --slant-h: 40px;
  --header-h: 72px;
  --logo-h: 56px;
  --logo-h-small: 44px;

  /* תנועה */
  --ease: cubic-bezier(.45, .05, .55, .95);
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 44px;
    --gutter: 48px;
    --section: 64px;
    --wave-h: 64px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-h1: 56px;
    --gutter: 32px;
    --fs-h2: 40px;
    --fs-h3: 22px;
    --fs-body: 18px;
    --fs-sub: 26px;
    --accent-min: 28px;
    --section: 72px;
    --wave-h: 88px;
    --slant-h: 80px;
    --header-h: 88px;
    --logo-h: 72px;
    --logo-h-small: 52px;
  }
}

@media (min-width: 1280px) {
  :root { --section: 80px; }
}

/* --------------------------------------------------------------------------
   3. בסיס
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--s2));
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-inline-size: 100%; block-size: auto; }
a { color: var(--green); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--s1);
  inset-inline-start: var(--s1);
  z-index: 100;
  padding: var(--s1) var(--s3);
  background: var(--text);
  color: var(--white);
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  inline-size: 100%;
  max-inline-size: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* אייקוני קו: 1.5px בכל גודל */
.icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
symbol path { vector-effect: non-scaling-stroke; }

/* הדגשה בכתב יד: 2 עד 4 מילים, פי 1.25 מהטקסט שסביבה. מינימום 26px במובייל, 28px במחשב */
.accent {
  font-family: var(--font-accent);
  font-size: max(1.25em, var(--accent-min));
  font-weight: 500;
  line-height: 1;
}
.accent--pink { color: var(--pink-btn); }
.accent--green { color: var(--green); }
.turning__title .accent,
.cta__title .accent,
.hero__sub .accent { font-size: 1.5em; }
.hero__sub .accent { vertical-align: -.06em; }

/* כפתור קפסולה: טקסט מימין, עיגול עם חץ משמאל.
   ב-hover רק החץ מסתובב, העיגול מתכהה והכפתור מתרומם ב-2px */
.btn {
  --btn-bg: var(--pink-btn);
  --btn-bg-hover: var(--pink-btn-hover);
  --btn-accent: var(--pink-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  block-size: 50px;
  padding-inline: 20px 5px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: translate .3s ease-in-out, background-color .3s ease-in-out;
}
.btn__chip {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--btn-accent);
}
.btn__chip .icon {
  inline-size: 18px;
  block-size: 18px;
  stroke-width: 2;
  transition: rotate .3s ease-in-out;
}
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 999px; background: var(--btn-bg-hover); }
/* רק במכשירים עם עכבר, כדי שהכפתור לא יישאר "מורם" אחרי נגיעה */
@media (hover: hover) {
  .btn:hover { translate: 0 -2px; background: var(--btn-bg-hover); }
  .btn:hover .btn__chip .icon { rotate: 40deg; }
}
.btn:focus-visible .btn__chip .icon { rotate: 40deg; }
.btn--green { --btn-bg: var(--green); --btn-bg-hover: #376037; --btn-accent: var(--green); }

/* גל: הצבע של האזור הבא, על הרקע של האזור הקודם */
.wave {
  display: block;
  block-size: var(--wave-h);
  margin-block-end: -1px;
  background: var(--wave-from);
  color: var(--wave-to);
}
.wave svg { inline-size: 100%; block-size: 100%; fill: currentColor; }
/* רקע שקוף כי הגוף כבר בשמנת: כך הצורה הבוטנית של אזור 1 נעלמת מאחורי קו הגל */
.wave--cream-white { --wave-from: transparent; --wave-to: var(--white); position: relative; z-index: 1; }

/* צורה בוטנית חיוורת שיוצאת מהשוליים */
.botanical { position: absolute; z-index: 0; display: none; pointer-events: none; }
.botanical path, symbol#botanical path { vector-effect: none; }

/* כניסה בגלילה */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   4. פס עליון
   -------------------------------------------------------------------------- */
main { padding-block-start: var(--header-h); }

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: var(--cream);
  border-block-end: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-h);
  max-inline-size: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: block-size .3s ease;
}
.site-header__logo { display: block; border-radius: 4px; }
.site-header__logo img {
  inline-size: auto;
  block-size: var(--logo-h);
  transition: block-size .3s ease;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.site-header__cta { display: none; }

/* תפריט */
.nav-toggle {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  inline-size: 24px;
  block-size: 1.5px;
  background: var(--text);
  transition: translate .3s var(--ease), rotate .3s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7.500px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7.500px; rotate: -45deg; }

.site-nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  padding-block: var(--s1) var(--s3);
  padding-inline: var(--gutter);
  background: var(--cream);
  border-block-end: 1px solid color-mix(in srgb, var(--sage) 30%, transparent);
}
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.site-nav a {
  position: relative;
  display: block;
  padding-block: 12px;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--green); }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .site-nav,
  .js .site-nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
  }
  .site-nav ul { display: flex; gap: var(--s4); }
  .site-nav a { padding-block: var(--s1); font-size: 16px; }
  /* קו דק שנמתח מתחת לקישור */
  .site-nav a::after {
    content: "";
    position: absolute;
    inset-block-end: 2px;
    inset-inline: 0;
    block-size: 1.5px;
    background: var(--pink);
    scale: 0 1;
    transform-origin: right;
    transition: scale .35s var(--ease);
  }
  .site-nav a:hover::after,
  .site-nav a[aria-current="true"]::after { scale: 1 1; }
}

.site-header.is-scrolled { border-block-end-color: color-mix(in srgb, var(--sage) 30%, transparent); }
.site-header.is-scrolled .site-header__inner { block-size: calc(var(--logo-h-small) + var(--s2)); }
.site-header.is-scrolled .site-header__logo img { block-size: var(--logo-h-small); }

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5. אזור 1 · פתיחה
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--s3);
  overflow-x: clip;
}
.hero__grid { position: relative; z-index: 1; }
.hero__botanical {
  inset-block-end: -104px;
  inset-inline-start: -150px;
  inline-size: 320px;
  block-size: 396px;
  fill: var(--sage-soft);
  rotate: -14deg;
}
.hero__grid {
  display: grid;
  gap: var(--s6);
}
.eyebrow {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--green);
  margin-block-end: var(--s2);
}
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.hero__sub {
  margin-block-start: var(--s2);
  font-size: var(--fs-sub);
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}
.hero__cta { margin-block-start: var(--s3); }

.hero__figure {
  position: relative;
  isolation: isolate;
  inline-size: calc(100% - var(--s6));
  max-inline-size: 420px;
  margin-inline: auto;
  margin-block: var(--s2);
}
.hero__img {
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.hero__blob {
  position: absolute;
  z-index: -1;
  inset-block-start: -6%;
  inset-inline-end: -9%;
  inline-size: 74%;
  block-size: 66%;
  overflow: visible;
  fill: var(--pink-soft);
}
.hero__blob-line {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.25;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero__icon { position: absolute; inline-size: 40px; block-size: 40px; object-fit: contain; }
.hero__icon--strawberry { inset-block-start: -18px; inset-inline-start: -22px; color: var(--pink); rotate: -10deg; }
.hero__icon--leaf { inset-block-end: -20px; inset-inline-end: -14px; inline-size: 44px; block-size: 44px; color: var(--sage); }
.hero__icon--avocado { display: none; color: var(--sage); rotate: 12deg; }

@media (min-width: 768px) {
  .hero { padding-block: var(--s5) var(--s4); }
  .hero__figure { inline-size: 100%; }
  .botanical { display: block; }
  .hero__icon { inline-size: 56px; block-size: 56px; }
  .hero__icon--strawberry { inset-block-start: -20px; inset-inline-start: -44px; }
  .hero__icon--leaf { inset-block-end: -36px; inset-inline-end: -40px; inline-size: 72px; block-size: 72px; }
  .hero__icon--avocado { display: block; inset-block-end: 14%; inset-inline-start: -56px; inline-size: 40px; block-size: 40px; }
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--s6) var(--s3); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) clamp(440px, 38vw, 520px);
    gap: var(--s8);
    align-items: center;
  }
  .eyebrow { margin-block-end: var(--s3); }
  .hero__sub { margin-block-start: var(--s3); }
  .hero__cta { margin-block-start: var(--s5); }
  .hero__figure { max-inline-size: none; margin-block: 0; }
  .hero__icon--leaf { inset-inline-end: -20px; }
}

/* --------------------------------------------------------------------------
   6. אזור 2 · פתיחת הנושא ואינפוגרפיקת המסלול
   -------------------------------------------------------------------------- */
.intro {
  position: relative;
  overflow: clip;
  background: var(--white);
  padding-block: var(--s3) var(--section);
}
.intro > .container { position: relative; z-index: 1; }
.intro__botanical {
  inset-block-start: 96px;
  inset-inline-end: -170px;
  inline-size: 340px;
  block-size: 421px;
  fill: var(--mustard-soft);
  opacity: .6;
  rotate: 24deg;
}
.intro__grid { display: grid; gap: var(--s6); }
.intro__text { max-inline-size: var(--measure); }
.intro__text p + p {
  position: relative;
  margin-block-start: var(--s7);
}
.intro__text p + p::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s7) / -2);
  inset-inline-start: 0;
  inline-size: 48px;
  block-size: 1px;
  background: var(--pink);
}

/* המסלול */
@property --rot {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes orbit-spin { to { --rot: 360deg; } }

.orbit-wrap { position: relative; justify-self: center; inline-size: 100%; }

.orbit {
  /* מובייל: העיגול מחושב מרוחב המסך, כך שנשאר מקום לתוויות משני הצדדים */
  --d: calc(100vw - 204px);
  --r: calc(var(--d) / 2);
  --gap: 11px;
  position: relative;
  inline-size: var(--d);
  block-size: var(--d);
  margin-inline: auto;
  margin-block: var(--s7);
  border-radius: 50%;
  animation: orbit-spin 90s linear infinite;
}
.orbit:hover,
.orbit:focus-within,
.orbit:focus,
.orbit.is-offscreen { animation-play-state: paused; }

.orbit:focus-visible { outline-offset: 12px; border-radius: 50%; }

.orbit__ring {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  rotate: var(--rot);
}
.orbit__ring circle {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.25;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.orbit__center {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 52%;
  block-size: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pink-soft);
  border-radius: 50%;
}
.orbit__center img {
  inline-size: 42%;
  block-size: auto;
}

.orbit__list { position: absolute; inset: 0; }

/* כל פריט תופס את כל הבמה וממרכז את הילדים שלו. התנועה ב-translate בלבד, לכן
   הטקסט נשאר ישר בכל זווית, והתווית נצמדת לנקודה מבחוץ לפי הכיוון שלה. */
.orbit__item {
  --th: calc(var(--a) + var(--rot));
  --cos: cos(var(--th));
  --sin: sin(var(--th));
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.orbit__item:nth-child(1) { --a: -90deg; }
.orbit__item:nth-child(2) { --a: -45deg; }
.orbit__item:nth-child(3) { --a: 0deg; }
.orbit__item:nth-child(4) { --a: 45deg; }
.orbit__item:nth-child(5) { --a: 90deg; }
.orbit__item:nth-child(6) { --a: 135deg; }
.orbit__item:nth-child(7) { --a: 180deg; }
.orbit__item:nth-child(8) { --a: 225deg; }

.orbit__dot,
.orbit__label { grid-area: 1 / 1; }

.orbit__dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--sage);
  translate: calc(var(--cos) * var(--r)) calc(var(--sin) * var(--r));
  transition: scale .6s var(--ease), background-color .6s var(--ease), opacity .6s var(--ease);
}

/* התווית נשארת ישרה. ה-clamp מבטיח שבכל זווית היא יוצאת במלואה לפחות בציר אחד,
   ולכן גם כשהיא מוגדלת (1.15) היא לא נוגעת בנקודה. */
.orbit__label {
  --ox: clamp(-1, var(--cos) * 1.5, 1);
  --oy: clamp(-1, var(--sin) * 1.5, 1);
  max-inline-size: 72px;
  text-wrap: balance;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  color: var(--text);
  translate:
    calc(var(--cos) * (var(--r) + var(--gap)) + var(--ox) * 58%)
    calc(var(--sin) * (var(--r) + var(--gap)) + var(--oy) * 58%);
  transition: scale .6s var(--ease), color .6s var(--ease);
}

/* מצב מחזור: פריט אחד מודגש, השאר עמומים מעט */
.orbit.is-cycling .orbit__label { color: var(--text-2); }
.orbit.is-cycling .orbit__item.is-active .orbit__label { color: var(--text); scale: 1.15; }
.orbit.is-cycling .orbit__dot { opacity: .55; }
.orbit.is-cycling .orbit__item.is-active .orbit__dot {
  opacity: 1;
  scale: 1.75;
  background: var(--pink);
}

/* טאבלט ומחשב: עיגול ותוויות גדולים יותר */
@media (min-width: 768px) {
  .orbit {
    --d: 400px;
    --gap: 14px;
    margin-block: var(--s6);
  }
  .orbit__label {
    max-inline-size: 120px;
    font-size: var(--fs-small);
    line-height: 1.25;
  }
}

@media (min-width: 1024px) {
  .intro__grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--s6);
    align-items: center;
  }
  .orbit { --d: 300px; }
  .orbit__label { max-inline-size: 104px; }
}

@media (min-width: 1280px) {
  .intro__grid {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: var(--s8);
  }
  .orbit { --d: 400px; }
  .orbit__label { max-inline-size: 124px; }
}

/* נקודת המפנה */
.turning {
  margin-block-start: var(--s9);
  text-align: center;
}
.turning__mark {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 72px;
  margin-inline: auto;
  margin-block-end: var(--s3);
  border: 1px solid var(--mustard);
  border-radius: 50%;
  color: var(--pink);
}
.turning__mark img { inline-size: 38px; }
.turning__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}
.turning__word { white-space: nowrap; }
.accent--drawn {
  position: relative;
  display: inline-block;
  padding-block-end: 2px;
}
.accent--drawn svg {
  position: absolute;
  inset-block-end: -5px;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 8px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.5;
  stroke-linecap: round;
  overflow: visible;
}
.accent--drawn svg path { vector-effect: non-scaling-stroke; }

/* הכרטיס הרחב */
.note-card__icon {
  position: absolute;
  inset-block-start: -28px;
  inset-inline-end: var(--s4);
  inline-size: 56px;
  block-size: 56px;
  object-fit: contain;
  rotate: 18deg;
}
.note-card {
  position: relative;
  display: grid;
  gap: var(--s3);
  margin-block-start: var(--s5);
  padding: var(--s4) var(--s3);
  background: var(--mustard-soft);
  border-radius: var(--radius);
}
.note-card p { max-inline-size: var(--measure); }
.note-card p + p {
  padding-block-start: var(--s3);
  border-block-start: 1px solid color-mix(in srgb, var(--mustard) 70%, transparent);
}
.note-card strong { font-weight: 700; }

@media (min-width: 768px) {
  .turning { margin-block-start: var(--s6); }
  .note-card { padding: var(--s6); }
}

@media (min-width: 1024px) {
  .turning { margin-block-start: var(--s9); }
  .note-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0;
    margin-block-start: var(--s7);
    padding: var(--s7) var(--s8);
    align-items: center;
  }
  .note-card p { font-size: var(--fs-body); }
  .note-card__icon + p { padding-inline-end: var(--s6); font-size: var(--fs-h3); line-height: 1.55; }
  .note-card p + p {
    padding-block-start: 0;
    padding-inline-start: var(--s6);
    border-block-start: 0;
    border-inline-start: 1px solid color-mix(in srgb, var(--mustard) 70%, transparent);
  }
}

/* --------------------------------------------------------------------------
   7. רכיבים משותפים לאזורים 3 עד 8
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.section-title--start { text-align: start; }
.section-title--underlined::after {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: 1.5px;
  margin-inline: auto;
  margin-block-start: var(--s2);
  background: var(--pink);
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--green);
}
.tag {
  display: inline-block;
  padding-block: 4px;
  padding-inline: var(--s2);
  border-radius: 999px;
  background: var(--white);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.tag--mustard { background: var(--mustard-soft); }

.wave--cream-pink { --wave-from: var(--cream); --wave-to: var(--pink-soft); }

/* --------------------------------------------------------------------------
   8. אזור 3 · על מה נעבוד
   -------------------------------------------------------------------------- */
.focus {
  --cut: var(--sage-soft);
  background: var(--sage-soft);
  padding-block: var(--section);
}
/* איורים מלאים: צורה בצבע, ופרטים "חתוכים" בצבע הרקע */
.ill { overflow: visible; }
.f-pink { fill: var(--pink); }
.f-green { fill: var(--sage); }
.f-cut { fill: var(--cut, var(--white)); }
.l-cut, .l-green { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.l-cut { stroke: var(--cut, var(--white)); }
.l-green { stroke: var(--green); }
.l-dash { stroke-dasharray: 3 6; }
.l-dots { stroke-width: 5; }
.f-pink.l-cut-wide { stroke: var(--cut, var(--white)); stroke-width: 3; }
.focus__cols { margin-block-start: var(--s6); }
.focus__col {
  padding-block: var(--s5);
  text-align: center;
}
.focus__col p {
  max-inline-size: 400px;
  margin-inline: auto;
  margin-block-start: var(--s1);
}
.focus__col + .focus__col {
  border-block-start: 1px solid color-mix(in srgb, var(--sage) 50%, transparent);
}
.focus__col:first-child { padding-block-start: 0; }
.focus__col:last-child { padding-block-end: 0; }
.focus__icon {
  inline-size: 104px;
  block-size: 104px;
  margin-inline: auto;
  margin-block-end: var(--s3);
}

@media (min-width: 768px) {
  .focus__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .focus__col,
  .focus__col:first-child,
  .focus__col:last-child { padding-block: 0; padding-inline: var(--s2); }
  .focus__col + .focus__col {
    border-block-start: 0;
    border-inline-start: 1px solid color-mix(in srgb, var(--sage) 50%, transparent);
  }
}
@media (min-width: 1024px) {
  .focus__cols { margin-block-start: var(--s8); }
  .focus__col,
  .focus__col:first-child,
  .focus__col:last-child { padding-inline: var(--s6); }
}

/* --------------------------------------------------------------------------
   9. אזור 4 · טופס על תמונה
   -------------------------------------------------------------------------- */
.lead {
  position: relative;
  overflow: hidden;
  background: var(--mustard-soft);
  padding-block: calc(300px + var(--s5)) var(--s8);
}
/* תמונה בפרלקס: גבוהה מהמסגרת שלה, וה-JS מזיז אותה לאט יותר מהגלילה */
.parallax { position: absolute; overflow: hidden; }
.parallax__img {
  position: absolute;
  inset-block-start: -25%;
  inset-inline-start: 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 150%;
  object-fit: cover;
  will-change: transform;
}
/* עד 1024: הילדים ברצועה עליונה בקו ישר, והטופס מתחתיה.
   כשיגיע קובץ lead-bg-mobile, הטופס יעבור לשבת על התמונה גם כאן */
.lead__frame {
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 300px;
}
.lead__frame .parallax__img {
  inset-block-start: -10%;
  block-size: 120%;
  object-position: left center;
}
.lead__wave {
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  inline-size: 100%;
  block-size: var(--wave-h);
  fill: var(--sage-soft);
  scale: 1 -1;
}
.section-slant {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  inline-size: 100%;
  block-size: var(--slant-h);
  fill: var(--cream);
}
.lead__inner { position: relative; }
.lead__form-wrap { max-inline-size: 440px; }
.lead__sub {
  margin-block-start: var(--s1);
  text-wrap: balance;
  font-size: var(--fs-h3);
  line-height: 1.5;
}
.lead-form {
  display: grid;
  gap: var(--s2);
  margin-block-start: var(--s3);
}
.field input {
  inline-size: 100%;
  block-size: 50px;
  padding-inline: var(--s2);
  background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--sage) 55%, transparent);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  text-align: start;
}
.field input::placeholder { color: var(--text-2); opacity: 1; }
.field input[dir="ltr"] { text-align: end; }
.field input[dir="ltr"]::placeholder { direction: rtl; }
.field input[aria-invalid="true"] { border-color: var(--pink-btn); }
.field__error {
  margin-block-start: 4px;
  color: #6E1539;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}
.field--hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 2px 12px;
}
.consent input {
  inline-size: 24px;
  block-size: 24px;
  margin: 1px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}
.consent label {
  font-size: var(--fs-small);
  line-height: 1.6;
  cursor: pointer;
}
.consent .field__error { grid-column: 2; margin: 0; }
.lead-form__submit { justify-self: start; }
.lead-form__submit[disabled] { opacity: .7; cursor: progress; }
.lead__status {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.5;
}
.lead__status:not(:empty) { margin-block-start: var(--s3); }
.lead__status a, .consent a { color: var(--text); }
.lead__status a { font-weight: 700; }

@media (min-width: 768px) {
  /* שם, טלפון ושליחה בשורה אחת, והאישור מתחתיהם */
  .lead-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: start;
  }
  .lead-form__submit { grid-row: 1; grid-column: 3; }
  .consent { grid-row: 2; grid-column: 1 / -1; }
  .lead { padding-block-start: calc(420px + var(--s6)); }
  .lead__frame { block-size: 420px; }
  .lead__form-wrap { max-inline-size: 560px; }
}
/* שתי הרצועות עם התמונה (אזורים 4 ו-8): אותו קו ימין ואותה היררכיה */
@media (min-width: 1024px) {
  .lead, .cta {
    --strip-edge: clamp(24px, calc(35vw - 470px), 480px);
    --strip-title: 42px;
    --strip-sub: 21px;
  }
  .lead__inner, .cta__inner {
    max-inline-size: none;
    padding-inline: var(--strip-edge) var(--gutter);
  }
  .lead__form-wrap .section-title, .cta__title {
    font-size: var(--strip-title);
    line-height: 1.2;
  }
  .lead__sub, .cta__line { font-size: var(--strip-sub); }
  .cta .btn {
    block-size: 52px;
    padding-inline: 20px 5px;
    font-size: 16px;
  }
  .cta .btn__chip { inline-size: 42px; block-size: 42px; }
}
@media (min-width: 1280px) {
  .lead, .cta { --strip-title: 46px; --strip-sub: 22px; }
}

/* אזור 4 מ-1024: התמונה על כל הרצועה, בלי רקע ובלי פילטר.
   --lead-w הוא רוחב התמונה: היא רחבה מהמסך, צמודה לתחתית ולשמאל, וכך הילדים גדולים ורואים את השמיכה */
@media (min-width: 1024px) {
  .lead {
    --lead-w: 1520px;
    --lead-shift: 40px;
    display: flex;
    align-items: flex-end;
    min-block-size: 560px;
    /* הטופס נגמר מעל הדשא הכהה שבתחתית התמונה, גם כשהתמונה זזה בפרלקס */
    padding-block: calc(var(--wave-h) + var(--s2)) calc(var(--lead-w) * .071 + var(--s1));
    background: none;
  }
  .lead__frame { inset-block: 0; block-size: auto; }
  .lead__frame .parallax__img {
    inset-block: auto calc(-1 * var(--s5));
    inset-inline: auto calc(-1 * var(--lead-shift));
    inline-size: var(--lead-w);
    block-size: auto;
    min-block-size: calc(100% + var(--s10, 80px));
    object-position: left bottom;
  }
  .lead__inner { inline-size: 100%; }
  .lead__form-wrap { max-inline-size: 460px; }
  .field input { block-size: 52px; font-size: 17px; }
}
@media (min-width: 1280px) {
  .lead {
    --lead-w: max(2000px, 120vw);
    --lead-shift: clamp(0px, calc((1500px - 100vw) * .32), 70px);
    min-block-size: max(720px, 40vw);
    padding-block-end: calc(var(--lead-w) * .071 + var(--s6) + var(--s1));
  }
  .lead__form-wrap { max-inline-size: 560px; }
}
@media (min-width: 1600px) {
  .lead__form-wrap { max-inline-size: 600px; }
}

/* --------------------------------------------------------------------------
   10. אזור 5 · תהליך הליווי: מסלול
   -------------------------------------------------------------------------- */
.process {
  background: var(--cream);
  padding-block: var(--s6) var(--section);
}
.process__head {
  max-inline-size: var(--measure);
  margin-inline: auto;
  text-align: center;
}
.process__head p { margin-block-start: var(--s2); color: var(--text-2); }

.journey { position: relative; margin-block-start: var(--s6); }
.journey__track { display: none; }
.steps { margin: 0; padding: 0; list-style: none; }

/* מובייל וטאבלט: מסלול אנכי שעובר במרכז התחנות */
.step {
  --badge: 96px;
  position: relative;
  display: grid;
  grid-template-columns: var(--badge) minmax(0, 1fr);
  gap: var(--s3);
  padding-block-end: var(--s7);
}
.step::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--badge) + 14px) 14px;
  inset-inline-start: calc(var(--badge) / 2);
  border-inline-start: 1.5px dashed var(--sage);
}
.step--end { padding-block-end: 0; }
.step--end::after { display: none; }
.step__badge {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  inline-size: var(--badge);
  block-size: var(--badge);
  border-radius: 50%;
}
.step__badge--a { background: var(--mustard-soft); }
.step__badge--b { background: var(--sage-soft); }
.step__badge--c { background: var(--pink-soft); }
.step__badge img { inline-size: auto; block-size: calc(var(--badge) * .66); }
.step__ring {
  position: absolute;
  inset: -8px;
  inline-size: calc(100% + 16px);
  block-size: calc(100% + 16px);
  overflow: visible;
  animation: ring-turn 36s linear infinite;
}
@keyframes ring-turn { to { rotate: 360deg; } }
.step__ring circle {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
  vector-effect: non-scaling-stroke;
}
.step__num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--pink-btn);
}
.step__time {
  margin-block-start: 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.step__body .h3 { margin-block-end: var(--s1); }
.step__body p { text-wrap: pretty; }

.details li + li { margin-block-start: 2px; }

/* המסלול המקווקו, משותף לטאבלט ולמחשב */
@media (min-width: 768px) {
  .journey__path {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }
  .journey__line {
    fill: none;
    stroke: var(--sage);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-dasharray: 3 8;
    vector-effect: non-scaling-stroke;
  }
  .journey__draw {
    fill: none;
    stroke: #fff;
    stroke-width: 44;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
  .js .journey:not(.is-visible) .journey__draw { stroke-dashoffset: 1; }
  .js .journey__draw { transition: stroke-dashoffset 2.4s ease-in-out .2s; }
}

/* מחשב: שלוש תחנות באותו גובה על גריד אחיד, והמסלול עובר בדיוק במרכזיהן */
@media (min-width: 1024px) {
  .journey {
    --gap: var(--s6);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-block-start: var(--s8);
  }
  .steps {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }
  .step,
  .step--end {
    --badge: 160px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: var(--s5);
    padding-block-end: 0;
    text-align: center;
  }
  .step::after { display: none; }
  .step__num { font-size: 72px; }
  .step__time { font-size: var(--fs-small); }
  .step__ring { inset: -12px; inline-size: calc(100% + 24px); block-size: calc(100% + 24px); }
  .step__body p { max-inline-size: 340px; margin-inline: auto; text-wrap: balance; }

  /* המסילה מתחילה במרכז העמודה הראשונה ומסתיימת במרכז השלישית */
  .journey__track {
    position: absolute;
    display: block;
    inset-block-start: 0;
    inset-inline: calc((100% - 2 * var(--gap)) / 6);
    block-size: 160px;
  }
  .journey__path--tablet { display: none; }
  /* אבני דרך בדיוק על הקו, באמצע הדרך בין התחנות */
  .journey__mile {
    position: absolute;
    inline-size: 52px;
    block-size: 52px;
    object-fit: contain;
    translate: -50% -50%;
  }
  .journey__mile--a { left: 75%; top: 87.5%; }
  .journey__mile--b { left: 25%; top: 12.5%; }
  .steps, .step--end { position: relative; }
}

/* --------------------------------------------------------------------------
   11. אזור 6 · קצת עליי
   -------------------------------------------------------------------------- */
.about {
  position: relative;
  overflow-x: clip;
  background: var(--pink-soft);
  padding-block: var(--s3) var(--section);
}
.about__grid { position: relative; z-index: 1; display: grid; gap: var(--s8); }
.about__botanical {
  inset-block-end: 64px;
  inset-inline-end: -150px;
  inline-size: 320px;
  block-size: 396px;
  fill: var(--white);
  opacity: .4;
  rotate: 20deg;
}
.about__figure {
  position: relative;
  inline-size: min(100% - 48px, 340px);
  margin-inline: auto;
  margin-block-start: var(--s2);
}
.about__arch {
  position: relative;
  overflow: hidden;
  background: var(--mustard-soft);
  border-radius: 999px 999px var(--radius) var(--radius);
}
.about__arch img { inline-size: 100%; }
/* מסגרת קשת נוספת, מוזזת הצידה */
.about__frame {
  position: absolute;
  inset-block: -16px 16px;
  inset-inline: 18px -18px;
  border: 1.5px solid var(--green);
  border-radius: 999px 999px var(--radius) var(--radius);
}
.about__badge {
  position: absolute;
  inset-block-end: 16%;
  inset-inline-end: -32px;
  inline-size: 112px;
  block-size: 112px;
  overflow: visible;
  color: var(--pink);
}
.about__badge-bg { fill: var(--cream); }
.about__badge text {
  fill: var(--green);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}
.about__badge-text {
  transform-origin: 100px 100px;
  animation: ring-turn 28s linear infinite;
}
.about__doodle { position: absolute; object-fit: contain; }
.about__doodle--strawberry { inset-block-start: 2%; inset-inline-end: -8px; inline-size: 52px; block-size: 52px; color: var(--pink); rotate: -10deg; }
.about__doodle--carrot { inset-block-start: 22%; inset-inline-start: -22px; inline-size: 56px; block-size: 56px; color: var(--green); rotate: 6deg; }
.about__doodle--leaf { inset-block-end: -28px; inset-inline-start: -8px; inline-size: 64px; block-size: 64px; color: var(--green); }

/* עמודת טקסט אחת מהודקת: רוחב קבוע, ומרווח אחיד בין כל הפסקאות */
.about__text { max-inline-size: 600px; }
.about__text .section-title { margin-block-end: var(--s3); }
.about__text > p { text-wrap: pretty; }
.about__text > p + p { margin-block-start: var(--s2); }
.about__text .about__lead {
  margin-block: var(--s3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
}
.about__lead span { color: var(--green); }
/* המספרים בעמודה אחת והמילים בעמודה שנייה, כדי ש"שנות" יושב בדיוק מתחת ל"שנות".
   כל שורה נשארת שורה אחת, וגודל הטקסט מתכווץ עם רוחב הטלפון */
.about__stats {
  --num-size: 26px;
  --stat-text: clamp(12px, calc((100vw - 56px - 41px - 28px) / 19.6), 15px);
  display: grid;
  gap: var(--s1);
  margin-block-start: var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
}
.about__stats li {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  font-size: var(--num-size);
  line-height: 1.2;
}
.about__stats li > span:last-child {
  font-size: var(--stat-text);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 359.98px) {
  .about__stats li > span:last-child { white-space: normal; }
}
.about__num {
  color: var(--pink-btn);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
.about__text .about__sign {
  display: block;
  margin-block-start: var(--s1);
  font-size: 30px;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .about__stats { --num-size: 40px; --stat-text: 19px; column-gap: 12px; }
}
/* במחשב שני הנתונים באותה שורה, עם קו דק ביניהם */
@media (min-width: 1024px) {
  .about__stats {
    --stat-text: 18px;
    display: flex;
    align-items: center;
    gap: var(--s3);
  }
  .about__stats li { display: flex; align-items: center; gap: 10px; }
  .about__stats li + li {
    padding-inline-start: var(--s3);
    border-inline-start: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
  }
}
@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    gap: var(--s9);
    align-items: center;
    justify-content: center;
  }
  .about__figure { inline-size: min(100% - 88px, 440px); }
  .about__badge { inline-size: 148px; block-size: 148px; inset-inline-end: -56px; }
  .about__doodle--strawberry { inline-size: 64px; block-size: 64px; inset-inline-end: -28px; }
  .about__doodle--carrot { inline-size: 72px; block-size: 72px; inset-inline-start: -64px; }
  .about__doodle--leaf { inline-size: 80px; block-size: 80px; inset-inline-start: -28px; }
}

/* --------------------------------------------------------------------------
   12. אזור 7, אזור 8, פוטר וכפתור צף
   -------------------------------------------------------------------------- */
.faq {
  background: var(--cream);
  padding-block: var(--section);
}
.faq__grid { display: grid; gap: var(--s5); }
.faq__icon {
  display: none;
  inline-size: 64px;
  block-size: 64px;
  margin-block-start: var(--s3);
  object-fit: contain;
}
.faq__item { border-block-end: 1px solid color-mix(in srgb, var(--sage) 45%, transparent); }
.faq__item:first-child { border-block-start: 1px solid color-mix(in srgb, var(--sage) 45%, transparent); }
.faq__q { font-size: inherit; font-weight: inherit; }
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  inline-size: 100%;
  min-block-size: 64px;
  padding-block: var(--s2);
  padding-inline: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
.faq__btn:hover { color: var(--green); }
/* סימן הפלוס: הקו האנכי מתקפל כשהשאלה פתוחה */
.faq__sign {
  position: relative;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--pink-btn);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 2px;
}
.faq__sign::before { inline-size: 18px; block-size: 1.5px; }
.faq__sign::after {
  inline-size: 1.5px;
  block-size: 18px;
  transition: scale .3s var(--ease);
}
.faq__btn[aria-expanded="true"] .faq__sign::after { scale: 1 0; }

.js .faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .35s var(--ease), visibility .35s;
}
.js .faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}
.faq__inner { min-block-size: 0; overflow: hidden; }
.faq__inner > * { max-inline-size: var(--measure); }
.faq__inner > :first-child { margin-block-start: 0; }
.faq__inner p + p,
.faq__inner p + ul { margin-block-start: var(--s2); }
.faq__inner > :last-child { margin-block-end: var(--s3); }
.faq__list { display: grid; gap: var(--s1); }
.faq__list li {
  position: relative;
  padding-inline-start: var(--s3);
}
.faq__list li::before {
  content: "";
  position: absolute;
  inset-block-start: .7em;
  inset-inline-start: 2px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--sage);
}
.faq__list strong { font-weight: 700; }
.faq__cta { margin-block-start: var(--s3); }

@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--s9);
    align-items: start;
  }
  .faq__head { position: sticky; inset-block-start: calc(var(--logo-h-small) + var(--s5)); }
  .faq__icon { display: block; }
}

/* אזור 8: טקסט כהה בצד הבהיר של התמונה. הפירות נשארים בצבעים הטבעיים שלהם */
.cta {
  --cta-wood: #F6E9D8;
  position: relative;
  overflow: hidden;
  background: var(--cta-wood);
  color: var(--text);
  padding-block: calc(var(--wave-h) + var(--s5)) calc(260px + var(--slant-h));
}
.cta__frame {
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 340px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.cta__frame .parallax__img { object-position: left center; }
.cta__tint { display: none; }
.cta__wave-top {
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  inline-size: 100%;
  block-size: var(--wave-h);
  fill: var(--cream);
  scale: 1 -1;
}
.section-slant--deep { block-size: calc(var(--slant-h) * 1.25); }
.cta__inner {
  position: relative;
  display: grid;
  justify-items: start;
}
.cta__title {
  max-inline-size: 620px;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.cta__line {
  margin-block-start: var(--s2);
  font-size: var(--fs-h3);
  line-height: 1.5;
}
.cta .btn { margin-block-start: var(--s4); }
.cta__phone { margin-block-start: var(--s2); font-size: var(--fs-small); }
.cta__phone a { color: var(--text); font-weight: 600; white-space: nowrap; }

@media (min-width: 768px) {
  .cta { padding-block: calc(var(--wave-h) + var(--s7)) calc(var(--s8) + var(--slant-h)); }
  .cta__frame {
    inset: 0;
    block-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* התמונה נמוכה יותר וזזה שמאלה, כדי שהפירות לא ייכנסו מתחת לטקסט */
  .cta__frame .parallax__img {
    inset-block-start: -10%;
    inline-size: calc(100% + 100px);
    block-size: 120%;
  }
  .cta__title { max-inline-size: 340px; }
  /* שטיפה בהירה בצד הטקסט בלבד */
  .cta__tint {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, color-mix(in srgb, var(--cream) 62%, transparent), transparent 62%);
  }
}
@media (min-width: 1024px) {
  .cta { padding-block: calc(var(--wave-h) + var(--s7)) calc(var(--s7) + var(--slant-h) * 1.25); }
  .cta__frame .parallax__img {
    inset-block-start: -25%;
    inline-size: calc(100% + clamp(0px, calc((1280px - 100vw) * .4), 100px));
    block-size: 150%;
  }
  .cta__title { max-inline-size: 640px; }
  .cta__phone { font-size: 18px; }
}

/* פוטר: קטן, דק ושקט. מ-1024 שלוש עמודות עם הלוגו באמצע, ומתחת לזה הכל בטור אחד */
.site-footer {
  --footer-line: color-mix(in srgb, var(--mustard) 70%, transparent);
  padding-block: var(--s4) 104px;
  background: var(--cream);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}
/* האותיות הלטיניות והספרות בפונט קטנות מהעברית, אז מגדילים אותן קצת כדי שהשורות ייראו שוות */
/* גודל שנראה שווה בעין: באותו גודל מספרי, העברית של הפונט נראית גדולה בהרבה מהלטינית ומהספרות */
.site-footer__col--contact { font-size: 15.5px; }
.site-footer__col--contact a { font-size: 18px; }
.site-footer__cols {
  display: grid;
  justify-items: center;
  text-align: center;
}
.site-footer__col--logo { order: -1; margin-block-end: var(--s3); }
.site-footer__col--logo img { margin-inline: auto; inline-size: 128px; }
.site-footer__col li { line-height: 26px; }
.site-footer__col li + li { margin-block-start: 4px; }
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer a:hover {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer a.btn,
.site-footer a.btn:hover { color: var(--white); text-decoration: none; }
.site-footer__cta { margin-block-start: var(--s3); }
.icon--solid { fill: currentColor; stroke: none; }
.site-footer__cta .btn__chip .icon { inline-size: 22px; block-size: 22px; }
@media (max-width: 767.98px) {
  .site-footer__cta {
    block-size: 44px;
    gap: var(--s1);
    padding-inline: var(--s2) 4px;
    font-size: 14px;
  }
  .site-footer__cta .btn__chip { inline-size: 36px; block-size: 36px; }
  .site-footer__cta .btn__chip .icon { inline-size: 20px; block-size: 20px; }
}
.site-footer__cta:hover .btn__chip .icon,
.site-footer__cta:focus-visible .btn__chip .icon { rotate: none; }
.site-footer__bottom {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  justify-items: center;
  gap: var(--s1) var(--s3);
  margin-block-start: var(--s5);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--footer-line);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.site-footer__copy,
.site-footer__credit { grid-column: 1 / -1; }
.site-footer__credit { margin-block-start: var(--s2); }
/* הקישורים בשורה התחתונה מסומנים בקו דק, כי הם יושבים ליד טקסט רגיל */
.site-footer__bottom a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text-2) 45%, transparent);
  text-underline-offset: 3px;
}
/* האנגלית קטנה מהעברית באותו גודל, אז היא מקבלת גודל שנראה שווה ל"עיצוב ובנייה" */
.site-footer__credit a {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .site-footer { padding-block-end: var(--s3); }
  .site-footer__cols {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .site-footer__col { padding-inline: var(--s4); }
  .site-footer__col--logo {
    order: 0;
    margin-block-end: 0;
    padding-inline: var(--s6);
    border-inline: 1px solid var(--footer-line);
  }
  .site-footer__col--logo img { inline-size: 148px; }
  .site-footer__cta { margin-block-start: var(--s2); }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1);
    margin-block-start: var(--s4);
    padding-block-start: var(--s2);
  }
  .site-footer__credit { margin-block-start: 0; }
  .site-footer__bottom li + li::before {
    content: "·";
    margin-inline-end: var(--s1);
    opacity: .6;
  }
}

/* כפתור וואטסאפ צף: גדול, עם מסגרת לבנה כדי שיבלוט על כל רקע, והילה רכה שנושמת לאט */
.fab {
  position: fixed;
  inset-block-end: var(--s2);
  inset-inline-end: var(--s2);
  z-index: 40;
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--pink-btn);
  box-shadow: 0 6px 18px rgb(201 63 116 / .38);
  color: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s, background-color .25s ease;
}
.fab::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 50%;
  background: var(--pink);
  animation: fab-halo 3.2s ease-out infinite;
}
@keyframes fab-halo {
  0% { transform: scale(1); opacity: .45; }
  70%, 100% { transform: scale(1.38); opacity: 0; }
}
.fab.is-visible { opacity: 1; visibility: visible; }
.fab:hover { background: var(--pink-btn-hover); }
.fab .icon { inline-size: 38px; block-size: 38px; }
@media (min-width: 1024px) {
  .fab {
    inset-block-end: var(--s3);
    inset-inline-end: var(--s3);
    inline-size: 76px;
    block-size: 76px;
  }
  .fab .icon { inline-size: 42px; block-size: 42px; }
}

/* על הרקע של אזור 3 הירוק הרגיל נותן 4.33:1, אז כותרות העמודות כהות בגוון אחד */
.focus__col .h3 { color: #3F6C3F; }

/* --------------------------------------------------------------------------
   עמודי הצהרת נגישות ומדיניות פרטיות
   -------------------------------------------------------------------------- */
.legal-head {
  position: relative;
  overflow-x: clip;
  padding-block: var(--s5) var(--s3);
  background: var(--sage-soft);
}
.legal-head__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.15;
}
.legal-head__title::after {
  content: "";
  display: block;
  inline-size: 64px;
  block-size: 2px;
  margin-block-start: var(--s2);
  background: var(--pink);
}
.wave--sage-cream { --wave-from: var(--sage-soft); --wave-to: var(--cream); }
.legal {
  max-inline-size: calc(var(--measure) + 120px + 2 * var(--gutter));
  padding-block: var(--s3) var(--section);
}
.legal h2 {
  margin-block: var(--s5) var(--s2);
  color: var(--green);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
}
.legal p + p,
.legal ul + p,
.legal p + ul { margin-block-start: var(--s2); }
.legal ul { display: grid; gap: var(--s1); }
.legal li {
  position: relative;
  padding-inline-start: var(--s3);
}
.legal li::before {
  content: "";
  position: absolute;
  inset-block-start: .7em;
  inset-inline-start: 4px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.legal a:not(.btn) {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal__updated {
  margin-block-start: var(--s5);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--footer-line, color-mix(in srgb, var(--mustard) 70%, transparent));
  color: var(--text-2);
  font-size: 16px;
}
.legal__back { margin-block-start: var(--s4); }
/* מקום שצריך למלא לפני העלייה לאוויר. בולט בכוונה, כדי שלא ייעלם בעין */
.todo {
  padding: 2px 8px;
  border-radius: 4px;
  background: #FFF0A6;
  color: var(--text);
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   תפריט נגישות
   -------------------------------------------------------------------------- */
.a11y-trigger {
  position: fixed;
  inset-block-end: var(--s2);
  inset-inline-start: var(--s2);
  z-index: 45;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  padding: 0;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  cursor: pointer;
  transition: background-color .25s ease;
}
.a11y-trigger:hover { background: #376037; }
.a11y-trigger:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.a11y-panel {
  position: fixed;
  inset-block-end: 84px;
  inset-inline-start: var(--s2);
  z-index: 46;
  inline-size: min(380px, calc(100vw - 2 * var(--s2)));
  max-block-size: calc(100dvh - 100px);
  overflow-y: auto;
  padding: var(--s3);
  border: 1px solid color-mix(in srgb, var(--sage) 50%, transparent);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 10px 32px rgb(47 59 48 / .18);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}
.a11y-panel:focus { outline: none; }
.a11y-panel:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.a11y-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-block-end: var(--s2);
}
.a11y-panel__title { font-size: 20px; font-weight: 700; }
.a11y-panel__close {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.a11y-panel__close:hover { background: var(--sage-soft); }
.a11y-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s1);
}
.a11y-option {
  display: grid;
  align-content: space-between;
  gap: 2px;
  min-block-size: 64px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--sage) 60%, transparent);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.a11y-option:hover { background: var(--sage-soft); }
.a11y-option.is-on {
  border-color: var(--green);
  background: var(--sage-soft);
  box-shadow: inset 0 0 0 1px var(--green);
}
.a11y-option__name { font-size: 15px; font-weight: 500; }
.a11y-option__value { color: var(--text-2); font-size: 14px; }
.a11y-option.is-on .a11y-option__value { color: var(--green); font-weight: 600; }
.a11y-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-block-start: var(--s2);
  font-size: 15px;
}
.a11y-panel__reset {
  min-block-size: 44px;
  padding-inline: var(--s2);
  border: 1px solid var(--text-2);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.a11y-panel__reset:hover { background: var(--sage-soft); }
.a11y-panel__foot a { color: var(--green); text-underline-offset: 3px; }
.a11y-panel button:focus-visible,
.a11y-panel a:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (min-width: 1024px) {
  .a11y-trigger { inset-block-end: var(--s3); inset-inline-start: var(--s3); inline-size: 56px; block-size: 56px; }
  .a11y-panel { inset-block-end: 96px; inset-inline-start: var(--s3); }
}

/* --- ההעדפות עצמן. כל העדפה היא class על <html> --- */

/* גודל טקסט: מגדיל את הדף עצמו, בלי התפריט העליון ובלי התפריט הזה */
html.a11y-text-115 :is(main, .site-footer) { zoom: 1.15; }
html.a11y-text-130 :is(main, .site-footer) { zoom: 1.3; }
/* בטלפון האזור גדל עם הטקסט, אז התמונה של אזור 8 נמתחת לכל גובהו ולא משאירה פס ריק למעלה */
@media (max-width: 767.98px) {
  html:is(.a11y-text-115, .a11y-text-130) .cta__frame .parallax__img {
    inset-block: 0;
    block-size: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}
/* טקסט גדול או גופן רחב יותר: מה שבדרך כלל נשאר בשורה אחת רשאי לרדת שורה, כדי שלא ייחתך */
html:is(.a11y-text-115, .a11y-text-130, .a11y-font) .about__stats li > span:last-child { white-space: normal; }
html:is(.a11y-text-115, .a11y-text-130, .a11y-font) :is(main, .site-footer) .btn:not(.lead-form__submit) {
  block-size: auto;
  min-block-size: 50px;
  max-inline-size: 100%;
  padding-block: 4px;
  line-height: 1.25;
  white-space: normal;
}

/* ניגודיות גבוהה: טקסט לבן על שחור, קישורים בצהוב */
html.a11y-contrast-high body,
html.a11y-contrast-high body *:not(img, picture, svg, svg *) {
  background-color: #000 !important;
  background-image: none !important;
  border-color: #fff !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: none !important;
}
html.a11y-contrast-high a,
html.a11y-contrast-high a * { color: #FFEB3B !important; }
html.a11y-contrast-high .btn,
html.a11y-contrast-high .a11y-trigger,
html.a11y-contrast-high .fab,
html.a11y-contrast-high .field input { border: 2px solid #fff !important; }
html.a11y-contrast-high .btn__chip { background-color: #fff !important; }
html.a11y-contrast-high .btn__chip,
html.a11y-contrast-high .btn__chip * { color: #000 !important; }
html.a11y-contrast-high ::placeholder { color: #ddd !important; opacity: 1; }
html.a11y-contrast-high :is(.wave, .cta__wave-top, .section-slant, .botanical) { display: none !important; }
html.a11y-contrast-high :is(.lead, .fab)::before,
html.a11y-contrast-high .fab::after { display: none !important; }
/* פריטי המסלול יושבים זה על גבי זה, אז הם חייבים להישאר שקופים כדי לא להסתיר אחד את השני */
html.a11y-contrast-high .orbit,
html.a11y-contrast-high .orbit *:not(.orbit__dot) { background-color: transparent !important; }
html.a11y-contrast-high .orbit__dot { background-color: #FFEB3B !important; }
html.a11y-contrast-high .todo { color: #000 !important; background-color: #FFEB3B !important; }
html.a11y-contrast-high .a11y-option.is-on { outline: 2px solid #FFEB3B; outline-offset: -4px; }

/* שחור ולבן */
html.a11y-contrast-mono :is(.site-header, main, .site-footer, .fab) { filter: grayscale(1); }

/* גופן קריא: הגופן של מערכת ההפעלה במקום כתב היד והגופן העיצובי */
html.a11y-font body,
html.a11y-font body *:not(svg, svg *) { font-family: Arial, "Rubik", sans-serif !important; }

/* מרווח שורות */
html.a11y-lines :is(main, .site-footer) :is(p, li, label, h1, h2, h3, .faq__btn) { line-height: 2 !important; }

/* הדגשת קישורים */
html.a11y-links a {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

/* הדגשת כותרות */
html.a11y-headings :is(h1, h2, h3):not(.a11y-panel__title) {
  outline: 2px dashed var(--green);
  outline-offset: 6px;
}

/* סמן עכבר גדול */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 4l28 16-12 3-6 13z' fill='%23000' stroke='%23fff' stroke-width='2.500' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* עצירת אנימציות */
html.a11y-motion,
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-motion .fab::after { opacity: 0; }
html.a11y-motion .js .reveal,
html.js.a11y-motion .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. הפחתת תנועה
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   טלפון וטאבלט (עד 1023)
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* אזור 1: הטקסט והכפתור ממורכזים */
  .hero__text { text-align: center; }
  .hero__title, .hero__sub { margin-inline: auto; }

  /* אזור 4: הטופס למעלה והילדים למטה */
  .lead__form-wrap {
    max-inline-size: 620px;
    margin-inline: auto;
    text-align: center;
  }
  .lead__form-wrap .section-title--start { text-align: center; }
  .lead__sub { text-wrap: balance; }
  .field input { text-align: start; }
  .consent { justify-content: start; text-align: start; }
  /* אזור 8: הטקסט ממורכז */
  .cta__inner { justify-items: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   טלפון בלבד
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* אזור 5: התחנות אחת מתחת לשנייה וממורכזות, כדי שלטקסט יהיה רוחב */
  .step, .step--end {
    --badge: 128px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--s3);
    text-align: center;
  }
  .step { padding-block-end: 104px; }
  .step--end { padding-block-end: 0; }
  .step__num { font-size: 56px; }
  .step__ring { inset: -10px; inline-size: calc(100% + 20px); block-size: calc(100% + 20px); }
  .step::after {
    inset-block: auto 16px;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: 32px;
    block-size: 72px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 72'%3E%3Cpath d='M16 2c10 9 11 19 2 27S5 45 13 54c3 4 5 10 3 16' fill='none' stroke='%2384A984' stroke-width='1.75' stroke-linecap='round' stroke-dasharray='3 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .step--end::after { display: none; }

  /* אזור 4: אותה תמונה של הטאבלט. הטופס יושב על הרקע המעורפל שלה, שממשיך למעלה בהגדלה.
     הטופס מעודן: שם וטלפון בשורה אחת, והכול נגמר לפני הילדים */
  .lead {
    background: var(--sage-soft);
    padding-block: calc(var(--wave-h) + var(--s2)) 92vw;
  }
  .lead::before {
    content: "";
    position: absolute;
    inset: 3px 0 0;
    background: #F1E1BC url("../assets/img/web/lead-bg-tablet-800.webp") no-repeat right top / auto 300vw;
  }
  .lead__form-wrap .section-title { font-size: 26px; line-height: 1.25; }
  .lead__sub { margin-block-start: 4px; font-size: 17px; }
  .lead-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-block-start: var(--s2);
  }
  .field input { block-size: 48px; padding-inline: 12px; font-size: 16px; }
  .consent, .lead-form__submit { grid-column: 1 / -1; }
  .consent { gap: 2px var(--s1); }
  .consent input { inline-size: 22px; block-size: 22px; }
  .consent label { font-size: 14px; line-height: 1.5; }
  .lead__frame {
    inset-block: auto 0;
    block-size: 140vw;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }
  .lead__frame .parallax__img {
    inset-block: auto -3vw;
    inset-inline: auto 0;
    inline-size: 125vw;
    block-size: auto;
    aspect-ratio: 5 / 6;
  }

  /* אזור 8: cta-bg-mobile על כל האזור, בלי מעבר ובלי רקע. הטקסט על השולחן, הפירות מתחתיו */
  .cta {
    min-block-size: 200vw;
    padding-block: calc(var(--wave-h) + var(--s3)) 0;
  }
  .cta__frame {
    inset: 0;
    block-size: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cta__frame .parallax__img {
    inset-block: auto -4vw;
    inset-inline: 0;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1080 / 2340;
  }
}

/* אזור 2 בטלפון: עיגול נקי עם נקודות, והנושא הפעיל מופיע מתחתיו.
   העיגול מסתובב צעד בכל פעם, והנקודה הפעילה נעצרת בתחתית, מעל הטקסט.
   בלי JS נשאר העיגול הרגיל עם התוויות, ועם הפחתת תנועה רשימה פשוטה */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .orbit.is-cycling {
    --d: min(66vw, 280px);
    --label-h: 56px;
    margin-block: var(--s6) calc(var(--label-h) + var(--s3));
    animation: none;
    cursor: pointer;
    transition: --rot 1.1s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .orbit.is-cycling:focus-visible { outline-offset: 16px; }
  .orbit.is-cycling .orbit__dot { opacity: .7; }
  .orbit.is-cycling .orbit__label {
    position: absolute;
    inset-block-start: calc(100% + var(--s4));
    left: 50%;
    inline-size: calc(100vw - 2 * var(--gutter));
    max-inline-size: none;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    text-align: center;
    opacity: 0;
    translate: -50% 8px;
    transition: opacity .5s var(--ease), translate .5s var(--ease);
  }
  .orbit.is-cycling .orbit__item.is-active .orbit__label {
    opacity: 1;
    translate: -50% 0;
    scale: none;
    transition-delay: .35s;
  }
}

/* טלפונים צרים: הטקסט הארוך בכפתור של אזור 8 צריך את כל הרוחב */
@media (max-width: 379.98px) {
  .cta__inner { padding-inline: var(--s2); }
}

/* --------------------------------------------------------------------------
   טאבלט בלבד (768 עד 1023)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* אזור 4: התמונה על כל האזור, בלי רקע ובלי פילטר. הטופס על הרקע העליון, הילדים למטה */
  .lead {
    min-block-size: 112vw;
    padding-block: calc(var(--wave-h) + var(--s5)) 0;
  }
  .lead__frame { inset: 0; block-size: auto; }
  .lead__frame .parallax__img {
    inset-block: auto -3vw;
    inset-inline: 0;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 5 / 6;
  }
  /* אזור 5: תחנות לסירוגין מימין ומשמאל, ומסלול מתפתל ביניהן.
     הטבעת המסתובבת חורגת מהמסך ברגע שהיא באלכסון, אז חותכים אותה */
  .process { overflow-x: clip; }
  .journey {
    --badge-t: 148px;
    --row: 208px;
    --row-gap: 88px;
    margin-block-start: var(--s7);
  }
  .journey__track {
    display: block;
    position: absolute;
    inset-block-start: calc(var(--row) / 2);
    inset-inline: calc(var(--badge-t) / 2);
    block-size: calc(2 * (var(--row) + var(--row-gap)));
  }
  .journey__path--desktop { display: none; }
  .journey__mile {
    position: absolute;
    inline-size: 44px;
    block-size: 44px;
    object-fit: contain;
    translate: -50% -50%;
  }
  .journey__mile--a { left: 50%; top: 25%; }
  .journey__mile--b { left: 50%; top: 75%; }
  .steps { display: grid; gap: var(--row-gap); }
  .step, .step--end {
    --badge: var(--badge-t);
    grid-template-columns: var(--badge) minmax(0, 1fr);
    align-items: center;
    gap: var(--s4);
    min-block-size: var(--row);
    padding-block-end: 0;
  }
  .step::after { display: none; }
  .step--end { margin-block-start: var(--row-gap); position: relative; }
  .steps .step:nth-child(2) { grid-template-columns: minmax(0, 1fr) var(--badge); }
  .steps .step:nth-child(2) .step__badge { grid-column: 2; grid-row: 1; }
  .steps .step:nth-child(2) .step__body { grid-column: 1; grid-row: 1; }
  .step__badge { background-clip: padding-box; }
  .step__num { font-size: 64px; }
  .step__time { font-size: var(--fs-small); }
  .step__ring { inset: -10px; inline-size: calc(100% + 20px); block-size: calc(100% + 20px); }

  /* אזור 8: הפירות נדחקים שמאלה, והטקסט ממורכז בשטח הפנוי של השולחן */
  .cta__frame .parallax__img { inline-size: calc(100% + 120px); }
  .cta__inner {
    inline-size: 52%;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline: var(--gutter) 0;
    justify-items: center;
    text-align: center;
  }
  .cta__title { max-inline-size: 360px; }
}

/* הכללים של הרצועה מוגדרים לפני הבסיס של אזור 8, אז הגודל נקבע כאן */
@media (min-width: 1024px) {
  .cta__title { font-size: var(--strip-title); }
  .cta__line { font-size: var(--strip-sub); }
}

/* מחשב, אזור 8: הפירות גדולים, והטקסט באותו סולם של טופס הלידים ושל שאר הדף */
@media (min-width: 1280px) {
  .cta {
    --cta-w: 120vw;
    display: flex;
    align-items: center;
    min-block-size: max(620px, 36vw);
    padding-block: var(--wave-h) calc(var(--slant-h) * 1.25);
  }
  .cta__inner { inline-size: 100%; }
  .cta__title { max-inline-size: 10.6em; }
  .cta__frame .parallax__img {
    inset-block-start: calc(var(--cta-w) * -.045);
    inset-inline: auto 0;
    inline-size: var(--cta-w);
    block-size: auto;
    max-inline-size: none;
  }
}

/* מחשב, אזור 1: כתב היד קטן מטבעו, אז הוא גדל, והשורה נשארת ישרה */
@media (min-width: 1024px) {
  .hero__sub .accent { font-size: 1.8em; line-height: 1; vertical-align: -.04em; }
  .hero__sub .turning__word { margin-inline: .06em .12em; }
}

/* כפתור השליחה בטופס: באותה צורה ובאותו גובה של השדות, ועם אוויר.
   בטלפון ברוחב מלא מתחת לשם ולטלפון. מ-768 בשורה אחת איתם. הצ'קבוקס תמיד מתחתיו */
.field input,
.lead-form__submit,
.lead-form__submit:focus-visible { border-radius: 12px; }
.lead-form__submit {
  inline-size: 100%;
  block-size: 48px;
  justify-content: space-between;
  gap: var(--s2);
  padding-inline: var(--s3) 5px;
  font-size: 16px;
}
.lead-form__submit .btn__label { flex: 1; text-align: center; }
.lead-form__submit .btn__chip {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .lead-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px;
    gap: var(--s2) 12px;
  }
  .lead-form__submit { block-size: 50px; }
  .lead-form__submit .btn__chip { inline-size: 40px; block-size: 40px; }
}
@media (min-width: 1024px) {
  .lead-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 148px; }
  .lead-form__submit { block-size: 52px; padding-inline: var(--s2) 5px; }
  .lead-form__submit .btn__chip { inline-size: 42px; block-size: 42px; }
}
@media (min-width: 1280px) {
  .lead-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 184px; }
  .lead-form__submit { padding-inline: var(--s4) 5px; }
}

/* חריץ של פיקסל בקצה הגל: בסקיילינג לא שלם התמונה מציצה דרכו ומרצדת בפרלקס.
   לכן התמונה לא מגיעה לקצה של האזור: 3 הפיקסלים האלה בצבע האזור השכן, והגל מכסה אותם */
.cta { background: var(--cream); }
.cta__frame { inset-block: 3px; }
@media (min-width: 768px) {
  .lead { background: var(--sage-soft); }
  .lead__frame { inset-block: 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .orbit { animation: none; }
  .step__ring, .about__badge-text, .fab::after { animation: none; }
  .fab::after { opacity: 0; }
  .btn, .btn__chip, .btn__chip .icon, .nav-toggle span, .site-nav a::after, .js .journey__draw { transition: none; }
  .parallax__img { transform: none !important; }
  .btn:hover { translate: none; }
  .btn:hover .btn__chip .icon, .btn:focus-visible .btn__chip .icon { rotate: none; }
  .js .journey:not(.is-visible) .journey__draw { stroke-dashoffset: 0; }
  .site-header, .site-header__inner, .site-header__logo img, .fab, .faq__sign::after, .js .faq__panel { transition: none; }
}

/* מובייל עם הפחתת תנועה: רשימה פשוטה במקום העיגול */
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .orbit {
    inline-size: auto;
    block-size: auto;
    margin-block: 0;
    border-radius: 0;
  }
  .orbit__ring, .orbit__center { display: none; }
  .orbit__list { position: static; display: grid; gap: var(--s1); }
  .orbit__item {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
  .orbit__dot { translate: none; flex: none; }
  .orbit__label {
    translate: none;
    max-inline-size: none;
    text-align: start;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--text);
  }
}