/* ============================================
   האתר של גיתית מלכא. גיליון הסגנון הראשי.
   כל ערך מגיע מ-tokens.css.

   שני חוקים שהם פסילה אוטומטית ולא הערה:
   1. אין כותרת שאינה במשקל 900. אם היא כבדה מדי, מקטינים גודל ולא משקל.
   2. לקורל יש שימוש אחד, פעולה או הדגשה מכוונת אחת לכל מסך נראה.

   מערכת תנועה (26.7.2026, לבקשת גיתית): גילוי בגלילה, לשוניות,
   כרטיסי היפוך ומרקיזה. הכל transform/opacity בלבד,
   והכל כבוי תחת prefers-reduced-motion.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  letter-spacing: 0;              /* לעולם לא שלילי. מוחק את ההבדל בין ר ל-ד */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  line-height: var(--lh-heading);
  margin: 0;
}
h3, h4 { font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: 1.35; margin: 0; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }

/* מספרים ב-RTL מתהפכים ליד סימני פיסוק */
.num, time, .tel { direction: ltr; unicode-bidi: isolate; }

a { color: var(--coral-text); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* איזון שבירת שורות (27.7.2026). balance מאזן כותרות ומונע שורה עם מילה
   בודדת, pretty מונע יתום בשורה האחרונה של פסקה. כותרת הפתיח מוחרגת:
   הגובה שלה מכויל למסך אחד, ו-balance עלול להחזיר את חריגת הגובה שתוקנה. */
h1, h2, h3, h4, .principle__name, .flip__q, .spot__quote p { text-wrap: balance; }
.hero h1 { text-wrap: initial; }
p, .lead, .principle__quote, .change__item { text-wrap: pretty; }

/* סימון טקסט בקורל במקום הכחול של הדפדפן. מצב רגעי שהמשתמש יוזם,
   ולכן לא נחשב מופע קורל שני על המסך. קורל על דיו נותן 6.03. */
::selection { background: var(--coral); color: var(--ink); }

/* טבעת פוקוס בשתי שכבות. הקורל לבדו נותן 2.77 על רקע המרווה, מתחת ל-3:1
   הנדרש, ולכן מסביבו יושבת הילה בצבע דיו. הדיו עובר על כל רקע בהיר באתר,
   והקורל עובר על הדיו, ולכן הצירוף עומד בתקן בכל מקום. */
:focus-visible {
  outline: 3px solid var(--coral-line);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(32, 30, 27, 0.9);
  border-radius: 2px;
}
/* בסקשנים הכהים ההילה מתהפכת לקרם */
.contact :focus-visible,
.flip__back :focus-visible,
.chat__bar :focus-visible,
.logo:focus-visible {
  box-shadow: 0 0 0 8px rgba(251, 246, 238, 0.9);
}

/* עוגני הניווט נוחתים מתחת לתפריט הקבוע בלי זה */
:target, [id] { scroll-margin-block-start: calc(var(--nav-h) + var(--s-6)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -100px;
  background: var(--ink); color: var(--cream); padding: var(--s-3) var(--s-6);
  border-radius: var(--radius); z-index: 200; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* ============ פריסה ============ */

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-side); }
section { padding-block: var(--section-gap); }

/* הוגדל 26.7.2026 לבקשת גיתית: התגיות היו קטנות מדי ביחס לכותרות */
.eyebrow {
  font-size: 1.25rem;
  font-weight: var(--w-black);
  letter-spacing: 0.02em;      /* החריג היחיד למרווח חיובי: תוויות */
  color: var(--coral-text);
  margin: 0 0 var(--s-4);
  display: inline-block;
  transform: rotate(-1.5deg);  /* הטיה עדינה, מהשפה של danad */
}

.lead { font-size: var(--fs-lead); font-weight: var(--w-light); line-height: 1.6; color: var(--ink-soft); }

/* ============ מערכת הגילוי בגלילה ============ */
/* אלמנט עם data-reveal נכנס פעם אחת כשהוא מגיע למסך.
   ילדי אלמנט עם data-reveal-stagger נכנסים בזה אחר זה.
   שער בטיחות: ההסתרה חלה רק תחת .js-reveal, ש-JS מוסיף כשהוא חי.
   אם JS לא נטען, הכל גלוי מהרגע הראשון. */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.js-reveal [data-reveal="fade"] { transform: none; }
.js-reveal [data-reveal="tilt"] { transform: translateY(28px) rotate(1.2deg); }
.js-reveal [data-reveal].revealed { opacity: 1; transform: none; }

.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
[data-reveal-stagger].revealed > * { opacity: 1; transform: none; }
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: 630ms; }

.no-motion [data-reveal], .no-motion [data-reveal-stagger] > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ============ כפתורים ============ */
/* קורל מלא עם טקסט דיו. 6.03, עובר AA. לבן על קורל נכשל (3.44), נמדד */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: var(--w-bold);
  padding: 0.8125rem 1.75rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-spring),
              box-shadow var(--t-hover) var(--ease-out);
}
.btn--primary { background: var(--coral); color: var(--ink); }
.btn--primary:hover {
  background: var(--coral-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-coral);
}
.btn--primary:active { transform: scale(0.97); box-shadow: none; }

.btn--secondary {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 0.75rem 1.6875rem;
}
.btn--secondary:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }

.btn-note { font-size: var(--fs-small); color: var(--ink-soft); margin: var(--s-3) 0 0; }

/* ============ תפריט ============ */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(251, 246, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-state) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--ink-12); }

.nav__inner {
  max-width: var(--container); margin-inline: auto; height: 100%;
  padding-inline: var(--pad-side);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
}

/* הלוגו: הבלוק. נבחר על ידי גיתית 26.7.2026 (כיוון ב מ-logo-options.html).
   חותמת דיו מוטה שתיים מעלות, ה-ת האחרונה בקורל. מתיישר ב-hover */
.logo {
  display: inline-block;
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: 1.25rem; line-height: 1;
  background: var(--ink); color: var(--cream);
  padding: 0.5rem 0.9rem 0.65rem; border-radius: 8px;
  text-decoration: none;
  transform: rotate(-2deg);
  transition: transform var(--t-state) var(--ease-spring);
}
.logo:hover { transform: rotate(0deg) scale(1.04); }
.logo__t { color: var(--coral); font-weight: var(--w-black); }

.nav__links { display: flex; align-items: center; gap: var(--s-8); }
.nav__links a { color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: var(--w-med); }
.nav__links a:hover { text-decoration: underline; text-underline-offset: 0.35em; }
.nav__links .btn { padding: 0.5rem 1.125rem; font-size: var(--fs-small); }

