/* Frank Ruhl Libre — classic Hebrew serif, used ONLY by the mobile "restaurant
   menu" nav overlay below. The media-query on @import means desktop never even
   downloads it, so the desktop design is untouched (network + visual). */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700&display=swap') (max-width:1100px);

/* wp-img-auto-sizes-contain-inline-css */

img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */

/* the Tresmares theme ships html{overscroll-behavior:contain}, which kills the natural
   iOS rubber-band at the page edges — the whole page reads as "stuck" on the phone.
   This sheet loads after the theme, so restore the native feel. */
html{overscroll-behavior:auto}

/* html must stay overflow:visible for .cc-climb-stage's position:sticky to work: with
   any non-visible overflow on html (globals.css puts overflow-x:hidden there), body's
   own overflow (hidden auto) stops propagating to the viewport, body becomes a scroll
   container that never scrolls, and sticky pins to IT — i.e. never pins. With visible,
   body's overflow moves to the viewport, so sideways overflow stays clipped and the
   page still scrolls. !important because this must beat globals.css regardless of
   stylesheet order. The mobile-menu lock (html.cc-menu-lock, higher specificity +
   !important) still wins while the overlay is open. */
html{overflow:visible!important}

/* ==== CC SYLLABUS ==== */
/* ===== תכנית הלימוד + וזה לא הכל (course syllabus) ===== */
@font-face{font-family:'PP Fragment';src:url('/wp-content/themes/tresmares/fonts/PPFragment-SerifRegular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.cc-syllabus{direction:rtl;width:100%;position:relative;z-index:2;color:#16130f;font-family:'Heebo',system-ui,sans-serif;
 --bg:#FBF7F2;--ink:#16130f;--muted:#6b645c;--line:#e7ddd1;--orange:#B5532D;--orange-d:#C4623F}
.cc-syllabus *{box-sizing:border-box}
.cc-syllabus .en{unicode-bidi:isolate;direction:ltr}
.cc-syllabus .head{max-width:1280px;margin-inline:auto;padding:6vh 6vw 2vh}
.cc-syllabus .klabel{font-size:clamp(12px,1vw,15px);letter-spacing:.16em;color:var(--orange);font-weight:800;text-transform:uppercase}
.cc-syllabus .klabel::after{content:"";display:block;width:42px;height:2px;background:var(--orange);margin-top:10px}
.cc-syllabus .htitle{font-size:clamp(34px,5.4vw,72px);font-weight:800;line-height:1.0;letter-spacing:-.028em;margin:20px 0 0;color:var(--ink)}
.cc-syllabus .htitle em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:var(--orange)}
.cc-syllabus .hsub{font-size:clamp(15px,1.2vw,19px);color:var(--muted);max-width:52ch;margin:18px 0 0;line-height:1.6}
.cc-syllabus .syl{max-width:1280px;margin-inline:auto;padding:2vh 6vw 7vh;display:grid;grid-template-columns:1fr 230px;gap:clamp(28px,5vw,80px);align-items:start}
.cc-syllabus .lessons{position:relative}
.cc-syllabus .les{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,46px);align-items:start;padding:clamp(26px,4.6vh,50px) 0;border-top:1px solid var(--line);opacity:0;transform:translateY(-22px);filter:blur(7px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1),filter .7s cubic-bezier(.16,.8,.24,1)}
.cc-syllabus .les.in{opacity:1;transform:none;filter:none}
.cc-syllabus .les .num{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:#d9c8b8;font-size:clamp(46px,6vw,98px);line-height:.78;min-width:1.7em;text-align:center;transition:color .7s .08s ease}
.cc-syllabus .les.in .num{color:var(--orange)}
.cc-syllabus .les .kick{font-size:clamp(12px,1vw,15px);font-weight:800;letter-spacing:.05em;color:#b8aa9b;margin-bottom:.55em}
.cc-syllabus .les h3{margin:0;font-size:clamp(25px,3vw,46px);font-weight:800;line-height:1.02;letter-spacing:-.025em;color:var(--ink)}
.cc-syllabus .les h3 em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:var(--orange)}
.cc-syllabus .les .desc{margin:.7em 0 0;font-size:clamp(15px,1.25vw,19px);line-height:1.55;color:#5f574e;max-width:54ch}
.cc-syllabus .les .desc .k{font-weight:800;color:var(--ink)}
.cc-syllabus .les .build{margin:1.05em 0 0;font-size:clamp(13px,1.02vw,16px);font-weight:700;color:var(--orange-d)}
.cc-syllabus .les .build .lbl{color:#b9aa9b;font-weight:800;letter-spacing:.1em;font-size:.82em;text-transform:uppercase;margin-inline-end:.55em}
/* ===== תכנית הלימוד — סטֶפֶּר אינטראקטיבי (רשימת שיעורים + פאנל פרטים) ===== */
.cc-syllabus .syl{max-width:1180px;margin-inline:auto;padding:2vh 6vw 7vh;display:block}
.cc-syl-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(18px,2.4vw,30px);align-items:start}
.cc-syl-steps{display:flex;flex-direction:column;gap:11px}
.cc-step{display:flex;align-items:center;gap:15px;width:100%;text-align:right;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;cursor:pointer;font-family:inherit;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s;box-shadow:0 1px 2px rgba(43,30,20,.04)}
.cc-step:hover{border-color:rgba(43,30,20,.16)}
.cc-step.on{background:#f1ebe1;border-color:rgba(43,30,20,.15);box-shadow:0 16px 32px -20px rgba(43,30,20,.3)}
.cc-step-num{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#f3ede4;color:#9a836c;font-weight:700;font-size:15px;font-family:'JetBrains Mono','Heebo',monospace;transition:background .25s,color .25s}
.cc-step.on .cc-step-num{background:var(--orange);color:#fff}
.cc-step-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-step-t{font-weight:700;font-size:clamp(15px,1.15vw,18px);color:var(--ink);line-height:1.2}
.cc-step-t em{font-style:normal;color:inherit;font-family:inherit}
.cc-step-s{font-size:13px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-syl-panel{position:sticky;top:96px}
.cc-panel-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 34px 64px -38px rgba(43,30,20,.34);overflow:hidden;animation:cc-panel-in .4s cubic-bezier(.22,.61,.36,1) both}
@keyframes cc-panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cc-panel-bar{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--line)}
.cc-panel-kick{font-family:'JetBrains Mono','Heebo',monospace;font-size:12px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.cc-panel-dots{display:flex;gap:7px}
.cc-panel-dots i{width:11px;height:11px;border-radius:50%;background:rgba(43,30,20,.13)}
.cc-panel-body{padding:clamp(24px,3vw,34px) clamp(26px,3.2vw,36px) clamp(30px,3.6vw,40px)}
.cc-panel-num{font-family:'PP Fragment','Frank Ruhl Libre',serif;font-style:italic;font-weight:400;font-size:clamp(52px,6vw,76px);line-height:.85;color:var(--orange);margin-bottom:10px}
.cc-panel-t{font-size:clamp(23px,2.6vw,32px);font-weight:800;color:var(--ink);line-height:1.16;margin:0 0 14px;letter-spacing:-.02em}
.cc-panel-t em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:var(--orange)}
.cc-panel-d{font-size:clamp(15px,1.2vw,17px);line-height:1.75;color:#5f574e;margin:0 0 22px}
.cc-panel-d .k{font-weight:800;color:var(--ink)}
.cc-panel-build{display:inline-flex;align-items:center;gap:11px;background:#f7f1e8;border:1px solid rgba(224,118,63,.18);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--orange-d);font-weight:700}
.cc-panel-build .lbl{font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-weight:800}
@media(max-width:880px){.cc-syl-grid{grid-template-columns:1fr;gap:16px}.cc-syl-panel{position:static;order:-1}.cc-step-s{white-space:normal}}
.cc-syllabus .idx{position:sticky;top:16vh;align-self:start;display:flex;gap:16px}
.cc-syllabus .idx-track{position:relative;width:2px;background:var(--line);border-radius:2px}
.cc-syllabus .idx-fill{position:absolute;top:0;right:0;left:0;height:0;background:var(--orange);border-radius:2px;transition:height .25s ease}
.cc-syllabus .idx ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(7px,1.3vh,15px);flex:1}
.cc-syllabus .idx li{font-size:13.5px;font-weight:600;color:#bcae9f;display:flex;align-items:center;gap:9px;white-space:nowrap;transition:color .35s ease,transform .35s ease;transform-origin:right center}
.cc-syllabus .idx li .nn{font-family:'PP Fragment',serif;font-style:italic;font-size:12px;color:#cdbfb0;min-width:1.7em;text-align:center;transition:color .35s}
.cc-syllabus .idx li.done{color:#a89a8b}
.cc-syllabus .idx li.on{color:var(--ink);transform:scale(1.1)}
.cc-syllabus .idx li.on .nn{color:var(--orange)}
.cc-syllabus .extras{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2vh}
.cc-syllabus .extras-in{max-width:1280px;margin-inline:auto;padding:8vh 6vw}
.cc-syllabus .eg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:4vh}
.cc-syllabus .ei{padding:clamp(26px,3.4vw,40px) clamp(20px,2.4vw,34px) clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line);opacity:0;transform:translateY(-18px);filter:blur(6px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1),filter .7s cubic-bezier(.16,.8,.24,1)}
.cc-syllabus .ei.in{opacity:1;transform:none;filter:none}
.cc-syllabus .eg .ei:nth-child(3n+1){padding-right:0}
.cc-syllabus .ei .ic{width:34px;height:34px;color:var(--orange);margin-bottom:18px}
.cc-syllabus .ei h3{margin:0;font-size:clamp(19px,1.6vw,25px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cc-syllabus .ei p{margin:.55em 0 0;color:var(--muted);font-size:clamp(14px,1.05vw,16.5px);line-height:1.55;max-width:34ch}
@media(max-width:920px){.cc-syllabus .syl{grid-template-columns:1fr}.cc-syllabus .idx{display:none}.cc-syllabus .eg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cc-syllabus .eg{grid-template-columns:1fr}.cc-syllabus .les .num{font-size:46px}}



/* he-rtl-override */

  /* פונט עברי לכותרות ולטקסט (PP Neue Montreal אין בו עברית) */
  .component--herofulltext .title,
  .component--herofulltext .text-block-left .text{
    font-family:'Heebo',system-ui,sans-serif;
  }
  /* היפוך הקומפוזיציה למראה עברי: כותרת לימין, ממורכזת אנכית, שורות שלא נשברות */
  .component--herofulltext .title{
    position:absolute !important;
    top:50% !important; transform:translateY(-50%) !important;
    left:auto !important; right:3vw !important;
    width:auto !important; max-width:86vw; padding:0 !important;
    text-indent:0 !important; mix-blend-mode:multiply;
    direction:rtl; text-align:right;
    font-weight:800; letter-spacing:-0.02em; line-height:0.9;
    font-size:clamp(44px,8.4vw,138px) !important;
    white-space:nowrap;
  }
  /* הספרות 0 / 100 בסריף קלאי כמו המספרים הגדולים במקור */
  .component--herofulltext .title .num{
    font-family:'PP Fragment',serif; font-style:italic; font-weight:400;
    color:#B5532D;
  }
  /* הקופי לתחתית-שמאל (מראָה למקור), קריאה מימין לשמאל */
  .component--herofulltext .text-block-left{
    right:auto; left:8vw; width:24vw; text-align:right;
  }
  .component--herofulltext .text-block-left .text{ direction:rtl; }
  .component--herofulltext .text-block-left .actions{ justify-content:flex-end; }
  /* תווית הגלילה לפינה הימנית */
  .component--herofulltext .scroll{ left:auto; right:5vw; }
  /* ===== כפתורי CTA בהירו: ראשי „בואו להתנסות בחינם" + משני „הדגמה חיה" (מאתר הקורס) ===== */
  .component--herofulltext .text-block-left .actions{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; width:max-content; max-width:38vw; margin-top:10px; }
  .hero-cta-row{ direction:rtl; display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
  .hero-cta{ direction:rtl; display:inline-flex; align-items:center; gap:10px; font-family:'Heebo',sans-serif; font-weight:700;
    font-size:clamp(15px,1.05vw,18px); border-radius:12px; padding:16px 30px; text-decoration:none; line-height:1; white-space:nowrap;
    transition:background .2s ease, color .2s ease, transform .2s ease; cursor:pointer; }
  .hero-cta--primary{ color:#fff; background:#16130f; box-shadow:0 10px 24px rgba(22,19,15,.22); }
  .hero-cta--primary .chev{ font-size:1.2em; line-height:0; color:#B5532D; margin-inline-start:-2px; }
  .hero-cta--secondary{ color:#16130f; background:transparent; border:1.5px solid #16130f; padding:14.5px 28px; box-shadow:none; }
  .hero-cta:hover{ transform:translateY(-2px); }
  .hero-cta--primary:hover{ background:#2c2620; }
  .hero-cta--secondary:hover{ background:#16130f; color:#fff; }
  .hero-cta-note{ direction:rtl; display:flex; align-items:center; gap:7px; font-family:'Heebo',sans-serif; font-size:13px; color:#6a625a; font-weight:600; }
  .hero-cta-note .v{ color:#D2714F; font-weight:800; }
  @media(max-width:760px){ .component--herofulltext .text-block-left .actions{ max-width:84vw; } }
  /* לוגו Claude Course בכותרת (במקום TRESMARES) */
  .brand img{ display:block; width:auto; }
  .brand[data-desktop] img{ height:58px; }
  .brand[data-mobile] img{ height:44px; }

  /* ===== צבע מבטא: אדום מותג → כתום מותג (נקודת הסמן + מספרי הסטטיסטיקה) ===== */
  :root{ --main:#B5532D; }
  #cursor .cursor-follow,
  #cursor .cursor-view,
  #cursor .cursor-drag{ background-color:#B5532D !important; }

  /* ===== סקשן ה"תכלס" — חשיפה דרך עננים (מיובא 1:1 מהגרסה העצמאית) ===== */
  .cc-stmt-wrap{ position:relative; }
  /* גשר עננים חמים מהפסגה אל ים-הענן */
  .seam-clouds{ position:absolute; top:-340px; inset-inline:0; height:460px; z-index:3; pointer-events:none; overflow:hidden; }
  .seam-clouds .cloud{ position:absolute; height:auto; display:block; filter:sepia(.30) saturate(1.35) brightness(1.04); will-change:transform; animation:ccCloudDrift var(--d,40s) ease-in-out infinite; animation-delay:var(--dl,0s); }
  .seam-clouds::after{ content:""; position:absolute; inset:auto 0 0 0; height:190px; background:linear-gradient(to top,#FBF7F2 8%, rgba(251,247,242,0)); }
  /* ים הענן שהמשפט צף בתוכו */
  /* padding הודק דרסטית: קודם עד 280/420px, מה שהשאיר „ים" קרם ריק מתחת למשפט
     הקצר. עכשיו המשפט יושב במסגרת הדוקה שהעננים ממלאים — לא מרחף בריק. */
  #stmtScene{ position:relative; background:#FBF7F2; overflow:hidden; padding:clamp(110px,15vh,190px) 0 clamp(120px,17vh,210px); }
  .stmt-clouds{ position:absolute; inset:0; z-index:1; pointer-events:none; }
  .stmt-clouds .cl{ position:absolute; }
  /* פחות שחיקה: brightness ‎1.12→1.04, saturate ‎.55→.72 — קוראים כעננים חמים, לא כמריחה חיוורת */
  .stmt-clouds .cl img{ width:100%; height:auto; display:block; filter:brightness(1.04) saturate(.72) contrast(.98); animation:ccCloudDrift var(--d,50s) ease-in-out infinite; animation-delay:var(--dl,0s); }
  .stmt-clouds::after{ content:""; position:absolute; inset:auto 0 0 0; height:26%; background:linear-gradient(to top,#FBF7F2 30%, rgba(251,247,242,0)); }
  /* veil — העננים שמלפני המשפט ונפתחים בגלילה (JS מזיז/מעמעם) */
  .stmt-veil{ position:absolute; inset:0; z-index:6; pointer-events:none; }
  .stmt-veil .vc{ position:absolute; will-change:transform,opacity; }
  .stmt-veil .vc img{ width:100%; height:auto; display:block; filter:brightness(1.14) saturate(.5) contrast(.97); animation:ccCloudDrift var(--d,40s) ease-in-out infinite; animation-delay:var(--dl,0s); }
  @keyframes ccCloudDrift{ 0%{transform:translate(0,0)} 50%{transform:translate(30px,-8px)} 100%{transform:translate(0,0)} }
  @media (prefers-reduced-motion:reduce){ .seam-clouds .cloud,.stmt-clouds .cl img,.stmt-veil .vc img{ animation:none; } }
  /* טיפוגרפיה של המשפט — scoped ל-#stmtScene כדי לנצח את ה-theme */
  #stmtScene .component--textblocklarge{ position:relative; z-index:2; direction:rtl; width:100%; padding:0; background:transparent; }
  #stmtScene .component--textblocklarge .container{ position:relative; z-index:2; width:100%; margin:0 auto; }
  #stmtScene .component--textblocklarge .text-block-center{ margin:0 auto; text-align:center; width:min(88vw,1040px); }
  /* z-index:7 מרים את תווית „תכלס" מעל שכבת ה-veil (z-index:6): התווית קטנה ואינה
     חלק מה„חשיפה הדרמטית" של המשפט — כשהמשפט יושב נמוך על המסך ענן-veil היה מכסה
     חלקית את התווית (האלמנט הכי גבוה) והיא נראתה חתוכה. עכשיו היא תמיד נקייה. */
  #stmtScene .component--textblocklarge .label{ font-family:'Heebo',system-ui,sans-serif; direction:rtl; display:block; position:relative; z-index:7; transform:none; margin:0 auto clamp(20px,2.6vw,38px); font-size:14px; font-weight:700; color:#16130f; text-decoration:underline; text-underline-offset:5px; }
  #stmtScene .component--textblocklarge .title{ font-family:'Heebo',system-ui,sans-serif; direction:rtl; font-weight:800; letter-spacing:-.01em; line-height:1.22; color:#16130f; font-size:clamp(28px,4.3vw,60px); width:100%; margin:0; padding:0; }
  #stmtScene .component--textblocklarge .title .cc-w{ display:inline-block; }
  #stmtScene .component--textblocklarge .title .cc-c{ display:inline-block; opacity:.05; will-change:opacity; }

  /* סקשן המספרים (gridnumbers) — טקסט עברי RTL (המספרים עצמם נשארים כפי שהם) */
  .component--gridnumbers .text-block-left .text,
  .component--gridnumbers .group .text{ font-family:'Heebo',system-ui,sans-serif; direction:rtl; text-align:right; }
  /* התווית "מה בדיוק לומדים" — יישור לימין (RTL), מעל הפסקה */
  .component--gridnumbers .text-block-left .actions{ direction:rtl; text-align:right; justify-content:flex-end; display:flex; }

  /* ===== סקשן "למה ללמוד קלוד קוד" — 3 שורות נדבקות למקומן ===== */
  /* ===== רקע כל האתר: קרם חמים עדין מאוד + שכבת גרעין דקה (תחושת פרימיום רכה) ===== */
  html, body{ background:#FBF7F2; }
  /* ה-theme עוטף את הדף ב-#flexible לבן (דרך ‎#app > div{background:var(--bg)}‎, specificity 0,1,1),
     והסקשנים ה-transparent חשפו אותו ויצרו תפר קרם→לבן. צובעים את כל שרשרת ה-wrapper בקרם
     עם specificity שמנצח, כדי שהרקע יהיה אחיד לכל אורך הדף. */
  #app > #flexible, #flexible, #main, .main{ background:#FBF7F2; }
  /* סקשן ה-map של ה-theme קבוע ‎background:var(--white)‎ — מאחדים גם אותו לקרם */
  .home-root .component--map{ background:#FBF7F2; }
  body::after{
    content:""; position:fixed; inset:0; z-index:99990; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
  }
  .component--whychapters{ direction:rtl; background:transparent; position:relative; z-index:1; }
  .component--whychapters .wc-pin{ position:relative; padding:13vh 6vw 13vh; z-index:1; }
  .component--whychapters .wc-head{ z-index:5; font-family:'Heebo',sans-serif; font-size:clamp(13px,1.1vw,16px); letter-spacing:.14em; color:#B5532D; font-weight:700; text-align:right; margin:0 0 6.5vh; }
  .component--whychapters .wc-head::after{ content:""; display:block; width:46px; height:2px; background:#B5532D; margin-top:10px; margin-inline-start:auto; }
  /* 3 הסיבות זו לצד זו — שורה אחת, 3 עמודות (מספר למעלה, כותרת, טקסט) */
  /* row-reverse בהקשר RTL → 01 משמאל, 03 מימין (סדר עולה משמאל לימין) */
  .component--whychapters .wc-list{ display:flex; flex-direction:row-reverse; justify-content:center; align-items:flex-start; gap:clamp(26px,4vw,72px); flex-wrap:wrap; }
  .component--whychapters .wc-row{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex:1 1 0; min-width:230px; max-width:32ch; direction:rtl; text-align:right; opacity:0; will-change:transform,opacity; }
  .component--whychapters .wc-num{ font-family:'PP Fragment',serif; font-style:italic; font-weight:400; color:#B5532D; font-size:clamp(64px,7vw,112px); line-height:.8; letter-spacing:-.02em; text-align:right; user-select:none; }
  .component--whychapters .wc-copy{ direction:rtl; text-align:right; font-family:'Heebo',sans-serif; max-width:none; }
  .component--whychapters .wc-copy h3{ font-size:clamp(22px,2.2vw,34px); font-weight:800; line-height:1.05; letter-spacing:-.02em; margin:0 0 10px; color:#16130f; }
  .component--whychapters .wc-copy p{ font-size:clamp(14px,1.05vw,18px); line-height:1.55; color:#6b645c; margin:0; font-weight:400; }
  .component--whychapters .wc-progress{ display:none; }
  @media(max-width:760px){ .component--whychapters .wc-list{ flex-direction:column; align-items:stretch; gap:34px; } .component--whychapters .wc-row{ max-width:none; } .component--whychapters .wc-num{ font-size:56px; } }

  /* ===== „מה תוכלו לבנות עם קלוד" (מבוסס על סקשן ה-map של Tresmares) — עברית RTL ===== */
  /* הרקע שלא צריך: מפת העולם המנוקדת + נקודות המשרדים + גלי הרקע העליונים */
  /* (.map / .waves — the hidden 3.2MB background SVGs — were deleted from the
     template; their display:none rule went with them.) */
  /* רק חצי עיגול: העיגול (1832px) גבוה מהסקשן, אז החצי התחתון „נשפך" החוצה. overflow:hidden על הסקשן
     חוסם את הדליפה — נשארת רק הכיפה העליונה בתוך גבולות הסקשן, ולא ממשיכה אל הסקשנים שמתחת. */
  .component--map{ overflow:hidden; }
  .component--map .label,
  .component--map .text-block-center .title{ font-family:'Heebo',system-ui,sans-serif; direction:rtl; }
  .component--map .text-block-center .title{ font-weight:800; letter-spacing:-0.01em; }
  .component--map .text-block-center .title strong{ color:#B5532D; font-weight:800; }
  .component--map .wysiwyg{ font-family:'Heebo',system-ui,sans-serif; direction:rtl; }
  .component--map .name .title{ font-family:'Heebo',sans-serif; direction:rtl; }
  .component--map .circle-container{ overflow:visible !important; }
  .component--map .map-cta-wrap{ margin-top:24px !important; position:relative; z-index:30; }
  /* The .circle wheel is a huge 1260px box (overflow:visible) drawn over the
     central lede + CTA (which live in a .wysiwyg INSIDE .circle-container). Make
     ONLY the wheel click-through — NOT the whole container, or the CTA dies too —
     and keep the actual card links clickable. */
  .component--map .circle{ pointer-events:none; }
  .component--map .circle-item .cc-demo-link{ pointer-events:auto; }
  /* keep the theme's absolute centering of the lede+CTA (top:31.25vw, centered in
     the ring) — do NOT set position:relative here or it flows below the 1260px
     circle and collides with the next section. Just lift it above the wheel. */
  .component--map .circle-container > .wysiwyg{ z-index:31; }
  .component--map .wysiwyg a.map-cta{ display:inline-flex !important; align-items:center; gap:10px; font-family:'Heebo',sans-serif; font-weight:700 !important; font-size:clamp(15px,1.05vw,18px) !important; line-height:1; white-space:nowrap; letter-spacing:normal;
    background:#16130f !important; color:#fff !important; border:none !important; border-radius:12px; padding:16px 30px; text-decoration:none !important;
    box-shadow:0 10px 24px rgba(22,19,15,.22); transition:background .2s ease, transform .2s ease; direction:rtl; }
  .component--map .wysiwyg a.map-cta:hover{ background:#2c2620 !important; transform:translateY(-2px); color:#fff !important; }
  .component--map .wysiwyg a.map-cta span{ font-size:1.2em; line-height:0; color:#B5532D; }


/* cc-about-css */

.cc-about{direction:rtl;position:relative;z-index:2;color:#16130f;font-family:'Heebo',system-ui,sans-serif;background:#FBF7F2;
 --orange:#B5532D;--orange-d:#C4623F;--ink:#16130f;--muted:#6b645c;--line:#e7ddd1}
.cc-about *{box-sizing:border-box}
.cc-about .en{unicode-bidi:isolate;direction:ltr}
.cc-about .ca-in{max-width:1280px;margin-inline:auto;padding:11vh 6vw;display:grid;grid-template-columns:1fr 400px;gap:clamp(36px,6vw,96px);align-items:center}
.cc-about .klabel{font-size:clamp(12px,1vw,15px);letter-spacing:.16em;color:var(--orange);font-weight:800;text-transform:uppercase}
.cc-about .klabel::after{content:"";display:block;width:42px;height:2px;background:var(--orange);margin-top:10px}
.cc-about .ca-title{font-size:clamp(30px,4.4vw,60px);font-weight:800;line-height:1.04;letter-spacing:-.028em;margin:20px 0 0;color:var(--ink)}
.cc-about .ca-title em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:var(--orange)}
.cc-about .ca-copy p{margin:1.15em 0 0;font-size:clamp(16px,1.25vw,19px);line-height:1.72;color:#5f574e;max-width:56ch}
.cc-about .ca-copy p b{font-weight:800;color:var(--ink)}
.cc-about .ca-side{position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(34px,3vw,48px) clamp(30px,2.6vw,42px);box-shadow:0 24px 60px rgba(64,40,25,.10)}
.cc-about .ca-side::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,var(--orange),var(--orange-d))}
.cc-about .ca-quote{font-family:'PP Fragment',serif;font-style:italic;color:var(--orange);opacity:.32;font-size:clamp(72px,8vw,108px);line-height:.6;margin:-.1em 0 .1em}
.cc-about .ca-side blockquote{margin:0;font-size:clamp(19px,1.7vw,25px);font-weight:700;line-height:1.42;letter-spacing:-.02em;color:var(--ink)}
.cc-about .ca-sign{display:flex;align-items:center;gap:15px;margin-top:clamp(26px,2.4vw,34px);padding-top:clamp(22px,2vw,28px);border-top:1px solid var(--line)}
.cc-about .ca-ava{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'PP Fragment',serif;font-style:italic;font-size:28px;background:linear-gradient(140deg,var(--orange),var(--orange-d));box-shadow:0 6px 18px rgba(217,119,87,.36)}
.cc-about .ca-st{display:flex;flex-direction:column;line-height:1.25}
.cc-about .ca-st b{font-weight:800;font-size:18px;color:var(--ink)}
.cc-about .ca-st span{font-size:14.5px;color:var(--muted)}
.cc-about .reveal{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity .8s cubic-bezier(.16,.8,.24,1),transform .8s cubic-bezier(.16,.8,.24,1),filter .8s cubic-bezier(.16,.8,.24,1)}
.cc-about .ca-side.reveal{transition-delay:.12s}
.cc-about .reveal.in{opacity:1;transform:none;filter:none}
@media(max-width:920px){.cc-about .ca-in{grid-template-columns:1fr;padding:9vh 7vw}.cc-about .ca-side{order:2}}


.cc-about .ca-copy p, .cc-about .ca-title, .cc-about .ca-side blockquote{ unicode-bidi:plaintext; }


/* cc-faq-css */

.cc-faq{direction:rtl;background:#FBF7F2;color:#16130f;font-family:'Heebo',system-ui,sans-serif;position:relative;z-index:2;border-top:1px solid rgba(64,40,25,.08)}
.cc-faq .fq-in{max-width:1040px;margin-inline:auto;padding:clamp(64px,9vh,120px) 6vw}
.cc-faq .fq-head{text-align:start;margin:0 0 clamp(30px,4vh,46px);max-width:760px}
.cc-faq .fq-klabel{font-size:clamp(12px,1vw,15px);letter-spacing:.16em;color:#B5532D;font-weight:800;text-transform:uppercase;margin:0 0 12px}
.cc-faq .fq-title{font-size:clamp(28px,3.6vw,50px);font-weight:800;line-height:1.05;letter-spacing:-.028em;margin:0;unicode-bidi:plaintext}
.cc-faq .fq-title em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:#B5532D}

.cc-faq .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:26px;align-items:start}
.cc-faq .qlist{display:flex;flex-direction:column;gap:8px}
.cc-faq .qbtn{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;font-family:inherit;font-size:clamp(15px,1.2vw,17px);font-weight:700;line-height:1.4;color:#43392f;border:1px solid transparent;transition:background .18s,border-color .18s,box-shadow .18s,color .18s;unicode-bidi:plaintext}
.cc-faq .qbtn .k{font-family:'PP Fragment',serif;font-style:italic;color:#B5532D;font-weight:400;font-size:18px;width:24px;flex:none}
.cc-faq .qbtn:hover{background:#fff;border-color:rgba(64,40,25,.1)}
.cc-faq .qbtn.active{background:#B5532D;color:#fff;box-shadow:0 14px 30px rgba(181,83,45,.25)}
.cc-faq .qbtn.active .k{color:rgba(255,255,255,.8)}
.cc-faq .panel{background:#fff;border:1px solid rgba(64,40,25,.1);border-radius:22px;box-shadow:0 26px 60px rgba(64,40,25,.1);padding:clamp(28px,3vw,42px);min-height:280px;position:relative}
.cc-faq .panel::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#B5532D,#C4623F);border-radius:22px 22px 0 0}
.cc-faq .panel .ava-sm{width:40px;height:40px;border-radius:12px;background:radial-gradient(circle at 32% 28%,#d9774f,#B5532D);display:grid;place-items:center;box-shadow:0 6px 16px rgba(181,83,45,.3)}
.cc-faq .panel .ava-sm svg{width:22px;height:22px;display:block}
.cc-faq .panel .pq{font-size:clamp(20px,2vw,27px);font-weight:800;line-height:1.25;margin:18px 0 16px;unicode-bidi:plaintext}
.cc-faq .panel .pa{font-size:clamp(16px,1.3vw,18px);line-height:1.75;color:#43392f;unicode-bidi:plaintext}
.cc-faq .panel .pa b{color:#16130f;font-weight:800}
.cc-faq .panel .fade{animation:fqfade .3s ease both}
@keyframes fqfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:780px){.cc-faq .fq-in{max-width:560px}.cc-faq .grid{grid-template-columns:1fr}}


/* cc-cta-css */

.cc-cta{direction:rtl;background:linear-gradient(115deg,#bb572f 0%,#993e20 100%);color:#fff;font-family:'Heebo',system-ui,sans-serif;position:relative;overflow:hidden;z-index:2}
.cc-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 86% -10%,rgba(255,255,255,.18),transparent 58%);pointer-events:none}
.cc-cta .ct-in{max-width:1180px;margin-inline:auto;padding:clamp(64px,11vh,138px) 6vw;display:grid;grid-template-columns:minmax(0,720px);gap:clamp(20px,3vw,56px);align-items:center;position:relative;z-index:2}
.cc-cta .ct-copy,.cc-cta .ct-art{min-width:0}

.cc-cta .ct-kick{font-size:clamp(12px,1vw,14.5px);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700;margin:0 0 14px}
.cc-cta .ct-h{font-size:clamp(30px,4.4vw,58px);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:0 0 18px;unicode-bidi:plaintext}
.cc-cta .ct-h em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:#ffd7c4}
.cc-cta .ct-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 30px;unicode-bidi:plaintext}
.cc-cta .ct-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#993e20;font-weight:800;font-size:clamp(17px,1.4vw,20px);border-radius:14px;padding:18px 40px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.cc-cta .ct-btn:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(0,0,0,.3)}
.cc-cta .ct-note{margin:16px 0 0;font-size:14.5px;color:rgba(255,255,255,.7)}
.cc-cta .ct-art{justify-self:center;text-align:center;line-height:1}
.cc-cta .ct-art .from{display:block;font-size:clamp(13px,1.15vw,16px);font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.74);margin-bottom:.1em}
.cc-cta .ct-art .to{display:block;font-family:'PP Fragment',serif;font-style:italic;font-weight:400;font-size:clamp(120px,14vw,224px);line-height:.78;color:#fff;text-shadow:0 14px 50px rgba(0,0,0,.18)}
@media(max-width:860px){.cc-cta .ct-in{grid-template-columns:1fr;gap:8px}.cc-cta .ct-copy{max-width:none}.cc-cta .ct-art{justify-self:start;order:1;text-align:start}.cc-cta .ct-art .to{font-size:clamp(110px,30vw,190px)}}


/* cc-pricing-css */
.cc-pricing{direction:rtl;background:#fbf7f2;color:#16130f;font-family:'Heebo',system-ui,sans-serif;position:relative;z-index:2;border-top:1px solid rgba(22,19,15,.06)}
.cc-pricing .cp-in{max-width:1180px;margin-inline:auto;padding:clamp(64px,11vh,130px) 6vw;display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,58px);justify-items:center;text-align:center}
.cc-pricing .cp-head{max-width:680px}
.cc-pricing .cp-kick{font-size:clamp(12px,1vw,14.5px);letter-spacing:.18em;text-transform:uppercase;color:#bb572f;font-weight:800;margin:0 0 14px}
.cc-pricing .cp-h{font-size:clamp(30px,4.4vw,56px);font-weight:800;line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;unicode-bidi:plaintext}
.cc-pricing .cp-h em{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;color:#bb572f}
.cc-pricing .cp-sub{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(22,19,15,.7);margin:0;unicode-bidi:plaintext}
.cc-pricing .cp-card{width:min(440px,100%);background:#fff;border:1px solid rgba(22,19,15,.08);border-radius:24px;padding:clamp(30px,4vw,46px);box-shadow:0 30px 70px -28px rgba(153,62,32,.32)}
.cc-pricing .cp-card-top{text-align:center;padding-bottom:24px;border-bottom:1px solid rgba(22,19,15,.08);margin-bottom:26px}
.cc-pricing .cp-plan{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.03em;color:#bb572f;background:rgba(187,87,47,.1);border-radius:999px;padding:6px 16px;margin-bottom:18px}
.cc-pricing .cp-price{display:flex;align-items:flex-start;justify-content:center;gap:11px;line-height:1;margin-bottom:10px}
.cc-pricing .cp-cur{font-size:clamp(26px,3vw,38px);font-weight:700;margin-top:.45em;color:#16130f}
.cc-pricing .cp-amt{font-family:'PP Fragment',serif;font-style:italic;font-weight:400;font-size:clamp(64px,9vw,108px);letter-spacing:-.02em;color:#16130f}
.cc-pricing .cp-terms{display:block;font-size:14.5px;color:rgba(22,19,15,.6);font-weight:600}
.cc-pricing .cp-feats{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px;text-align:start}
.cc-pricing .cp-feats li{position:relative;padding-inline-start:32px;font-size:clamp(15px,1.2vw,16.5px);line-height:1.5;color:rgba(22,19,15,.82)}
.cc-pricing .cp-feats li::before{content:"";position:absolute;inset-inline-start:0;top:0;width:21px;height:21px;border-radius:50%;background:rgba(187,87,47,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23993e20' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.cc-pricing .cp-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(115deg,#bb572f,#993e20);color:#fff;font-weight:800;font-size:clamp(17px,1.4vw,20px);border-radius:14px;padding:18px 32px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 14px 34px rgba(153,62,32,.28)}
.cc-pricing .cp-btn:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(153,62,32,.36)}
.cc-pricing .cp-note{margin:14px 0 0;text-align:center;font-size:13.5px;color:rgba(22,19,15,.55)}


/* cc-footer-css */

.cc-footer{direction:rtl;background:#16130f;color:#efe7df;font-family:'Heebo',system-ui,sans-serif;position:relative;z-index:2}
.cc-footer *{box-sizing:border-box}
.cc-footer .en{unicode-bidi:isolate;direction:ltr}
.cc-footer .cf-in{max-width:1200px;margin-inline:auto;padding:clamp(56px,7vw,90px) 6vw clamp(30px,3vw,40px)}
.cc-footer .cf-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cc-footer .cf-h{font-size:clamp(26px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0;max-width:20ch}
.cc-footer .cf-h em{color:#B5532D;font-style:normal}
.cc-footer .cf-cta{display:inline-flex;align-items:center;gap:10px;background:#B5532D;color:#fff;font-weight:700;font-size:17px;border-radius:12px;padding:16px 30px;text-decoration:none;white-space:nowrap;transition:background .2s ease,transform .2s ease}
.cc-footer .cf-cta .ar{font-size:1.2em;line-height:0}
.cc-footer .cf-cta:hover{background:#C4623F;transform:translateY(-2px)}
.cc-footer .cf-divider{height:1px;background:rgba(255,255,255,.12);margin:clamp(36px,4vw,54px) 0 26px}
.cc-footer .cf-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cc-footer .cf-links{display:flex;gap:24px;flex-wrap:wrap}
.cc-footer .cf-links a{color:#cfc6bd;text-decoration:none;font-size:15px;transition:color .2s ease}
.cc-footer .cf-links a:hover{color:#fff}
.cc-footer .cf-copy{color:#8b8279;font-size:13.5px}
.cc-footer .cf-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.cc-footer .cf-legal a{color:#8b8279;text-decoration:none;font-size:13px;transition:color .2s ease}
.cc-footer .cf-legal a:hover{color:#cfc6bd}
@media(max-width:760px){.cc-footer .cf-top{flex-direction:column;align-items:flex-start;gap:26px}.cc-footer .cf-bottom{flex-direction:column;align-items:flex-start;gap:16px}.cc-footer .cf-legal{gap:14px}}


/* force-visible: the theme's page-load fade JS isn't loaded, so the TOP wrapper
   div ships at opacity:0.0001 — force the structural containers visible. NOTE:
   the reveal elements (.wc-row, .les, .reveal) are deliberately NOT forced here —
   they start hidden (opacity:0) and are animated in by our gsap/IO blocks in
   home-scripts.js. Forcing them visible would override and kill those reveals. */
.home-root>div,.home-root .flexible,.home-root .component,.home-root [class*="component--"],.home-root .main,.home-root .ei,.home-root [data-reveal]{opacity:1!important;visibility:visible!important}
.home-root .ei{transform:none!important}
/* bento numbers (component--gridnumbers .number) start hidden — revealed by the
   gsap fade-in (faithful port of Os.setNumbers) in home-scripts.js. Like .les/.reveal
   they are deliberately NOT forced visible above; opacity doesn't inherit, so the
   container's opacity:1!important doesn't reach these. JS un-hides them as a fallback
   if gsap never loads, so they can't get stuck invisible. */
.home-root .component--gridnumbers .number{opacity:0}

/* Hebrew needs a Hebrew font — PP Neue Montreal has no Hebrew glyphs */
.home-root .header,.home-root .header *,.home-root .component,.home-root .component *{font-family:'Heebo','PP Neue Montreal',Helvetica,Arial,sans-serif!important}
/* ===== Sticky-reveal nav: מתחבא בגלילה למטה, קופץ פנימה (רקע מלא) בגלילה למעלה ===== */
.home-root .header{position:fixed;top:0;left:0;right:0;transition:transform .42s cubic-bezier(.4,0,.2,1),background-color .3s ease,box-shadow .3s ease;will-change:transform}
.home-root .header.cc-nav-hidden{transform:translateY(-115%)}
.home-root .header.cc-nav-solid{background-color:#fbf7f2;box-shadow:0 6px 24px -16px rgba(43,30,20,.22)}
/* קו underline אנימטיבי תחת קישורי התפריט — נצמח בריחוף/פוקוס (RTL: מימין) */
.home-root .header .menu-header>li>a{position:relative}
.home-root .header .menu-header>li>a::after{content:"";position:absolute;right:0;bottom:-5px;height:2px;width:100%;background:#2b2b2b;border-radius:2px;transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.4,0,.2,1);pointer-events:none}
.home-root .header .menu-header>li>a:hover::after,.home-root .header .menu-header>li>a:focus-visible::after{transform:scaleX(1)}
/* צבע קישורי התפריט: לבן + צל כשהתפריט שקוף מעל ההירו (קריא על שמיים/סלע), כהה כשהתפריט הופך לרקע קרם מלא בגלילה לתוכן */
.home-root .header .menu-header>li>a{color:#fff!important;text-shadow:0 1px 3px rgba(20,15,10,.5),0 0 2px rgba(20,15,10,.35);transition:color .3s ease,text-shadow .3s ease}
.home-root .header .menu-header>li>a::after{background:#fff}
.home-root .header.cc-nav-solid .menu-header>li>a{color:#16130f!important;text-shadow:none}
.home-root .header.cc-nav-solid .menu-header>li>a::after{background:#2b2b2b}
/* כפתור „להרשמה" → חצי „הרשמה" / חצי „כניסה" באותו בלוק כהה */
.home-root .header .button.--primary.cc-auth-2{padding:0;display:inline-flex;align-items:stretch;overflow:hidden}
.home-root .header .cc-auth-2 .cc-auth-half{flex:1 1 50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-weight:600;padding:0 .7em;white-space:nowrap;transition:background-color .25s ease}
.home-root .header .cc-auth-2 .cc-auth-half + .cc-auth-half{border-inline-start:1px solid rgba(255,255,255,.22)}
.home-root .header .cc-auth-2 .cc-auth-half:hover{background-color:rgba(255,255,255,.12)}
/* ===== Scroll-scrub climb hero — Claude climbs 0→100 (frames in /climb) ===== */
.home-root .component--herofulltext{display:none} /* replaced by the climb hero */
.cc-climb{--cl-ink:#f6ece0;--cl-clay:#e0763f;--cl-amber:#e8b25a;--cl-bg:linear-gradient(180deg,#c6d0db 0%,#d8ccbb 52%,#e8ddcc 100%);--cl-step:1.02ch;--cl-nudge:.11em;position:relative;height:300vh;background:var(--cl-bg);direction:rtl}
/* native sticky pin — compositor-driven, no JS position flips (the old absolute↔fixed
   polyfill lagged a frame at the pin boundaries, a visible jump on phone flicks).
   100vh, not dvh, on purpose: iOS resolves vh to the large viewport, so the stage never
   resizes while the URL bar collapses mid-scroll (dvh does, and each resize = a jump). */
.cc-climb-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--cl-bg)}
.cc-climb-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:url(/climb/f-001.webp) center/cover no-repeat} /* new footage drawn un-mirrored; poster matches the first drawn frame */
.cc-climb-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(13,9,6,.55),transparent 50%),linear-gradient(to top,#fbf7f2 0%,rgba(251,247,242,0) 26%)} /* bottom dissolves into the cream page below */
.cc-climb-bar{position:absolute;top:0;inset-inline:0;height:3px;width:0;z-index:3;display:block;background:linear-gradient(90deg,var(--cl-clay),var(--cl-amber))}
.cc-climb-lockup{position:absolute;top:50%;inset-inline-start:clamp(28px,6vw,104px);transform:translateY(-50%);z-index:2;text-align:start;line-height:1;opacity:0;transition:opacity .9s ease}
.cc-climb-lockup.in{opacity:1}
.cc-climb-lockup>div{white-space:nowrap;font-family:'Heebo',system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;font-size:clamp(34px,7vw,92px);color:var(--cl-ink);text-shadow:0 6px 30px rgba(0,0,0,.6)}
.cc-climb-lockup .l2{transform:translateX(calc(-1 * var(--cl-step) + var(--cl-nudge)))}
.cc-climb-lockup .l3{transform:translateX(calc(-2 * var(--cl-step) + var(--cl-nudge)));color:var(--cl-clay)}
.cc-climb-cta{display:flex;gap:14px;margin-top:34px;white-space:normal;transform:translateX(calc(-2 * var(--cl-step) + var(--cl-nudge)))}
.cc-climb-hint{position:absolute;inset-inline:0;bottom:4.5vh;text-align:center;z-index:2;color:#6a625a;opacity:.85;font-family:'Heebo',sans-serif;font-size:14px;letter-spacing:.04em}
@media (max-width:640px){.cc-climb{height:240vh}.cc-climb-lockup{top:auto;bottom:13vh;transform:none}.cc-climb-lockup>div{font-size:clamp(30px,9vw,44px)}.cc-climb-cta{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.cc-climb{height:100vh}.cc-climb-stage{position:relative}}
/* chatbot launcher (global, z-index 2147483001) appears only AFTER the climb hero finishes */
[class*="2147483001"]{transition:opacity .45s ease}
html.cc-climb-active [class*="2147483001"]{opacity:0!important;pointer-events:none!important}

/* ============================================================
   Chatbot widget — HOMEPAGE ONLY (this sheet loads only on `/`).
   The widget is portaled into <body>, where the theme's global
   <button> reset (padding:0;border:0;background:none;font:inherit)
   strips every control. The React component already counter-scales
   the theme's tiny vw root via an inline `zoom`, so here we only
   restore the buttons' box styling. Sizes stay in rem so they ride
   that same zoom. Unlayered + class-level specificity → beats both
   the bare-`button` reset and Tailwind's layered utilities. The
   shared component is untouched on every other page.
   ============================================================ */
.cc-cbtn{border-style:solid;cursor:pointer}
/* suggested-question chips — light-green WhatsApp */
.cc-cbtn--chip{display:inline-block;padding:.5rem 1rem;border-width:1px;border-color:#c4ebcf;border-radius:1.1rem;background:#dcf6e3;color:#1c6b3a;font-size:.85rem;line-height:1.4;transition:background-color .18s}
.cc-cbtn--chip:hover{background:#bdeccb}
/* "talk to a human" + in-bubble live action — dark-brand outline */
.cc-cbtn--live{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-width:1px;border-color:rgba(58,42,24,.2);border-radius:1.1rem;background:rgba(58,42,24,.06);color:#3a2a18;font-size:.85rem;font-weight:500;transition:background-color .18s,color .18s}
.cc-cbtn--live:hover{background:#3a2a18;color:#fff}
/* primary in-bubble action — green solid */
.cc-cbtn--go{display:inline-block;padding:.4rem .85rem;border-width:0;border-radius:1.1rem;background:#25d366;color:#fff;font-size:.82rem;font-weight:600;transition:background-color .18s}
.cc-cbtn--go:hover{background:#1da851}
/* header icon buttons — translucent on the dark header */
.cc-cbtn--hicon{display:inline-flex;align-items:center;justify-content:center;padding:.5rem;border-width:1px;border-color:rgba(255,255,255,.15);border-radius:.6rem;background:rgba(255,255,255,.1);color:#fff;transition:background-color .18s}
.cc-cbtn--hicon:hover{background:rgba(255,255,255,.2)}
/* composer paperclip — subtle on the light bar */
.cc-cbtn--icon{display:inline-flex;align-items:center;justify-content:center;padding:.625rem;border-width:0;border-radius:999px;background:transparent;color:#667781;transition:background-color .18s}
.cc-cbtn--icon:hover{background:rgba(0,0,0,.05)}
/* send — green round */
.cc-cbtn--send{display:inline-flex;align-items:center;justify-content:center;padding:.75rem;border-width:0;border-radius:999px;background:#25d366;color:#fff}
.cc-cbtn--send:hover{background:#1da851}
.cc-cbtn--send:disabled{opacity:.4;cursor:not-allowed}

/* =====================================================================
   ===================  MOBILE — MINIMAL FIXES ONLY  ===================
   The Tresmares theme is already responsive on phones (the ring, the number
   columns, the word/number/parallax animations all have their own mobile
   behaviour). We do NOT re-design them here. This block ONLY repairs what the
   React port broke: (1) the theme's menu-toggle JS never runs, (2) a couple of
   desktop-only home-design overrides that don't fit small screens. Everything
   else is left to the theme.  (≥1101px is untouched.)
   ===================================================================== */
@media (max-width:1100px){

  /* (1) MAP RING — home-design forces overflow:visible on the container (desktop:
     so the centred lede/CTA can overflow the ring). But the theme's MOBILE ring is
     a big wheel that must be clipped by overflow:hidden down to the visible arc.
     home-design's !important was leaking the whole wheel out (the stray diagonal
     cards). Restore the theme's clip on phones. */
  .home-root .component--map .circle-container{ overflow:hidden !important; }

  /* (2) "תכלס" STATEMENT — its .title/.label are authored data-desktop, and the
     theme hides [data-desktop] on phones, so the whole sentence disappeared.
     Show them (the per-word reveal animation then runs as designed). */
  .home-root .component--textblocklarge .title[data-desktop],
  .home-root .component--textblocklarge .label[data-desktop]{ display:block !important; }

  /* (3) WORKING HAMBURGER MENU — the theme's overlay panel is intact (it slides in
     from translateY(-120%)); only its toggle JS is missing. home-scripts.js toggles
     .cc-menu-open; here we (a) neutralise the header's transform/will-change, which
     otherwise makes it a containing-block that traps the fixed overlay (menu looked
     empty), (b) slide the panel in, (c) make it RTL + tappable (theme authored it
     LTR + pointer-events:none because its own JS enabled the links). */
  html.cc-menu-lock, body.cc-menu-lock{ overflow:hidden !important; }
  .home-root .header.cc-menu-open{ transform:none !important; will-change:auto !important; }
  .home-root .header.cc-menu-open .navigation .content{ transform:translateY(0) !important; }
  /* centre the links vertically + comfortable line spacing (the theme stacks them
     at the very top with a big empty gap below) */
  .home-root .header .navigation .content{ display:flex !important; flex-direction:column; justify-content:center; align-items:stretch; padding-top:0 !important; }
  .home-root .header .navigation .content .menu li a{ padding-block:min(2.4vw,11px) !important; }
  .home-root .header .navigation .content,
  .home-root .header .navigation .content .menu{ text-align:right !important; direction:rtl !important; }
  .home-root .header .navigation .content .menu,
  .home-root .header .navigation .content .menu li,
  .home-root .header .navigation .content .menu li a,
  .home-root .header .navigation .content .cc-auth-2,
  .home-root .header .navigation .content .cc-auth-2 a{ pointer-events:auto !important; }
  /* menu links: comfortable dark-on-cream, right-aligned */
  .home-root .header .navigation .content .menu li a{ color:#16130f !important; text-align:right !important; }
  /* the theme ships the menu links + auth block at opacity:.0001 and offset — its
     reveal JS fades them in on open. That JS never runs, so the menu looked empty.
     Reveal them via CSS whenever the overlay is open. */
  .home-root .header.cc-menu-open .navigation .content .menu li a,
  .home-root .header.cc-menu-open .navigation .content .menu li,
  .home-root .header.cc-menu-open .navigation .content .cc-auth-2{ opacity:1 !important; transform:none !important; }
  /* the register/login pair → full-width inside the overlay */
  .home-root .header .navigation .content .cc-auth-2{ display:flex !important; margin-top:6vw; }
  /* trigger bars → X while the menu is open */
  /* התמה מגדירה flex-wrap:wrap עם מיכל נמוך → פס שלישי עוטף לעמודה שנייה.
     כפיית nowrap + גובה 16px כדי ש-3 הפסים יתפזרו אחיד (מרווח ~5px ביניהם) */
  .home-root .header .trigger .bars{ flex-wrap:nowrap !important; height:16px !important; width:22px !important; justify-content:space-between !important; }
  .home-root .header .trigger .bars span{ transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease; }
  .home-root .header.cc-menu-open .trigger .bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .home-root .header.cc-menu-open .trigger .bars span:nth-child(2){ opacity:0; transform:scaleX(.3); }
  .home-root .header.cc-menu-open .trigger .bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* The theme swaps to its mobile layout at ≤1100px (its primary breakpoint), so
   these RTL corrections must cover the whole mobile range — capped at 768 they
   left tablets (769–1100: iPad 834/1024) with the mobile layout but text flowing
   the wrong way. Desktop (≥1101) is untouched. */
@media (max-width:1100px){
  /* "מה בדיוק לומדים" label — the theme's .actions is direction:rtl +
     justify-content:flex-end, and in an RTL flex row flex-end resolves to the LEFT
     edge, so the label sat on the left. Lay it out as a plain right-aligned block. */
  .home-root .component--gridnumbers .text-block-left{ text-align:right !important; }
  .home-root .component--gridnumbers .text-block-left .actions{ display:block !important; text-align:right !important; }
  .home-root .component--gridnumbers .text-block-left .actions .link{ display:inline-block !important; margin:0 !important; }
  .home-root .component--gridnumbers .text-block-left .actions .link .text{ text-align:right !important; }

  /* hero lockup + CTAs — nudge toward the right edge (inset-inline-start = the
     RIGHT edge in RTL; smaller = further right). */
  .home-root .cc-climb-lockup{ inset-inline-start:14px !important; text-align:right !important; }

  /* MAP RING labels — the theme's card names are white-space:nowrap and sized for
     big desktop cards; on the small mobile ring cards the long names ("אפליקציית
     פתקים") overflow and collide with the neighbour. Shrink + wrap them so each
     name stays inside its own card. */
  .home-root .component--map .circle-item .name{ width:100% !important; text-align:center !important; }
  .home-root .component--map .circle-item .name .title{ font-size:11px !important; line-height:1.15 !important; white-space:normal !important; word-break:break-word; }
}

/* Chatbot suggested-question chips on phones — the fresh-start panel looked sparse
   (small centred chips, lots of empty space). Fill the width so it reads full and
   tidy. (Global, not .home-root — the widget is portaled into <body>; this sheet
   only loads on the homepage where the bubble lives.) */
@media (max-width:640px){
  .cc-cbtn--chip{ display:block; width:100%; text-align:right; }
  .cc-cbtn--live{ width:100%; justify-content:flex-start; }
}

/* ============ MOBILE — round 2 (from Maya's live feedback) ============ */
/* ≤1100 (the theme's mobile breakpoint) so tablets get these RTL fixes too. */
@media (max-width:1100px){
  /* LOGO — it was distorted: object-fit:fill + a forced narrow width squashed the
     wordmark. Restore its natural aspect ratio. */
  .home-root .header .brand[data-mobile] img,
  .home-root .header .brand[data-desktop] img,
  .home-root .header .brand img{ width:auto !important; max-width:none !important; height:38px !important; object-fit:contain !important; }

  /* "מה בדיוק לומדים" intro — full width, right-aligned. The label reads as a small
     eyebrow with an orange underline (like the section eyebrows elsewhere on the
     site), and the paragraph stays narrow — about half width. */
  .home-root .component--gridnumbers.vertical .columns .item:first-child{ width:100% !important; }
  /* pull the whole intro block (eyebrow + paragraph) in from the right edge so it
     isn't flush against the screen — both move left together. */
  .home-root .component--gridnumbers.vertical .columns .item:first-child .text-block-left{ width:100% !important; padding:0 22px 0 0 !important; }
  .home-root .component--gridnumbers .text-block-left .actions{ display:block !important; text-align:right !important; margin-bottom:18px !important; }
  .home-root .component--gridnumbers .text-block-left .actions .link .text{
    display:inline-block !important; font-size:13px !important; font-weight:800 !important;
    letter-spacing:.14em !important; color:#B5532D !important;
  }
  .home-root .component--gridnumbers .text-block-left .actions .link .text::after{
    content:"" !important; display:block; width:44px; height:2px; background:#B5532D; margin:9px 0 0 auto;
  }
  /* The .text-block-left wrapper is direction:ltr (inherited from the theme's LTR
     document), which pushed every block inside it to the LEFT — that's why the
     paragraph kept sitting on the wrong side. Force RTL so it flows from the right,
     and cap it at 72% (≈28% empty on the left). */
  .home-root .component--gridnumbers .text-block-left{ direction:rtl !important; text-align:right !important; }
  .home-root .component--gridnumbers .text-block-left .wysiwyg{ max-width:none !important; width:100% !important; direction:rtl !important; margin:0 !important; }
  .home-root .component--gridnumbers .text-block-left .wysiwyg p{ display:block !important; width:72% !important; max-width:72% !important; margin:0 0 0 auto !important; text-align:right !important; }
}

@media (max-width:640px){
  /* HERO lockup — the CTA had a translateX that pushed it off-screen left (l:-14),
     and the whole lockup sat 28px off the right edge. Kill the CTA shift and pull
     the lockup toward the right edge (Maya: "a bit more right"). */
  .home-root .cc-climb-lockup{ inset-inline-start:auto !important; inset-inline-end:16px !important; }
  .home-root .cc-climb-cta{ transform:none !important; justify-content:flex-end; }
}

/* ============================================================
   MOBILE NAV  →  "תפריט הקורס" — classic restaurant-menu overlay
   ------------------------------------------------------------
   Maya's request: the hamburger overlay on phones should read like an
   elegant cream-paper restaurant menu (serif, ornaments, dotted leaders),
   NOT a plain white list. Scoped to the overlay only (≤1100px, where the
   hamburger shows). The desktop nav is a horizontal bar — untouched.
   DOM: .navigation > .content > ul.menu.menu-header > li > a  (×7)
                                > div.cc-auth-2 > a.cc-auth-half (הרשמה|כניסה)
   ============================================================ */
@media (max-width:1100px){
  .home-root .header{
    --mnu-paper:#F5ECDC; --mnu-ink:#221B12; --mnu-terra:#B5532D;
    --mnu-line:rgba(34,27,18,.16); --mnu-serif:'Frank Ruhl Libre','PP Fragment',Georgia,serif;
  }

  /* the sliding panel = warm paper instead of flat white */
  .home-root .header .navigation,
  .home-root .header.cc-menu-open .navigation .content{ background:var(--mnu-paper) !important; }
  /* the top strip (logo + X) blends into the paper while the menu is open */
  .home-root .header.cc-menu-open{ background:var(--mnu-paper) !important; box-shadow:none !important; }
  .home-root .header.cc-menu-open .trigger .bars span{ background:var(--mnu-ink) !important; box-shadow:none !important; }
  /* המבורגר סגור: לבן + צל כשהתפריט שקוף מעל ההירו (קריא על כל פריים של תמונת הטיפוס), כהה כשהתפריט הופך לרקע קרם בגלילה — כמו קישורי התפריט */
  .home-root .header .trigger .bars span{ background:#fff !important; box-shadow:0 1px 3px rgba(20,15,10,.55),0 0 2px rgba(20,15,10,.4); transition:background .3s ease,box-shadow .3s ease; }
  .home-root .header.cc-nav-solid .trigger .bars span{ background:#16130f !important; box-shadow:none !important; }

  /* layout: masthead pinned top → dishes flow → reservation footer pinned bottom */
  /* no side padding on the container → the auth bar spans edge-to-edge; the
     text content gets its 30px inset from the list (.menu) instead. */
  .home-root .header .navigation .content{
    justify-content:flex-start !important;
    padding:22px 0 calc(24px + env(safe-area-inset-bottom,0px)) !important;
    gap:0 !important;
  }
  .home-root .header .navigation .content .menu.menu-header{ padding-inline:30px !important; }

  /* the overlay is a fixed-height panel (theme: height:calc(100dvh - masthead);
     overflow:hidden) — on short screens (landscape, small phones) the 7 dishes +
     masthead + reservation bar overflow and the bottom ones become unreachable.
     Let the open menu scroll, and drop the theme's per-item margin so the dishes
     sit flush against their dotted dividers (the classic-menu rhythm comes from
     the <a> padding + border-bottom, not a gap after each line). */
  .home-root .header.cc-menu-open .navigation .content{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; }
  .home-root .header .navigation .content .menu li{ margin-bottom:0 !important; }

  /* ---- masthead: serif title ---- */
  .home-root .header .navigation .content::before{
    content:"תפריט הקורס";
    display:block; text-align:center; order:-2;
    font-family:var(--mnu-serif); font-weight:500; font-size:29px; line-height:1.12;
    color:var(--mnu-ink); letter-spacing:.01em; padding:2vh 0 0;
  }
  /* ---- masthead: a small terracotta diamond ornament under the title ---- */
  .home-root .header .navigation .content .menu.menu-header::before{
    content:"◆";
    display:block; text-align:center;
    font-size:10px; color:var(--mnu-terra); opacity:.8;
    padding:10px 0 12px; margin-bottom:2px;
  }

  /* ---- the dishes: number · name · dotted leader ---- */
  .home-root .header .navigation .content .menu.menu-header > li{
    border-bottom:1px solid var(--mnu-line);
  }
  .home-root .header .navigation .content .menu.menu-header > li:last-child{ border-bottom:none; }
  .home-root .header .navigation .content .menu li a{
    display:flex !important; align-items:baseline;
    font-family:var(--mnu-serif) !important; font-weight:500;
    font-size:22px !important; line-height:1.1; color:var(--mnu-ink) !important;
    padding:13px 2px !important; text-align:right !important; letter-spacing:0;
  }
  /* the serif italic dish number (01, 02 …) on the far (left) end. Explicit
     per-item numbers (fixed 7-item nav) — bulletproof, no CSS counters. */
  .home-root .header .navigation .content .menu li a::after{
    content:""; order:2; align-self:center;
    /* the theme uses a::after as an absolutely-positioned hover underline — opt out
       so our number rejoins the flex row and actually shows. */
    position:static !important; inset:auto !important; width:auto !important;
    height:auto !important; background:none !important; transform:none !important;
    font-family:var(--mnu-serif); font-style:italic; font-weight:400;
    font-size:14px; color:var(--mnu-terra); opacity:.85;
  }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(1) a::after{ content:"01"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(2) a::after{ content:"02"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(3) a::after{ content:"03"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(4) a::after{ content:"04"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(5) a::after{ content:"05"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(6) a::after{ content:"06"; }
  .home-root .header .navigation .content .menu.menu-header > li:nth-child(7) a::after{ content:"07"; }
  /* the dotted leader that grows to fill the gap between name and number */
  .home-root .header .navigation .content .menu li a::before{
    content:""; order:1; flex:1 1 auto; align-self:center;
    margin:0 .8em; position:relative; top:-3px;
    border-bottom:1.5px dotted rgba(34,27,18,.32);
  }

  /* ---- footer: edge-to-edge split bar (no rounded pills). הרשמה = filled
     terracotta on the right, כניסה = cream on the left, thin divider between.
     Full-width because .content has no side padding (see above). ---- */
  .home-root .header .navigation .content .cc-auth-2{
    margin-top:auto !important; margin-inline:0 !important; width:100% !important;
    display:flex !important; gap:0 !important; overflow:hidden !important;
    border-radius:0 !important; border-top:none !important;
    background:#2a2a2a !important; padding:0 !important;
  }
  /* both halves share the dark bar, white text; thin light divider between them */
  .home-root .header .navigation .content .cc-auth-2 .cc-auth-half,
  .home-root .header .navigation .content .cc-auth-2 .cc-auth-half:first-child,
  .home-root .header .navigation .content .cc-auth-2 .cc-auth-half + .cc-auth-half{
    flex:1 1 50% !important; border-radius:0 !important; border:none !important;
    background:transparent !important; color:#fff !important;
    padding:22px 0 !important; white-space:nowrap;
    font-family:'Heebo',system-ui,sans-serif !important; font-size:16px !important; font-weight:600 !important;
  }
  .home-root .header .navigation .content .cc-auth-2 .cc-auth-half + .cc-auth-half{
    border-inline-start:1px solid rgba(255,255,255,.15) !important;
  }

  /* the chatbot launcher (portaled to <body>, z-index ~2147483001) must not float
     over the open menu — hide it whenever the overlay is open (html.cc-menu-lock),
     mirroring how it's hidden during the climb hero above. */
  html.cc-menu-lock [class*="2147483001"]{ opacity:0 !important; pointer-events:none !important; }
}

/* ===== Mobile: drop the reveal blur (GPU-costly on phones) =====
   The scroll-in reveals animate filter: blur(6-7px) → none. Animating blur is the
   heaviest part of the reveal for a mobile GPU. On phones we keep the fade + slide
   reveal (compositor-cheap) and skip the blur; desktop is untouched. Same selectors
   as the base rules above, placed last so source order wins (no !important needed). */
@media (max-width:768px){
  .cc-syllabus .les,.cc-syllabus .ei,.cc-about .reveal{ filter:none; }
}

/* =====================================================================
   ===== HOMEPAGE POLISH — 5 שדרוגי-פוליש (savor.it + telescope.fyi) =====
   כל טכניקה בבלוק נפרד ומסומן. תוספת בלבד — placed last so source order
   wins (no !important). כל בלוק קל להסרה: מוחקים בין ה-BEGIN/END שלו.
   הפלטה מופתה לטוקנים הקיימים (--ink #16130f, --orange #B5532D וכו').
   ===================================================================== */

/* -------- POLISH 1 · BEGIN — מערכת easing כטוקנים (Penner + מותאמים) --------
   הכי בטוח: מגדיר עקומות-תנועה כ-CSS vars scoped ל-.home-root, ומחליף את
   ה-transitions של כפתורי ה-CTA מ-`ease`/`.2s ease` לעקומות עשירות. אותה
   תזוזה בדיוק — רק העקומה משתנה. reduced-motion מכובד למטה בבלוק 5. */
.home-root{
  --ease-out-power2:cubic-bezier(.25,.46,.45,.94);
  --ease-out-power4:cubic-bezier(.23,1,.32,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-out-swift:cubic-bezier(.55,0,.1,1);
  --ease-smooth-out:cubic-bezier(.4,0,0,1);
  --ease-in-out-power1:cubic-bezier(.45,0,.55,1);
}
/* כפתורי ה-CTA של דף הבית — אותם משטחים, עקומה עשירה במקום ברירת-המחדל */
.home-root .hero-cta{ transition:transform .45s var(--ease-out-power4),background-color .35s var(--ease-smooth-out),color .35s var(--ease-smooth-out); }
.home-root .component--map .wysiwyg a.map-cta{ transition:background .38s var(--ease-smooth-out),transform .45s var(--ease-out-power4),color .38s var(--ease-smooth-out) !important; }
.cc-cta .ct-btn{ transition:transform .45s var(--ease-out-power4),box-shadow .45s var(--ease-out-power4); }
.cc-pricing .cp-btn{ transition:transform .45s var(--ease-out-power4),box-shadow .45s var(--ease-out-power4); }
.cc-footer .cf-cta{ transition:background .35s var(--ease-smooth-out),transform .45s var(--ease-out-power4); }
.home-root .header .cc-auth-2 .cc-auth-half{ transition:background-color .3s var(--ease-smooth-out); }
/* -------- POLISH 1 · END -------- */

/* -------- POLISH 2 · BEGIN — כפתורים עם juice (color-invert + letter-roll) --------
   2 טריקים, כולם RTL-safe, גדורים ל-hover:hover (מגע לא מקבל hover טפילי):
   (א) היפוך-צבע ב-hover דרך CSS-vars — הכפתור הכהה מתהפך לקרם והפוך.
   (ב) גלגול-אותיות: splitter ב-home-scripts עוטף כל אות ב-.cc-ch (RTL-safe —
       עברית לא מצטרפת cursive ואין nikud בתוויות), וכאן מנפישים slideUpDown
       עם stagger לפי --i. אם ה-splitter לא רץ — הכפתור פשוט לא מגלגל (fallback). */
@media (hover:hover){
  /* (א) היפוך-צבע — CTA ראשי כהה → קרם */
  .home-root .hero-cta--primary{ --inv-bg:#FBF7F2; --inv-fg:#16130f; }
  .home-root .hero-cta--primary:hover{ background:var(--inv-bg); color:var(--inv-fg); }
  .home-root .hero-cta--primary:hover .chev{ color:#B5532D; }
  /* CTA פרייסינג (gradient כתום) → הופך למילוי כהה */
  .cc-pricing .cp-btn:hover{ background:#16130f; }
  /* footer CTA (כתום) → כהה */
  .cc-footer .cf-cta:hover{ background:#16130f; }

  /* (ב) גלגול-אותיות — פועל רק אחרי ש-splitter הוסיף .cc-ch */
  .home-root .hero-cta .cc-ch{ display:inline-block; white-space:pre; will-change:transform; }
  @keyframes cc-charRoll{ 0%{ transform:translateZ(0); } 50%{ transform:translate3d(0,-42%,0); } 100%{ transform:translateZ(0); } }
  .home-root .hero-cta:hover .cc-ch{ animation:cc-charRoll .42s var(--ease-in-out-power1) calc(var(--i) * 20ms); }
}
/* -------- POLISH 2 · END -------- */

/* POLISH 3 (fluid-type clamp על ה-display) הוסר — הוא דרס את סקאלת ה-display
   של התמה גם במובייל (הרצפה 40px הקטינה את המספרים מ-47.7px) וגם במסך רחב
   (התקרה חתכה את --large מ-72px ל-60px). התמה כבר רספונסיבית (vw + caps למובייל),
   אז ההסרה מחזירה את המידות המקוריות של מאיה בכל רוחב-מסך. */

/* -------- POLISH 4 · BEGIN — חשיפת כותרת מלמטה (line-mask, descender-safe) --------
   מיושם על כותרת ה-FAQ בלבד (.fq-title) — כותרת ניטרלית שאין לה אנימציה משלה
   (לא שכבת ה-GSAP של ה-hero, לא ה-reveal של .cc-about). כך אין התנגשות עם שכבת
   האנימציות של מאיה. ה-JS מפצל את הכותרת ל"מילים" ועוטף כל אחת במסכה
   (overflow:hidden); ב-IntersectionObserver המילים מחליקות פנימה מלמטה עם
   stagger לפי --wi. טריק ה-descenders: padding-bottom + margin-bottom שלילי כדי
   שזנבות ק/ף/ן/ץ/ג׳ לא ייחתכו במסכה. transform+opacity בלבד (GPU-cheap, ידידותי-
   מובייל, בלי blur). פיצול-מילים (לא תווים) שומר על ה-<em> ועל תוכן ה-admin ו-RTL. */
.home-root .cc-faq .fq-title .cc-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
.home-root .cc-faq .fq-title .cc-word > *{ display:inline-block; transform:translateY(112%); opacity:0; will-change:transform; }
.home-root .cc-faq .fq-title.cc-in .cc-word > *{
  transform:translateY(0); opacity:1;
  transition:transform .8s var(--ease-out-power4) calc(var(--wi) * 70ms),
             opacity .8s var(--ease-out-power4) calc(var(--wi) * 70ms);
}
@media (prefers-reduced-motion:reduce){
  .home-root .cc-faq .fq-title .cc-word > *{ transform:none; opacity:1; transition:none; }
}
/* -------- POLISH 4 · END -------- */

/* -------- POLISH 5 · BEGIN — סמן עם spring (desktop בלבד) --------
   עיגול-מבטא שרודף את העכבר בהשהיה חלקה (lerp). קל להסרה: מוחקים את הבלוק הזה
   + בלוק ה-JS ב-home-scripts. gated ל-hover:hover + pointer:fine (לא מוזרק כלל
   במגע/מובייל — ה-JS יוצא מוקדם). ה-rAF יחיד ונעצר כשהעיגול הדביק את היעד
   (self-limiting — לא רץ כל פריים על כל הדף). mix-blend-mode לניגודיות על כל רקע. */
.cc-cursor{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1.5px solid #B5532D; background:rgba(181,83,45,.10);
  pointer-events:none; z-index:2147482000; margin:-13px 0 0 -13px;
  transform:translate3d(-100px,-100px,0) scale(0); opacity:0;
  transition:opacity .3s var(--ease-smooth-out), scale .25s var(--ease-out-power4);
  mix-blend-mode:multiply; will-change:transform;
}
.cc-cursor.on{ opacity:1; }
/* מסתיר את סמן-הברירת-מחדל רק על משטחים אינטראקטיביים? לא — משאירים את הסמן
   המקורי (הדביקה מוסיפה שכבת מבטא בלבד, לא מחליפה — כך שום לחיצה לא נפגעת). */
@media (prefers-reduced-motion:reduce){ .cc-cursor{ display:none !important; } }
@media (hover:none),(pointer:coarse){ .cc-cursor{ display:none !important; } }
/* -------- POLISH 5 · END -------- */

/* =====================================================================
   ===== CINEMATIC — טרנספורמציה קולנועית לדף הבית (4 כיוונים) =====
   כל כיוון בבלוק CINEMATIC N · BEGIN/END — בר-הסרה נקודתית. תוספת בלבד,
   placed last so source order wins (no !important). מופה לטוקנים הקיימים
   (--ink #16130f · --orange #B5532D · --line #e7ddd1 · easing tokens
   מ-POLISH 1). RTL תקין בכל טכניקה. מובייל: transform+opacity בלבד (בלי
   blur, GPU-cheap), reveals דרך IntersectionObserver בלבד (בלי לולאת-rAF
   גלובלית — כדי לא להחזיר את קרטוע-הגלילה מההיסטוריה).
   ===================================================================== */

/* -------- CINEMATIC 1 · BEGIN — גלילה קולנועית (fade + translateY + rotation:7) --------
   טכניקת exoape #69 (reveal-חתימה): כל בלוק ניטרלי נחשף כשגוללים אליו עם
   `autoAlpha:0, rotation:7, yPercent≈` → 0, easeOut ארוך ורך. מיושם רק על
   סקשנים שאין להם אנימציה משלהם (pricing, cta, footer-top) — לא נוגע בשכבת
   ה-GSAP של מאיה (climb/hero/whychapters/map/gridnumbers) ולא ב-IO הקיים
   (.cc-about .reveal / .cc-syllabus .les/.ei / POLISH-4 fq-title).
   ה-transform-origin ב-50%/עם RTL אדיש — rotation סימטרי. blur מושמט לגמרי
   כדי לשמור על מובייל חלק. reduced-motion מכובד למטה. */
.home-root [data-cine]{
  opacity:0;
  transform:translateY(38px) rotate(3.2deg);
  transform-origin:center bottom;
  will-change:transform,opacity;
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);
}
.home-root [data-cine="2"]{ transition-delay:.10s; }
.home-root [data-cine="3"]{ transition-delay:.18s; }
.home-root [data-cine].cine-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .home-root [data-cine]{ opacity:1 !important; transform:none !important; transition:none !important; }
}
/* -------- CINEMATIC 1 · END -------- */

/* -------- CINEMATIC 2 · BEGIN — מדיה חיה (grayscale→color + scale ב-hover) --------
   טכניקת obys #62 (CSS-בלבד, לא shader): כרטיסי הדמו בגלריית "מה תלמדו לבנות"
   (.component--map .circle-item) יושבים באפור-רך במנוחה ונצבעים + מתקרבים קלות
   ב-hover — מסמן שהם חיים ולחיצים. תוספת CSS טהורה: לא נוגע בסיבוב ה-GSAP של
   המעגל ולא במבנה. gated ל-hover:hover (מגע לא מקבל hover טפילי — נשאר צבעוני
   מלא בטלפון). זו לא גלריית resn שמאיה עיצבה — זו גלריית המעגל של דף הבית. */
@media (hover:hover){
  .home-root .component--map .circle-item .image img{
    filter:grayscale(.72) contrast(.97);
    transition:filter .55s var(--ease-out-expo), transform .55s var(--ease-out-power4);
    will-change:filter,transform;
  }
  .home-root .component--map .circle-item:hover .image img{
    filter:grayscale(0) contrast(1);
    transform:scale(1.045);
  }
  /* הכותרת מתחת לכרטיס מקבלת נגיעת-כתום ב-hover (רמז אינטראקטיבי עדין) */
  .home-root .component--map .circle-item .name .title{
    transition:color .4s var(--ease-smooth-out);
  }
  .home-root .component--map .circle-item:hover .name .title{ color:var(--orange); }
}
/* -------- CINEMATIC 2 · END -------- */

/* -------- CINEMATIC 3 · BEGIN — כותרות קינטיות (חשיפת מילה-מילה במסכה), תחתית בלבד --------
   מנגנון ה-line-mask של POLISH-4 (על .fq-title) מוחל על שתי הכותרות בתחתית הדף
   בלבד: כותרת ה-CTA הכתום (.ct-h) וכותרת ה-CTA הכהה/פוטר (.cf-h). כל מילה "עולה"
   ממסכה (overflow:hidden, translateY 112%→0) בסטגר לפי --wi, easeOutPower4 ~.8s.
   פיצול לפי מילים (לא תווים — שובר עברית/ניקוד/סופיות); ה-<em> נשאר מילה אטומית
   אחת וה-<br> נשמר. אסור להתנגש בכותרות שכבר מונפשות ע"י שכבת ה-GSAP (hero/
   whychapters) או בכותרת ה-pricing (.cp-h — נשארת כמו שהיא). .ct-h יושבת בבלוק
   שכבר מקבל CINEMATIC-1 (fade על .ct-copy) — כאן הכותרת עושה word-reveal והבלוק
   fade, בלי כפילות אנימציה על אותו טקסט. primitives זהים ל-POLISH-4 (descender-
   safe padding/margin שלילי, transform+opacity בלבד). ה-JS מזריק .cc-word+.cc-in. */
.home-root .cc-cta .ct-h .cc-word,
.home-root .cc-footer .cf-h .cc-word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
.home-root .cc-cta .ct-h .cc-word > *,
.home-root .cc-footer .cf-h .cc-word > *{ display:inline-block; transform:translateY(112%); opacity:0; will-change:transform; }
.home-root .cc-cta .ct-h.cc-in .cc-word > *,
.home-root .cc-footer .cf-h.cc-in .cc-word > *{
  transform:translateY(0); opacity:1;
  transition:transform .8s var(--ease-out-power4) calc(var(--wi) * 70ms),
             opacity .8s var(--ease-out-power4) calc(var(--wi) * 70ms);
}
@media (prefers-reduced-motion:reduce){
  .home-root .cc-cta .ct-h .cc-word > *,
  .home-root .cc-footer .cf-h .cc-word > *{ transform:none; opacity:1; transition:none; }
}
/* -------- CINEMATIC 3 · END -------- */