/* SuperFitGirls Longevity — עמוד בית (שחזור נאמן מהמוקאפ המאושר ב-Webflow) */

/* ══════════════════════════════════════════════════════════════════════
   Rubik — מאוחסן אצלנו, לא נטען מגוגל.

   האתר מטפל בנתוני בריאות של נשים. כל טעינה מ-fonts.googleapis.com הייתה
   שולחת לשרת של גוגל את כתובת ה-IP של הלקוחה, את זיהוי הדפדפן שלה ואת
   כתובת העמוד שבו היא נמצאת — לפני שהיא לחצה על דבר, ובלי שנתנה הסכמה.
   זו העברת נתונים לצד שלישי שאין לה מקום בתקנון שלנו, ולכן קובצי הגופן
   יושבים כאן ב-assets/fonts/, וה-CSP ב-vercel.json חוסם את גוגל לחלוטין.

   הקבצים הם בדיוק אלה שגוגל הגישה: Rubik v31, woff2, גופן משתנה על ציר
   המשקל 300–900. שני קבצים בלבד, אחד לתת-הקבוצה העברית ואחד ללטינית,
   44KB בסך הכול. ה-unicode-range מועתק מילה במילה מגוגל, כך שדפדפן מוריד
   את הקובץ העברי רק כשיש טקסט עברי על המסך.

   ⚠ ארבע הצהרות משקל לכל קובץ (400/500/700/900) ולא טווח 300–900 אחד:
     אלה בדיוק ארבעת המשקלים שגוגל הגישה, ולכן התצוגה יוצאת זהה לקודמתה.
     ה-CSS מבקש בכמה מקומות גם font-weight:600; המשקל הזה לא הוגדר גם
     קודם, והדפדפן בוחר עבורו 700 — בדיוק כמו היום. טווח רציף היה מרנדר
     שם 600 אמיתי ומשנה את המראה בלי שביקשנו.

   font-display: swap — הטקסט נראה מיד בגופן מערכת ומתחלף כשהגופן מוכן,
   כדי שלא יהיה חלון שבו העמוד ריק.
   ══════════════════════════════════════════════════════════════════════ */

/* עברית — 400 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* לטינית — 400 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* עברית — 500 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* לטינית — 500 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* עברית — 700 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* לטינית — 700 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* עברית — 900 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* לטינית — 900 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* { box-sizing: border-box; }

/* iOS Safari מנפח טקסט בבלוקים לפי שיקול דעתו ("text autosizing"), וזה קורה
   רק על מכשיר אמיתי — אף מנוע headless לא מדמה את זה. בלי הנעילה הזו הכותרת
   והלוגו יוצאים על הטלפון ברוחב אחר מזה שנמדד בבדיקה. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   איפוס המראה הנייטיב — הכלל שהיה חסר בכל הפרויקט.

   ב-iOS Safari כל <button>, ובמיוחד type="submit", מקבל מראה מערכת שדורס
   רקע, גבול וצבע טקסט. על אייפון אמיתי (20.8.2026) "כניסה עם סיסמה" הופיע
   ככפתור כחול עם טקסט לבן, ו"שכחתי סיסמה" ו"הצג" ככפתורים אפורים — במקום
   הוורוד של המותג. שום מדידת גודל לא תופסת את זה, כי הגדלים תקינים; רק
   getComputedStyle(el).webkitAppearance חושף אותו.

   תיבת סימון, רדיו, טווח, צבע וקובץ מוחרגות במפורש: אצלן appearance:none
   מוחק את הפקד עצמו מהמסך. */
button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  /* בלי זה הרקע של iOS מבצבץ מתחת לפינה המעוגלת */
  background-clip: padding-box;
  font-family: 'Rubik', sans-serif;
}
button { -webkit-tap-highlight-color: rgba(255, 45, 135, .15); cursor: pointer; }

/* 16px בכל שדה קלט, בכל האתר. פחות מזה — ו-iOS מזנק בזום ברגע שנוגעים
   בשדה, מזיז את הטופס הצידה, והמשתמשת מאבדת את הכפתור מהמסך. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea { font-size: 16px; color: #1a1a1a; }

/* עם appearance:none גם החץ של <select> נעלם — מחזירים אותו בעצמנו,
   בקצה ה-inline-end (בעברית: משמאל). */
select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b5b62' d='M1.4 1.7 6 6.3l4.6-4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 12px 8px;
  padding-inline-end: 36px;
}

.page-body {
  background-color: #ffffff;
  direction: rtl;
  color: #1a1a1a;
  font-family: 'Rubik', sans-serif;
  margin: 0;
  /* overflow-x:hidden על ה-body עובר לאזור התצוגה, אבל ב-WebKit הוא לא
     מונע גלילה אופקית בפועל — נמדד: scrollWidth ממשיך לגדול והדף נשאר
     נגרר. clip באמת חותך ולא יוצר מכל גלילה, ולכן הוא הנכון כאן. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  .page-body { overflow-x: clip; }
}

/* ⚠ סקירה 5.9 L-C4: צבעי המותג היו מקודדים גם ב-JS — ה-SVG של גרף המגמה
   ב-dashboard/dashboard.js בנה `stroke="#ff2d87"` כמחרוזת — ולא רק ב-CSS.
   המשמעות: שינוי הוורוד היה משאיר את הגרף בצבע הישן, בקובץ שאיש לא פותח
   כשמשנים מראה. הטוקנים יושבים דווקא כאן ולא ב-dashboard.css, כי style.css
   נטען בכל עמוד — ו-dashboard.css כבר הצהיר בשורה הראשונה שהוא "משתמש
   בטוקנים של style.css הראשי", טענה שעד היום לא הייתה נכונה.
   הערכים זהים בדיוק לאלה שהיו בקוד: זהו ריכוז, לא שינוי מראה.
   ⚠ ההמרה חלקית ביודעין — הליטרלים בגיליונות ה-CSS עצמם (style.css,
   dashboard.css, admin.css) עדיין כתובים במפורש ולא הומרו כאן. */
:root {
  --sfg-pink: #ff2d87;
  --sfg-pink-soft: #ffd6e8;
  --sfg-muted: #6b5b62;
}

img { max-width: 100%; }
a { cursor: pointer; }

/* מיקוד מקלדת נראה — חובה לניווט בלי עכבר ולקוראי מסך */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #ff2d87; outline-offset: 2px; border-radius: 6px;
}

/* מכבדים בקשת מערכת להפחתת אנימציות */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- כפתורים ---------- */
/* min-height 44px — סף יעד המגע. היה 39px בפועל בטלפון. */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: 999px;
  background-color: #ff2d87;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Rubik', sans-serif;
  border: none;
}
.btn-pill-white {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #ff2d87;
  font-weight: 700;
  text-decoration: none;
  font-family: 'Rubik', sans-serif;
}
/* "שיחת היכרות" בכותרת — גובה שורה קבוע · 8.10.2026 (הכרעת איתי: אפשרות א)
   🔴 עם line-height:normal נוספים לשורה מדדי גופן הנפילה של הכתר (U+1F451, אין לו גליף ב-Rubik).
   CoreText / Apple Color Emoji ב-16px: 20+6.25, ולכן כפתור 50 וכותרת 271 (393) · 211 (600) · 155 (768).
   Noto (Linux/Android) כ-19, ולכן 44 · 265 · 205 · 149. סמסונג — גופן משלו, לא נמדד.
   26px = --tb-row-h, גובה השורה החזותי של מילות הניווט. ⚠ באנדרואיד זה מגדיל את הכפתור מ-44 ל-50.
   ⚠ הסלקטור פוגע רק בכפתור שבכותרת. לכפתור ההירו (‎.hero-cta‎) אותו פגם — ראו מתחת.
   נמדד ב-tissue-button.test.js: גובה הכפתור עם הכתר ובלעדיו. */
.header-inner > .btn-pill { line-height: 26px; }

/* ---------- לוגו ---------- */
.logo, .footer-logo {
  display: inline-flex;
  align-items: baseline;
  direction: ltr;
  font-weight: 900;
  text-decoration: none;
  unicode-bidi: isolate;
  font-family: 'Rubik', sans-serif;
  /* הלוגו הוא inline-flex בלי wrap: הוא לא יכול לרדת שורה ולא יכול
     להתכווץ, ולכן ברגע שהוא רחב מהמכל הוא פשוט נחתך. לכן חייבת להיות
     לו תקרה שמחייבת אותו להישאר בפנים.
     ⚠ עד 17.9.2026 הרוחב הזה גם **השתנה בין מכשירים**, כי הלב היה תו
     אמוג'י — ראו הלב המצויר מיד מתחת. */
  max-width: 100%;
  min-width: 0;
}