/* 44 על 44 מינימום. שטח מגע, לא רק גודל אייקון */
.nav__toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 0;
  color: var(--ink); font-size: 1.5rem; line-height: 1;
}

.nav__drawer { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__drawer {
    display: block; position: fixed; inset-block: var(--nav-h) 0;
    inset-inline-end: 0;                      /* נפתח מימין. זה RTL */
    width: min(320px, 82vw);
    background: var(--cream); border-inline-start: 1px solid var(--ink-12);
    padding: var(--s-8) var(--s-6);
    transform: translateX(-100%);             /* ב-RTL מחוץ למסך הוא שלילי */
    /* נעילה כפולה: המגירה הסגורה יוצאת מזרימת הפוקוס דרך inert ב-HTML,
       וגם דרך visibility כאן, כדי שדפדפן ישן בלי inert לא ישאיר
       בתוכה חמישה קישורים שאפשר להגיע אליהם ב-Tab ואי אפשר לראות. */
    visibility: hidden;
    transition: transform var(--t-state) var(--ease-out),
                visibility 0s linear var(--t-state);
    z-index: 99;
  }
  .nav__drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--t-state) var(--ease-out), visibility 0s;
  }
  .nav__drawer a {
    display: block; padding: var(--s-3) 0; color: var(--ink);
    text-decoration: none; font-size: 1.1875rem; border-bottom: 1px solid var(--ink-12);
  }
  .nav__drawer .btn { margin-block-start: var(--s-6); width: 100%; text-align: center; border-bottom: none; }
}

/* ============ הפתיח ============ */

/* גובה הפתיח הוא אילוץ אמיתי: הוא חייב להיכנס למסך אחד בלי גלילה.
   מאז 4.9.2026 הצ'אט לא כאן (עבר לעיקרון 1), ולכן הפתיח הוא עמודה אחת
   של קופי בלבד ונכנס למסך בקלות. */
.hero { padding-block: calc(var(--nav-h) + var(--s-12)) var(--s-16); position: relative; }

/* שתי עמודות (5.9.2026): הקופי בימין, התמונה בשמאל. עד אז חצי המסך במחשב היה ריק. */
.hero__inner {
  max-width: var(--container);
  display: grid; grid-template-columns: minmax(0, 780px) minmax(260px, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.hero__copy { max-width: 780px; min-width: 0; }

/* התמונה עם דיסקית קורל מאחור: אותה שפה כמו .tools-hero__portrait, בלי הפרלקסה */
.hero__portrait {
  width: min(360px, 32vw); aspect-ratio: 1;
  justify-self: center; position: relative;
}
.hero__disc {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%; background: var(--coral);
  transform: translate(-14px, 14px);
}
.hero__shot { position: relative; z-index: 1; height: 100%; }
.hero__portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 50%; background: #F0E9DD;
  transform: rotate(2deg);
  transition: transform var(--t-state) var(--ease-spring);
}
.hero__portrait:hover img { transform: rotate(0deg) scale(1.03); }

.hero h1 {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  max-width: 18ch; margin-bottom: var(--s-6);
}
.hero .lead { max-width: 46ch; margin-bottom: var(--s-8); }
/* המילה המתחלפת בכותרת. כל המילים באותו תא inline-grid, ולכן הרוחב קבוע
   לפי הארוכה שבהן ואין קפיצת שורות. ההדגשה במרווה ולא בקורל: הקורל של
   המסך הזה שייך לכפתור. */
.hero__swap {
  display: inline-grid; place-items: center;
  vertical-align: baseline;
}
/* ההדגשה על המילה עצמה ולא על התא, כדי שמילה קצרה ("גיוס") לא תקבל פס ברוחב הארוכה */
.hero__swap > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
  white-space: nowrap;
  padding-inline: 0.12em;
  background-image: linear-gradient(to top, transparent 8%, var(--sage) 8%, var(--sage) 38%, transparent 38%);
}
.hero__swap > span.is-current { opacity: 1; transform: none; transition-delay: 200ms; }
.hero__swap > span.is-leaving { transform: translateY(-0.35em); transition-delay: 0ms; }
.no-motion .hero__swap > span { transition: none; }

/* כפתור עם משפט שלם: מותר לו להישבר לשתי שורות במובייל, ואז הוא ממורכז */
.hero__cta .btn { white-space: normal; text-align: center; line-height: 1.4; }

/* שורת "מי ומה" מעל הכותרת: אותה תגית כמו בשאר האתר, בלי ההטיה */
.hero__who {
  font-size: 1.125rem; font-weight: var(--w-black); letter-spacing: 0.02em;
  color: var(--coral-text); margin: 0 0 var(--s-4);
}

/* כניסת פתיח: הכותרת נחשפת ב-clip, השאר עולה מדורג.
   ההסתרה הראשונית חלה רק תחת .js (מסומן ב-head), כדי שדף בלי JS
   לא יישאר עם כותרת חתוכה ופסקאות שקופות. */
