/* ============================================
   גרסה ב' של דף הבית (5.9.2026). שכבת עיצוב שנטענת אחרי main.css.
   אותם טוקנים, אותו קול, אותה תנועה מאופקת. מה שהשתנה:
   1. עמוד השדרה: כל קטע פותח באותו רכיב כותרת (מספר, תווית, כותרת, שורת משנה).
   2. מחווה אחת: ההטיות (תגיות, לוח ההמלצות, תמונה) ירדו. ההטיה נשארה ללוגו בלבד.
   3. גריד עריכתי: קטעי טקסט יושבים בשתי עמודות, כותרת מימין ותוכן משמאל.
   4. אריחי קו דק ואייקוני קו אחידים ב"לאן מכוונים".
   5. לוגואים בצבע המקורי על הקרם, בלי אריחים לבנים (multiply).
   6. שאלות כשורות שנפתחות, אותו רכיב כמו ההצעה, במקום כרטיסי היפוך.
   7. סולם העקרונות במדרגות הזחה, והתוכן ברוחב מלא.
   ============================================ */

/* ---------- 1. עמוד השדרה: כותרת קטע ---------- */
.sec-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-10, 2.5rem); }
.sec-head h2 { max-width: 20ch; }
.sec-head .lead { margin: var(--s-2) 0 0; max-width: 56ch; }

/* התווית: קטנה, ישרה, מרווחת. המספר לפניה בדיו רך. */
.eyebrow {
  transform: none;
  font-size: 0.875rem; font-weight: var(--w-bold); letter-spacing: 0.08em;
  color: var(--coral-text);
  display: inline-flex; align-items: baseline; gap: var(--s-3);
  margin: 0 0 var(--s-2);
}
.sec-num {
  font-weight: var(--w-med); color: var(--ink-soft); letter-spacing: 0.04em;
  direction: ltr; unicode-bidi: isolate;
  position: relative; padding-inline-end: var(--s-3);
}
.sec-num::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 50%;
  width: 1px; height: 0.9em; transform: translateY(-50%);
  background: var(--ink-12);
}
.h2--rule::before { display: none; }

/* ---------- 3. גריד עריכתי ---------- */
.editorial {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8) clamp(2rem, 6vw, 5rem); align-items: start;
}
.editorial .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + var(--s-8)); }
.editorial__body { margin-top: 0; min-width: 0; }
.pain__body p { max-width: none; }
@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; gap: var(--s-6); }
  .editorial .sec-head { position: static; }
}

/* ---------- תנועה: מרחק כניסה קצר יותר, אותו קצב ---------- */
.js-reveal [data-reveal] { transform: translateY(16px); }
.js-reveal [data-reveal="fade"] { transform: none; }
.js-reveal [data-reveal-stagger] > * { transform: translateY(14px); }

/* ---------- 4. לאן מכוונים: אריחי קו דק ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--ink-12);
  border: 1px solid var(--ink-12); border-radius: var(--radius-card); overflow: hidden;
}
.tile {
  background: var(--cream-deep); padding: var(--s-8) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: background var(--t-state) var(--ease-out);
}
.tile:hover { background: var(--cream); }
.tile p { margin: 0; max-width: none; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.tile strong { display: block; color: var(--ink); font-weight: var(--w-black); font-size: 1.1875rem; line-height: 1.3; margin-bottom: var(--s-2); }
.tile__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-12); background: var(--cream); color: var(--ink);
}
.tile__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile--ink { background: var(--ink); justify-content: center; }
.tile--ink:hover { background: var(--ink); }
.tile__test {
  color: var(--cream) !important; font-family: var(--font-display);
  font-weight: var(--w-black) !important; font-size: 1.375rem !important; line-height: 1.35 !important;
}
.tile__test::before {
  content: ""; display: block; width: 40px; height: 3px; background: var(--coral); margin-bottom: var(--s-4);
}
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } .tile { padding: var(--s-6) var(--s-5, 1.25rem); } }

/* ---------- 7. סולם העקרונות: מדרגות הזחה, תוכן ברוחב מלא ---------- */
@media (min-width: 761px) {
  .principle:nth-child(1), .principle:nth-child(2), .principle:nth-child(3),
  .principle:nth-child(4), .principle:nth-child(5) { max-width: none; }
  .principle:nth-child(1) { padding-inline-start: 16%; }
  .principle:nth-child(2) { padding-inline-start: 12%; }
  .principle:nth-child(3) { padding-inline-start: 8%; }
  .principle:nth-child(4) { padding-inline-start: 4%; }
  .principle:nth-child(5) { padding-inline-start: 0; }
  .principle__body { max-width: 760px; }
}
.principle__quote::before { font-size: 2rem; }
.thesis { border-radius: var(--radius-card); border: 1px solid var(--ink-12); }