/* ── הלב מצויר, לא תו · #355, 17.9.2026 ──────────────────────────────────
   🔴 **מה נמדד, ולמה זה הוחלף.** הלב היה ‎U+2764‎ בתוך ‎span‎. לתו הזה אין
   גליף ב-Rubik, ולכן כל מנוע נפל לגופן האמוג'י של הפלטפורמה שלו וצייר לב
   אחר: ב-Chromium ברוחב אנדרואיד נמדד ‎20.03px‎ וב-WebKit באמולציית
   אייפון ‎20.64px‎, והלוגו כולו ‎156.88‎ מול ‎157.48‎. בצילומים של שני
   המנועים נראות **שתי צורות שונות** — אונות רחבות עם חריץ עמוק מול אונות
   עגולות עם חריץ רדוד, ובגובה אחר. איתי ראה בדיוק את זה על שני הטלפונים
   שלו. 🔑 אמוג'י אינו נכס של המותג אלא של הפלטפורמה.

   ⚠ **הצורה אינה חדשה ואינה שלי.** זו בדיוק הצורה שאיתי אישר ב-#338
   לכפתורי הטקסט, ושיושבת היום ב-‎shared/tissue-button.css‎ כמשתנה
   ‎--tb-heart‎. הקובץ ההוא מתאר אותה במילים כ"הלב מתוך הלוגו" — וזו
   הייתה טענה שאינה נכונה כל עוד הלוגו החזיק אמוג'י. עכשיו היא נכונה,
   ו-‎heart.test.js‎ אוכף ששני ה-‎d‎ נשארים תו-בתו זהים.
   ⚠ ‎viewBox‎ חתוך למלבן הדיו של הצורה (‎19.14×16.72‎ מתוך ‎24×24‎) ולא
   ל-‎0 0 24 24‎, אחרת הלב היה מקבל שוליים ריקים משני צדיו בתוך המילה.

   ⚠ **בגודל ‎em‎ ולא ‎px‎** — הלוגו מופיע ב-22px בכותרת וב-20px בפוטר,
   והלב חייב להתכווץ איתו. ⚠ ו-‎currentColor‎ ולא צבע משלו: הצבע ממשיך
   להיקבע ע"י ‎.logo-heart‎ למטה, ולכן גם הווריאנט הלבן עובד מעצמו. */