.js .hero h1 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(24px);
}
.is-ready .hero h1 {
  clip-path: inset(0 0 -25% 0);   /* שוליים למטה, כדי שהמילה המתחלפת שנכנסת מלמטה לא תיחתך */
  transform: none;
  transition: clip-path 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.js .hero .lead, .js .hero .hero__cta, .js .hero .hero__verdict, .js .hero__portrait { opacity: 0; transform: translateY(16px); }
.is-ready .hero .lead,
.is-ready .hero .hero__cta,
.is-ready .hero .hero__verdict,
.is-ready .hero__portrait {
  opacity: 1; transform: none;
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.is-ready .hero .lead { transition-delay: 250ms; }
.is-ready .hero .hero__cta { transition-delay: 400ms; }
.is-ready .hero .hero__verdict { transition-delay: 520ms; }
.is-ready .hero__portrait { transition-delay: 150ms; transition-duration: 700ms; }

.no-motion .hero h1 { clip-path: none !important; }
.no-motion .hero h1, .no-motion .hero .lead, .no-motion .hero__portrait,
.no-motion .hero .hero__verdict, .no-motion .hero .hero__cta {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* המשפט שמתחת לכפתור */
.hero__verdict {
  margin: var(--s-6) 0 0; max-width: 52ch;
  font-size: 1.0625rem; font-weight: var(--w-bold);
}

/* ============ הצ'אט. ההדגמה היחידה באתר ============ */
/* חלון שמזכיר ממשק צ'אט אמיתי, בלי לחקות מותג מסוים.
   הטקסט המלא קיים ב-HTML, וה-JS מוחק ומקליד אותו מחדש.
   אם JS לא רץ, רואים את הכל מיד.
   מאז 4.9.2026 יושב בתוך עיקרון 1 בסולם, כהמחשה שלו. */

/* הצ'אט חורג מההזחה של גוף העיקרון ומשתמש ברוחב המלא של עיקרון 1,
   כי 46% פחות ההזחה השאירו לו כ-400 פיקסל בלבד */
.principle__demo { margin-top: var(--s-8); max-width: 600px; }
@media (min-width: 761px) {
  .principle__demo { margin-inline-start: calc(-1 * (5.5rem + var(--s-6))); }
}

.chat {
  background: var(--cream-deep);
  border: 1px solid var(--ink-12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(-0.7deg);
}

/* פס הכותרת הוא כפתור אמיתי. במחשב הוא נראה כמו פס רגיל (התווית מוסתרת),
   בטלפון מופיעה תווית "להציג / לסגור" והחלון נפתח מקופל. */
.chat__bar {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: start;
  padding: 0.75rem var(--s-4);
  background: var(--ink);
  border: 0; border-bottom: 1px solid var(--ink-12);
  font: inherit; color: inherit; cursor: pointer;
}
.chat__toggle-label {
  display: none; margin-inline-start: auto;
  font-size: var(--fs-tag); font-weight: var(--w-bold); color: var(--coral);
}
.chat__body[hidden] { display: none; }
@media (max-width: 760px) {
  .chat__toggle-label { display: inline; }
  /* בטלפון הצ'אט מבטל את הזחת עיקרון 1 (48 פיקסל) ומקבל רוחב מלא */
  .principle:nth-child(1) .principle__demo { margin-inline-start: -48px; }
}
.chat__dots { display: flex; gap: 6px; }
.chat__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(251,246,238,.28); }
.chat__dots i:first-child { background: var(--coral); }
.chat__title {
  font-size: var(--fs-tag); font-weight: var(--w-bold);
  color: #BDB6AC; letter-spacing: 0.02em;
}

/* דחוס בכוונה. זו הדמיה של ממשק צ'אט, לא טקסט קריאה,
   וקנה המידה הקטן הוא חלק ממה שגורם לו להיראות כמו צילום מסך אמיתי. */
.chat__log {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}

.msg { margin: 0; max-width: none; font-size: 0.9375rem; line-height: 1.5; }

/* הבקשה של המשתמש: בועה נעוגנת לימין, כמו בממשק עברי אמיתי */
.msg--user {
  max-width: 86%;
  background: var(--ink); color: var(--cream);
  padding: 0.625rem var(--s-3);
  border-radius: 14px 14px 4px 14px;
}

/* התשובה: רוחב מלא, בלי בועה, עם נקודת סימון קטנה */
.msg--ai {
  position: relative;
  padding-inline-start: 1.9rem;
  color: var(--ink);
}
.msg--ai::before {
  content: ""; position: absolute; inset-block-start: 0.55rem; inset-inline-start: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral);
}

/* הודעה עשירה: מודעת הדרושים המלאה. שומרת שבירות שורה והדגשה.
   line-height נמוך יותר משאר ההודעות, כי היא לבדה חמש פסקאות */
.msg--rich { white-space: pre-line; line-height: 1.45; }
.msg--rich strong { font-weight: var(--w-bold); display: block; margin-bottom: 0.15em; }

/* השורה שמסבירה מה חסר. זו נקודת ההוראה של כל ההדגמה */
.chat__aside {
  margin: var(--s-2) 0; max-width: none;
  font-size: var(--fs-small); font-weight: var(--w-bold);
  color: var(--coral-text);
  border-inline-start: 3px solid var(--coral);
  padding-inline-start: var(--s-3);
  border-radius: 0;
}

/* סמן ההקלדה */
.is-typing::after {
  content: ""; display: inline-block; vertical-align: -2px;
  width: 3px; height: 1.05em; margin-inline-start: 3px;
  background: var(--coral);
  animation: caret 900ms steps(2, start) infinite;
}
@keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* שלוש נקודות בזמן שהצד השני "חושב" */
.chat__thinking {
  display: none; align-items: center; gap: 5px;
  padding-inline-start: 1.9rem; height: 22px;
}
.chat__thinking.is-on { display: flex; }
.chat__thinking i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft);
  animation: think 1.1s var(--ease-out) infinite;
}
.chat__thinking i:nth-child(2) { animation-delay: 160ms; }
.chat__thinking i:nth-child(3) { animation-delay: 320ms; }
@keyframes think { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.chat__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--ink-12); background: var(--cream);
}
.chat__replay {
  font-family: var(--font-body); font-size: var(--fs-tag); font-weight: var(--w-bold);
  background: none; border: none; cursor: pointer; color: var(--coral-text);
  padding: 6px 8px; border-radius: 6px;
}
.chat__replay:hover { background: var(--ink-08); }
.chat__note { font-size: var(--fs-tag); color: var(--ink-soft); margin: 0; }

/* המשפט שסוגר את ההדגמה */
.chat__verdict {
  margin: var(--s-6) 0 0; max-width: 46ch;
  font-size: 1.0625rem; font-weight: var(--w-bold);
}

.no-motion .is-typing::after,
.no-motion .chat__thinking { display: none; }

@media (max-width: 980px) {
  .chat { transform: none; }
}

/* מסך נמוך ורחב (לפטופ טיפוסי): הפתיח נכנס למסך אחד גם בלי דחיסה,
   ורק הריפוד מתהדק קצת כדי שהכפתור יישאר מעל הקיפול. */
@media (min-width: 981px) and (max-height: 820px) {
  .hero { padding-block: calc(var(--nav-h) + var(--s-8)) var(--s-12); }
  .hero__portrait { width: min(300px, 30vw); }
}
@media (min-width: 981px) and (max-height: 700px) {
  .hero { padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-8); }
  .hero h1 { margin-bottom: var(--s-4); }
  .hero .lead { margin-bottom: var(--s-6); }
  .hero__portrait { width: min(240px, 26vw); }
}

/* טאבלט וטלפון: עמודה אחת, תמונה קטנה מעל שורת "מי ומה", כדי שהפתיח יישאר במסך אחד */
@media (max-width: 800px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__portrait { order: -1; justify-self: start; width: 132px; }
  .hero__disc { transform: translate(-8px, 8px); }
}
@media (max-width: 480px) {
  .hero__portrait { width: 104px; }
  .hero__disc { transform: translate(-6px, 6px); }
}