/* ---------- 5. מי אני: תמונה שנייה מהבמה, מונוכרום דיו ---------- */
/* אפור + ניגודיות קלה, ומיזוג multiply כדי שהלבנים בתמונה ייצבעו בקרם של הדף.
   ככה היא יושבת ליד הרישום שבפתיח כמו שני דברים מאותה יד, והבמה לא צועקת. */
.about__grid { grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__photo { margin: 0; }
/* הצללים הורמו בקובץ עצמו (שחור → אפור עמוק, 6.9.2026 בהכרעת גיתית), ולכן כאן בלי הבהרה נוספת */
.about__photo img {
  width: 100%; height: auto; border-radius: 6px;
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: multiply;
}
.about__photo::after { content: ""; display: block; width: 56px; height: 3px; background: var(--coral); margin-top: var(--s-4); }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .about__photo { max-width: 400px; }
}

/* ---------- 6. לוגואים: צבע מקורי, בלי אריחים לבנים ---------- */
/* מיזוג multiply מעלים את הרקע הלבן של קובצי ה-JPEG לתוך הקרם, והצבע נשאר.
   (גרסה קודמת באפור נפסלה על ידי גיתית 6.9.2026: הלוגואים בצבעוניות המקורית.) */
.logos__head { text-align: start; margin-bottom: var(--s-8); }
.logos__head h2 { margin-inline: 0; }
.marquee__track { gap: var(--s-12); }
.marquee__track img {
  height: 64px; width: auto; max-width: 168px;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  mix-blend-mode: multiply;
  transition: transform var(--t-hover) var(--ease-spring);
}
.marquee__track img:hover { transform: translateY(-3px); box-shadow: none; }
@media (max-width: 700px) { .marquee__track img { height: 48px; max-width: 128px; } .marquee__track { gap: var(--s-8); } }

/* ---------- 2. המלצות: ישר, שקט, עם מונה ---------- */
.spot { transform: none; margin-top: 0; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.spot::before { font-size: 4.5rem; inset-block-start: -0.1em; }
.spot__quote p { font-weight: var(--w-reg); }
.spot__quote cite { display: inline-flex; align-items: center; gap: var(--s-3); }
.spot__quote cite::before {
  content: ""; width: 28px; height: 2px; background: var(--ink); opacity: 0.6;
}
.spot.is-live .spot__nav { justify-content: flex-start; gap: var(--s-3); }
.spot__count {
  margin: 0; font-size: var(--fs-small); font-weight: var(--w-bold); color: #3D5238;
  direction: ltr; unicode-bidi: isolate; min-width: 3.5ch; text-align: center;
}
.spot__count-sep { opacity: 0.5; margin-inline: 0.2em; }

/* ---------- 8. שאלות: שורות שנפתחות ---------- */
.qa__items { border-top: 1px solid var(--ink-12); }
.qa .item__name { font-size: 1.1875rem; }
.qa .item__body { max-width: none; padding-inline-end: calc(2ch + var(--s-4)); }
.qa .item__body p { color: var(--ink-soft); }

/* ---------- ההצעה: שורות עם יותר אוויר ---------- */
.item__summary { padding-block: var(--s-5, 1.25rem); }
.item__name { font-size: 1.375rem; }

/* ---------- כפתורים: חץ קטן שזז ---------- */
.btn--primary { display: inline-flex; align-items: center; gap: 0.6em; }
.btn--primary::after {
  content: ""; width: 0.9em; height: 0.9em; flex: none;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m11 6-6 6 6 6'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m11 6-6 6 6 6'/></svg>") center / contain no-repeat;
  transition: transform var(--t-hover) var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(-3px); }
.no-motion .btn--primary::after { transition: none; }

/* ---------- פנייה: הכותרת במרווה נשארת (בקשת גיתית 27.7), רק קו פתיחה קצר ---------- */
.contact h2::before { content: ""; display: block; width: 48px; height: 3px; background: var(--sage); margin-bottom: var(--s-6); }

/* ---------- פוטר: שלוש עמודות שקטות ---------- */
.footer { padding-block: var(--s-16) var(--s-12); }
.footer__inner { align-items: start; }

/* ---------- תיקוני הביקורת (6.9.2026, באישור גיתית) ---------- */
/* 3. החור בין הפתיח לקטע 01: ריפוד הפתיח ורווח הקטע נערמו לכ-250 פיקסל */
.hero { padding-block-end: var(--s-8); }
.pain { padding-block-start: var(--s-12); }
/* 4. המילה המתחלפת בכותרת נעלמה לרגע בין מילה למילה: הנכנסת מתחילה מוקדם יותר */
.hero__swap > span.is-current { transition-delay: 60ms; }