.logo-heart {
  /* פריט flex בתוך הלוגו — ‎width/height‎ נמדדים ישירות ואין תלות בגופן */
  flex: none;
  width: .80em;
  height: .70em;
  /* ⚠ ההרמה. ‎align-items:center‎ ממרכז בתוך תיבת השורה, שכוללת את זנב
     ה-g של "perfitgirls" — ולכן לב ממורכז-תיבה יושב נמוך מגובה ה-x של
     האותיות. נמדד ותוקן בעין בשני המנועים. */
  transform: translateY(-.045em);
}
.logo-heart > svg { display: block; width: 100%; height: 100%; fill: currentColor; }
/* הלוגו הוא קישור לדף הבית ולכן יעד מגע. גובה הטקסט לבדו היה 27px. */
.logo { font-size: 22px; min-height: 44px; align-items: center; }
/* גוש הלוגו: הסמל ומתחתיו שם האפליקציה המלא. */
.logo-block {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; text-decoration: none; min-width: 0; max-width: 100%;
}
.brand-name {
  /* היה 11px — קטן מכדי להיקרא כשם האתר. גוגל מחפשת בדף הבית שם שתואם
     לשם במסך ההסכמה, ושם בגודל הערת שוליים אינו נחשב. */
  font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: #55414A; white-space: nowrap;
  unicode-bidi: isolate;
}
/* גם לוגו הפוטר הוא קישור לדף הבית. היה 24px. */
.footer-logo { font-size: 20px; min-height: 44px; align-items: center; }
.logo-s { color: #1a1a1a; }
.logo-s-white { color: #ffffff; }
.logo-heart { margin: 0 1px; color: #ff2d87; }
.logo-text { color: #1a1a1a; }
.logo-text-white { color: #ffffff; }

/* ---------- כותרת עליונה ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #ffd6e8;
  background-color: #ffffff;
}

/* ── עוגנים נוחתים מתחת לכותרת הצמודה · #321, 14.9.2026 ──
   🔴 נמדד באתר החי ברוחב 393: הכותרת גובהה 271px, ולחיצה בתפריט על
   "איך זה עובד", "מחירים", "שאלות נפוצות" או "שיחת היכרות" נחתה עם
   כותרת המקטע **מוסתרת** מתחתיה. ארבעה עוגנים מתוך חמישה.
   ⚠ `--header-h` נמדד בדפדפן ע"י shared/header-offset.js. הערכים כאן הם
   **גיבוי** לדף שנפתח ישר על עוגן לפני שהסקריפט רץ — ולכן הם שמרניים:
   היסט גדול מדי מוריד את הכותרת קצת; היסט קטן מדי מסתיר אותה.
   נמדד: 271 ב-393 · 211 ב-600 · 155 ב-768 · 93 מ-992.
   ⚠ `scroll-margin` על המקטע ולא `scroll-padding` על המכל — מאותה סיבה
   שכתובה ב-shared/intake-form.css: מיקוד ומקלדת מסתמכים על האלמנט. */
:root { --header-h: 93px; }
/* ⚠ **1179 ולא 991 — נמדד אחרי מרכוז הלוגו.** משם ומטה הלוגו מקבל שורה
   משלו (ראו "הלוגו במרכז הכותרת" למטה), והכותרת 155px ולא 93. הגיבוי הזה
   חל רק על דף שנפתח ישר על עוגן לפני ש-‎shared/header-offset.js‎ מדד —
   ובאותו חלון, 93 היה מסתיר 62px מכותרת המקטע. */
@media (max-width: 1179px) { :root { --header-h: 155px; } }
@media (max-width: 767px) { :root { --header-h: 271px; } }
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.header-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  /* viewport-fit=cover קיים בכל הדפים, ולכן iOS פורש את התוכן עד קצה
     המסך הפיזי — מתחת לפינות המעוגלות ולנֶץ'. אף מנוע headless לא מחזיר
     ערך אחר מ-0 ל-env(), ולכן הגלישה הזו לא נראית בשום בדיקה אוטומטית.
     תכונות פיזיות (ולא לוגיות) — כי env נמדד בצירים פיזיים. */
  padding: 16px calc(24px + env(safe-area-inset-right, 0px))
           16px calc(24px + env(safe-area-inset-left, 0px));
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  min-width: 0;
}
/* פס חזרה לאזור האישי — נדבק לראש המסך כדי שלא ייעלם בגלילה של דף
   ארוך. מוצג רק כשהלקוחה הגיעה מהאזור האישי. */
.return-bar {
  position: sticky; top: 0; z-index: 60; display: block;
  background: #ff2d87; color: #ffffff; text-decoration: none;
  font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 700;
  text-align: center; padding: 12px 20px;
}
.return-bar:hover { background: #e02579; }
.return-bar[hidden] { display: none !important; }

/* גובה הטקסט לבדו הוא 18px. באצבע זה פספוס. הריפוד האנכי מביא כל קישור
   ל-44px בלי לשנות את המראה — הרווח האופקי הוקטן כדי לפצות.
   נתפס בבדיקת WebKit אמיתית על iPhone, 19.8.2026. */
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.nav-link {
  color: #1a1a1a; font-size: 15px; font-weight: 500; text-decoration: none;
  font-family: 'Rubik', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
}
/* ⚠ 25.8.2026 — ‎min-width‎ נוסף אחרי שנמדד ש"מי אני" הוא **36×44**.
   הגובה כבר תוקן ב-19.8; הרוחב נשאר תלוי במילה, ומילה קצרה נתנה יעד
   צר עם 15px בלבד עד השכן.

   ⚠ **וזו לא הייתה הפרה לפי הכלל שלנו** — ‎perfect-result-loop‎ קובע
   שלקישור טקסט עצמאי **הגובה** הוא הסף, והוא היה 44. גם WCAG 2.5.8
   עובר: מרחק המרכזים המינימלי נמדד 63px, הרבה מעל 24.
   תוקן בכל זאת כי הוא **לא יכול להחמיר** ומקטין החטאה לשכן — ‎gap‎
   האופקי הוקטן מ-18 ל-14 כדי לפצות על הרוחב. */

/* ── כותרת מתכווצת לשלושה פסים · #322, 15.9.2026 ──
   ⚠ כל מה שכאן חל **רק** תחת ‎.is-compact‎, שמוסיף shared/header-compact.js
   בדף הבית בלבד. בראש הדף הכותרת זהה לחלוטין למה שהייתה; שאר הדפים
   שחולקים את ‎.site-header‎ אינם נוגעים בזה. ההסבר המלא — בראש הסקריפט.
   ⚠ `--hc-gap` = גובה מלא פחות מקופל. ה-margin שומר את מקום הכותרת המלאה,
   ולכן קיפול אינו מזיז את התוכן אף בפיקסל. */
.nav-toggle { display: none; }
.site-header.is-compact { margin-bottom: var(--hc-gap, 0px); }
.site-header.is-compact .header-inner {
  flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
  padding: 8px calc(16px + env(safe-area-inset-right, 0px))
           8px calc(16px + env(safe-area-inset-left, 0px));
}
.site-header.is-compact .logo-block { flex-shrink: 0; }
/* 🔑 #345 — "שיחת היכרות" רק בכותרת המלאה: לא בשורה המקופלת ולא בתפריט הנפתח. בקיפול הוא הופך
   לכפתור צף (shared/floating-cta.js, למטה) */
.site-header.is-compact .header-inner > .btn-pill { display: none; }
/* 🔑 סבב 4 — הפסים בצד ימין (inline-start ב-RTL), כהכרעת איתי: "זה אתר בעברית
   ולכן ה-3 פסים צריכים להיות בצד ימין". order ולא סדר ה-DOM: הכפתור יושב
   ב-HTML מיד אחרי הלוגו ולפני התפריט, כך ש-Tab מהכפתור נוחת על "מי אני".
   הלוגו לידו, ו-margin-inline-end:auto של הלוגו דוחף את "שיחת היכרות" לשמאל. */
.site-header.is-compact .nav-toggle {
  order: -1;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; flex-shrink: 0; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
}
.nav-toggle-line {
  display: block; width: 24px; height: 3px; border-radius: 2px; background: #1a1a1a;
  transition: transform .25s ease, opacity .2s ease;
}
/* פתוח: הפסים הופכים ל-X. 8px = גובה פס + רווח */
.site-header.is-open .nav-toggle-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .nav-toggle-line:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* התפריט הנפתח — מתחת לשורה, מחוץ לגובה הכותרת (absolute), ולכן
   `--header-h` נשאר גובה השורה גם כשהוא פתוח. visibility מוציא אותו
   מסדר הטאב ומעץ הנגישות כשהוא סגור. */
.site-header.is-compact .nav-links {
  position: absolute; top: 100%; inset-inline: 0;
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
  padding: 4px 16px 16px; background: #ffffff; border-bottom: 1px solid #ffd6e8;
  box-shadow: 0 12px 24px rgba(26, 26, 26, .08);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.site-header.is-compact.is-open .nav-links {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.site-header.is-compact .nav-link {
  justify-content: flex-start; min-height: 48px; padding: 0 8px; font-size: 17px;
  border-bottom: 1px solid #fff2f8;
}
/* בזמן ההנפשה: הרקע והקו מצוירים ע"י הרוחות, והאלמנטים האמיתיים שהרוחות
   מחליפות שקופים. ⚠ transition:none — אחרת התפריט דוהה ומוצג פעמיים. */
.site-header.is-morphing { background-color: transparent; border-bottom-color: transparent; }
.site-header.is-morphing .nav-links,
.site-header.is-morphing .nav-toggle-line { opacity: 0; transition: none; }
/* פתיחת התפריט וסגירתו (סבב 3): הלוח והמילים מצוירים ע"י רוחות. מהתפריט
   האמיתי נשארים רק הקווים המפרידים, שדוהים בסוף.
   ⚠ צבע שקוף ולא opacity על הקישורים — כך הם נשארים במקומם, ממוקדים
   ולחיצים, וברגע הסיום הרוחות מוסרות באותה משימה שבה הצבע חוזר. */
.site-header.is-compact.is-menu-morph .nav-links {
  background: transparent; border-bottom-color: transparent; box-shadow: none; transition: none;
}
.site-header.is-compact.is-menu-morph .nav-link { color: transparent; }
.site-header.hc-still, .site-header.hc-still * { transition: none !important; }

/* ══ הלוגו במרכז הכותרת — בכל מצב ובכל דף · 16.9.2026 ═══════════════════════
   🔑 **הכרעת איתי:** "הלוגו חייב לשבת תמיד במרכז הכותרת". עד כאן הוא ישב
   בקצה: נמדד +48.4px מהמרכז בשורה המקופלת ב-393, ‎+495.9px‎ בשולחני 1280,
   ‎+64‎ בניהול ו-‎+67.6‎ באזור האישי (‎360–393‎).

   🔴 **שני מנגנונים, והבחירה ביניהם נגזרת ממדידה ולא מטעם.**
   לוגו ממורכז דורש ‎(רוחב פנימי − רוחב לוגו) ÷ 2‎ פנוי **בכל צד**. נמדד:
     · שורה מקופלת ב-360 — הלוגו 160.2 והפסים 44: נשארים 39.8px מרווח. **נכנס.**
     · שולחני ‎844–1179‎ — התפריט לבדו 456.7px מול 392–408px שיש לצד. **אינו
       נכנס**, ובפער של עשרות פיקסלים. לכן שם הלוגו מקבל **שורה משלו**, בדיוק
       כמו שהוא כבר מקבל מתחת ל-768.
   ⚠ **הגובה ננעל ב-‎min-height‎** בכל מקום שבו הלוגו יוצא מהזרימה. בלי זה
     הוצאתו הייתה מקטינה את הכותרת, ו-‎--hc-gap‎, ‎--header-h‎ ו-
     ‎scroll-margin-top‎ של כל המקטעים היו זזים איתה. נמדד: הגובה זהה לפני
     ואחרי — 77 מקופלת, 93 שולחני ≥1180, 271 בנייד.
   ⚠ **הפסים נשארים בימין** (‎inset-inline-start‎ ב-RTL), כהכרעת איתי. הם
     יוצאים מהזרימה, ולכן ‎order:-1‎ כבר אינו מה שקובע את צדם.
   ⚠ **אין נגיעה בכותרת המלאה בנייד (‎≤767‎)** — שם הלוגו כבר על שורה משלו
     ונמדד במרכז בדיוק (סטייה 0.0px ב-360, 384, 393). מה שכבר נכון לא משנים. */
.site-header .header-inner { position: relative; }

/* 1. השורה המקופלת — מרכוז מוחלט. הפסים ב-44px בימין, הלוגו במרכז. */
.site-header.is-compact .header-inner { min-height: 76px; }   /* 60 לוגו + 8+8 ריפוד; border-box */
.site-header.is-compact .logo-block {
  position: absolute; inset-inline: 0; margin-inline: auto; width: max-content;
  top: 50%; translate: 0 -50%;
}
.site-header.is-compact .nav-toggle {
  position: absolute; top: 50%; translate: 0 -50%;
  inset-inline-start: calc(16px + env(safe-area-inset-right, 0px));
}

/* 2. שולחני ‎≥1180‎ — יש מקום לשלושתם בשורה אחת, והלוגו במרכזה. */
@media (min-width: 1180px) {
  .site-header:not(.is-compact) .header-inner { min-height: 92px; }  /* 60 לוגו + 16+16 ריפוד */
  .site-header:not(.is-compact) .header-inner > .logo-block {
    position: absolute; inset-inline: 0; margin-inline: auto; width: max-content;
    top: 50%; translate: 0 -50%;
  }
}

/* 3. ‎768–1179‎ — התפריט רחב מדי לשורה אחת עם לוגו ממורכז, ולכן הלוגו מקבל
      שורה משלו ומתמרכז בה. זו בדיוק הצורה שכבר קיימת מתחת ל-768. */
@media (min-width: 768px) and (max-width: 1179px) {
  .site-header:not(.is-compact) .header-inner { justify-content: center; }
  .site-header:not(.is-compact) .header-inner > .logo-block {
    flex: 0 0 100%; align-items: center;
  }
}

/* ── "שיחת היכרות" צף · #345, 16.9.2026 · shared/floating-cta.js ──
   🔑 איתי בחר את E ("מגנט עם שובל") מתוך חמש דוגמאות. ההסבר המלא — בראש הסקריפט.
   ⚠ הנפשה ב-transform ו-opacity בלבד. הצללים כאן סטטיים — אף box-shadow אינו מונפש.
   ⚠ z-index 90 — מתחת לכותרת (100): לעולם אינו מכסה את הפסים או את התפריט הפתוח. הרוח (‎.fg‎) 200.
   🔴 הפס הפתוח לבן ולא ‎#ffd6e8‎: בדוגמה הוורוד הבהיר נבלע במקטעי הפסטל, וטקסט הדף נקרא לצדו.
     לבן, מסגרת ורודה וצל — קריא על לבן, ‎#fff2f8‎, ההירו, הרצועה הוורודה והפוטר הכהה (נמדד, דוח #345).
     הטקסט: ‎#1a1a1a‎ על לבן 17.4:1 · הרמז ‎#6b5b62‎ על לבן 6.4:1 (≥4.5 ב-12.5px).
   ⚠ שמות בלי "fill"/"bar" — rtl.test.js קורא אותם כמילוי שחייב עיגון לימין. כאן הכול מיקום פיזי
     במכוון: הכפתור ממוקם ב-translate לפי מדידה, והצד (שמאל/ימין) נבחר בגרירה, לא לפי dir. */
.site-header.fc-flying .header-inner > .btn-pill { opacity: 0; transition: none; }
.fc-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.fc { position: fixed; left: 0; top: 0; width: 56px; height: 56px; z-index: 90; will-change: transform; }
.fc.is-gone { pointer-events: none; }
.fc-btn {
  position: relative; display: block; width: 56px; height: 56px; padding: 0; margin: 0; border: 0; border-radius: 28px;
  background: transparent; color: #1a1a1a; font-family: 'Rubik', sans-serif; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.fc-btn:focus { outline: none; }
/* טבעת מיקוד דו-גונית — נראית גם על לבן וגם על הפוטר הכהה */
.fc-ring-focus {
  position: absolute; left: -5px; top: -5px; width: 66px; height: 66px; box-sizing: border-box; border-radius: 50%;
  border: 3px solid #1a1a1a; box-shadow: 0 0 0 2px #ffffff; opacity: 0; pointer-events: none;
}
.fc-btn:focus-visible .fc-ring-focus { opacity: 1; }
.fc-lift, .fc-str, .fc-idle, .fc-shape, .fc-crown-wrap, .fc-fx {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; transform-origin: 28px 28px;
}
.fc-fx { pointer-events: none; }
.fc[data-side="right"] .fc-shape { transform: scaleX(-1); }
.fc-shade, .fc-face { position: absolute; left: 0; top: 0; width: 56px; height: 56px; }
.fc-cap, .fg-cap { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: #ff2d87; }
.fc-mid, .fg-mid { position: absolute; left: 28px; top: 0; width: 1px; height: 56px; background: #ff2d87; transform-origin: 0 50%; }
.fc-shade .fc-a { background: #ffffff; box-shadow: inset 0 0 0 2px #ff2d87, 0 6px 16px rgba(26, 26, 26, .16); }
.fc-shade .fc-b, .fc-shade .fc-mid { background: #ffffff; box-shadow: 0 6px 16px rgba(26, 26, 26, .16); }
/* הפס: לבן עם קו ורוד. ⚠ האמצע מעל העיגול הנגרר (z 1 מול 0) — כך חצי הקו הפנימי של העיגול מוסתר
   והמתאר נקרא כקפסולה אחת, והעיגול עם הכתר מעל שניהם */
.fc-face .fc-b, .fc-face .fc-mid { background: #ffffff; }
.fc-face .fc-b { z-index: 0; box-shadow: inset 0 0 0 2px #ff2d87; }
.fc-face .fc-mid { z-index: 1; box-shadow: inset 0 2px 0 #ff2d87, inset 0 -2px 0 #ff2d87; }
/* קו לבן סביב העיגול — מפריד אותו מהרצועה הוורודה (‎#ff2d87‎ על ‎#ff2d87‎) ומהפוטר הכהה.
   ⚠ רק העיגול שבחזית זז (ההקשה השנייה, "משיכה"); העיגול שבשכבת הצל נשאר כקצה המעוגל הלבן של הפס —
   בפריימים, בלי זה הפס נשאר פתוח ומרובע משמאל כשהעיגול החליק אל המטרה */
.fc-face .fc-a { z-index: 2; box-shadow: 0 0 0 2px #ffffff, 0 6px 14px rgba(208, 38, 111, .32); }
.fc-content {
  position: absolute; top: 0; height: 56px; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center;
  white-space: nowrap; text-align: center; color: #1a1a1a; opacity: 0; pointer-events: none;
}
.fc-label { display: block; font-size: 16px; font-weight: 700; line-height: 20px; }
.fc-hint { display: block; font-size: 12.5px; font-weight: 600; line-height: 16px; color: #6b5b62; }
.fc-crown-wrap { z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.fc-crown, .fg-crown {
  display: block; font-size: 26px; line-height: 1; transform-origin: 50% 50%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.fc-halo { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: #ff2d87; opacity: 0; }
.fc-target {
  position: absolute; top: 6px; width: 44px; height: 44px; box-sizing: border-box; z-index: 3; border-radius: 50%;
  background: #ffffff; border: 2px dashed #ff2d87; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
}
.fc-target svg { display: block; }
.fc-target-on { position: absolute; inset: -2px; border-radius: 50%; background: #ff2d87; display: flex; align-items: center; justify-content: center; opacity: 0; }
.fc-echo {
  position: fixed; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: #ff2d87;
  opacity: 0; pointer-events: none; z-index: 89; will-change: transform, opacity;
}
/* תשומת לב במנוחה — הילה אחת כל 5 שניות, רק transform ו-opacity */
.fc.is-idle:not(.rm) .fc-halo { animation: fc-halo 5s ease-out 1.2s infinite; }
@keyframes fc-halo {
  0%, 70% { opacity: 0; transform: scale(1); }
  72% { opacity: .45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.75); }
}
/* הרוח: הכפתור בכותרת ↔ העיגול */
.fg { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 200; pointer-events: none; }
.fg-grp { position: absolute; left: 0; top: 0; width: 56px; height: 56px; transform-origin: 0 0; will-change: transform; }
.fg-shape { position: absolute; left: 0; top: 0; width: 56px; height: 56px; }
.fg-lbl { position: absolute; white-space: nowrap; direction: rtl; text-align: right; color: #ff2d87; will-change: transform, opacity; }
.fg-crown-wrap { position: absolute; left: 0; top: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
/* ההקשה השנייה: כותרת מקטע הקביעה "מגיבה" כשהגלילה מגיעה */
.booking-section.fc-arrived .booking-title { animation: fc-arrive 1.2s ease 1; }
@keyframes fc-arrive { 0%, 100% { transform: none; } 30% { transform: scale(1.06); } }
.booking-title[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .fc-halo, .booking-section.fc-arrived .booking-title { animation: none !important; }
}

/* ---------- הירו ---------- */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 96px 24px;
  background-color: #fff2f8;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,214,232,0.9), transparent 60%),
    radial-gradient(circle at 8% 100%, rgba(143,217,168,0.30), transparent 55%);
}
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.hero-title { margin: 0 0 24px; color: #1a1a1a; font-size: 52px; line-height: 1.15; font-weight: 900; font-family: 'Rubik', sans-serif; }
.hero-title-accent { color: #ff2d87; }
.hero-lead { margin: 0 0 32px; color: #6b5b62; font-size: 19px; line-height: 1.6; font-family: 'Rubik', sans-serif; }
/* "בואי נדבר 👑" — גובה שורה קבוע · 8.10.2026 (הכרעת איתי: ליישר לגובה של אייפון)
   אותו פגם של הכתר בכותרת: עם line-height:normal הכפתור 51 במק/אייפון (Apple Color Emoji) ו-44 בלי הכתר
   (min-height). 27px + ריפוד 12+12 = 51 בשני המנועים, עם הכתר ובלעדיו (נמדד 360/384/412/393/1280). */
.hero-cta { display: inline-block; font-size: 17px; line-height: 27px; }
.hero-accent-line {
  display: block;
  margin-top: 24px;
  /* ההטיה נשארת — היא נותנת את תחושת הפתק בכתב יד.
     הפונט חייב להיות Rubik: ל-Caveat אין אותיות עבריות, ולכן העברית נפלה
     לגנרי cursive והדפדפן ייצר ממנה איטליק מסונתז. איטליק בעברית אסור
     בפרויקט — הוא נראה שבור ומשתנה בין מכשירים. נבדק ויזואלית 19.8.2026. */
  transform: rotate(-2deg);
  font-family: 'Rubik', sans-serif;
  color: #ff2d87;
  font-size: 20px;
  font-weight: 700;
}

/* ---------- למה SuperFitGirls ---------- */
.values-section { padding: 96px 24px; background-color: #ffffff; }
.values-inner { max-width: 1100px; margin: 0 auto; }
.values-title { margin: 0 0 56px; color: #1a1a1a; font-size: 36px; font-weight: 900; text-align: center; font-family: 'Rubik', sans-serif; }
.values-title-accent { color: #ff2d87; }
.values-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; }
.value-card {
  max-width: 340px;
  padding: 40px 28px;
  flex: 1 1 300px;
  border-radius: 28px;
  background-color: #fff2f8;
  text-align: center;
}
.value-card.card-1 { transform: rotate(1.2deg); }
.value-card.card-2 { transform: rotate(-1.5deg); }
.value-card.card-3 { transform: rotate(-0.8deg); }
.value-icon { margin-bottom: 16px; font-size: 44px; }
.value-heading { margin: 0 0 12px; color: #1a1a1a; font-size: 21px; font-weight: 700; font-family: 'Rubik', sans-serif; }
.value-text { margin: 0; color: #6b5b62; font-size: 15px; line-height: 1.6; font-family: 'Rubik', sans-serif; }

/* ---------- איך זה עובד ---------- */
.how-section { padding: 96px 24px; background-color: #ffffff; }
.how-inner { max-width: 720px; margin: 0 auto; }
.how-title { margin: 0 0 12px; color: #1a1a1a; font-size: 36px; font-weight: 900; text-align: center; font-family: 'Rubik', sans-serif; }
/* היה כאן Caveat — פונט בלי אותיות עבריות, שגרם ל"עובד?" להתרנדר
   באיטליק מסונתז. איטליק בעברית אסור בפרויקט. Rubik, 19.8.2026. */
.how-title-accent { color: #ff2d87; font-size: 38px; font-weight: 900; font-family: 'Rubik', sans-serif; }
.how-subtitle { margin: 0 0 48px; color: #6b5b62; font-size: 17px; text-align: center; font-family: 'Rubik', sans-serif; }
.step-row {
  display: flex;
  margin-bottom: 16px;
  padding: 28px 32px;
  align-items: center;
  gap: 24px;
  border-radius: 20px;
}
/* #340 — השורה האחרונה אינה נושאת מרווח אל תוך ריפוד המקטע (נמדד: 16px עודפים מתחת). */
.step-row:last-child { margin-bottom: 0; }
.step-row.step-1 { background-color: #ffd6e8; }
.step-row.step-2 { background-color: #fff2f8; }
.step-row.step-3 { background-color: #ffd6e8; }
.step-row.step-4 { background-color: #fff2f8; }
.step-badge {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background-color: #ff2d87;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  font-family: 'Rubik', sans-serif;
}
.step-title { margin: 0 0 6px; color: #1a1a1a; font-size: 19px; font-weight: 700; font-family: 'Rubik', sans-serif; }
.step-text { margin: 0; color: #6b5b62; font-size: 15px; line-height: 1.5; font-family: 'Rubik', sans-serif; }

/* ---------- הדוח האישי ---------- */
/* ⚠ #340, 15.9.2026 — "מרווח שחור ענק" מתחת ל"אחרי הפגישה", באייפון
   ובסמסונג. זה לא היה מרווח: שלושת פריטי הרשימה ישבו שם, בצבע
   ‎#1a1a1a‎ על רקע ‎#1a1a1a‎ (ניגודיות 1.00). ב-10.9 ה-‎<li>‎ איבדו את
   ‎science-list-item‎ והתחילו לרשת את צבע ה-body.
   🔑 התיקון בשורש: מקטע כהה מצהיר על צבע טקסט בהיר **בעצמו**, כך שכל
   טקסט חדש בלי מחלקה יורש צבע קריא ולא שחור. נאכף ב-dark-text.test.js. */
.science-section { padding: 96px 24px; background-color: #1a1a1a; color: #ffd6e8; }
.science-inner { display: flex; max-width: 1100px; margin: 0 auto; align-items: center; gap: 64px; }
/* ⚠ #340, 15.9.2026 — שתי עמודות: טקסט (ימין ב-RTL) ודוגמת הדוח עם הכיתוב
   שלה (שמאל). העמודה של התמונה מוגבלת ל-440px כדי שהטקסט לא יידחס: ב-1280
   נמדד טקסט 596 · תמונה 440. בנייד/טאבלט — ראו ‎max-width: 991px‎ למטה. */
.science-left { flex: 1 1 460px; min-width: 0; }
.science-right { flex: 0 1 440px; margin: 0; text-align: center; }
.report-sample-img { display: block; width: 100%; height: auto; }
.report-sample-note { display: block; margin-top: 4px; color: #ffd6e8; font-size: 13px; font-weight: 400; }
.science-title { margin: 0 0 20px; color: #ffffff; font-size: 34px; line-height: 1.25; font-weight: 900; font-family: 'Rubik', sans-serif; }
.science-title-accent { color: #ff5fa2; }
.science-text { margin: 0 0 28px; color: #f2e6ea; font-size: 17px; line-height: 1.7; font-family: 'Rubik', sans-serif; }
.science-list { display: flex; margin: 0; padding: 0; flex-direction: column; gap: 14px; list-style-type: none; }
/* ‎> li‎ — הפריטים נכתבים היום בלי המחלקה; הגודל והריווח חלים עליהם בכל מקרה. */
.science-list-item, .science-list > li { color: #ffd6e8; font-size: 16px; line-height: 1.5; font-family: 'Rubik', sans-serif; }
.report-placeholder {
  display: flex;
  min-height: 280px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255,95,162,0.35);
  border-radius: 24px;
  background-color: #1c0f16;
}
.report-mockup-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.placeholder-label { margin-top: 16px; color: #ff5fa2; font-size: 14px; font-weight: 700; font-family: 'Rubik', sans-serif; }

/* ---------- המלצה ---------- */
.testimonial-section { padding: 96px 24px; background-color: #fff2f8; }
.testimonial-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.testimonial-bubble { padding: 56px 40px; border-radius: 36px; background-color: #ffd6e8; }
.testimonial-quote { margin: 0 0 20px; color: #1a1a1a; font-size: 20px; line-height: 1.6; font-weight: 700; font-family: 'Rubik', sans-serif; }
.testimonial-attribution { margin: 0; color: #6b5b62; font-size: 15px; font-family: 'Rubik', sans-serif; }

/* ---------- קלנדר קביעת שיחה (עברית מלאה, מוטמע באתר) ---------- */
.booking-section { padding: 96px 24px; background-color: #fff2f8; }
.booking-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.booking-title { margin: 0 0 12px; color: #1a1a1a; font-size: 36px; font-weight: 900; font-family: 'Rubik', sans-serif; }
.booking-title-accent { color: #ff2d87; }
.booking-subtitle { margin: 0 0 40px; color: #6b5b62; font-size: 17px; font-family: 'Rubik', sans-serif; }
.booking-widget { padding: 40px 32px; border-radius: 28px; background-color: #ffffff; text-align: center; }
.booking-loading, .booking-error, .booking-success { margin: 0 0 20px; font-family: 'Rubik', sans-serif; font-size: 16px; }
.booking-loading { color: #6b5b62; }
.booking-error { color: #d0266f; font-weight: 700; }
.booking-success { color: #ff2d87; font-weight: 700; font-size: 19px; }
/* 1.10.2026 · #394 — לקישורים בתוך הודעת "נקבע 💗" (booking.js · bk-success-link) לא היה שום כלל,
   והם הוצגו בכחול ובקו של הדפדפן — זר לאתר כולו. נתפס בצילום האטלס מהאתר החי. */
.bk-success-link { color: #d0266f; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.bk-success-link:visited { color: #d0266f; }
.bk-success-link:hover, .bk-success-link:focus-visible { color: #ff2d87; }
[hidden] { display: none !important; }

/* ===== בוחר המועדים =====
   רשימת ימים אנכית ולא פס נגלל. פס אופקי בנייד מסתיר מועדים מאחורי
   מחווה שלא כולן מכירות (NN/g: תוכן שמעבר לקצה המסך פשוט לא נראה),
   וכאן כל מועד שלא נראה הוא לקוחה שאבדה. כל יום נפתח במקום לשעות שלו,
   כך שאפשר להגיע ממסך פתוח לבחירת שעה בנגיעה אחת. */
/* גם במסך רחב הרשימה נשארת עמודה אחת בקריאה נוחה, ולא שורות ענקיות */
#bk-pick { max-width: 520px; margin-inline: auto; }
.bk-days { display: flex; flex-direction: column; gap: 12px; }
.bk-pick-title { margin: 0 0 6px; text-align: right; font-size: 19px; font-weight: 900; color: #1a1a1a; }
.bk-pick-note { margin: 0 0 18px; text-align: right; font-size: 14px; line-height: 1.6; color: #6b5b62; }

.bk-day-item {
  border: 1.5px solid #ffd6e8; border-radius: 20px; background: #ffffff; overflow: hidden;
  transition: border-color .15s, background-color .15s;
}
.bk-day-item.is-open { border-color: #d0266f; background: #fff2f8; }

/* שורת היום: יעד מגע רחב לכל רוחב הכרטיס, לא "כדור" קטן */
.bk-day {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 68px; padding: 14px 18px; border: none; background: transparent;
  cursor: pointer; text-align: right; font-family: 'Rubik', sans-serif;
}
.bk-day-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.bk-day-rel { font-size: 17px; font-weight: 900; color: #1a1a1a; line-height: 1.3; }
.bk-day-date { font-size: 14px; line-height: 1.4; color: #6b5b62; }
.bk-day-count { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #d0266f; white-space: nowrap; }
.bk-day-chev {
  flex: 0 0 auto; width: 12px; height: 12px; margin-inline-start: 2px;
  border-left: 2.5px solid #d0266f; border-bottom: 2.5px solid #d0266f;
  transform: rotate(-45deg); transition: transform .18s;
}
.bk-day-item.is-open .bk-day-chev { transform: rotate(135deg); }

/* השעות של היום הפתוח — בתוך הכרטיס, בלי קפיצה למקום אחר במסך */
.bk-slots { display: none; padding: 0 16px 16px; }
.bk-day-item.is-open .bk-slots { display: block; }
.bk-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* ⚠ כפתור שעה (‎17:00‎) — תוכן מספרי בלבד. */
.bk-time {
  direction: ltr; min-height: 52px; border-radius: 14px;
  border: 1.5px solid #ffd6e8; background: #ffffff; color: #1a1a1a;
  font-size: 17px; font-weight: 700; font-family: 'Rubik', sans-serif; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bk-time:hover { border-color: #d0266f; }
/* המילוי הכהה יותר ולא #ff2d87: לבן על #ff2d87 נותן יחס 3.5:1 בלבד */
.bk-time.is-selected { background: #d0266f; border-color: #d0266f; color: #ffffff; }

/* ⚠ שלושה מצבים, ולא שניים. אם "תפוס" ו"לא מוצע" ייראו זהים, שתי
   המשמעויות נמחקות ונשאר רעש אפור — וזו בדיוק הסיבה שהצגת שעות
   תפוסות יכולה להזיק אם עושים אותה גס.
   · תפוס  — קו חוצה, אפור מלא. משדר "היה כאן משהו".
   · סגור  — חיוור, בלי קו. משדר "קיים אבל לא מוצע".
   שתיהן disabled ולכן גם ה-hover וגם ה-cursor נכבים מעצמם. */
.bk-time:disabled { cursor: default; }
/* ⚠ בלי inherit, ה-hover דורס את המסגרת המקווקוות של "סגור" בצבע אחיד
   ומוחק את ההבדל בדיוק ברגע שהעכבר מרחף — כלומר בדיוק כשמסתכלים. */
.bk-time:disabled:hover { border-color: inherit; }
/* ⚠ הערכים כאן תוקנו אחרי **מדידה**, לא אחרי התרשמות. הגרסה הראשונה
   מימשה בדיוק את הכוונה שלמעלה בקוד — ונכשלה בפועל על טלפון:
     · "תפוס"  #b9a9b0 על #f7f2f4 = יחס 2.02:1
     · "סגור"  #cbbcc3 על #fffdfe = יחס 1.80:1
     · ההפרש **בין שני המצבים** = 1.09:1 ברקע, 1.23:1 בטקסט
   כלומר: המספר עצמו כמעט לא נקרא, ושני המצבים נראו זהים. שלוש
   המשמעויות התמוטטו לרעש אפור אחד — התוצאה שהקוד למעלה בא למנוע.

   מה שמפריד עכשיו אינו גוון אלא **צורה**, שנשארת קריאה גם בשמש, גם
   במסך מכויל גרוע וגם לעיוורון צבעים:
     · תפוס — מילוי מלא + מסגרת רציפה + קו חוצה 2px. "היה כאן משהו."
     · סגור — כמעט לבן + מסגרת **מקווקוות** + בלי קו. "קיים, לא מוצע."
   הטקסט: 4.9:1 ו-3.2:1 בהתאמה (היה 2.0 ו-1.8). */
.bk-time.is-taken {
  background: #ece0e5;
  border-color: #d6c2cb;
  color: #6f5f67;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #a8919b;
}
.bk-time.is-closed {
  background: #fffdfe;
  border-style: dashed;
  border-color: #e0cfd7;
  color: #9c8b93;
}

/* מקרא — פעם אחת מעל רשימת הימים, לא מתחת לכל יום.
   ⚠ בלעדיו שלושת המצבים הם רק צבעים: אישה רואה הבדל ולא יודעת מה
     הוא אומר. עם מקרא, "תפוס" הופך למידע ("היא עמוסה, כדאי לתפוס")
     במקום לתקלה ("למה אני לא יכולה ללחוץ"). */
.bk-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center;
  margin: 0 0 16px; padding: 0 4px;
}
.bk-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #6b5b62; line-height: 1.5;
}
.bk-legend i {
  width: 22px; height: 16px; border-radius: 5px; flex: 0 0 auto;
  border: 1.5px solid #ffc2dd; background: #ffffff;
}
.bk-legend i.is-taken { background: #ece0e5; border-color: #d6c2cb; position: relative; }
.bk-legend i.is-taken::after {
  content: ""; position: absolute; inset: auto 2px; top: 50%;
  height: 2px; background: #a8919b;
}
.bk-legend i.is-closed { background: #fffdfe; border-style: dashed; border-color: #e0cfd7; }
.bk-slots-empty { margin: 0; text-align: right; color: #6b5b62; font-size: 15px; line-height: 1.6; }

.bk-more {
  display: block; width: 100%; max-width: 520px; margin: 14px auto 0; min-height: 52px;
  border-radius: 999px; border: 1.5px dashed #ffb8d6; background: #fff2f8;
  color: #d0266f; font-size: 16px; font-weight: 700; font-family: 'Rubik', sans-serif;
  cursor: pointer;
}
.bk-empty { margin: 16px 0 0; color: #6b5b62; font-size: 16px; line-height: 1.7; }

/* ══ "לתחילת היומן" · 16.9.2026 ════════════════════════════════════════════
   🔑 הכרעת איתי. **נמדד:** אחרי פתיחת כל הימים המרחק מהיום האחרון ליום
   הראשון הוא 7,351px — 8.7 מסכים ב-393×830 ו-9.7 ב-360×760.

   🔴 **למה במרכז ולא בפינה.** הכפתור הצף (‎.fc‎) נעגן לשפה **שמאלית או
   ימנית** בלבד — ‎dock()‎ ב-‎shared/floating-cta.js‎ מחזיר ‎x = EDGE‎ או
   ‎x = vw − EDGE − 56‎, ואין ערך שלישי. מרכז השורה הוא לכן המקום היחיד
   ששתי העגינות אינן מגיעות אליו. **נמדד ב-360** (הצר ביותר): העיגון
   השמאלי תופס ‎16–72‎ והימני ‎288–344‎, והפס הזה ברוחב 150 יושב ‎105–255‎ —
   33px מרווח **לכל צד**, בשתי העגינות.
   ⚠ ‎z-index: 89‎ — מתחת ל-‎.fc‎ (90) ומתחת לכותרת (100) במכוון: גם אם
     אי-פעם ייפגשו, זה שמזמין את הפגישה הוא שנשאר למעלה.
   ⚠ ‎max-width‎ ו-‎white-space:nowrap‎ — במסך צר הפס אינו נשבר לשתי שורות
     ואינו גדל לרוחב שיגע בעיגונים. */
.bk-top {
  position: fixed; z-index: 89;
  inset-inline: 0; margin-inline: auto;
  inset-block-end: calc(24px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; max-width: 220px; min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 1.5px solid #ffb8d6; background: #ffffff;
  box-shadow: 0 6px 16px rgba(26, 26, 26, .16);
  color: #d0266f; font-size: 15px; font-weight: 700; font-family: 'Rubik', sans-serif;
  white-space: nowrap; cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.bk-top.is-on { opacity: 1; transform: none; }
/* החץ: ריבוע מסובב, שתי צלעות בלבד — קל יותר מגליף ותמיד באותו צבע.
   ⚠ **צלעות פיזיות ולא לוגיות.** עם ‎border-inline-start‎ ב-RTL הצלע
     נבחרה בימין, והחץ הצביע **ימינה** במקום למעלה — נראה בצילום
     ‎09-back-to-top‎ לפני התיקון. חץ "לתחילת היומן" אינו חץ ניווט צדדי:
     הכיוון שלו הוא מעלה, וזה אותו כיוון בכל שפה. */
.bk-top-chev {
  display: block; width: 9px; height: 9px; margin-top: 3px;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .bk-top { transition: none; transform: none; }
}

/* הכרזה מנומסת לקוראי מסך בלי לשנות את המסך הנראה */
.bk-sr-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* מצב שגיאה עם דרך חזרה, ולא רק הודעה */
.bk-error-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.bk-retry {
  min-height: 48px; padding: 10px 28px; border-radius: 999px;
  border: 1.5px solid #d0266f; background: #ffffff; color: #d0266f;
  font-size: 16px; font-weight: 700; font-family: 'Rubik', sans-serif; cursor: pointer;
}

/* שלב הפרטים — סיכום גדול של מה שנבחר, ושינוי בלחיצה אחת */
.bk-summary {
  background: #ffd6e8; border-radius: 20px; padding: 18px 20px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 5px; text-align: right;
}
.bk-summary-eyebrow { font-size: 13px; font-weight: 700; color: #6b5b62; }
.bk-summary-when { font-size: 20px; font-weight: 900; color: #1a1a1a; line-height: 1.4; }
.bk-summary-time { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.bk-summary-meta { font-size: 14px; color: #6b5b62; }
.bk-change {
  align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 8px 20px;
  border-radius: 999px; border: 1.5px solid #d0266f; background: #ffffff; color: #d0266f;
  font-size: 15px; font-weight: 700; font-family: 'Rubik', sans-serif; cursor: pointer;
}
.bk-reassure { margin: 4px 0 0; text-align: center; font-size: 13px; line-height: 1.7; color: #6b5b62; }
.bk-field-label {
  display: block; text-align: right; font-size: 14px; font-weight: 700;
  color: #1a1a1a; margin-bottom: -6px;
}

/* שלד טעינה — מונע קפיצת תוכן */
.bk-skeleton { padding: 8px 0; }
.bk-sk-row { height: 68px; border-radius: 20px; background: #ffeef6; margin-bottom: 14px; }
.bk-sk-row-sm { height: 68px; margin-bottom: 12px; }
.bk-sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.bk-sk-grid span { height: 52px; border-radius: 14px; background: #ffeef6; }
.bk-skeleton .bk-sk-row, .bk-skeleton .bk-sk-grid span { animation: bkPulse 1.4s ease-in-out infinite; }
@keyframes bkPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* הרשמה מהירה בזמן ההזמנה — קיצור דרך שאפשר להתעלם ממנו לגמרי */
.bk-signup { max-width: 400px; margin: 0 auto 6px; }
.bk-signup-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 12px 16px;
  border-radius: 999px; border: 1.5px solid #dadce0; background: #ffffff;
  color: #1a1a1a; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; box-shadow: 0 2px 6px rgba(26, 26, 26, .07);
  transition: box-shadow .15s;
}
.bk-signup-btn:hover { box-shadow: 0 4px 12px rgba(26, 26, 26, .12); }
.bk-signup-logo { width: 21px; height: 21px; flex: 0 0 auto; display: block; }
.bk-signup-note {
  margin: 10px 0 0; color: #6b5b62; font-size: 13px; line-height: 1.6; text-align: center;
}
.bk-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 4px; color: #6b5b62; font-size: 13px; font-weight: 700;
}
.bk-or::before, .bk-or::after { content: ""; flex: 1 1 auto; height: 1px; background: #ffd6e8; }
.bk-signed-in {
  max-width: 400px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 14px;
  background: #fff2f8; color: #1a1a1a; font-size: 14px; line-height: 1.6; text-align: center;
}

.booking-form { display: flex; flex-direction: column; gap: 14px; max-width: 400px; margin: 0 auto; text-align: right; }
.booking-submit.is-loading { opacity: .75; }
.booking-input {
  padding: 12px 18px;
  border-radius: 14px;
  border: 1.5px solid #ffd6e8;
  /* 16px בכל רוחב מסך — פחות מזה גורם ל-iOS לזום אוטומטי בכניסה לשדה */
  font-size: 16px;
  font-family: 'Rubik', sans-serif;
  text-align: right;
  direction: rtl;
}
/* ⚠ מייל, טלפון וקישור נכתבים משמאל לימין — אחרת ‎@‏, ‎.‏ ו-‎+‏ קופצים לקצה
   הלא נכון בזמן ההקלדה. עד 15.9.2026 זה תוקן רק באזור האישי (רשימת מזהים
   ב-dashboard.css), וטופס קביעת השיחה בדף הבית, השאלון והניהול נשארו RTL
   למרות `dir="ltr"` ב-HTML — כי ה-CSS גבר עליו. כלל אחד כאן, לפי סוג השדה.
   ⚠ #336 · 16.9.2026 — **לפי סוג בלבד, בלי מחלקה.** הכלל חל עד אז רק על
   ‎.booking-input‎, ולכן שדה מייל בלי המחלקה (‎#reset-email‎ בניהול, ‎.visit-input‎
   שכופה RTL) נשאר מימין לשמאל. ‎input[type]‎ (0,1,1) גובר על כל מחלקה בודדת
   שכופה ‎direction: rtl‎ על שדות. */
input[type="email"],
input[type="tel"],
input[type="url"],
input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}
.booking-submit { border: none; font-size: 16px; margin-top: 6px; }
.booking-consent {
  display: flex; align-items: flex-start; gap: 10px; text-align: right;
  font-size: 13px; line-height: 1.5; color: #6b5b62; font-family: 'Rubik', sans-serif;
}
.booking-consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: #ff2d87; }
/* ⚠ 5.9.2026 (סקירה 5.9 B6): קישור בתוך טקסט גוף בגודל 13–16px — ‎#ff2d87‎ על
   הכרטיס הלבן נמדד 3.51, ו-AA דורש 4.5. ‎#d0266f‎ (5.01 על לבן) הוא הגוון הכהה
   שכבר משמש באתר. הוורוד הבהיר נשאר לכותרות הגדולות ולרקעים בלבד. */
.booking-consent a { color: #d0266f; }

/* ---------- מי מגיעה אלייך ---------- */
.about-section { padding: 96px 24px; background-color: #fff2f8; }
.about-inner { display: flex; max-width: 1000px; margin: 0 auto; gap: 56px; align-items: center; }
.about-photo { flex: 0 0 300px; }
/* ⚠ #340, 15.9.2026 — "שטח ורוד ריק ענק" לפני "מי מגיעה אלייך הביתה".
   משבצת התמונה ריקה בכוונה (חוק הברזל למעלה ב-index.html: אין תמונה
   בלי אישור איתי), ובנייד היא תפסה 300px גובה + 56px רווח — בלי שום
   דבר גלוי בתוכם. נמדד: 420px מראש המקטע עד הכותרת, ו-64px בלעדיה.
   🔑 משבצת בלי תמונה אינה תופסת מקום. כשתיכנס ‎<img>‎ — היא חוזרת לבד. */
.about-photo:not(:has(img)) { display: none; }
.about-photo-frame {
  width: 300px; height: 340px; border-radius: 28px; background-color: #ffd6e8;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-hint { color: #d0266f; font-size: 14px; font-weight: 700; text-align: center; padding: 0 20px; }
.about-text { flex: 1 1 auto; }
.about-title { margin: 0 0 6px; font-size: 34px; font-weight: 900; color: #1a1a1a; line-height: 1.25; }
.about-title-accent { color: #ff2d87; }
.about-name { margin: 0 0 20px; font-size: 16px; font-weight: 700; color: #d0266f; }
.about-body { margin: 0 0 16px; color: #1a1a1a; font-size: 17px; line-height: 1.75; }
.about-facts { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.about-facts li { position: relative; padding-inline-start: 26px; color: #6b5b62; font-size: 16px; line-height: 1.6; }
.about-facts li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; color: #ff2d87; font-weight: 900;
}

/* ---------- מחירים ---------- */
.offer-section { padding: 96px 24px; background-color: #ffffff; }
.offer-inner { max-width: 1050px; margin: 0 auto; }
.offer-title { margin: 0 0 12px; font-size: 36px; font-weight: 900; text-align: center; color: #1a1a1a; }
.offer-title-accent { color: #ff2d87; }
.offer-sub { margin: 0 0 48px; text-align: center; color: #6b5b62; font-size: 17px; }
.offer-grid { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.offer-card {
  flex: 1 1 280px; max-width: 320px; background-color: #fff2f8; border-radius: 24px;
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
}
.offer-card.is-featured { background-color: #ffd6e8; }
.offer-badge {
  position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%);
  background: #ff2d87; color: #ffffff; font-size: 12px; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.offer-name { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: #1a1a1a; }
.offer-price { margin: 0; font-size: 40px; font-weight: 900; color: #ff2d87; line-height: 1.1; }
.offer-currency { font-size: 22px; margin-inline-start: 4px; }
.offer-note { margin: 4px 0 0; font-size: 14px; color: #6b5b62; }
.offer-list { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.offer-list li { position: relative; padding-inline-start: 24px; color: #1a1a1a; font-size: 15px; line-height: 1.6; }
.offer-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #ff2d87; font-weight: 900; }
.offer-legal {
  max-width: 720px; margin: 32px auto 0; text-align: center;
  color: #6b5b62; font-size: 14px; line-height: 1.7; font-family: 'Rubik', sans-serif;
}
.offer-legal a { color: #ff2d87; font-weight: 700; }

/* קישור שהוא כמעט כל תוכן הפריט ברשימה (אתר, אימייל, טלפון) הוא יעד
   מגע לכל דבר, ולא קישור בתוך משפט — ולכן חייב 44px גובה.
   בתקנון ובפרטיות הם היו 19px. נתפס ב-WebKit על iPhone, 19.8.2026. */
.legal-main li > a:only-child,
.legal-main li > a[href^="mailto:"],
.legal-main li > a[href^="tel:"],
.legal-main li > a[href="/"] {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------- שאלות נפוצות ---------- */
.faq-section { padding: 96px 24px; background-color: #fff2f8; }
.faq-inner { max-width: 720px; margin: 0 auto; }
.faq-title { margin: 0 0 40px; font-size: 36px; font-weight: 900; text-align: center; color: #1a1a1a; }
.faq-title-accent { color: #ff2d87; }
.faq-item {
  background: #ffffff; border-radius: 18px; padding: 4px 24px; margin-bottom: 12px;
}
.faq-item:last-child { margin-bottom: 0; } /* #340 — ריווח סימטרי בתחתית המקטע */
.faq-q {
  cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 700; color: #1a1a1a;
  list-style: none; position: relative; padding-inline-end: 32px; min-height: 44px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  color: #ff2d87; font-size: 24px; font-weight: 400; line-height: 1;
}
.faq-item[open] .faq-q::after { content: "−"; }
.faq-a { margin: 0 0 20px; color: #6b5b62; font-size: 16px; line-height: 1.75; }
.faq-a a { color: #d0266f; } /* ⚠ סקירה 5.9 B6 — 16px על .faq-item לבן: 3.51 → 5.01 */

/* ---------- רצועת CTA ---------- */
/* ⚠ #340, 15.9.2026 — חוק הריווח של דף הבית: **כל מקטע** מרופד 96px למעלה
   ולמטה מ-768px, ו-64px עד 767px. הרצועה הזו הייתה 80/80, ‎.app-about‎ 72,
   והמדדים / איך זה עובד / הדוח נשארו 96 בנייד כשהשאר ירדו ל-64 — זה המרווח
   הלא-אחיד שאיתי ראה אחרי כרטיסי המדדים. נאכף ב-section-spacing.test.js. */
.cta-band { padding: 96px 24px; background-color: #ff2d87; text-align: center; }
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta-title { margin: 0 0 16px; color: #ffffff; font-size: 34px; font-weight: 900; font-family: 'Rubik', sans-serif; }
.cta-text { margin: 0 0 32px; color: #ffffff; font-size: 17px; font-family: 'Rubik', sans-serif; }
.cta-text:last-child { margin-bottom: 0; } /* #340 — נמדד: 32px עודפים מתחת לתוכן */

/* ---------- פוטר ---------- */
/* ‎color‎ — #340: מקטע כהה מצהיר על טקסט בהיר בעצמו (dark-text.test.js). כל
   ילדי הפוטר צובעים את עצמם היום; טקסט חדש בלי מחלקה לא ייבלע בשחור. */
.site-footer { padding: 48px 24px; background-color: #1a1a1a; color: #ffd6e8; }
.footer-inner { display: flex; max-width: 1100px; margin: 0 auto; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* אותו טעם כמו .nav-link — קישורי הפוטר היו 16px גובה. */
.footer-link {
  color: #ffd6e8; font-size: 14px; text-decoration: none; font-family: 'Rubik', sans-serif;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.footer-dot { color: #6b5b62; }
/* בטלפון הקישורים נשברו לשורות, ונקודה נשארה תלויה בקצה שורה (נמדד 27.9.2026 ב-360
   וב-393). עמודה אחת בלי נקודות — כל קישור בשורה משלו, ואין מה שייתלה.
   ⚠ הסף הוא 899 ולא 767: ששת הקישורים נשברים לשתי שורות עד ~860px (נמדד),
   ו-footer-dots.test.js נכשל אם קישור חדש מזיז את נקודת השבירה מעל הסף.
   ⚠ 11.10.2026 — הסף עלה ל-1023: נוסף "הצהרת נגישות", ושבעת הקישורים של דף הבית
   צריכים ~903px לפי רוחבי הגליפים של Rubik (tools/font-metrics.js), כלומר נשברים
   עד ~951px — מעל 899, ונקודה הייתה נתלית בין 900 ל-951. ב-1024 יש 976px לשורה.
   השער בלי דפדפן: footer-width.test.js (מרווח ביטחון 5%); השער בדפדפן נשאר footer-dots. */
@media (max-width: 1023px) {
  .footer-links { flex-direction: column; gap: 0; }
  .footer-dot { display: none; }
}
.footer-copy { margin: 0; color: #6b5b62; font-size: 13px; font-family: 'Rubik', sans-serif; }

/* ---------- Breakpoints (Webflow: medium ≤991px, small ≤767px) ---------- */
@media (max-width: 991px) {
  /* ⚠ #340: ‎flex-basis‎ של העמודות (460/440px) הוא **גובה** בכיוון עמודה —
     בלי ‎flex: 0 0 auto‎ כל עמודה הייתה מקבלת 460px גובה ריק. ‎stretch‎ ולא
     ‎center‎: הכותרת נשארת צמודה לימין, כמו הרשימה שמתחתיה. */
  .science-inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .science-left, .science-right { flex: 0 0 auto; }
  .science-right { align-self: center; width: 100%; max-width: 480px; }
}

@media (max-width: 991px) {
  .about-inner { flex-direction: column; text-align: center; }
  /* ⚠ #340: בלי stretch, ‎.about-photo‎ מתכווץ לרוחב התוכן שלו — וה-‎width:100%‎
     של המסגרת נפתר ל-0. נמדד ב-390px: רוחב 0, גובה 300. תמונה שהייתה נכנסת
     לכאן הייתה נעלמת בנייד בדיוק כמו המשבצת הריקה. */
  .about-photo { flex: 0 0 auto; align-self: stretch; }
  .about-photo-frame { margin-inline: auto; }
  .about-facts li { text-align: right; }
}

@media (max-width: 767px) {
  .about-section, .offer-section, .faq-section { padding: 64px 20px; }
  /* #340 — חוק הריווח בנייד: 64px לכל מקטע. ‎padding-block‎ בלבד, כדי לא לשנות
     את רוחב התוכן של המקטעים האלה (הריפוד הצידי שלהם נשאר 24px). */
  .values-section, .how-section, .science-section, .cta-band { padding-block: 64px; }
  .about-title, .offer-title, .faq-title { font-size: 28px; }
  .about-photo-frame { width: 100%; max-width: 280px; height: 300px; }
  .offer-card { max-width: 100%; }
  .header-inner { justify-content: center; }
  .nav-links { justify-content: center; gap: 16px; }
  .hero-section { padding: 64px 20px; }
  .hero-title { font-size: 34px; }
  .hero-lead { font-size: 17px; }
  .value-card { max-width: 100%; }
  .values-grid { flex-direction: column; align-items: center; }
  .cta-title { font-size: 26px; }
  .testimonial-bubble { padding: 40px 24px; }
  .testimonial-quote { font-size: 18px; }
  .step-row { padding: 24px 20px; flex-direction: column; text-align: center; }

  /* קלנדר בנייד: 3 שעות בשורה, מטרות מגע של 56px, פדינג מצומצם */
  .booking-section { padding: 64px 16px; } /* #340 — היה 56; חוק הריווח בנייד */
  .booking-widget { padding: 24px 12px; border-radius: 22px; }
  .bk-slots-grid, .bk-sk-grid { grid-template-columns: repeat(3, 1fr); }
  .bk-time { min-height: 56px; font-size: 17px; }
  .bk-day { padding: 14px 14px; min-height: 72px; }
  .bk-slots { padding: 0 12px 14px; }
  .bk-day-rel { font-size: 18px; }
  .bk-summary-when { font-size: 19px; }
  .booking-title { font-size: 28px; }
}

/* ── כותרת דו-לשונית (קיקר) ─────────────────────────────────────────
   המבנה של THE HADIL PROTOCOL: שורת אנגלית קטנה, ומתחתיה העברית.
   בשורה אחת מעורבת, המפריד "·" הוא תו ניטרלי — אלגוריתם ה-BiDi הזיז
   אותו לשמאל האנגלית והוא נראה כמו תבליט תלוש. display:block מפריד
   את שני הכיוונים לשתי שורות ומבטל את הבעיה מהשורש.
   dir=ltr על הקיקר מבטיח שהאמוג'י יישאר בקצה הנכון. */
.kicker {
  display: block;
  direction: ltr;
  unicode-bidi: isolate;
  margin: 0 0 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ff2d87;
  text-transform: uppercase;
}
.kicker-light { color: #ff8ec0; }
/* הכותרת של סקשן הדוח מיושרת לימין (ולא למרכז כמו השתיים האחרות), ולכן
   הקיקר שלה — שהוא בלוק LTR — נצמד לשמאל ויצר מדרגה מול העברית שמתחתיו.
   נתפס באימות ויזואלי ב-390px, 19.8.2026. */
.science-title .kicker { text-align: right; }

/* ── מי אנחנו ומה האפליקציה עושה ────────────────────────────────────────
   נדרש ע"י גוגל לאימות מסך ההסכמה: שם האפליקציה כטקסט גלוי, והסבר מה
   נעשה בנתונים שמתקבלים מהחשבון. 20.8.2026. */
/* ⚠ #340, 15.9.2026 — ריפוד 96 (היה 72) לפי חוק הריווח, ורקע לבן (היה ‎#fff2f8‎).
   הרקע: המקטע יושב מיד אחרי ‎#booking‎, שגם הוא ‎#fff2f8‎ — שני מקטעים באותו
   צבע נקראים כרצועה אחת, והמרווח ביניהם נראה כפול מכל מקום אחר בדף. כל שני
   מקטעים סמוכים בדף הבית נבדלים ברקע (נאכף ב-section-spacing.test.js). */
.app-about { padding: 96px 24px; background-color: #ffffff; }
.app-about-en p:last-child { margin-bottom: 0; } /* #340 — נמדד: 10px עודפים מתחת */
.app-about-inner { max-width: 760px; margin: 0 auto; }
.app-about-title {
  margin: 0 0 20px; color: #1a1a1a; font-size: 28px; font-weight: 900;
  font-family: 'Rubik', sans-serif; direction: ltr; text-align: right;
  unicode-bidi: isolate;
}
.app-about-lead {
  margin: 0 0 16px; color: #6b5b62; font-size: 16px; line-height: 1.75;
  font-family: 'Rubik', sans-serif;
}
.app-about-lead strong { color: #1a1a1a; }
.app-about-lead a { color: #ff2d87; font-weight: 700; }
/* #340 — חוק הריווח בנייד (64px) חל כבר מ-767px; הריפוד הצידי נשאר כפי שהיה. */
@media (max-width: 767px) { .app-about { padding-block: 64px; } }
@media (max-width: 640px) { .app-about { padding-inline: 20px; } }

/* הבלוק האנגלי בסקשן "מי אנחנו" — חריגה מאושרת ומוגבלת (ראו ההערה
   ב-index.html). משני בכוונה: קטן יותר, חלש יותר, ומופרד בקו. */
.app-about-en {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid #ffd6e8;
  text-align: left;
}
.app-about-en-title {
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #1a1a1a;
  font-family: 'Rubik', sans-serif;
}
.app-about-en p {
  margin: 0 0 10px; color: #8a7a80; font-size: 13px; line-height: 1.7;
  font-family: 'Rubik', sans-serif;
}
.app-about-en strong { color: #6b5b62; }
.app-about-en a { color: #ff2d87; font-weight: 700; }

/* ה-u של superfitgirls.
   ⚠ בלוגו הלב מחליף את ה-u, והוא aria-hidden. התוצאה: כל מנוע שמחלץ טקסט
   קרא "sperfitgirls" — שם שאינו קיים — וגוגל דחתה את אימות המיתוג בטענה
   שהשם בדף הבית אינו תואם לשם במסך ההסכמה. האות כאן קיימת בטקסט ובעץ
   הנגישות, ואינה נראית לעין. אין להסתיר אותה ב-display:none — זה היה
   מוציא אותה שוב מהחילוץ. */
.logo-u {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── חבילות מפגשים (#173) ──
   ⚠ הקופסה יושבת בין שער הבטיחות ל"3 הדקות", כי זה הסדר שבו ליה
     קוראת את הכרטיס: מותר למדוד? · כמה נשארו? · מה עושים עכשיו. */
.pkg-box { margin: 0 0 20px; }
/* #229 — הדלפק: פתיחה, ביטול ושיוך */
.pkg-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pkg-cancel { margin-top: 8px; }
.pkg-cancel-panel { margin-top: 10px; background: #fdf3ee; border-inline-start: 4px solid #d9822b;
  border-radius: 10px; padding: 10px 14px; }
.pkg-cancel-panel p { margin: 0 0 8px; }
/* 1.10.2026 — חבילה ששולמה ושהמסמך שלה לא יצא: שורה שנשארת, באותה שפה של
   פאנל הביטול — זה חלון ביטול שלא נסגר, לא הודעה חולפת. */
.pkg-notice { margin: 10px 0; background: #fdf3ee; border-inline-start: 4px solid #d9822b;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; color: #6b4a1f; }
.pkg-notice p { margin: 0; }
#pkg-new-form { margin: 12px 0 16px; }
.pkg-row {
  background: #fff; border: 1px solid #f0e2e9; border-radius: 14px;
  padding: 12px 16px; margin-bottom: 8px;
}
.pkg-row.is-cancelled { opacity: .55; }
.pkg-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pkg-price { color: #ff2d87; font-weight: 700; white-space: nowrap; }
.pkg-row-sub { font-size: 14px; color: #6b5b62; margin-top: 4px; }
.pkg-flag {
  display: inline-block; margin-top: 6px; margin-inline-end: 6px;
  font-size: 13px; padding: 2px 10px; border-radius: 999px;
}
/* #363 — המסמך שכבר יצא. ירוק שקט באותה משפחה של ‎.pay-badge.is-paid‎,
   כשורה ולא כתג: זו עובדה שנסגרה ולא דבר שדורש פעולה. */
.pkg-row-sub.pkg-doc-sent { color: #1e7d43; }
.pkg-flag.is-due { background: #fdecf3; color: #b4245e; }
.pkg-flag.is-warn { background: #fff6e5; color: #8a6100; }
.pkg-send-doc {
  display: inline-block; margin-top: 6px; margin-inline-start: 6px;
  font: inherit; font-size: 13px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid #ff2d87; background: #fff; color: #ff2d87; cursor: pointer;
}
.pkg-send-doc[disabled] { opacity: .5; cursor: default; }


/* ═══ 10.9.2026 — טקסט דף הנחיתה נכנס לדף הבית ═══
   ⚠ `.lat` — מונח לטיני בתוך עברית יושב בריצה משלו, מעט קטן יותר
     ובלי שבירה. חוק ה-RTL, א2: בלעדיו "Tanita RD-545" נחתך באמצע.
   ⚠ `.nb` — צירוף עברי עם מקף שאסור שיישבר. **בלי U+2011** — לפונטים
     עבריים רבים אין גליף עבורו, וזו הייתה הפרה שנמצאה בדף הנחיתה. */
.lat{font-size:.94em;white-space:nowrap;unicode-bidi:isolate;direction:ltr}
.nb{white-space:nowrap}

/* ═══ רצועת המדדים ═══
   🔴 **נמדד בדפדפן 10.9.2026.** היא ירשה את `values-grid`, שנבנה
     לשלושה כרטיסי ערך — וארבעת המדדים התפרסו 3+1, כשהרביעי נופל
     לשורה שנייה לבדו. וגם: כרטיסים בגובה 150px לשתי מילים.
   🔑 גריד משלה: ארבע עמודות ברוחב מלא, שתיים בטאבלט, שתיים בנייד. */
.metrics-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
}
.metrics-grid .value-card{
  text-align:center; padding:1.1rem .75rem; min-height:0;
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
}
.metrics-grid .value-heading{margin:0; font-size:1rem}
.metric-en{
  display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.6;margin:0;
}
@media (max-width:860px){ .metrics-grid{grid-template-columns:repeat(2,1fr)} }

/* שורת המיצוב מתחת לכותרת — שקטה, לא קריאה לפעולה */
.hero-kicker{
  margin:1.1rem 0 0; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55; font-weight:600;
}

/* כתובת מייל בתוך משפט — יחידה אחת. בלי זה הכתובת נשברה במקף שבתוכה ("ל-qa-" בשורה אחת ו-".iz394@…"
   בשורה הבאה, מסך "נשמר" באייפון, 1.10.2026). inline-block מעביר אותה שלמה לשורה הבאה; כתובת ארוכה
   מהשורה עצמה עדיין נשברת (anywhere), ולא מרחיבה את הדף. */
.addr { display: inline-block; max-width: 100%; overflow-wrap: anywhere; unicode-bidi: isolate; }