/* ============ הבעיה ============ */
/* מ-4.9.2026: פסקאות ולא שלושה פריטים. הלקוחה מזהה את הארגון שלה בטקסט רץ */

.pain__body { margin-top: var(--s-8); }
.pain__body p { font-size: 1.1875rem; line-height: 1.7; max-width: 62ch; }
.pain__close { font-size: var(--fs-lead); font-weight: var(--w-bold); max-width: 40ch; }

@keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============ איך נראה שינוי בפועל ============ */
/* חמישה פריטים עם קו קצר מעל כל אחד, אותה שפה של הקווים באתר.
   על קרם כהה כדי לסמן מעבר קטע אחרי הבעיה. */

.change { background: var(--cream-deep); }
.change__grid {
  display: grid; gap: var(--s-8); grid-template-columns: repeat(3, 1fr);
  margin-block: var(--s-12) var(--s-12);
}
@media (max-width: 980px) { .change__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .change__grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.change__item { font-size: 1.125rem; line-height: 1.65; margin: 0; max-width: none; color: var(--ink-soft); }
.change__item strong { display: block; color: var(--ink); font-weight: var(--w-black); font-size: 1.25rem; line-height: 1.3; margin-bottom: var(--s-2); }
.change__item::before {
  content: ""; display: block; width: 32px; height: 3px;
  background: var(--ink); margin-bottom: var(--s-4);
  transform-origin: right center;
}
.revealed .change__item::before { animation: line-grow 600ms var(--ease-out) both; }
.no-motion .change__item::before { animation: none !important; }

.change__close { font-size: var(--fs-lead); font-weight: var(--w-bold); max-width: 40ch; margin: 0; }

/* ============ המשפט שמחזיק הכל: לוח פתיחה בתוך סולם העקרונות ============ */
/* היה סעיף עצמאי. מ-4.9.2026 לוח מעוגל בתוך הסולם, לפני עיקרון 1 */

.thesis {
  text-align: center; background: var(--cream-deep);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  margin-bottom: var(--s-16);
}
.thesis__line {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: var(--fs-h1); line-height: var(--lh-heading);
  max-width: 20ch; margin-inline: auto; margin-bottom: var(--s-6);
  color: var(--ink);
}
.thesis > p:not(.thesis__line) { max-width: 52ch; margin-inline: auto; color: var(--ink-soft); }

/* מוטיב "הכלי מתחלף, העיקרון נשאר" (27.7.2026, הוגדל לבקשת גיתית).
   שלוש שורות בערימה: פתיח קטן, השם הגדול עם משיחת מרקר בקורל
   (אותה משיחה כמו בתמונת הקאבר), ו"העיקרון נשאר." שחור ונטוע.
   מה שזז הוא הכלי. מה שלא זז הוא העיקרון. זו הפואנטה.
   כל השמות באותו תא inline-grid, כך שאין קפיצת פריסה. */
.thesis__swap {
  margin-top: var(--s-12);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  color: var(--ink);
}
.thesis__swap-kicker {
  font-size: var(--fs-body);
  font-weight: var(--w-med);
  color: var(--ink-soft);
}
.thesis__swap-close {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--w-black);
}
.thesis__tool {
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.15;
}
.thesis__tool > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  padding-inline: 0.2em;
  /* משיחת המרקר: פס קורל על השליש התחתון של השם, כמו בקאבר */
  background-image: linear-gradient(to top, transparent 6%, var(--coral) 6%, var(--coral) 34%, transparent 34%);
}
/* היוצא עולה ונעלם, הנכנס מגיע מלמטה אחרי שהבמה התפנתה.
   קצב מהיר (מחזור 1500ms): מעבר 220ms, והנכנס בהשהיה 170ms */
.thesis__tool > span.is-current { opacity: 1; transform: none; transition-delay: 170ms; }
.thesis__tool > span.is-leaving { transform: translateY(-0.45em); transition-delay: 0ms; }
.no-motion .thesis__tool > span { transition: none; }

/* האופי של כל שם: משקל והטיה בלבד. rotate נפרד מ-transform,
   כדי שלא יתנגש בתנועת הכניסה והיציאה */
.thesis__tool .t-black { font-weight: var(--w-black); }
.thesis__tool .t-bold  { font-weight: var(--w-bold); }
.thesis__tool .t-med   { font-weight: var(--w-med); }
.thesis__tool .t-reg   { font-weight: var(--w-reg); }
.thesis__tool .t-light { font-weight: var(--w-light); }
.thesis__tool .t-wide  { letter-spacing: 0.06em; }
.thesis__tool .t-tilt  { rotate: -1.4deg; }
.thesis__tool .t-tilt2 { rotate: 1deg; }
.thesis__tool .t-he    { direction: rtl; }

/* ============ סולם העקרונות ============ */
/* העקרונות אינם מקבילים, הם מתרחקים. הרוחב גדל ככל שיורדים. */

.ladder__intro { margin-bottom: var(--s-16); }

.ladder__list { position: relative; }

.principle { position: relative; padding-block: var(--s-8); border-top: 1px solid var(--ink-12); }
.principle:nth-child(1) { max-width: 46%; }
.principle:nth-child(2) { max-width: 58%; }
.principle:nth-child(3) { max-width: 71%; }
.principle:nth-child(4) { max-width: 85%; }
.principle:nth-child(5) { max-width: 100%; }

.principle__head { display: flex; align-items: flex-start; gap: var(--s-6); }

.principle__num {
  font-family: var(--font-display); font-weight: var(--w-black); font-size: 5.5rem;
  line-height: 0.85; color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  flex: 0 0 auto;
  transition: color var(--t-state) var(--ease-out),
              transform var(--t-state) var(--ease-spring),
              -webkit-text-stroke-width var(--t-state) var(--ease-out);
  direction: ltr; unicode-bidi: isolate;
}
/* מסומן גם בעובי קו ולא רק בצבע */
.principle.is-active .principle__num {
  color: var(--coral);
  -webkit-text-stroke-width: 3px;
  transform: scale(1.08);
}
.no-motion .principle__num { transform: none !important; }

.principle__name { font-size: var(--fs-h2); font-weight: var(--w-black); margin-bottom: var(--s-3); }
.principle__body { padding-inline-start: calc(5.5rem + var(--s-6)); }
.principle__practice { color: var(--ink-soft); }

.principle__quote {
  font-weight: var(--w-light); font-size: 1.375rem; line-height: 1.5;
  max-width: var(--measure-quote); margin: var(--s-6) 0 0; position: relative;
  padding-inline-start: var(--s-6);
}
.principle__quote::before {
  content: "\201D";
  position: absolute; inset-inline-start: -0.15em; inset-block-start: -0.15em;
  color: var(--coral); font-size: 2.5rem; font-weight: var(--w-black); line-height: 1;
}

/* מובייל: ההתרחקות עוברת להזחה. חוק, לא שיקול. לא להמיר לגריד כרטיסים */
@media (max-width: 760px) {
  .principle { max-width: none !important; }
  .principle:nth-child(1) { padding-inline-start: 48px; }
  .principle:nth-child(2) { padding-inline-start: 36px; }
  .principle:nth-child(3) { padding-inline-start: 24px; }
  .principle:nth-child(4) { padding-inline-start: 12px; }
  .principle:nth-child(5) { padding-inline-start: 0; }
  .principle__head { gap: var(--s-4); }
  .principle__num { font-size: 4.5rem; }
  .principle__body { padding-inline-start: 0; margin-top: var(--s-4); }
  .principle__name { font-size: 1.5rem; }
}

/* ============ קטלוג המוצרים: לשוניות ============ */

/* קו קורל מעל הכותרת. נוסף 27.7.2026 אחרי שהתגית "מה אפשר להזמין" הוסרה:
   בלעדיה נשאר מרווח ריק ארוך בין הסולם לקטלוג, ולעין לא היה סימן
   שמתחיל כאן קטע חדש. אותו רעיון של הקווים ב-.pain__item, בקורל. */
.h2--rule::before {
  content: ""; display: block;
  width: 72px; height: 4px; border-radius: 2px;
  background: var(--coral);
  margin-bottom: var(--s-6);
  transform-origin: right center;   /* RTL: הקו נמתח מימין לשמאל */
}
.h2--rule.revealed::before { animation: line-grow 600ms var(--ease-out) both; }
.no-motion .h2--rule::before { animation: none !important; }

/* שלוש רמות (4.9.2026), במקום לשוניות ארגונים/יחידים.
   כל רמה היא שורה: בימין שם הרמה והמטרה שלה, בשמאל הכרטיסים.
   ככה גם רמה עם כרטיס אחד לא נראית יתומה, כי הכותרת יושבת לידה. */
.catalog__lead { margin-block: var(--s-4) var(--s-8); }

.level {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--s-8) var(--s-12);
  padding-block: var(--s-8);   /* הודק 4.9.2026 אחרי הביקורת: הסעיף היה ארוך מדי */
  border-top: 1px solid var(--ink-12);
  align-items: start;
}
.level:last-of-type { border-bottom: 1px solid var(--ink-12); }
.level__head { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
.level__name {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: var(--fs-h2); line-height: var(--lh-heading);
  margin-bottom: var(--s-3);
}
.level__desc { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; margin: 0; max-width: 30ch; }

@media (max-width: 900px) {
  .level { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .level__head { position: static; }
  .level__desc { max-width: var(--measure); }
}

/* שורות שנפתחות (5.9.2026) במקום כרטיסים. details/summary מקורי.
   הספרה נשארה כמוטיב, קטנה ובקורל. הפלוס הופך ל-X בפתיחה: פונקציונלי, לא ראווה. */
.level__items { display: grid; gap: 0; border-top: 1px solid var(--ink-12); }
.item { border-bottom: 1px solid var(--ink-12); }
.item__summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-4); padding-block: var(--s-4);
  transition: background-color var(--t-state) var(--ease-out);
}
.item__summary::-webkit-details-marker { display: none; }
.item__summary:hover { background: var(--cream-deep); }
.item__summary:focus-visible { outline: 3px solid var(--coral-line); outline-offset: 2px; border-radius: 6px; }
.item__num {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: 1.125rem; color: var(--coral-text); min-width: 2ch;
  unicode-bidi: isolate; direction: ltr;
}
.item__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-width: 0; }
.item__tag {
  font-size: var(--fs-tag); font-weight: var(--w-bold); letter-spacing: 0.02em;
  color: var(--ink-soft); order: 2;
}
.item__name { font-size: var(--fs-h3); font-weight: var(--w-black); margin: 0; line-height: 1.25; }
.item__icon { position: relative; width: 22px; height: 22px; flex: none; }
.item__icon::before, .item__icon::after {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px;
  background: var(--ink); transform: translateY(-50%);
  transition: transform var(--t-state) var(--ease-out);
}
.item__icon::after { transform: translateY(-50%) rotate(90deg); }
.item[open] .item__icon::after { transform: translateY(-50%) rotate(0deg); }
.item[open] .item__icon::before { transform: translateY(-50%) rotate(180deg); }
.item__body {
  padding: 0 calc(2ch + var(--s-4)) var(--s-6) 0;   /* מיושר לכותרת, אחרי הספרה */
  display: grid; gap: var(--s-3); max-width: var(--measure);
}
.item__body p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.item__when { color: var(--ink-soft); }
.item[open] .item__body { animation: item-open 320ms var(--ease-out) both; }
@keyframes item-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.no-motion .item__body { animation: none !important; }
@media (max-width: 640px) {
  .item__summary { padding-block: var(--s-3); gap: var(--s-3); }
  .item__name { font-size: 1.1875rem; }
  .item__body { padding-inline-end: 0; }
}

/* השורה על יחידים והכפתור היחיד של הסעיף */
.catalog__foot { margin: var(--s-8) 0 0; display: grid; gap: var(--s-4); justify-items: start; }
.catalog__note { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }

/* ============ לוגואים: מרקיזה ============ */

/* הוגדל 27.7.2026: הרצועה נקראה כהערת שוליים. עכשיו היא סקשן מלא.
   הסקשן נשאר על קרם ולא עובר לקרם כהה, כי "מי אני" שמעליו כבר קרם כהה
   ושתי רצועות זהות ברצף מבטלות את ההפרדה. אפקט המדף מגיע מהאריחים. */
/* ריפוד תחתון מוקטן בכוונה: הלוגואים וההמלצות הם הוכחה אחת,
   ולכן הם נקראים כבלוק אחד ולא כשני סקשנים מנותקים. */
.logos { padding-block: var(--s-24) var(--s-8); }
.logos__head { text-align: center; margin-bottom: var(--s-12); }
.logos__head h2 { font-size: var(--fs-h2); max-width: 20ch; margin-inline: auto; }

#quotes { padding-block-start: var(--s-12); }
/* העטיפה מחזיקה את דהיית הקצוות, שנשארת קבועה בזמן שהתוכן נגלל בפנים */
.marquee-wrap { position: relative; direction: ltr; }
.marquee-wrap::before, .marquee-wrap::after {
  content: ""; position: absolute; inset-block: 0; width: 80px; z-index: 2; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--cream), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--cream), transparent); }

/* המרקיזה: רצועה שגם רצה לבד וגם נגררת ביד. הגלילה מונעת ב-JS דרך scrollLeft,
   ולכן גלילה אוטומטית וידנית (גרירה, החלקה, גלגלת) חיות יחד. */
.marquee {
  overflow-x: auto; overflow-y: hidden;
  direction: ltr; cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.marquee.is-dragging img { pointer-events: none; }

.marquee__track {
  display: flex; align-items: center; gap: var(--s-4);
  width: max-content;
}
/* תחת עצירת אנימציות: אין ריצה אוטומטית, אבל הרצועה עדיין נגללת ידנית */
.no-motion .marquee__track { width: max-content; }

/* כל לוגו יושב באריח לבן. שבעה מ-12 הקבצים הם JPEG עם רקע לבן אטום
   שאי אפשר להסיר, ולכן צבע מלא על קרם היה מייצר מלבנים לבנים אקראיים.
   אריח אחיד לכולם הופך את זה לבחירה. הריפוד קובע את גובה הלוגו:
   112 פחות 3rem ריפוד = 64 פיקסל תמונה. */
.marquee__track img {
  height: 112px; width: 184px;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-card);
  padding: var(--s-6);
  flex: 0 0 auto;
  transition: transform var(--t-hover) var(--ease-spring),
              box-shadow var(--t-hover) var(--ease-out);
}
.marquee__track img:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 700px) {
  .marquee__track img { height: 88px; width: 144px; padding: var(--s-4); }
}

/* ============ מי אני ============ */

.about { background: var(--cream-deep); }
.about__grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-16); align-items: center; }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.about__portrait {
  width: 300px; height: 300px; border-radius: 50%; overflow: hidden;
  background: #F0E9DD;
  transform: rotate(-2deg);
  box-shadow: 12px 12px 0 var(--coral);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ============ המלצות: הזרקור ============ */
/* בלי JS: כל החמש מוצגות זו מתחת לזו והכפתורים מוסתרים.
   עם JS (מחלקת is-live): אחת מוצגת, מתחלפת, והשמות הם כפתורים. */

.spot {
  background: var(--sage);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--s-12);
  position: relative;
  transform: rotate(-0.5deg);
}
/* סימן המרכאות הענק. המופע הקורלי של המסך הזה */
.spot::before {
  content: "\201D";
  position: absolute; inset-block-start: -0.35em; inset-inline-start: clamp(1rem, 3vw, 2.5rem);
  font-size: 7rem; font-weight: var(--w-black); line-height: 1;
  color: var(--coral);
}

.spot__stage { display: flex; flex-direction: column; gap: var(--s-8); }

.spot__quote { margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.spot__quote p {
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
  font-weight: var(--w-light); line-height: 1.65;
  max-width: 60ch; margin: 0;
}
.spot__quote cite {
  font-style: normal; font-weight: var(--w-bold);
  font-size: 1.0625rem; color: #3D5238;
}

/* מצב חי: ערימת גריד, רק אחת גלויה. הנכנסת נגללת פנימה מהצד,
   כמו רצועה אינסופית שממשיכה לנוע באותו כיוון */
.spot.is-live .spot__stage { display: grid; }
.spot.is-live .spot__quote {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
}
.spot.is-live .spot__quote.is-on {
  opacity: 1; visibility: visible;
  animation: quote-slide 460ms var(--ease-out);
}
/* קדימה ב-RTL זה שמאלה: הבאה נכנסת מימין. אחורה מקבל כיוון הפוך */
@keyframes quote-slide {
  from { opacity: 0; transform: translateX(56px); }
  to { opacity: 1; transform: none; }
}
.spot.is-live .spot__quote.is-on.is-back { animation-name: quote-slide-back; }
@keyframes quote-slide-back {
  from { opacity: 0; transform: translateX(-56px); }
  to { opacity: 1; transform: none; }
}
.no-motion .spot__quote.is-on { animation: none !important; }

.spot__nav { display: none; }
.spot.is-live .spot__nav {
  display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-8);
}
.spot__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-body); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: transparent;
  border: 1.5px solid var(--ink); cursor: pointer;
  padding: 0 0 4px;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-spring);
}
.spot__arrow:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.spot__arrow:active { transform: scale(0.94); }

/* ============ שאלות: כרטיסי היפוך ============ */
/* בהשראת האתר הנוכחי של גיתית. הכרטיס כולו הוא כפתור אמיתי
   (<button>, לא div עם role), עם aria-expanded. הצד שלא מוצג מקבל
   aria-hidden ב-JS, ולכן קורא מסך מקריא שאלה כשהכרטיס סגור
   ותשובה כשהוא פתוח, במקום להקריא את שניהם כשם אחד ארוך. */

.qa__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); margin-top: var(--s-8); }
@media (max-width: 980px) { .qa__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .qa__grid { grid-template-columns: 1fr; } }

.flip { perspective: 1200px; min-height: 240px; }
.flip__inner {
  position: relative; display: block;
  width: 100%; height: 100%; min-height: 240px;
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: start;
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
  cursor: pointer;
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.no-motion .flip__inner { transition: none !important; }

.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius-card); padding: var(--s-6);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
}
.flip__front { background: var(--cream-deep); border: 1px solid var(--ink-12); }
.flip__q {
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: 1.25rem; line-height: 1.35;
}
.flip__hint { font-size: var(--fs-tag); color: var(--ink-soft); margin: 0; font-weight: var(--w-med); }
.flip__back { background: var(--ink); color: var(--cream); transform: rotateY(180deg); }
.flip__back .flip__a { font-size: var(--fs-small); line-height: 1.65; color: var(--cream); }

/* ============ פנייה ============ */

/* גרדיאנט רדיאלי כמעט בלתי נראה נותן תחושת אור שנופל על המשטח הכהה
   שסוגר את העמוד. ההפרש בין #2A2622 ל-#201E1B קטן דיו כדי שטקסט הקרם
   יישאר מעל 12:1. הגרדיאנט מקבע צבעים ישירים ולכן שובר את תגובת הטוקן
   במצב ניגודיות גבוהה, ושם a11y.css מחזיר שחור מלא. */
.contact { background: radial-gradient(130% 150% at 82% 0%, #2A2622 0%, var(--ink) 58%); color: var(--cream); }
.contact h2 { color: var(--cream); font-size: var(--fs-h1); max-width: 20ch; }
/* גיתית ביקשה את הכותרת עצמה בצבע מרווה. הטוקן --sage מסומן ב-tokens.css
   כרקע בלבד כי ירוק בהיר על קרם נכשל בניגודיות. כאן זה בטוח: הרקע של
   קטע הפנייה הוא דיו כהה, ומרווה בהיר עליו נותן כ-13:1, הרבה מעל AA. */
.contact h2.contact__title--sage { color: var(--sage); }
.contact p { color: #BDB6AC; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; gap: var(--s-12); } }


.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--fs-small); font-weight: var(--w-bold); margin-bottom: var(--s-2); color: var(--cream); }
.field input, .field textarea {
  width: 100%; padding: 0.75rem var(--s-4); min-height: 48px;
  font-family: var(--font-body); font-size: 1.0625rem;   /* 17px ומעלה, מונע זום אוטומטי ב-iOS */
  background: var(--cream); color: var(--ink);
  border: 1px solid transparent; border-radius: var(--radius);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field input[type="tel"] { direction: ltr; text-align: right; }

/* שגיאת שדה. הטופס ב-novalidate ולכן כל הבדיקה ב-JS, והודעה
   מילולית יושבת מתחת לשדה ומקושרת אליו ב-aria-describedby.
   הסימון אינו רק אדום: יש מסגרת עבה והודעה בטקסט. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border: 2px solid var(--coral); }
.field__error {
  margin: var(--s-2) 0 0; font-size: var(--fs-small);
  font-weight: var(--w-bold); color: var(--coral);
}
.field__error[hidden] { display: none; }

/* --- אישור מדיניות פרטיות --- */

.consent { margin-block: var(--s-6) var(--s-6); }

.consent__check {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--s-3);
  cursor: pointer; color: var(--cream);
  font-size: 1.0625rem; line-height: 1.5;
}
.consent__check input {
  position: absolute; opacity: 0; inline-size: 0; block-size: 0;
}
.consent__box {
  flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 2px;
  border: 1.5px solid #BDB6AC; border-radius: 6px; position: relative;
  transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.consent__check:hover .consent__box { border-color: var(--coral); }
.consent__check input:checked + .consent__box { background: var(--coral); border-color: var(--coral); }
.consent__check input:checked + .consent__box::after {
  content: ""; position: absolute;
  inset-block-start: 3px; inset-inline-start: 7px;
  inline-size: 6px; block-size: 11px;
  border: solid var(--ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent__check input:focus-visible + .consent__box { outline: 2px solid var(--coral-line); outline-offset: 2px; }

.consent .consent__hint {
  font-size: var(--fs-small); color: #9A938A;
  margin: var(--s-2) 0 0; padding-inline-start: calc(22px + var(--s-3));
}

/* הקישור יושב בתוך המשפט. עצירת ההתפשטות ב-JS, כדי שלחיצה עליו לא תסמן את התיבה */
.consent__link {
  color: var(--coral); font-weight: var(--w-med);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  transition: color var(--t-hover) var(--ease-out);
}
.consent__link:hover { color: var(--cream); }
.consent__link:focus-visible { outline: 2px solid var(--coral-line); outline-offset: 2px; border-radius: 4px; }

.consent.is-error .consent__box { border-color: var(--coral); }
.consent .consent__error {
  margin: var(--s-3) 0 0; font-size: var(--fs-small); font-weight: var(--w-bold);
  color: var(--coral); padding-inline-start: calc(22px + var(--s-3));
}

.form__result {
  background: var(--sage); color: var(--ink); padding: var(--s-6);
  border-radius: var(--radius-card); font-weight: var(--w-bold);
}
.form__note { font-size: var(--fs-small); color: #9A938A; margin-top: var(--s-4); }

.hp { position: absolute; inline-size: 0; block-size: 0; opacity: 0; pointer-events: none; }

.form__error {
  margin-block-start: var(--s-4); font-size: var(--fs-small);
  font-weight: var(--w-bold); color: var(--coral);
}
.form__error a { color: var(--coral); text-underline-offset: 0.25em; }
.contact-form.is-sending .btn { opacity: 0.6; pointer-events: none; }

/* ערוצי הפנייה, עם אייקון בריבוע מעוגל לכל אחד.
   האייקון בצד הפתיחה (ימין ב-RTL), הטקסט אחריו. הקישור כולו הוא שטח המגע. */
.contact__direct {
  list-style: none; padding: 0; margin: var(--s-8) 0 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.contact__direct li { margin: 0; }

.contact__direct a {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--cream); text-decoration: none;
  font-size: 1.0625rem; font-weight: var(--w-bold);
  padding: 2px; border-radius: var(--radius);
}
.contact__direct a:hover { color: var(--coral); text-decoration: none; }

.contact__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(251, 246, 238, 0.3);
  transition: border-color var(--t-hover) var(--ease-out),
              background var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-spring);
}
.contact__icon svg { width: 21px; height: 21px; display: block; }

.contact__direct a:hover .contact__icon {
  border-color: var(--coral);
  background: rgba(250, 112, 112, 0.14);
  transform: translateY(-2px);
}
.no-motion .contact__icon { transform: none !important; }

/* ============ פוטר ============ */

.footer { background: var(--cream); padding-block: var(--s-12); border-top: 1px solid var(--ink-12); }
.footer__inner { display: flex; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; align-items: center; }
.footer p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.25em; }
.footer a:hover { color: var(--coral-text); }

/* ============ עמוד ארגז הכלים ============ */

.tools-hero {
  padding-block: calc(var(--nav-h) + var(--s-12)) var(--s-12);
  background: var(--cream-deep);
}
.tools-hero h1 { font-size: var(--fs-h1); max-width: 18ch; margin-bottom: var(--s-4); }

/* פתיח בשתי עמודות: הטקסט בימין, התמונה של גיתית בשמאל */
.tools-hero__grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
/* פרלקסה בגלילה. שתי שכבות זזות בקצב שונה ויוצרות עומק:
   התמונה זזה לאט מהעמוד, ודיסקת הקורל שמאחוריה זזה יותר ממנה.
   ה-JS כותב את שני המשתנים, ולכן בלי JS הכל פשוט עומד במקום הנכון.
   (נוסו קודם ריחוף וטבעת מסתובבת. גיתית בחרה בפרלקסה 27.7.2026.) */
.tools-hero__portrait {
  width: min(280px, 64vw); aspect-ratio: 1;
  justify-self: center;
  position: relative;
}

/* דיסקת הקורל היא אלמנט אמיתי ולא box-shadow, כי צל לא ניתן להזזה נפרדת */
.tools-hero__disc {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%; background: var(--coral);
  transform: translate(-12px, 12px) translateY(var(--shift-disc, 0px));
}

/* מסגרת התזוזה. מופרדת מהתמונה כדי שהפרלקסה לא תדרוס את ההטיה ואת מצב הריחוף */
.tools-hero__shot {
  position: relative; z-index: 1; height: 100%;
  transform: translateY(var(--shift-shot, 0px));
}

.tools-hero__portrait img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; background: #F0E9DD;
  transform: rotate(2deg);
  transition: transform var(--t-state) var(--ease-spring);
}
.tools-hero__portrait:hover img { transform: rotate(0deg) scale(1.03); }

@media (max-width: 800px) {
  .tools-hero__grid { grid-template-columns: 1fr; gap: var(--s-12); }
  .tools-hero__portrait { width: min(200px, 56vw); }
}

/* סרגל הקטגוריות: נדבק מתחת לתפריט הקבוע. גובהו נשמר במשתנה כדי שהקפיצה
   לעוגן תעצור מתחתיו ולא מאחוריו. */
:root { --subnav-h: 52px; }
.subnav {
  position: sticky; top: var(--nav-h); z-index: 90;
  height: var(--subnav-h);
  background: rgba(251, 246, 238, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-12);
}
.subnav__inner {
  height: 100%; display: flex; align-items: stretch; gap: var(--s-2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; display: inline-flex; align-items: center;
  padding-inline: var(--s-3);
  font-size: var(--fs-small); font-weight: var(--w-med); color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out);
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="true"] { color: var(--ink); font-weight: var(--w-bold); border-bottom-color: var(--coral); }
.subnav a:focus-visible { outline: 3px solid var(--coral-line); outline-offset: -3px; border-radius: 4px; }
/* עוגן קטגוריה עוצר מתחת לשני הסרגלים */
.tools-cat[id] { scroll-margin-block-start: calc(var(--nav-h) + var(--subnav-h) + var(--s-2)); }
html[data-a11y-text] .subnav, html[data-a11y-text] .subnav a { height: auto; min-height: var(--subnav-h); }

.tools-cat { padding-block: var(--s-10, 4rem); position: relative; overflow: hidden; }
.tools-cat h2 { font-size: var(--fs-h2); margin: 0; }
.tools-cat > .wrap > p { color: var(--ink-soft); margin-bottom: var(--s-8); }

/* כותרת קטגוריה + תג ספירה */
.tools-cat__head {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-2); flex-wrap: wrap;
}
.tools-cat__count {
  font-size: var(--fs-tag); font-weight: var(--w-bold);
  background: var(--sage); color: #3D5238;
  padding: 0.3rem 0.85rem; border-radius: 999px;
  transform: rotate(-2deg);
}

/* הספרה הענקית של הקטגוריה, נחתכת בקצה העליון כמו בקטלוג */
.tools-cat__num {
  position: absolute; top: -1.4rem; inset-inline-end: clamp(0.5rem, 3vw, 2.5rem);
  font-family: var(--font-display); font-weight: var(--w-black);
  font-size: clamp(5.5rem, 9vw, 8rem); line-height: 0.8;
  color: var(--ink); opacity: 0.07;
  transform: rotate(-3deg);
  pointer-events: none; user-select: none;
  direction: ltr; unicode-bidi: isolate;
}

.tools-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tools-grid { grid-template-columns: 1fr; } }

.tool {
  display: flex; flex-direction: column; gap: var(--s-2);
  border: 1px solid var(--ink-12); border-radius: var(--radius-card);
  padding: var(--s-4) var(--s-6); background: var(--cream);
  text-decoration: none; color: var(--ink);
  transition: transform var(--t-hover) var(--ease-spring),
              box-shadow var(--t-hover) var(--ease-out),
              border-color var(--t-hover) var(--ease-out);
}
.tool:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--coral); }
.tool strong { font-weight: var(--w-bold); font-size: 1.0625rem; }
.tool span { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }

.tools-cat--gpt { background: var(--cream-deep); }

/* ============ עמודי מסמך: הצהרת נגישות, מדיניות פרטיות ============ */
/* טור אחד, שורה קצרה, בלי תנועה ובלי גילוי בגלילה.
   אלה עמודים שקוראים, לא עמודים שמשווקים. */

.doc { padding-block: calc(var(--nav-h) + var(--s-16)) var(--s-24); }
.doc__wrap { max-width: 760px; }
.doc h1 { font-size: var(--fs-h1); margin-bottom: var(--s-4); }
.doc .lead { margin-bottom: var(--s-12); max-width: none; }
.doc h2 {
  font-size: var(--fs-h3); font-weight: var(--w-black);
  margin-block: var(--s-12) var(--s-4);
  padding-block-end: var(--s-3); border-block-end: 1px solid var(--ink-12);
}
.doc p { max-width: none; }

.doc__list { margin: 0 0 var(--s-4); padding-inline-start: var(--s-6); }
.doc__list li { margin-bottom: var(--s-3); line-height: var(--lh-body); }

.doc__card {
  background: var(--sage); border-radius: var(--radius-card);
  padding: var(--s-6); margin-block-start: var(--s-4);
}
.doc__card p { margin-bottom: var(--s-2); }
.doc__card a { color: #2E4029; }
.doc__card-note { font-size: var(--fs-small); color: #3D5238; margin-block-start: var(--s-4) !important; }

.doc__meta { font-size: var(--fs-small); color: var(--ink-soft); margin-block-start: var(--s-8); }

/* ============ סימון פריט חסום ============ */
.todo {
  background: repeating-linear-gradient(45deg, #FFF3C4, #FFF3C4 10px, #FFE9A0 10px, #FFE9A0 20px);
  color: #6B5200; padding: 0.15em 0.5em; border-radius: 4px;
  font-size: 0.9em; font-weight: var(--w-bold);
}

/* ============ reduced motion: רשת ביטחון כוללת ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}