/* תורך — אתר השיווק. נבנה בשרת מ: גופנים מקומיים + web/shared/styles/{tokens,base,components}.css + web/marketing/marketing.css */

@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/m/fonts/ibm-plex-sans-hebrew-hebrew-400-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/m/fonts/ibm-plex-sans-hebrew-latin-400-normal.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;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/m/fonts/ibm-plex-sans-hebrew-hebrew-500-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/m/fonts/ibm-plex-sans-hebrew-latin-500-normal.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;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/m/fonts/ibm-plex-sans-hebrew-hebrew-600-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/m/fonts/ibm-plex-sans-hebrew-latin-600-normal.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;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/m/fonts/ibm-plex-sans-hebrew-hebrew-700-normal.woff2) format('woff2');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'IBM Plex Sans Hebrew';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/m/fonts/ibm-plex-sans-hebrew-latin-700-normal.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;
}
@font-face {
  font-family: 'Frank Ruhl Libre Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/m/fonts/frank-ruhl-libre-hebrew-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'Frank Ruhl Libre Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/m/fonts/frank-ruhl-libre-latin-wght-normal.woff2) format('woff2-variations');
  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;
}
@font-face {
  font-family: 'Heebo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/m/fonts/heebo-hebrew-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/m/fonts/heebo-latin-wght-normal.woff2) format('woff2-variations');
  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;
}

/*
 * תורך — טוקנים של מערכת העיצוב.
 *
 * שתי חלופות על אותם רכיבים ומסכים:
 *   A · "אטלייה"          — נייר שנהב חם, דיו עמוק, הדגשת ורד־חימר אחת (פוקוס, לשונית נוכחית, קישורים בלבד).
 *                           סריף רק בסימן המילולי ובכותרת המסך/העמוד; כל טקסט העבודה ב-Plex Sans.
 *   B · "בהיר ומודרני"   — רקע לבן/שנהב בהיר מאוד, טקסט כהה וקריא, הדגשת טורקיז עמוק אחת, Heebo בלבד במסכי העבודה.
 *
 * ברירת מחדל: A (גם בלי data-theme). ההחלפה נעשית ב-<html data-theme="a|b">.
 * כל זוג טקסט/רקע נבדק ל-AA (4.5:1 לטקסט, 3:1 לגבולות רכיבים). אין טקסט גוף אפור־בהיר.
 * משבצת מותג לעסק: --brand / --brand-on / --brand-tint (נדרסים ב-style על עוטף; ראו web/shared/brand.ts).
 */

:root,
:root[data-theme='a'] {
  color-scheme: light;

  /* ---------- משטחים ---------- */
  --bg: #f7f2ea; /* דף — נייר שנהב חם */
  --surface: #fffcf7; /* כרטיס/גיליון מורם */
  --surface-2: #efe8dc; /* שקוע: שדות מושבתים, שלד טעינה */
  --surface-3: #e7ded0;
  --overlay: rgba(34, 27, 23, 0.46);

  /* ---------- קווים ---------- */
  --line: #e4dacd; /* קו שיער דקורטיבי */
  --line-strong: #d2c5b4;
  --line-control: #8e8175; /* גבול שדה/צ'קבוקס — 3.4:1 מול הדף */

  /* ---------- טקסט ---------- */
  --text: #221b17; /* 15.2:1 */
  --text-2: #4e443e; /* 8.5:1 */
  --text-3: #6b5f57; /* 5.5:1 — הערות וכיתובים בלבד */
  --text-disabled: #a39488;
  --text-mark: #14100e; /* סימן מילולי */

  /* ---------- הדגשה (אחת) ---------- */
  --accent: #8e463e; /* ורד־חימר — 6.1:1 מול הדף */
  --accent-hover: #6e3530;
  --accent-strong: #6e3530;
  --accent-tint: #f4e4df;
  --accent-tint-2: #faf1ec;
  --accent-line: #ddb3a9;
  --on-accent: #fffcf7;

  /* פעולה ראשית — דיו מלא (ההדגשה שמורה לפוקוס, מצב נוכחי וקישורים) */
  --primary: #221b17;
  --primary-hover: #3b302a;
  --on-primary: #fffcf7;

  --focus: #8e463e;
  --focus-ring: 0 0 0 3px var(--accent-tint);
  --focus-control: #221b17; /* גבול שדה בפוקוס — דיו, לא ורד (נבדל מאדום של שגיאה) */

  /* ---------- סכנה ---------- */
  --danger: #a0312a;
  --danger-hover: #86261f;
  --danger-tint: #fbeae6;
  --danger-line: #d9a198; /* קו דקורטיבי (התראות) */
  --danger-control: #c4675f; /* גבול כפתור הרסני שקט — 3.5:1 מול הדף */
  --on-danger: #ffffff;
  --rec: #b3261e; /* הקלטה פעילה */

  /* ---------- גוונים סמנטיים (תמיד עם אייקון + טקסט) ---------- */
  --info-fg: #23506d;
  --info-bg: #e0e9f0;
  --info-line: #b7cadb;
  --success-fg: #2e5a38;
  --success-bg: #e3ede0;
  --success-line: #b5cdb0;
  --warning-fg: #7a4d0a;
  --warning-bg: #f5e8cc;
  --warning-line: #ddc08a;
  --danger-fg: #a0312a;
  --danger-bg: #fbeae6;

  /* ---------- סטטוס תור (צבע + אייקון + תווית) ---------- */
  --st-booked-fg: #4e443e;
  --st-booked-bg: #efe8dc;
  --st-confirmed-fg: #2e5a38;
  --st-confirmed-bg: #e3ede0;
  --st-arrived-fg: #23506d;
  --st-arrived-bg: #e0e9f0;
  /* "בטיפול" בגוון ענבר עמוק (6.4:1) — לא ורד־חימר, כדי שלא ייראה כמו "לא הגיעה" האדום */
  --st-progress-fg: #74480c;
  --st-progress-bg: #f5e6c8;
  --st-completed-fg: #3a322d;
  --st-completed-bg: #e8e1d6;
  --st-cancelled-fg: #665a52;
  --st-cancelled-bg: #f1ece5;
  --st-noshow-fg: #98302a;
  --st-noshow-bg: #f6e0db;

  /* ---------- משבצת מותג לעסק (ברירת מחדל: דיו תורך) ---------- */
  --brand: #221b17;
  --brand-on: #fffcf7;
  --brand-tint: #efe8dc;

  /* ---------- טיפוגרפיה ---------- */
  --font-ui: 'IBM Plex Sans Hebrew', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Frank Ruhl Libre Variable', 'Frank Ruhl Libre', 'David', 'Times New Roman', serif;
  --font-mark: var(--font-display);
  --font-num: var(--font-ui);
  --mark-weight: 500;

  --fs-caption: 0.8125rem; /* 13 — רצפה לכל טקסט */
  --fs-small: 0.875rem; /* 14 */
  --fs-body: 1rem; /* 16 */
  --fs-input: 1.0625rem; /* 17 — שדות לעולם לא מתחת ל-16 */
  --fs-h3: 1.125rem; /* 18 */
  --fs-h2: 1.375rem; /* 22 */
  --fs-h1: 1.75rem; /* 28 */
  --fs-display: 2.125rem; /* 34 */
  --fs-time: 1rem; /* שעות ביומן */
  --fs-amount: 2.25rem;

  --lh-tight: 1.15;
  --lh-head: 1.25;
  --lh-ui: 1.4;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* סריף רק בסימן המילולי ובכותרת המסך/העמוד (topbar, page-title, מסכי כניסה). */
  --heading-font: var(--font-display);
  --heading-weight: 500;
  /* כותרות בתוך זרימת עבודה (גיליון, שאלת אישור, מצב ריק/כשל, מקטע, שם עסק) — סנס, לקריאה מהירה */
  --title-font: var(--font-ui);
  --title-weight: 600;

  /* ---------- היררכיה טיפוגרפית — תפקידים (סבב UX 2.10.2026) ----------
     כותרת מסך > כותרת מקטע > שם (לקוחה / שירות) ושעה > מידע משני > הערה.
     רכיבים משותפים צורכים רק את התפקידים האלה (components.css: topbar__title, section-title, list-row__*),
     כך ששתי החלופות נשענות על אותו סולם. מהסולם הקיים בלבד; שום טקסט לא קטן מ-13px ושום גודל לא הוקטן. */
  --type-screen-size: 1.625rem; /* כותרת המסך בסרגל העליון */
  --type-screen-weight: var(--heading-weight);
  --type-section-size: var(--fs-h3); /* 18 — מעל שם הרשומה, כדי שמקטע לא ייראה כעוד שורה */
  --type-section-weight: var(--title-weight);
  --type-name-size: var(--fs-body); /* שם לקוחה / כותרת שורה */
  --type-name-weight: var(--fw-semibold);
  --type-time-size: var(--fs-time); /* שעה — ספרות טבלאיות */
  --type-time-weight: var(--fw-semibold);
  --type-meta-size: var(--fs-small); /* טיפול, טלפון, משך — מידע משני */
  --type-meta-color: var(--text-2);
  --type-note-size: var(--fs-caption); /* הערות, שעת סיום, "עודכן לפני…" */
  --type-note-color: var(--text-3);

  /* ---------- ריווח (בסיס 4px) ---------- */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --gutter: 16px;

  /* ---------- רדיוסים ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;
  --r-control: 12px;
  --r-card: 16px;
  --r-sheet: 24px;
  --r-chip: 999px;
  --r-status: 999px;

  /* ---------- הצללה (חמה) ----------
     e-1 = משטח במנוחה בתוך זרימת התוכן (כרטיס, שורה). e-2 / e-3 / e-fab = שכבות צפות בלבד
     (גיליון, חלון, הודעה קופצת, סרגל שמירה / אזור פעולה). ב-B ‏e-1 שטוח — צל שמור לשכבות צפות. */
  --e-0: 0 0 0 1px var(--line);
  --e-1: 0 1px 0 rgba(34, 27, 23, 0.04), 0 1px 3px rgba(34, 27, 23, 0.07);
  --e-2: 0 2px 6px rgba(34, 27, 23, 0.06), 0 12px 28px -6px rgba(34, 27, 23, 0.14);
  --e-3: 0 -10px 40px rgba(34, 27, 23, 0.2);
  --e-fab: 0 12px 24px -10px rgba(34, 27, 23, 0.55);

  /* ---------- תנועה ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;

  /* ---------- מטרות מגע ---------- */
  --tap-min: 44px;
  --tap: 48px;
  --tap-lg: 56px;
  --control-h: 52px;
  --row-min: 60px;

  /* ---------- שכבות ---------- */
  --z-sticky: 20;
  --z-nav: 30;
  --z-fab: 31;
  --z-banner: 40;
  --z-review: 45;
  --z-sheet: 50;
  --z-toast: 70;
  --z-blocking: 80;

  /* ---------- מבנה ---------- */
  --topbar-h: 64px;
  --bottomnav-h: 64px;
  --action-h: 56px;
  --sidenav-w: 264px;
  --content-max: 760px;
  --theme-color: #f7f2ea;
}

:root[data-theme='b'] {
  color-scheme: light;

  --bg: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f3f4f2;
  --surface-3: #e9ebe8;
  --overlay: rgba(21, 23, 28, 0.44);

  --line: #e4e6e9;
  --line-strong: #cbd0d6;
  --line-control: #858b95; /* 3.4:1 מול לבן */

  --text: #15171c; /* 17:1 */
  --text-2: #4a4f58; /* 8.2:1 */
  --text-3: #5b616b; /* 6.2:1 — לא אפור־בהיר */
  --text-disabled: #9aa0a8;
  --text-mark: #0e1014;

  --accent: #0f6b63; /* טורקיז עמוק — 6.4:1 מול לבן */
  --accent-hover: #0b5750;
  --accent-strong: #094a44;
  --accent-tint: #e3f1ee;
  --accent-tint-2: #f1f8f6;
  --accent-line: #9ccbc3;
  --on-accent: #ffffff;

  --primary: #0f6b63;
  --primary-hover: #0b5750;
  --on-primary: #ffffff;

  --focus: #0f6b63;
  --focus-ring: 0 0 0 3px #cfe7e2;
  --focus-control: #0f6b63;

  --danger: #b42318;
  --danger-hover: #912018;
  --danger-tint: #fdecea;
  --danger-line: #f1b0a9;
  --danger-control: #d0675e; /* 3.6:1 מול לבן */
  --on-danger: #ffffff;
  --rec: #b42318;

  --info-fg: #1f4f8f;
  --info-bg: #e8f0fb;
  --info-line: #b9cdeb;
  --success-fg: #1d6b3a;
  --success-bg: #e6f4ea;
  --success-line: #a9d4b6;
  --warning-fg: #8a5300;
  --warning-bg: #fdf1dc;
  --warning-line: #ebc98c;
  --danger-fg: #b42318;
  --danger-bg: #fdecea;

  --st-booked-fg: #3d4452;
  --st-booked-bg: #eef0f3;
  --st-confirmed-fg: #1d6b3a;
  --st-confirmed-bg: #e3f4e8;
  --st-arrived-fg: #1f4f8f;
  --st-arrived-bg: #e5eefa;
  --st-progress-fg: #0f6b63;
  --st-progress-bg: #e3f1ee;
  --st-completed-fg: #2b2f36;
  --st-completed-bg: #e9ebee;
  --st-cancelled-fg: #5b616b;
  --st-cancelled-bg: #f1f2f4;
  --st-noshow-fg: #a12c23;
  --st-noshow-bg: #fce9e7;

  --brand: #0f6b63;
  --brand-on: #ffffff;
  --brand-tint: #e3f1ee;

  --font-ui: 'Heebo Variable', 'Heebo', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-ui);
  --font-mark: var(--font-ui);
  --font-num: var(--font-ui);
  --mark-weight: 800;

  --fs-caption: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-input: 1.0625rem;
  --fs-h3: 1.125rem;
  --fs-h2: 1.3125rem; /* 21 */
  --fs-h1: 1.625rem; /* 26 */
  --fs-display: 1.875rem;
  --fs-time: 1.0625rem; /* ספרות גדולות מעט יותר */
  --fs-amount: 2.25rem;

  --lh-tight: 1.2;
  --lh-head: 1.3;
  --lh-ui: 1.4;
  --lh-body: 1.55;
  --heading-font: var(--font-ui);
  --heading-weight: 700;
  --title-font: var(--font-ui);
  --title-weight: 700;

  --type-screen-size: 1.375rem; /* 22 */
  --type-section-size: 1.125rem; /* 18 (היה 17 — קרוב מדי לשם הרשומה) */
  --type-name-weight: var(--fw-bold);
  --type-time-weight: var(--fw-bold);

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-control: 10px;
  --r-card: 14px;
  --r-sheet: 20px;
  --r-chip: 10px;
  --r-status: 6px;

  --e-0: 0 0 0 1px var(--line);
  /* משטח במנוחה: בלי צל (סבב UX 2.10) — כרטיסים ושורות נפרדים בקו שיער או ברווח, לא בהגבהה מדומה.
     צל נשאר רק לשכבות צפות (e-2, e-3, e-fab). */
  --e-1: none;
  --e-2: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -6px rgba(16, 24, 40, 0.12);
  --e-3: 0 -8px 32px rgba(16, 24, 40, 0.16);
  --e-fab: 0 6px 16px -4px rgba(15, 107, 99, 0.45), 0 2px 4px rgba(16, 24, 40, 0.12);

  --tap-min: 44px;
  --tap: 52px; /* מטרות מגע גדולות מעט יותר */
  --tap-lg: 56px;
  --control-h: 56px;
  --row-min: 68px;

  --topbar-h: 60px;
  --bottomnav-h: 68px;
  --theme-color: #ffffff;
}


/* תורך — בסיס: איפוס, טיפוגרפיה, פוקוס, תנועה מופחתת, עזרי נגישות. תכונות לוגיות בלבד (RTL). */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  /* מקלדת פתוחה (iOS): גובה אזור התצוגה הנראה — מחושב ב-viewport.ts */
  --vvh: 100dvh;
  --kb-inset: 0px;
  --top-offset: 0px;
  scroll-padding-block-start: calc(var(--topbar-h) + var(--top-offset) + 8px);
  scroll-padding-block-end: calc(var(--bottomnav-h) + var(--action-h) + 24px);
}

body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  line-height: var(--lh-head);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--accent-tint);
  color: var(--text);
}

/* עזרים */
.vh {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tnum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

.bidi {
  unicode-bidi: isolate;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.muted {
  color: var(--text-2);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--text-3);
  line-height: 1.45;
}

.stack {
  display: grid;
  gap: var(--gap, var(--s-4));
  align-content: start;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap, var(--s-2));
  flex-wrap: wrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-2);
  inset-block-start: var(--s-2);
  z-index: var(--z-blocking);
  padding: var(--s-2) var(--s-4);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-md);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* סימן מילולי — טיפוגרפיה בלבד עד לבחירת לוגו סופי; ך מוארכת מעט */
.wordmark {
  font-family: var(--font-mark);
  font-weight: var(--mark-weight);
  color: var(--text-mark);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: flex-start;
}

.wordmark__kaf {
  display: inline-block;
  transform: scaleY(1.18);
  transform-origin: 50% 10%;
}

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

@media (forced-colors: active) {
  .btn,
  .control,
  .chip,
  .status {
    border: 1px solid CanvasText;
  }
}


/*
 * תורך — רכיבים. אותם רכיבים בשתי החלופות; הבדלים מבניים (לא רק צבע) תחת [data-theme='b'].
 * עקרונות: מטרות מגע 44–56px, שדות ≥16px, סטטוס = צבע + אייקון + טקסט, פוקוס נראה, RTL לוגי.
 * ריחוף (:hover) רק במכשירים עם עכבר — @media (hover: hover) — כדי שכפתור שנלחץ בטלפון לא יישאר "מודגש".
 */

/* =========================================================
   אייקונים
   ========================================================= */
.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--dir:dir(rtl) {
  transform: scaleX(-1);
}
.icon--spin {
  animation: t-spin 800ms linear infinite;
}
@keyframes t-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   כפתורים
   ========================================================= */
.btn {
  --btn-h: var(--tap);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--btn-h);
  min-inline-size: var(--tap-min);
  padding-inline: var(--s-5);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.btn:active:not([aria-disabled='true']):not(:disabled) {
  transform: translateY(1px);
}
.btn__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-inline-size: 0;
}
.btn__spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.btn[aria-busy='true'] .btn__label {
  visibility: hidden;
}
.btn--sm {
  --btn-h: var(--tap-min);
  font-size: 0.9375rem;
  padding-inline: var(--s-4);
}
.btn--lg {
  --btn-h: var(--tap-lg);
  font-size: var(--fs-input);
  padding-inline: var(--s-6);
}
.btn--block {
  inline-size: 100%;
}
.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--primary-hover);
  }
}
.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-control);
}
@media (hover: hover) {
  .btn--secondary:hover {
    background: var(--surface-2);
  }
}
.btn--quiet {
  background: transparent;
  color: var(--text);
  padding-inline: var(--s-3);
}
@media (hover: hover) {
  .btn--quiet:hover {
    background: var(--surface-2);
  }
}
.btn--danger {
  background: var(--danger);
  color: var(--on-danger);
}
@media (hover: hover) {
  .btn--danger:hover {
    background: var(--danger-hover);
  }
}
.btn--danger-quiet {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-control);
}
@media (hover: hover) {
  .btn--danger-quiet:hover {
    background: var(--danger-tint);
  }
}
.btn:disabled,
.btn[aria-disabled='true']:not([aria-busy='true']) {
  background: var(--surface-2);
  color: var(--text-disabled);
  border-color: var(--line);
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy='true'] {
  cursor: progress;
}
[data-theme='a'] .btn--quiet {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--line-strong);
}
[data-theme='b'] .btn {
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}
/*
 * שלושה משקלים חזותיים (סבב UX 2.10, ממצא 8) — אותם רכיבים ב-A וב-B:
 *   1. פעולה ראשית — מילוי מלא (‎.btn--primary, ‎.primary-action). אחת בכל הקשר.
 *   2. פעולות משניות — שקטות: מסגרת דקה בניגודיות ≥3:1 בלי מילוי צבע (‎.btn--secondary), או טקסט בדיו עם קו תחתון
 *      (‎.btn--quiet). לא בטורקיז: הצבע שמור לפעולה הראשית, לקישורי ניווט (‎.link), למצב נוכחי ולפוקוס.
 *   3. מידע — בלי מסגרת מיותרת (שורות בקו שיער, כרטיס בלי צל; components: ‎.card, ‎.list, ‎.alert).
 */
/* B: גבול 1px בניגודיות ≥3:1 (‎#858B95 — 3.4:1 מול לבן, 3.3:1 מול הדף) — לא ‎--line-strong (1.5:1); משקל טקסט
   חצי־מודגש, כך שהכפתור המשני לא מתחרה במילוי של הפעולה הראשית */
[data-theme='b'] .btn--secondary {
  border-width: 1px;
  border-color: var(--line-control);
  color: var(--text);
}
[data-theme='b'] .btn--secondary,
[data-theme='b'] .btn--quiet,
[data-theme='b'] .btn--danger-quiet {
  font-weight: var(--fw-semibold);
}
@media (hover: hover) {
  [data-theme='b'] .btn--secondary:hover {
    border-color: var(--text-2);
    background: var(--surface-2);
  }
}
/* B: פעולה שקטה בדיו עם קו תחתון (כמו A) — לא בטורקיז; הקו (‎--line-control, ‏3.4:1) מסמן שזו פעולה */
[data-theme='b'] .btn--quiet {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--line-control);
}
@media (hover: hover) {
  [data-theme='b'] .btn--quiet:hover {
    background: var(--surface-2);
    text-decoration-color: currentColor;
  }
}

.icon-btn {
  position: relative;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  flex: none;
  transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover {
    background: var(--surface-2);
  }
}
.icon-btn:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
}
.icon-btn--outline {
  border: 1px solid var(--line-control);
  background: var(--surface);
}
.icon-btn--lg {
  inline-size: var(--tap);
  block-size: var(--tap);
}
[data-theme='b'] .icon-btn {
  border-radius: var(--r-md);
}

.link {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-line);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  cursor: pointer;
}
@media (hover: hover) {
  .link:hover {
    text-decoration-color: currentColor;
  }
}

/* =========================================================
   שדות
   ========================================================= */
.field {
  display: grid;
  gap: 6px;
  align-content: start;
  min-inline-size: 0;
}
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: var(--lh-ui);
}
.field__req {
  color: var(--danger);
  margin-inline-start: 2px;
}
.field__opt {
  font-weight: var(--fw-regular);
  color: var(--text-3);
  font-size: var(--fs-caption);
}
.field__hint {
  font-size: var(--fs-caption);
  color: var(--text-3);
  line-height: 1.45;
}
.field__error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--danger);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.field__error .icon {
  margin-block-start: 1px;
}

.control {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--control-h);
  padding-inline: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}
/* פוקוס בשדה: גבול כהה בעובי 2px + הילה — לא אדום, כדי שלא ייראה כשגיאה */
.control:focus-within {
  border-color: var(--focus-control);
  box-shadow:
    inset 0 0 0 1px var(--focus-control),
    var(--focus-ring);
}
.control__input {
  scroll-margin-block: 20px;
  flex: 1;
  min-inline-size: 0;
  inline-size: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: var(--fs-input);
  line-height: 1.4;
  padding-block: 12px;
  color: var(--text);
}
.control__input:focus-visible {
  outline: none;
}
.control__input::placeholder {
  color: var(--text-3);
  opacity: 1;
}
.control__input[dir='ltr'] {
  text-align: right;
}
.control__lead,
.control__end {
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  flex: none;
}
.control__end {
  margin-inline-end: calc(var(--s-2) * -1);
}
.control__affix {
  font-size: var(--fs-input);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}
.control--textarea {
  align-items: stretch;
  padding-block: 2px;
}
.control--textarea .control__input {
  resize: vertical;
  min-block-size: 96px;
}
.control--select .control__input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 28px;
  cursor: pointer;
}
.control__chev {
  position: absolute;
  inset-inline-end: 14px;
  pointer-events: none;
  color: var(--text-2);
}
.control--invalid {
  border-color: var(--danger);
  box-shadow: inset 0 0 0 1px var(--danger);
}
.control--invalid:focus-within {
  border-color: var(--danger);
  box-shadow:
    inset 0 0 0 1px var(--danger),
    0 0 0 3px var(--danger-tint);
}
.control--disabled {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text-disabled);
}
/* סכום: ₪ משמאל לספרות — כמו בתצוגת formatMoney בעברית ("‏180 ₪" מוצג "₪ 180") */
.control--money .control__input {
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  text-align: left;
}
/* B: גבול 1.5px בניגודיות 3.4:1 (WCAG 1.4.11) — חד יותר מ-A, לא אפור־בהיר */
[data-theme='b'] .control {
  border-width: 1.5px;
  border-color: var(--line-control);
}
@media (hover: hover) {
  [data-theme='b'] .control:hover:not(:focus-within):not(.control--invalid) {
    border-color: var(--text-2);
  }
}
[data-theme='b'] .control:focus-within {
  border-color: var(--focus-control);
}
[data-theme='b'] .control--invalid,
[data-theme='b'] .control--invalid:focus-within {
  border-color: var(--danger);
}
[data-theme='b'] .control--disabled {
  border-color: var(--line);
}
[data-theme='b'] .field__label {
  font-size: 0.9375rem;
}

/* Checkbox — קופסה 22px בתוך מטרה של 44px */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--tap-min);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}
.check__input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  border: 1.5px solid var(--line-control);
  border-radius: 6px;
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
/* סימן V — צורה פיזית (לא תלוית כיוון) */
.check__input::after {
  content: '';
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--on-primary);
  border-left: 2px solid var(--on-primary);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0;
}
.check__input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.check__input:checked::after {
  opacity: 1;
}
.check__input:indeterminate {
  background: var(--primary);
  border-color: var(--primary);
}
.check__input:indeterminate::after {
  opacity: 1;
  border-left: 0;
  block-size: 0;
  transform: none;
}
.check__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.check__input:disabled {
  background: var(--surface-2);
  border-color: var(--line);
}
.check__text {
  min-inline-size: 0;
}
.check__hint {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* Switch */
.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-block-size: var(--tap);
  cursor: pointer;
}
.switch__text {
  min-inline-size: 0;
}
.switch__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  inline-size: 48px;
  block-size: 28px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1.5px solid var(--line-control);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease);
}
.switch__input::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 21px;
  block-size: 21px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: inset-inline-start var(--dur-2) var(--ease);
}
.switch__input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.switch__input:checked::after {
  inset-inline-start: 22px;
}
.switch__input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.switch__state {
  font-size: var(--fs-caption);
  color: var(--text-2);
  font-weight: var(--fw-semibold);
  margin-inline-start: var(--s-2);
  /* "פעיל/כבוי" לא נשבר לאות בכל שורה ליד תווית/רמז ארוכים — הרמז הוא שנשבר */
  white-space: nowrap;
  flex: none;
}
.switch > .row {
  flex: none;
}

/* SegmentedControl (radiogroup) */
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: calc(var(--r-control) + 3px);
  background: var(--surface-2);
  border: 1px solid var(--line);
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg--block {
  display: flex;
}
.seg__opt {
  position: relative;
  flex: 1;
  display: flex;
}
.seg__input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.seg__label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: var(--tap-min);
  padding-inline: var(--s-3);
  border-radius: var(--r-control);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--text-2);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease);
}
/* נבחר: משטח + טבעת בניגודיות ≥3:1 + משקל — לא צל (צל שמור לשכבות צפות) ולא צבע בלבד */
.seg__input:checked + .seg__label {
  background: var(--surface);
  color: var(--text);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 1px var(--line-control);
}
.seg__input:focus-visible + .seg__label {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
[data-theme='b'] .seg__label {
  min-block-size: 48px;
}
[data-theme='b'] .seg__input:checked + .seg__label {
  color: var(--accent-strong);
  font-weight: var(--fw-bold);
}

/* =========================================================
   צ'יפים, סטטוס, תגים
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--tap-min);
  padding-inline: var(--s-4);
  border-radius: var(--r-chip);
  border: 1px solid var(--line-control);
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  color: var(--text);
  flex: none;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .chip:hover {
    background: var(--surface-2);
  }
}
.chip--with-avatar {
  padding-inline-start: 6px;
}
.chip[aria-pressed='true'],
.chip[aria-checked='true'] {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.chip__check {
  display: none;
}
.chip__count {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: inherit;
  opacity: 0.85;
}
/* B: צ'יפ לא נבחר עדיין מזוהה כרכיב לחיץ — גבול ≥3:1 */
[data-theme='b'] .chip {
  border-color: var(--line-control);
}
[data-theme='b'] .chip[aria-pressed='true'],
[data-theme='b'] .chip[aria-checked='true'] {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border-color: var(--accent);
  font-weight: var(--fw-semibold);
}
[data-theme='b'] .chip[aria-pressed='true'] .chip__check,
[data-theme='b'] .chip[aria-checked='true'] .chip__check {
  display: inline-flex;
}

.status {
  --st-fg: var(--text-2);
  --st-bg: var(--surface-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-block-size: 26px;
  padding-inline: 8px 10px;
  border-radius: var(--r-status);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  white-space: nowrap;
  background: var(--st-bg);
  color: var(--st-fg);
  flex: none;
}
.status .icon {
  stroke-width: 2;
}
.status--booked {
  --st-fg: var(--st-booked-fg);
  --st-bg: var(--st-booked-bg);
}
.status--confirmed {
  --st-fg: var(--st-confirmed-fg);
  --st-bg: var(--st-confirmed-bg);
}
.status--arrived {
  --st-fg: var(--st-arrived-fg);
  --st-bg: var(--st-arrived-bg);
}
.status--in_progress {
  --st-fg: var(--st-progress-fg);
  --st-bg: var(--st-progress-bg);
}
.status--completed {
  --st-fg: var(--st-completed-fg);
  --st-bg: var(--st-completed-bg);
}
.status--cancelled {
  --st-fg: var(--st-cancelled-fg);
  --st-bg: var(--st-cancelled-bg);
}
.status--no_show {
  --st-fg: var(--st-noshow-fg);
  --st-bg: var(--st-noshow-bg);
}
/* בקשת הזמנה שממתינה לאישור העסק — גוון אזהרה (אייקון שעון + תווית, לא צבע בלבד) */
.status--pending_approval {
  --st-fg: var(--warning-fg);
  --st-bg: var(--warning-bg);
}
[data-theme='b'] .status {
  min-block-size: 28px;
  font-size: 0.8125rem;
  padding-inline: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-fg) 18%, transparent);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.badge--neutral {
  background: var(--surface-3);
  color: var(--text);
}

.provider-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 28px;
  padding-inline: 8px 10px;
  border: 1px dashed var(--line-control);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  background: var(--surface);
  line-height: 1.2;
}
.provider-badge .icon {
  color: var(--text-3);
}

/* =========================================================
   אווטר, כרטיס, שורות רשימה
   ========================================================= */
.avatar {
  --av: 40px;
  inline-size: var(--av);
  block-size: var(--av);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  font-size: calc(var(--av) * 0.38);
  font-weight: var(--fw-semibold);
  background: var(--av-bg, var(--surface-2));
  color: var(--av-fg, var(--text-2));
  line-height: 1;
  letter-spacing: 0;
}
.avatar--sm {
  --av: 32px;
}
.avatar--lg {
  --av: 56px;
}
.avatar--brand {
  --av-bg: var(--brand);
  --av-fg: var(--brand-on);
}
[data-theme='b'] .avatar {
  font-weight: var(--fw-bold);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.card--flush {
  padding: 0;
  overflow: hidden;
}
/* B: קו שיער בלבד — ‎--e-1 שטוח (tokens.css); צל רק לשכבות צפות */
[data-theme='b'] .card {
  box-shadow: var(--e-1);
  border-color: var(--line);
}

.list {
  display: grid;
}
.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--row-min);
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  color: inherit;
  text-decoration: none;
  inline-size: 100%;
  text-align: start;
  background: transparent;
}
.list-row + .list-row {
  border-block-start: 1px solid var(--line);
}
button.list-row,
a.list-row,
.list-row--interactive {
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  button.list-row:hover,
  a.list-row:hover,
  .list-row--interactive:hover {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  }
}
.list-row[aria-selected='true'],
.list-row--selected {
  background: var(--accent-tint-2);
}
.list-row__link {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--tap-min);
  color: inherit;
  text-decoration: none;
  text-align: start;
  border-radius: var(--r-sm);
}
.list-row__check {
  min-inline-size: var(--tap-min);
  justify-content: center;
}
.list-row:has(.list-row__check) {
  padding-inline-start: var(--s-2);
}
.list-row__lead {
  flex: none;
  display: flex;
  align-items: center;
}
.list-row__main {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  gap: 2px;
}
/* היררכיה (tokens.css — תפקידים): שם > מידע משני > הערה */
.list-row__title {
  font-size: var(--type-name-size);
  font-weight: var(--type-name-weight);
  line-height: 1.35;
  color: var(--text);
}
.list-row__sub {
  font-size: var(--type-meta-size);
  color: var(--type-meta-color);
  line-height: 1.4;
}
.list-row__meta {
  font-size: var(--type-note-size);
  color: var(--type-note-color);
}
.list-row__end {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
}
.list-row__time {
  flex: none;
  inline-size: 52px;
  display: grid;
  gap: 1px;
  font-size: var(--type-time-size);
  font-weight: var(--type-time-weight);
  line-height: 1.2;
}
.list-row__time small {
  font-size: var(--type-note-size);
  font-weight: var(--fw-regular);
  color: var(--type-note-color);
}
/* A — שורות צמודות עם קווי שיער על הנייר */
[data-theme='a'] .list--inset {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* רשימה מקובצת (שתי החלופות): הפוקוס בתוך המסגרת — לא נחתך בקצה המעוגל */
.list--inset > .list-row:focus-visible,
.list--inset > .list-row > .list-row__link:focus-visible {
  outline-offset: -3px;
}
/* B — שורות נפרדות (סדר יום): משטח וקו שיער, בלי צל (‎--e-1 שטוח) */
[data-theme='b'] .list {
  gap: var(--s-2);
}
[data-theme='b'] .list-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--e-1);
}
[data-theme='b'] .list-row + .list-row {
  border-block-start: 1px solid var(--line);
}
/* B — רשימה מקובצת (‎<List inset>: מרכז ההגדרות, העדפות, חיבורים…): משטח אחד עם קווי שיער בין השורות,
   כמו ב-A — במקום כרטיס נפרד לכל שורה (פחות מסגרות; ממצא 8) */
[data-theme='b'] .list--inset {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
[data-theme='b'] .list--inset > .list-row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
[data-theme='b'] .list--inset > .list-row + .list-row {
  border-block-start: 1px solid var(--line);
}
[data-theme='b'] .list--inset > .list-row:first-child {
  border-start-start-radius: calc(var(--r-card) - 1px);
  border-start-end-radius: calc(var(--r-card) - 1px);
}
[data-theme='b'] .list--inset > .list-row:last-child {
  border-end-start-radius: calc(var(--r-card) - 1px);
  border-end-end-radius: calc(var(--r-card) - 1px);
}
/* סדר היום (Agenda — ‎<List inset>): בתוך הקבוצה, שורת "זמן פנוי" (appointments.css ‏.agenda-gap) מקבלת את הטיפול של A —
   מסגרת מקווקות פנימית — במקום מסגרת מקווקות מלאה שנוגעת בקו של הקבוצה; קו שיער בינה לבין השורות כמו בכל שורה */
[data-theme='b'] .list.list--inset > .agenda-gap {
  border: 0;
  background: transparent;
}
[data-theme='b'] .list.list--inset > * + .agenda-gap,
[data-theme='b'] .list.list--inset > .agenda-gap + .list-row {
  border-block-start: 1px solid var(--line);
}
[data-theme='b'] .list--inset > .agenda-gap::after {
  display: block;
}
@media (hover: hover) {
  [data-theme='b'] button.list-row:hover,
  [data-theme='b'] a.list-row:hover,
  [data-theme='b'] .list-row--interactive:hover {
    background: var(--surface);
    border-color: var(--line-strong);
  }
}
@media (hover: hover) {
  [data-theme='b'] .list--inset > button.list-row:hover,
  [data-theme='b'] .list--inset > a.list-row:hover,
  [data-theme='b'] .list--inset > .list-row--interactive:hover {
    background: var(--surface-2);
  }
}
[data-theme='b'] .list-row[aria-selected='true'],
[data-theme='b'] .list-row--selected {
  background: var(--accent-tint-2);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
[data-theme='b'] .list--inset > .list-row[aria-selected='true'],
[data-theme='b'] .list--inset > .list-row--selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* כותרת מקטע בתוך מסך עבודה — סנס בשתי החלופות (סריף שמור לכותרת המסך בלבד); גדולה משם הרשומה (תפקידים ב-tokens.css) */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--title-font);
  font-size: var(--type-section-size);
  font-weight: var(--type-section-weight);
  line-height: 1.3;
  margin-block-end: var(--s-2);
}
[data-theme='b'] .section-title {
  color: var(--text);
}

.page-title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}

/* =========================================================
   מצבים: התראה, ריק, שגיאה, טעינה
   ========================================================= */
.alert {
  --al-fg: var(--info-fg);
  --al-bg: var(--info-bg);
  --al-line: var(--info-line);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--al-bg);
  border: 1px solid var(--al-line);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.alert > .icon {
  color: var(--al-fg);
  margin-block-start: 1px;
}
.alert__body {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  gap: 2px;
}
.alert__title {
  font-weight: var(--fw-bold);
  color: var(--al-fg);
  font-size: var(--fs-small);
}
.alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
}
.alert--success {
  --al-fg: var(--success-fg);
  --al-bg: var(--success-bg);
  --al-line: var(--success-line);
}
.alert--warning {
  --al-fg: var(--warning-fg);
  --al-bg: var(--warning-bg);
  --al-line: var(--warning-line);
}
.alert--danger {
  --al-fg: var(--danger-fg);
  --al-bg: var(--danger-bg);
  --al-line: var(--danger-line);
}
/* B: פס בצבע המצב בתחילת השורה על רקע הגוון — בלי מסגרת מלאה סביב (מידע, לא עוד קופסה; ממצא 8) */
[data-theme='b'] .alert {
  border-color: transparent;
  border-inline-start-width: 4px;
  border-inline-start-color: var(--al-fg);
}

.state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-card);
}
.state__icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-2);
}
.state__title {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: 1.25rem;
  line-height: var(--lh-head);
}
.state__body {
  font-size: 0.9375rem;
  color: var(--text-2);
  max-inline-size: 36ch;
  line-height: 1.55;
}
.state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
}
.state__meta {
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.state--empty {
  background: var(--surface);
  border: 1px solid var(--line);
}
.state--error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
}
.state--error .state__icon {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger-line);
}
.state--error .state__title {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--danger-fg);
}
.state--quiet-error {
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
.state--quiet-error .state__icon {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.state--quiet-error .state__title {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}
[data-theme='b'] .state--empty {
  box-shadow: var(--e-1);
}
[data-theme='b'] .state--empty .state__icon {
  background: var(--accent-tint);
  color: var(--accent);
}

.skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: t-shimmer 1.4s ease-in-out infinite;
  block-size: 14px;
}
@keyframes t-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.skeleton--circle {
  border-radius: 50%;
}
.loading {
  display: grid;
  gap: var(--s-2);
}
.loading__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--text-2);
  padding-block: var(--s-2);
}
.splash {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  text-align: center;
}

/* =========================================================
   גיליון (Sheet) — גיליון תחתון בטלפון, חלון במרכז במחשב
   ========================================================= */
.sheet-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  animation: t-fade var(--dur-2) var(--ease);
}
.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-block-size: calc(var(--vvh) - 24px - env(safe-area-inset-top));
  margin-block-end: var(--kb-inset);
  background: var(--surface);
  border-start-start-radius: var(--r-sheet);
  border-start-end-radius: var(--r-sheet);
  box-shadow: var(--e-3);
  animation: t-sheet-in var(--dur-3) var(--ease);
  outline: none;
}
.sheet--full {
  block-size: calc(var(--vvh) - 24px - env(safe-area-inset-top));
}
.sheet__grab {
  inline-size: 40px;
  block-size: 5px;
  border-radius: 3px;
  background: var(--line-strong);
  margin: 8px auto 0;
  flex: none;
}
.sheet__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-5) var(--s-3);
  flex: none;
}
.sheet__heading {
  flex: 1;
  min-inline-size: 0;
  padding-block-start: 6px;
}
/* כותרת גיליון/שאלת אישור — טקסט עבודה שנקרא ברגע החלטה: סנס בשתי החלופות */
.sheet__title {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: 1.375rem;
  line-height: 1.25;
}
.sheet__desc {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-block-start: 4px;
}
.sheet__close {
  margin-inline-end: calc(var(--s-2) * -1);
}
.sheet__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s-5) var(--s-5);
  -webkit-overflow-scrolling: touch;
}
/* גיליון בלי כותרת תחתונה: התוכן לא נכנס לאזור מחוון הבית (safe area) */
.sheet--no-foot .sheet__body {
  padding-block-end: calc(var(--s-5) + env(safe-area-inset-bottom));
}
html[data-keyboard='open'] .sheet--no-foot .sheet__body {
  padding-block-end: var(--s-5);
}
.sheet__foot {
  flex: none;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.sheet__foot > .btn {
  flex: 1 1 auto;
}
html[data-keyboard='open'] .sheet__foot {
  padding-block-end: var(--s-3);
}
[data-theme='b'] .sheet__head {
  border-block-end: 1px solid var(--line);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-4);
}
[data-theme='b'] .sheet__title {
  font-size: 1.25rem;
}
[data-theme='b'] .sheet__grab {
  background: var(--line-strong);
}
@keyframes t-fade {
  from {
    opacity: 0;
  }
}
@keyframes t-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@media (min-width: 768px) {
  .sheet-root {
    align-items: center;
    padding: var(--s-6);
  }
  .sheet {
    inline-size: min(560px, 100%);
    max-block-size: min(86dvh, 820px);
    border-radius: var(--r-sheet);
    margin-block-end: 0;
    box-shadow: var(--e-2);
  }
  .sheet--wide {
    inline-size: min(760px, 100%);
  }
  .sheet--full {
    block-size: min(86dvh, 820px);
  }
  .sheet__grab {
    display: none;
  }
  .sheet__head {
    padding-block-start: var(--s-5);
  }
  .sheet__foot {
    justify-content: flex-end;
    padding-block-end: var(--s-4);
  }
  .sheet__foot > .btn {
    flex: 0 0 auto;
  }
}

/* =========================================================
   הודעות קופצות (רק אחרי אישור שרת)
   ========================================================= */
/* מעל הניווט והפעולה הראשית — ומעל סרגל הבחירה המרובה כשהוא פתוח (‎--selection-h נקבע ב-SelectionBar) */
.toast-region {
  position: fixed;
  inset-inline: var(--s-4);
  inset-block-end: max(
    calc(var(--bottomnav-h) + var(--action-h) + 28px + env(safe-area-inset-bottom)),
    calc(var(--selection-h, 0px) + var(--s-3))
  );
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  pointer-events: none;
}
/* מעטפת העסק בטלפון: צמוד מעל הערימה התחתונה בפועל (‎--bottom-reserve — ניווט + אזור פעולה, או סרגל הבחירה
   שמחליף אותם; 0 כשהמקלדת פתוחה) ומעל המקלדת (‎--kb-inset) — לא מספר קבוע */
@media (max-width: 1023px) {
  html:has(.shell--biz) .toast-region {
    inset-block-end: calc(var(--bottom-reserve, 0px) + var(--kb-inset, 0px) + var(--s-3));
  }
}
/* גיליון פתוח בטלפון: ההודעות הצפות עולות לראש המסך — כדי לא לכסות את כפתורי האישור וההערות שליד
   הכותרת התחתונה של הגיליון (אזור האגודל). כשהגיליון מגיע עד ראש המסך, ‎--toast-top (נקבע ב-Toast.tsx)
   מוריד אותן אל מתחת לכותרת הגיליון, לרצועה הראשונה שאין בה פקדים — לעולם לא על הכותרת ועל כפתור הסגירה, ולא על
   פקדי התוכן. במחשב הגיליון במרכז והפינה התחתונה פנויה. */
@media (max-width: 1023px) {
  html:has(.sheet-root) .toast-region {
    inset-block-end: auto;
    inset-block-start: var(--toast-top, calc(env(safe-area-inset-top) + var(--s-2)));
  }
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: min(100%, 520px);
  padding-block: var(--s-2);
  padding-inline: var(--s-4) var(--s-2);
  min-block-size: 52px;
  background: var(--text);
  color: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  font-size: 0.9375rem;
  line-height: 1.4;
  animation: t-sheet-in var(--dur-2) var(--ease);
}
.toast__msg {
  flex: 1;
  min-inline-size: 0;
}
.toast__action {
  min-block-size: var(--tap-min);
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--accent-line);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.toast__close {
  color: var(--surface);
}
@media (hover: hover) {
  .toast__close:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}
.toast__icon {
  flex: none;
  display: inline-flex;
}
/* הצלחה (רק עם קבלת שרת): סימן V בירוק בהיר. הודעה ניטרלית: אייקון מידע — לא V */
.toast--saved .toast__icon {
  color: #a7dcb0; /* 10.9:1 מול הדיו */
}
.toast--danger {
  background: var(--danger);
  color: var(--on-danger);
}
[data-theme='b'] .toast__action {
  color: #9fe0d6;
}
@media (min-width: 1024px) {
  .toast-region {
    inset-block-end: max(var(--s-6), calc(var(--selection-h, 0px) + var(--s-3)));
    inset-inline: auto var(--s-6);
  }
}
/* ההודעה לעולם לא מכסה את הרכיב שבפוקוס: כשהמיקום הרגיל חופף אותו, Toast.tsx מעביר אותה לצד השני
   (data-pos): לראש התוכן מתחת לסרגל העליון, או — בגיליון — מעל הכותרת התחתונה שלו */
html .toast-region[data-pos='top'] {
  inset-block-end: auto;
  inset-block-start: var(--toast-top, calc(env(safe-area-inset-top) + var(--s-2)));
}
html .toast-region[data-pos='bottom'] {
  inset-block-start: auto;
  inset-block-end: var(--toast-bottom, var(--s-3));
}

/* =========================================================
   סרגל בחירה מרובה
   ========================================================= */
.selection-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: calc(var(--z-fab) + 1);
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-block-start: 1px solid var(--line-strong);
  box-shadow: var(--e-3);
  animation: t-sheet-in var(--dur-2) var(--ease);
}
.selection-bar__top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.selection-bar__count {
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}
.selection-bar__scope {
  font-size: var(--fs-caption);
  color: var(--text-2);
  flex: 1;
  min-inline-size: 0;
}
/* פעולות נשברות לשורה נוספת במסך צר — לא נחתכות ולא מוסתרות בגלילה.
   בטלפון: הפעולה הראשית (העברה) מקבלת שורה מלאה בתחתית, הכי קרוב לאגודל;
   פעולה הרסנית (ביטול תורים) היא כפתור שקט עם מסגרת בשורה העליונה — ואישור מפורט בדיאלוג. */
.selection-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.selection-bar__actions .btn {
  flex: 1 1 0;
}
@media (max-width: 767px) {
  .selection-bar__actions > .btn--primary {
    order: 2;
    flex-basis: 100%;
    --btn-h: var(--tap);
  }
}
[data-theme='a'] .selection-bar {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
[data-theme='a'] .selection-bar__scope {
  color: #d9ccbc;
}
[data-theme='a'] .selection-bar .btn--secondary {
  background: transparent;
  color: var(--surface);
  border-color: rgba(255, 252, 247, 0.45);
}
@media (hover: hover) {
  [data-theme='a'] .selection-bar .btn--secondary:hover {
    background: rgba(255, 252, 247, 0.1);
  }
}
[data-theme='a'] .selection-bar .btn--primary {
  background: var(--surface);
  color: var(--text);
}
[data-theme='a'] .selection-bar .btn--danger {
  background: #e7b2a9;
  color: #3d0f0b;
}
/* פעולה הרסנית שקטה על הסרגל הכהה: טקסט ורוד בהיר (10:1) ומסגרת — לא מילוי */
[data-theme='a'] .selection-bar .btn--danger-quiet {
  background: transparent;
  color: #f4b9af;
  border-color: rgba(244, 185, 175, 0.6);
}
@media (hover: hover) {
  [data-theme='a'] .selection-bar .btn--danger-quiet:hover {
    background: rgba(244, 185, 175, 0.12);
  }
}
[data-theme='a'] .selection-bar .icon-btn {
  color: var(--surface);
}
/* כפתור שקט (למשל "כל N התורים") על הסרגל הכהה: טקסט בהיר (‎#fffcf7 על ‎#221b17 ≈ 16:1), לא בצבע הדיו על רקע הדיו;
   וטבעת פוקוס בהירה לכל פקד בסרגל (צבע הפוקוס הרגיל כהה מדי על הרקע). */
[data-theme='a'] .selection-bar .btn--quiet {
  color: var(--surface);
  text-decoration-color: rgba(255, 252, 247, 0.6);
}
@media (hover: hover) {
  [data-theme='a'] .selection-bar .btn--quiet:hover {
    background: rgba(255, 252, 247, 0.1);
  }
}
[data-theme='a'] .selection-bar :focus-visible {
  outline-color: var(--surface);
}
@media (hover: hover) {
  [data-theme='a'] .selection-bar .icon-btn:hover {
    background: rgba(255, 252, 247, 0.1);
  }
}
@media (min-width: 1024px) {
  .selection-bar {
    inset-inline-start: var(--sidenav-w);
  }
}
/* מעטפת העסק בטלפון: סרגל הבחירה מחליף את הערימה התחתונה (אזור הפעולה + הניווט; לא שכבה מעליה) — כך אין פקדים
   מכוסים שעדיין מקבלים פוקוס ב-Tab. ריפוד סוף התוכן, scroll-padding וההודעות נגזרים מ-‎--selection-h. */
@media (max-width: 1023px) {
  .shell--biz:has(.selection-bar) > .bottom-stack {
    display: none;
  }
}

/* =========================================================
   יומן: רצועת ימים, משבצות זמן, בורר צוות
   ========================================================= */
.date-strip {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-1);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.date-strip::-webkit-scrollbar {
  display: none;
}
.date-strip__day {
  position: relative;
  flex: none;
  inline-size: 52px;
  min-block-size: 64px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  border-radius: var(--r-md);
  scroll-snap-align: center;
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .date-strip__day:hover {
    background: var(--surface-2);
  }
}
.date-strip__dow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}
.date-strip__num {
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.date-strip__today {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.date-strip__day[aria-pressed='true'] {
  background: var(--primary);
  color: var(--on-primary);
}
.date-strip__day[aria-pressed='true'] .date-strip__dow {
  color: inherit;
}
.date-strip__day[aria-pressed='true'] .date-strip__today {
  background: var(--on-primary);
}
.date-strip__day--off .date-strip__num {
  color: var(--text-3);
}
[data-theme='a'] .date-strip__day[aria-pressed='true'] {
  border-radius: var(--r-pill);
}
[data-theme='b'] .date-strip__day {
  border: 1px solid var(--line);
  background: var(--surface);
  min-block-size: 68px;
}
[data-theme='b'] .date-strip__day[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
[data-theme='b'] .date-strip__num {
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
}

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-2);
}
.slot {
  min-block-size: var(--tap);
  border-radius: var(--r-control);
  border: 1px solid var(--line-control);
  background: var(--surface);
  font-size: var(--fs-time);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: grid;
  place-items: center;
  line-height: 1.1;
  padding-block: 4px;
}
@media (hover: hover) {
  .slot:hover:not(:disabled) {
    background: var(--surface-2);
  }
}
.slot small {
  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  color: var(--text-3);
}
.slot[aria-pressed='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.slot[aria-pressed='true'] small {
  color: inherit;
}
.slot:disabled {
  background: repeating-linear-gradient(-45deg, var(--surface-2) 0 6px, var(--surface) 6px 8px);
  color: var(--text-3);
  border-color: var(--line);
  cursor: not-allowed;
}
.slot:disabled > span:first-child {
  text-decoration: line-through;
}
[data-theme='b'] .slot {
  border-color: var(--line-control);
  border-width: 1.5px;
  font-weight: var(--fw-bold);
}
[data-theme='b'] .slot:disabled {
  border-color: var(--line);
}

.staff-switcher {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
}
.staff-switcher::-webkit-scrollbar {
  display: none;
}
.staff-dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--dot, var(--text-3));
  flex: none;
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* =========================================================
   מעטפת האפליקציה: סרגל עליון, ניווט, פעולה ראשית, מיקרופון
   ========================================================= */
.topbar {
  position: sticky;
  inset-block-start: var(--top-offset);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: var(--topbar-h);
  padding-block: calc(var(--s-2) + env(safe-area-inset-top)) var(--s-2);
  padding-inline: var(--gutter) calc(var(--gutter) - 6px);
  background: var(--bg);
}
.topbar__main {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  gap: 1px;
}
.topbar__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  min-inline-size: 0;
}
.topbar__title {
  font-family: var(--heading-font);
  font-weight: var(--type-screen-weight);
  font-size: var(--type-screen-size);
  line-height: 1.15;
  min-inline-size: 0;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: none;
}
.topbar--scrolled {
  box-shadow: 0 1px 0 var(--line);
}
[data-theme='b'] .topbar {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
/* B: גובה הכותרת מ-tokens.css (‎--type-screen-size); בגלילה — קו השיער הקיים מספיק (‎--e-1 שטוח) */
[data-theme='b'] .topbar--scrolled {
  box-shadow: var(--e-1);
}

.bottom-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(var(--nav-count, 5), minmax(0, 1fr));
  min-block-size: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-block-end: env(safe-area-inset-bottom);
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}
.bottom-nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-block-size: var(--bottomnav-h);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.1;
}
.bottom-nav__icon {
  position: relative;
  display: grid;
  place-items: center;
}
.bottom-nav__badge {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -12px;
}
.bottom-nav__item[aria-current='page'] {
  color: var(--text);
  font-weight: var(--fw-semibold);
}
[data-theme='a'] .bottom-nav__item[aria-current='page']::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inline-size: 28px;
  block-size: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}
[data-theme='b'] .bottom-nav {
  box-shadow: 0 -1px 0 var(--line);
  border-block-start-color: transparent;
}
[data-theme='b'] .bottom-nav__icon {
  inline-size: 60px;
  block-size: 30px;
  border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease);
}
[data-theme='b'] .bottom-nav__item[aria-current='page'] {
  color: var(--accent-strong);
  font-weight: var(--fw-bold);
}
[data-theme='b'] .bottom-nav__item[aria-current='page'] .bottom-nav__icon {
  background: var(--accent-tint);
}
html[data-keyboard='open'] .bottom-nav,
html[data-keyboard='open'] .action-dock,
html[data-keyboard='open'] .bottom-stack {
  display: none;
}

.side-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--sidenav-w);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  overflow-y: auto;
}
.side-nav__brand {
  padding-inline: var(--s-3);
  font-size: 2.25rem;
}
.side-nav__brand .torech-logo {
  margin-block: var(--s-1);
}

/* הלוגו המאושר של תורך (TorechLogo, SPEC.md §8): גובה קבוע (40 / 56 / 64), רוחב מהיחס — לא נמתח, לא נחתך, בלי צל ובלי אריח */
.torech-logo {
  display: block;
  flex: none;
  inline-size: auto;
  max-inline-size: none;
  object-fit: fill;
  box-shadow: none;
  background: transparent;
}
.torech-logo[height='40'] {
  block-size: 40px;
}
.torech-logo[height='56'] {
  block-size: 56px;
}
.torech-logo[height='64'] {
  block-size: 64px;
}
/* בסרגל העליון (לשונית "היום"): מרווח ≥¼ מגובה הלוגו לפני הכותרת */
.topbar__logo {
  margin-inline-end: var(--s-3);
}
.side-nav__list {
  display: grid;
  gap: 2px;
}
.side-nav__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--tap);
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
@media (hover: hover) {
  .side-nav__item:hover {
    background: var(--surface-2);
    color: var(--text);
  }
}
.side-nav__item[aria-current='page'] {
  background: var(--surface-2);
  color: var(--text);
  font-weight: var(--fw-semibold);
  box-shadow: inset 3px 0 0 var(--accent);
}
.side-nav__item[aria-current='page']:dir(rtl) {
  box-shadow: inset -3px 0 0 var(--accent);
}
.side-nav__item .badge {
  margin-inline-start: auto;
}
.side-nav__foot {
  margin-block-start: auto;
  display: grid;
  gap: var(--s-2);
}
[data-theme='a'] .side-nav {
  background: var(--bg);
}
[data-theme='b'] .side-nav__item[aria-current='page'],
[data-theme='b'] .side-nav__item[aria-current='page']:dir(rtl) {
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-weight: var(--fw-bold);
  box-shadow: none;
}

/* =========================================================
   הערימה התחתונה (טלפון/טאבלט, ‎<1024px): אזור פעולה אטום ומוקצה מעל הניווט התחתון — רכיב קבוע אחד
   - ‎.bottom-stack (BizLayout) היא השכבה הקבועה היחידה בתחתית: עמודת flex של אזור הפעולה והניווט. האזור יושב תמיד
     על הגובה האמיתי של הניווט — גם בהגדלת טקסט ובתוויות שנשברות — כך ששום דבר לא מצויר מעליו, ושום שורת תוכן
     לא נקראת מבעד לפעולות או ביניהן, גם באמצע הגלילה.
   - הגובה הנמדד (‎--bottom-stack-h, ‏useBottomStackHeight ב-focusGuard.ts) הוא ‎--dock-reserve: ריפוד סוף התוכן.
     ‎--bottom-reserve = מה שמכסה כרגע (scroll-padding, מיקום ההודעות): הערימה, סרגל הבחירה שמחליף אותה, או 0
     כשהמקלדת פתוחה (viewport.ts → html[data-keyboard=open]). לפני המדידה הראשונה — הערכה מהטוקנים.
   - פקדים בגובה 48px (יעד מגע מוצרי 44–48px; מינימום AA הוא 24px) + 12px מעל ומתחת = לפחות 72px; גדל עם הטקסט.
     אותה שורה שבה יושב סרגל השמירה של ההגדרות (‎.set-dock, ‎--action-h) — לכן ‎--action-h מוגדר כאן מחדש.
   - בלי פעולה ראשית (‎.shell--mic-only: פניות, עוד, כרטיס לקוחה): אין אזור — המיקרופון בסרגל העליון. חריג: מסך עם
     סרגל שמירה משלו (‎.set-dock) — האזור נשאר כרצועה האטומה שלו, והמיקרופון בקצה.
   - טלפון שוכב בגובה נמוך (‎≤480px): אין אזור — הפעולה והמיקרופון בסרגל העליון, כמו במחשב.
   ========================================================= */
@media (max-width: 1023px) {
  html:has(.shell--biz) {
    --dock-ctl-h: 48px;
    --dock-h: calc(var(--dock-ctl-h) + 2 * var(--s-3));
    --dock-reserve: var(--bottom-stack-h, calc(var(--bottomnav-h) + env(safe-area-inset-bottom)));
    --bottom-reserve: var(--dock-reserve);
    scroll-padding-block-end: calc(var(--bottom-reserve) + var(--s-3));
  }
  html:has(.shell--dock),
  html:has(.shell--mic-only .set-dock) {
    --dock-reserve: var(--bottom-stack-h, calc(var(--bottomnav-h) + var(--dock-h) + env(safe-area-inset-bottom)));
  }
  html[data-keyboard='open']:has(.shell--biz) {
    --bottom-reserve: 0px;
  }
  html:has(.shell--biz .selection-bar) {
    --bottom-reserve: var(--selection-h, 0px);
  }
  .shell--dock,
  .shell--mic-only {
    --action-h: var(--dock-ctl-h);
  }
}
.bottom-stack {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  /* מעל התוכן; מתחת לסרגלי פעולה של מסכים שיושבים בשורת האזור (‎.set-dock), לסרגל הבחירה ולהודעות */
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  /* קו עליון אחד לכל הערימה — גם כשהאזור מוסתר והניווט לבדו */
  box-shadow: 0 -1px 0 var(--line);
}
.bottom-stack > .action-dock,
.bottom-stack > .bottom-nav {
  position: relative;
  inset: auto;
  z-index: auto;
  box-shadow: none;
}
.bottom-stack > .bottom-nav {
  border-block-start-color: transparent;
}
.action-dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  block-size: var(--dock-h, calc(var(--action-h) + 24px));
  padding-inline: var(--gutter);
  background: var(--surface);
  box-shadow: 0 -1px 0 var(--line);
}
/* בתוך הערימה: גובה מינימלי ולא קבוע — פקד שגדל (טקסט מוגדל, תווית בשתי שורות) מגביה את האזור, לא נחתך */
.bottom-stack > .action-dock {
  block-size: auto;
  min-block-size: var(--dock-h);
  padding-block: var(--s-3);
}
/* הסרגל והניווט — משטח אחד: בלי קו מפריד ביניהם */
.action-dock + .bottom-nav {
  box-shadow: none;
  border-block-start-color: transparent;
}
@media (max-width: 1023px) {
  /* בלי פעולה ראשית: אין אזור (72px של גובה קריאה בשביל כפתור אחד) — המיקרופון בסרגל העליון.
     מסך עם סרגל שמירה משלו (‎.set-dock): האזור נשאר — הרצועה האטומה של הסרגל, והמיקרופון בקצה שלה */
  .shell--mic-only:not(:has(.set-dock)) > .bottom-stack > .action-dock {
    display: none;
  }
  .shell--mic-only:not(:has(.set-dock)) > .topbar .mic-btn--topbar {
    display: inline-grid;
  }
  /* בסרגל העליון בטלפון — פקד שקט כמו שאר כפתורי הסמל בסרגל (בלי מילוי ומסגרת): משני לתוכן ולפעולות המסך */
  .shell--mic-only > .topbar .mic-btn--topbar:not([aria-pressed='true']) {
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
  }
}
@media (max-width: 1023px) and (hover: hover) {
  .shell--mic-only > .topbar .mic-btn--topbar:not([aria-pressed='true']):hover {
    background: var(--surface-2);
  }
}
/* גלריית הרכיבים: מסגרת טלפון מדומה (מיקום יחסי למסגרת) */
.kit-frame div.action-dock {
  inset-block-end: var(--bottomnav-h);
}
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--action-h);
  min-inline-size: 0;
  padding-block: var(--s-1);
  padding-inline: var(--s-5);
  border-radius: var(--r-control);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--fs-input);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-align: center;
  transition: background-color var(--dur-1) var(--ease);
}
/* בגודל רגיל — שורה אחת; בהגדלת טקסט במסך צר התווית נשברת לשתי שורות (הכפתור והאזור גדלים) ולא נחתכת */
.primary-action__label {
  min-inline-size: 0;
  text-wrap: balance;
}
@media (hover: hover) {
  .primary-action:hover {
    background: var(--primary-hover);
  }
}
/* טלפון: ברוחב מלא (פעולה אחת ברורה, נגישה לשני האגודלים); מ-600px: מיושרת להתחלה ברוחב סביר */
.action-dock .primary-action {
  flex: 1 1 auto;
}
@media (min-width: 600px) {
  .action-dock .primary-action {
    flex: 0 1 auto;
    min-inline-size: 240px;
  }
}
[data-theme='b'] .primary-action {
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
}

.mic-btn {
  position: relative;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: var(--accent);
  background: var(--surface);
  border: 1.5px solid var(--accent-line);
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .mic-btn:hover {
    background: var(--accent-tint-2);
    border-color: var(--accent);
  }
}
.mic-btn[aria-pressed='true'] {
  background: var(--rec);
  border-color: var(--rec);
  color: #fff;
}
[data-theme='b'] .mic-btn {
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border-color: transparent;
  color: var(--accent-strong);
}
@media (hover: hover) {
  [data-theme='b'] .mic-btn:hover {
    background: #d3e9e4;
  }
}
/* מיקרופון באזור הפעולה: פקד משני — באותו גובה של הפעולה הראשית, תמיד בקצה (מיקום קבוע בכל לשונית),
   מראה של כפתור משני (מסגרת ≥3:1, בלי מילוי וצל); השם הנגיש "פקודה קולית" */
.mic-btn--dock {
  inline-size: var(--action-h);
  block-size: var(--action-h);
  margin-inline-start: auto;
  color: var(--text-2);
  background: var(--surface);
  border: 1.5px solid var(--line-control);
}
[data-theme='b'] .mic-btn--dock {
  border-radius: var(--r-control);
  background: var(--surface);
  border-color: var(--line-control);
  color: var(--text-2);
}
@media (hover: hover) {
  .mic-btn--dock:hover,
  [data-theme='b'] .mic-btn--dock:hover {
    background: var(--surface-2);
    border-color: var(--text-2);
  }
}
/* בטלפון המיקרופון באזור הפעולה; בסרגל העליון — במחשב, בטלפון כשאין פעולה ראשית (למעלה) ובטלפון שוכב (למטה) */
@media (max-width: 1023px) {
  .mic-btn--topbar {
    display: none;
  }
}
/* הפעולה הראשית בסרגל העליון: רק במחשב (וטלפון שוכב, למטה) */
.topbar .topbar-primary {
  display: none;
}
@media (min-width: 1024px) {
  .topbar .topbar-primary {
    display: inline-flex;
  }
}
/* טלפון שוכב / גובה נמוך: אזור פעולה של 72px היה לוקח חלק גדול מדי מהמסך — הפעולה והמיקרופון עוברים לסרגל העליון
   (שורה קיימת — לא מגביהים אותו). לא כשהמקלדת פתוחה (גם היא מקטינה את הגובה) */
@media (max-width: 1023px) and (max-height: 480px) and (orientation: landscape) {
  html:has(.shell--biz) {
    --dock-h: 0px;
  }
  .shell--biz > .bottom-stack > .action-dock {
    display: none;
  }
  html:not([data-keyboard='open']) .topbar .topbar-primary {
    display: inline-flex;
  }
  html:not([data-keyboard='open']) .mic-btn--topbar {
    display: inline-grid;
  }
}

/* פריסת האפליקציה */
.shell {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}
.shell__main {
  flex: 1;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-3) calc(var(--bottomnav-h) + var(--action-h) + 40px + env(safe-area-inset-bottom));
}
.shell--no-action .shell__main {
  padding-block-end: calc(var(--bottomnav-h) + 32px + env(safe-area-inset-bottom));
}
/* מעטפת העסק בטלפון: סוף התוכן מעל הערימה התחתונה (הגובה הנמדד שלה, או סרגל הבחירה כשהוא גבוה יותר) + 16px —
   השורה האחרונה נגללת אל מעל אזור הפעולה וקריאה במלואה */
@media (max-width: 1023px) {
  .shell--biz .shell__main {
    padding-block-end: calc(max(var(--dock-reserve), var(--selection-h, 0px)) + var(--s-4));
  }
}
@media (min-width: 1024px) {
  .shell {
    padding-inline-start: var(--sidenav-w);
  }
  .shell__main {
    max-inline-size: 1040px;
    padding-inline: var(--s-7);
    padding-block-end: var(--s-10);
  }
  .shell .topbar {
    padding-inline: var(--s-7);
  }
  .bottom-nav,
  .action-dock .primary-action {
    display: none;
  }
  .action-dock,
  .bottom-stack {
    display: none;
  }
}

/* =========================================================
   מצב סקירת עיצוב (כלי QA — מסומן בבירור)
   ========================================================= */
.review-banner {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-block-size: 36px;
  padding: calc(4px + env(safe-area-inset-top)) var(--gutter) 4px;
  background: repeating-linear-gradient(-45deg, #fff3c4 0 10px, #ffe69a 10px 20px);
  color: #3b2a00;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  border-block-end: 1px solid #b38600;
}
.review-toggle {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 45%;
  z-index: var(--z-review);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-block-size: var(--tap-min);
  padding-inline: 10px 8px;
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
  background: #3b2a00;
  color: #fff3c4;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  box-shadow: var(--e-2);
}
.review-toggle:dir(rtl) {
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.review-panel {
  position: fixed;
  inset-inline: var(--s-3);
  inset-block-start: calc(var(--top-offset) + var(--s-3) + env(safe-area-inset-top));
  z-index: var(--z-review);
  max-inline-size: 380px;
  margin-inline-start: auto;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background: #fffdf5;
  color: #1c1600;
  border: 2px solid #3b2a00;
  border-radius: var(--r-lg);
  box-shadow: var(--e-2);
  font-family: var(--font-ui);
}
.review-panel__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.review-panel__title {
  flex: 1;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
}
.review-panel__note {
  font-size: var(--fs-caption);
  color: #4d4220;
  line-height: 1.45;
}


/*
 * תורך — אתר השיווק. נטען אחרי web/shared/styles/{tokens,base,components}.css (מאוחד בשרת ל-/m/marketing.css),
 * כך שהטוקנים, הכפתורים, השדות וההתראות זהים לאפליקציה — בשתי החלופות (data-theme a|b).
 * טלפון תחילה: 360 → 390 → 430 → 768 → 1280. תכונות לוגיות בלבד (RTL).
 */

[hidden] {
  display: none !important;
}

html {
  scroll-padding-block-start: 16px;
  scroll-padding-block-end: 16px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/*
 * בדף עם טופס הפיילוט: פס השליחה הדבוק (~78px) תופס את תחתית המסך. כל גלילה-אל-רכיב של הדפדפן
 * (פוקוס ב-Tab, חשיפת הסמן בשדה, פתיחת מקלדת) מתייחסת לאזור הזה כמוסתר — כך שרכיב בפוקוס לא נשאר מאחורי הפס.
 */
html:has(.mk-form__submit) {
  scroll-padding-block-end: 92px;
}
/* בזמן מילוי הטופס (שדה בפוקוס) — גלילה מיידית: מעבר שדה/פתיחת מקלדת לא "מחליקים" בזמן שהמשתמש/ת מקלידה */
html:has(.mk-form :focus) {
  scroll-behavior: auto;
}

body.mk {
  background: var(--bg);
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}
body.mk > main {
  flex: 1;
}
main:focus {
  outline: none;
}

.mk-wrap {
  inline-size: 100%;
  max-inline-size: 1180px;
  margin-inline: auto;
  padding-inline: 16px;
}
.mk-wrap--narrow {
  max-inline-size: 820px;
}
@media (min-width: 768px) {
  .mk-wrap {
    padding-inline: 28px;
  }
}
@media (min-width: 1100px) {
  .mk-wrap {
    padding-inline: 40px;
  }
}

.tnum {
  font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================
   כותרת עליונה
   ========================================================= */
.mk-header {
  background: var(--bg);
  border-block-end: 1px solid var(--line);
  position: relative;
  z-index: var(--z-nav);
}
.mk-header__in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 64px;
}
.mk-brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  text-decoration: none;
  font-size: 1.875rem;
}
/* הלוגו המאושר (web/shared/brand): 40 בטלפון, 56 במחשב — גובה קבוע, רוחב מהיחס, על רקע הדף בלבד */
.mk-logo {
  display: block;
  flex: none;
  block-size: 40px;
  inline-size: auto;
  max-inline-size: none;
}
@media (min-width: 960px) {
  .mk-logo {
    block-size: 56px;
  }
  .mk-header__in {
    min-block-size: 80px;
  }
}
.mk-nav {
  display: none;
}
.mk-nav__list {
  display: flex;
  gap: 2px;
}
.mk-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: 12px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
@media (hover: hover) {
  .mk-nav__link:hover {
    color: var(--text);
    background: var(--surface-2);
  }
}
.mk-header__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mk-header__cta {
  display: none;
}
.mk-login {
  padding-inline: 10px;
}

/* תפריט טלפון — <details> (עובד גם בלי JavaScript) */
.mk-menu {
  position: relative;
}
.mk-menu__btn {
  list-style: none;
  cursor: pointer;
}
.mk-menu__btn::-webkit-details-marker {
  display: none;
}
.mk-menu__btn::marker {
  content: '';
}
.mk-menu__close {
  display: none;
}
.mk-menu[open] .mk-menu__open {
  display: none;
}
.mk-menu[open] .mk-menu__close {
  display: block;
}
.mk-menu__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 8px);
  min-inline-size: 240px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  z-index: var(--z-sheet);
}
.mk-menu__panel ul {
  display: grid;
  gap: 2px;
}
.mk-menu__link {
  display: flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: 14px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
@media (hover: hover) {
  .mk-menu__link:hover {
    background: var(--surface-2);
  }
}

@media (min-width: 960px) {
  .mk-header {
    position: sticky;
    inset-block-start: 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
  }
  html {
    scroll-padding-block-start: 88px;
  }
  .mk-nav {
    display: block;
    margin-inline-start: 24px;
  }
  .mk-header__cta {
    display: inline-flex;
  }
  .mk-menu {
    display: none;
  }
}

/* =========================================================
   כותרות ומקטעים
   ========================================================= */
.mk-section {
  padding-block: 56px;
}
@media (min-width: 768px) {
  .mk-section {
    padding-block: 88px;
  }
}
.mk-section__head {
  display: grid;
  gap: 12px;
  max-inline-size: 720px;
  margin-block-end: 32px;
  justify-items: start;
}
[data-theme='a'] .mk-section__head::before {
  content: '';
  display: block;
  inline-size: 40px;
  block-size: 2px;
  background: var(--accent);
  margin-block-end: 4px;
}
.mk-h2 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text);
}
[data-theme='b'] .mk-h2 {
  font-weight: 800;
  letter-spacing: -0.015em;
}
.mk-h3 {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--text);
}
.mk-section__intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
  max-inline-size: 60ch;
}

.mk-checks {
  display: grid;
  gap: 10px;
}
.mk-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
.mk-checks .icon {
  color: var(--accent);
  margin-block-start: 2px;
  stroke-width: 2.25;
}
.mk-checks--tight {
  gap: 8px;
}
.mk-checks--tight li {
  font-size: 0.9688rem;
}
.mk-checks--no li {
  color: var(--text-2);
}
.mk-checks--no .icon {
  color: var(--text-3);
}

/* =========================================================
   Hero — כותרת, הסבר, שתי פעולות, והסרטון לצד (במחשב) / מתחת (בטלפון)
   ========================================================= */
.mk-hero {
  padding-block: 28px 48px;
  background:
    radial-gradient(70% 55% at 12% 8%, var(--accent-tint) 0%, transparent 70%),
    linear-gradient(180deg, var(--accent-tint-2) 0%, var(--bg) 78%);
}
.mk-hero__grid {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .mk-hero {
    padding-block: 48px 80px;
  }
  .mk-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 64px;
  }
  .mk-hero--solo .mk-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--accent);
}
.mk-eyebrow::before {
  content: '';
  inline-size: 24px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.mk-hero__title {
  margin-block: 12px 14px;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: clamp(2.125rem, 1.3rem + 3.6vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
[data-theme='b'] .mk-hero__title {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mk-hero__sub {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text);
  max-inline-size: 34em;
  text-wrap: pretty;
}
.mk-hero__lead {
  margin-block-start: 10px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
  max-inline-size: 38em;
}
.mk-hero__ctas {
  display: grid;
  gap: 12px;
  margin-block: 26px 22px;
}
@media (min-width: 480px) {
  .mk-hero__ctas {
    display: flex;
    flex-wrap: wrap;
  }
}
.mk-hero__points {
  gap: 8px;
}
.mk-status {
  margin-block-start: 20px;
  max-inline-size: 40em;
}

/* =========================================================
   הסרטון — אנכי (9:16), בלי ניגון אוטומטי; פקדים מובנים, תמליל והבהרת זמינות
   ========================================================= */
.mk-video {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  scroll-margin-block-start: 16px;
}
.mk-video__frame {
  inline-size: min(100%, 320px);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: #1f1a17;
  box-shadow:
    0 1px 2px rgba(34, 27, 23, 0.08),
    0 24px 48px -12px rgba(110, 53, 48, 0.3);
}
@media (min-width: 960px) {
  .mk-video__frame {
    inline-size: min(100%, 300px);
  }
}
.mk-video__el {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background: var(--surface-2);
}
.mk-video__cap {
  max-inline-size: 34ch;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
}
.mk-video__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-inline-size: 40ch;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-3);
}
.mk-video__note .icon {
  flex: none;
  margin-block-start: 1px;
}
.mk-transcript {
  inline-size: min(100%, 40ch);
  font-size: var(--fs-small);
}
.mk-transcript__q {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--tap-min);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mk-transcript__q::-webkit-details-marker {
  display: none;
}
.mk-transcript__q::marker {
  content: '';
}
.mk-transcript__a {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  line-height: 1.6;
}

/* =========================================================
   מה זמין היום — הבהרה אחת, במקום הערות פיתוח חוזרות
   ========================================================= */
.mk-avail__card {
  display: grid;
  gap: 16px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--e-1);
}
@media (min-width: 768px) {
  .mk-avail__card {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
    align-items: start;
    column-gap: 40px;
    padding: 28px 32px;
  }
  .mk-avail__note {
    grid-column: 2;
  }
}
.mk-avail__title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: 1.5rem;
  line-height: 1.2;
}
.mk-avail__cols {
  display: grid;
  gap: 18px;
}
@media (min-width: 600px) {
  .mk-avail__cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
.mk-avail__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.mk-avail__label--now {
  color: var(--success-fg);
}
.mk-avail__label--soon {
  color: var(--text-3);
}
.mk-avail__list {
  display: grid;
  gap: 6px;
}
.mk-avail__list li {
  position: relative;
  padding-inline-start: 18px;
  line-height: 1.5;
}
.mk-avail__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.6em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.mk-avail__list--soon li {
  color: var(--text-2);
}
.mk-avail__list--soon li::before {
  background: transparent;
  border: 1.5px solid var(--text-3);
}
.mk-avail__note {
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* =========================================================
   ככה זה נראה — צילומי מסך (גלילה אופקית בטלפון, רשת במחשב)
   ========================================================= */
.mk-features {
  background: linear-gradient(180deg, var(--bg) 0%, var(--accent-tint-2) 100%);
}
.mk-shots {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  padding-block: 6px 18px;
  scrollbar-width: thin;
}
.mk-shots:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}
.mk-shots__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(68vw, 270px);
  gap: 16px;
  padding-inline: 16px;
}
.mk-shot-card {
  scroll-snap-align: start;
}
.mk-shot-card__fig {
  margin: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}
.mk-shot-card__phone {
  border: 6px solid #1f1a17;
  border-radius: 26px;
  background: #1f1a17;
  overflow: hidden;
  box-shadow: 0 18px 36px -16px rgba(34, 27, 23, 0.4);
}
.mk-shot-card__phone img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.mk-shot-card__cap p {
  margin-block-start: 4px;
  font-size: 0.9688rem;
  line-height: 1.5;
  color: var(--text-2);
}
@media (min-width: 768px) {
  .mk-shots {
    scroll-padding-inline: 28px;
  }
  .mk-shots__list {
    grid-auto-columns: 260px;
    padding-inline: 28px;
  }
}
@media (min-width: 960px) {
  .mk-shots {
    overflow: visible;
    scroll-snap-type: none;
    max-inline-size: 1180px;
    margin-inline: auto;
    padding-inline: 40px;
  }
  .mk-shots__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 48px 56px;
    padding-inline: 0;
  }
  .mk-shot-card__fig {
    justify-items: center;
    text-align: center;
  }
  .mk-shot-card__phone {
    max-inline-size: 250px;
  }
  .mk-shot-card__cap {
    max-inline-size: 32ch;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mk-shot-card__phone {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .mk-shot-card:hover .mk-shot-card__phone {
    transform: translateY(-4px);
    box-shadow: 0 26px 44px -18px rgba(110, 53, 48, 0.45);
  }
}

/* =========================================================
   המסלול המרכזי (לולאה)
   ========================================================= */
.mk-how {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.mk-loop {
  display: grid;
}
.mk-loop__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-block-end: 28px;
}
.mk-loop__step::before {
  content: '';
  position: absolute;
  inset-inline-start: 21px;
  inset-block: 48px 4px;
  border-inline-start: 2px solid var(--line-strong);
}
.mk-loop__num {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  line-height: 1;
}
[data-theme='a'] .mk-loop__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
[data-theme='b'] .mk-loop__num {
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
}
.mk-loop__body {
  display: grid;
  gap: 4px;
  padding-block-start: 8px;
}
.mk-loop__body p {
  color: var(--text-2);
  line-height: 1.55;
}
.mk-loop__back {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-tint-2);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.mk-loop__back .icon {
  color: var(--accent);
  margin-block-start: 2px;
}
@media (min-width: 1024px) {
  .mk-loop {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-block-end: 28px;
  }
  .mk-loop__step {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block-end: 0;
    align-content: start;
  }
  .mk-loop__step::before {
    inset-inline-start: 56px;
    inset-inline-end: -16px;
    inset-block: 21px auto;
    border-inline-start: 0;
    border-block-start: 2px solid var(--line-strong);
  }
  .mk-loop__body {
    padding-block-start: 0;
  }
}
.mk-loop__step:last-child::before {
  display: none;
}

/* =========================================================
   רשתות וכרטיסים
   ========================================================= */
.mk-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .mk-grid--4,
  .mk-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 2 עמודות: פריט אחרון בודד (3 מסלולים / 3 כרטיסי צוות) — ברוחב מלא ולא יתום */
  .mk-grid--3 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .mk-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mk-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mk-grid--3 > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.mk-ind {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
}
.mk-ind p {
  color: var(--text-2);
  line-height: 1.55;
}
.mk-ind__icon {
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
  margin-block-end: 4px;
}
/* טלפון: אייקון לצד הכותרת — כרטיסים קצרים יותר */
@media (max-width: 1023px) {
  .mk-ind {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
  }
  .mk-ind > .mk-ind__icon {
    grid-row: span 2;
    margin-block-end: 0;
  }
  .mk-ind > .mk-h3 {
    align-self: center;
  }
}
.mk-ind--later {
  border: 1.5px dashed var(--line-control);
  border-radius: var(--r-card);
}
.mk-ind--later .mk-ind__icon {
  background: var(--surface-2);
  color: var(--text-2);
}
.mk-later {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-block-size: 24px;
  padding-inline: 8px;
  margin-inline-start: 6px;
  border-radius: var(--r-status);
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-line);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}

/* =========================================================
   מסלולים (ללא מחירים)
   ========================================================= */
.mk-pricing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-line);
  font-size: 1rem;
}
[data-theme='b'] .mk-pricing {
  border-radius: var(--r-md);
}
.mk-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
}
[data-theme='b'] .mk-plan {
  border-block-start: 4px solid var(--accent);
}
.mk-plan__kicker {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-3);
}
.mk-plan__title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: 1.5rem;
  line-height: 1.2;
}
[data-theme='b'] .mk-plan__title {
  font-weight: 800;
  font-size: 1.375rem;
}
.mk-plan__summary {
  color: var(--text-2);
  line-height: 1.55;
}
.mk-plan__label {
  margin-block-start: 6px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.mk-plan__foot {
  margin-block-start: auto;
  display: grid;
  gap: 10px;
  padding-block-start: 14px;
}
.mk-plan__provider {
  align-items: flex-start;
  padding-block: 6px;
  white-space: normal;
  line-height: 1.4;
}
.mk-plan__provider .icon {
  margin-block-start: 1px;
}
.mk-plan__price {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
}
.mk-plan--base {
  border-color: var(--accent-line);
}
.mk-plans__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-block-start: 28px;
  max-inline-size: 72ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}
.mk-plans__note .icon {
  flex: none;
  margin-block-start: 2px;
  color: var(--text-3);
}

/* =========================================================
   שאלות נפוצות
   ========================================================= */
.mk-faq {
  display: grid;
  max-inline-size: 820px;
  border-block-start: 1px solid var(--line-strong);
}
.mk-faq__item {
  border-block-end: 1px solid var(--line-strong);
}
.mk-faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 56px;
  padding-block: 12px;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.mk-faq__q::-webkit-details-marker {
  display: none;
}
.mk-faq__q::marker {
  content: '';
}
.mk-faq__chev {
  color: var(--text-2);
  transition: transform var(--dur-2) var(--ease);
}
.mk-faq__item[open] .mk-faq__chev {
  transform: rotate(180deg);
}
.mk-faq__a {
  padding-block-end: 18px;
  color: var(--text-2);
  line-height: 1.65;
  max-inline-size: 68ch;
}
[data-theme='b'] .mk-faq {
  gap: 10px;
  border: 0;
}
[data-theme='b'] .mk-faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding-inline: 16px;
  box-shadow: var(--e-1);
}

/* =========================================================
   פיילוט וטופס
   ========================================================= */
.mk-pilot {
  border-block-start: 1px solid var(--line);
}
[data-theme='b'] .mk-pilot {
  background: var(--accent-tint-2);
}
.mk-pilot__grid {
  display: grid;
  gap: 32px;
}
.mk-pilot__copy {
  display: grid;
  gap: 16px;
  align-content: start;
}
@media (min-width: 960px) {
  .mk-pilot__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
  }
}
.mk-form-card {
  padding: 20px 16px;
  scroll-margin-block-start: 16px;
}
@media (min-width: 480px) {
  .mk-form-card {
    padding: 28px 24px;
  }
}
[data-theme='b'] .mk-form-card {
  box-shadow: var(--e-2);
}
.mk-form {
  position: relative;
  display: grid;
  gap: 18px;
}
.mk-form__title {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: 1.375rem;
  line-height: 1.3;
}
.mk-form__req {
  margin-block-start: -10px;
}
.mk-form__row {
  display: grid;
  gap: 18px;
}
@media (min-width: 560px) {
  .mk-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mk-form [data-lead-alert-slot]:empty {
  display: none;
}
.mk-form__alert:focus {
  outline: none;
}
.mk-form__alert:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.mk-form__errlist {
  display: grid;
  gap: 2px;
  margin-block-start: 4px;
}
.mk-form__errlist a {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mk-hp {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mk-consent__label {
  align-items: flex-start;
  line-height: 1.5;
}
.mk-consent__label .check__input {
  margin-block-start: 1px;
}
/*
 * כפתור השליחה תמיד בהישג האגודל — גם כשהמקלדת פתוחה: דבוק לתחתית המסך כל עוד הטופס על המסך
 * (sticky בתוך הטופס בלבד; אחרי הטופס הוא חוזר למקומו). --mk-kb: גובה המקלדת בדפדפנים שאינם מקטינים
 * את אזור התצוגה (iOS) — מחושב ב-lead.js מ-visualViewport; בלי JavaScript = 0 (ובאנדרואיד
 * interactive-widget=resizes-content מקטין את אזור התצוגה עצמו).
 */
.mk-form__submit {
  position: sticky;
  inset-block-end: var(--mk-kb, 0px);
  z-index: 2;
  margin-block-start: 2px;
  margin-inline: -16px;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 480px) {
  .mk-form__submit {
    margin-inline: -24px;
    padding-inline: 24px;
  }
}
/* מרווח קטן בין שדה בפוקוס לפס השליחה (הפס עצמו כבר שמור ב-scroll-padding של הדף) */
.mk-form .control__input,
.mk-form .check__input {
  scroll-margin-block-end: 12px;
}
/* תיבת ההסכמה: הטקסט שלה נמשך כ-3 שורות מתחת לתיבה — גם הוא נשאר גלוי מעל הפס */
.mk-form .mk-consent .check__input {
  scroll-margin-block-end: 72px;
}
.mk-form__privacy {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.mk-form__privacy .icon {
  flex: none;
  margin-block-start: 1px;
}
.mk-inline-link {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mk-success {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.mk-success:focus {
  outline: none;
}
.mk-success:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}
.mk-success__icon {
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success-bg);
  color: var(--success-fg);
  border: 1px solid var(--success-line);
}
.mk-success__title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: 1.75rem;
  line-height: 1.2;
}
[data-theme='b'] .mk-success__title {
  font-weight: 800;
}
.mk-success__text {
  font-size: 1.0625rem;
  color: var(--text);
}
.mk-thanks {
  padding-block: 40px 72px;
}

/* =========================================================
   דפים משניים
   ========================================================= */
.mk-page {
  padding-block: 32px 72px;
}
.mk-page__title {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.2;
  margin-block: 16px 20px;
}
[data-theme='b'] .mk-page__title {
  font-weight: 800;
}
.mk-page__cta {
  margin-block-start: 32px;
}
.mk-draft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  padding: 6px 14px;
  border-radius: var(--r-md);
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-line);
}
.mk-legal__note {
  color: var(--text-2);
  max-inline-size: 68ch;
}
.mk-legal__section {
  display: grid;
  gap: 8px;
  margin-block-start: 28px;
}
.mk-legal__section p {
  color: var(--text-2);
  line-height: 1.65;
  max-inline-size: 68ch;
}

/* =========================================================
   כותרת תחתונה
   ========================================================= */
.mk-footer {
  background: var(--surface-2);
  border-block-start: 1px solid var(--line);
  padding-block: 40px 32px;
}
[data-theme='b'] .mk-footer {
  background: var(--surface);
}
.mk-footer__in {
  display: grid;
  gap: 20px;
}
.mk-footer__brand .mk-wordmark {
  font-size: 1.875rem;
}
.mk-footer__tagline {
  margin-block-start: 10px;
  color: var(--text-2);
  max-inline-size: 48ch;
}
.mk-footer__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--text-2);
  max-inline-size: 60ch;
  line-height: 1.5;
}
.mk-footer__note .icon {
  flex: none;
  margin-block-start: 1px;
}
.mk-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.mk-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.mk-footer__contact .link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: var(--tap-min);
}
.mk-footer__legal {
  font-size: var(--fs-caption);
  color: var(--text-3);
}
@media (min-width: 960px) {
  .mk-footer__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
  }
  .mk-footer__contact,
  .mk-footer__note,
  .mk-footer__nav,
  .mk-footer__legal {
    grid-column: 2;
  }
  .mk-footer__brand {
    grid-row: span 3;
  }
}


/* =========================================================
   הצטרפות — שתי דרכים: קוד הצטרפות → הרשמה, או שיחה (וואטסאפ / טלפון)
   ========================================================= */
.mk-paths {
  display: grid;
  gap: 14px;
  margin-block-start: 8px;
}
.mk-path {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mk-path__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-path__title .icon,
.mk-path__title .mk-wa-glyph {
  flex: none;
  color: var(--accent);
}
.mk-path p {
  color: var(--text-2);
  line-height: 1.55;
}
.mk-path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mk-wa-glyph {
  flex: none;
  fill: currentColor;
}
.mk-menu__wa {
  gap: 10px;
}
.mk-menu__wa .mk-wa-glyph {
  color: #17694a;
}

/* =========================================================
   כפתור וואטסאפ קבוע — עם JavaScript (lead.js), זמין לאורך כל הביקור: עולה מעל פס הפקדים של הסרטון ומעל רכיב בפוקוס
   (‎--mk-wa-lift), וכשהטופס על המסך "עוגן" בפס השליחה הדבוק (data-docked) — שם יש לו כפתור משלו (.mk-form__wa)
   ========================================================= */
.mk-wa {
  position: fixed;
  z-index: var(--z-nav);
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  inset-inline-end: calc(16px + env(safe-area-inset-left));
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 56px;
  min-inline-size: 56px;
  padding-inline: 16px 20px;
  border-radius: var(--r-pill);
  background: #17694a; /* ירוק וואטסאפ כהה — טקסט לבן 6.6:1 */
  color: #fff;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  box-shadow:
    0 10px 24px -8px rgba(23, 105, 74, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(calc(-1 * var(--mk-wa-lift, 0px)));
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}
html[data-mk-js] .mk-wa {
  display: inline-flex;
}
@media (hover: hover) {
  .mk-wa:hover {
    background: #12573d;
  }
}
.mk-wa:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 3px;
}
/* עוגן בפס השליחה: הכפתור שבפס תופס את מקומו (אותו קישור, אותו צבע) */
.mk-wa[data-docked] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}
@media (max-width: 767px) {
  .mk-wa {
    inline-size: 56px;
    padding: 0;
  }
  .mk-wa__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mk-wa {
    transition: none;
  }
  .mk-wa[data-docked] {
    transform: none;
  }
}
/* פס השליחה: כפתור השליחה + כפתור וואטסאפ (גלוי גם בלי JavaScript) */
.mk-form__submit {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-form__submit [data-lead-submit] {
  flex: 1;
  min-inline-size: 0;
}
.mk-form__wa {
  flex: none;
  inline-size: var(--btn-h, 52px);
  padding: 0;
  color: #17694a;
  border-color: #17694a;
}
.mk-form__wa .mk-wa-glyph {
  color: #17694a;
}
/* מקום בתחתית: גם בגלילה עד הסוף הכפתור הצף לא מכסה את שורות הכותרת התחתונה */
.mk-footer {
  padding-block-end: calc(32px + 72px + env(safe-area-inset-bottom));
}

/* =========================================================
   תנועה מאופקת — רק כשלא התבקשה תנועה מופחתת
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mk-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
  .mk-hero__copy > *,
  .mk-video {
    animation: mk-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .mk-hero__copy > :nth-child(2) {
    animation-delay: 0.04s;
  }
  .mk-hero__copy > :nth-child(3) {
    animation-delay: 0.08s;
  }
  .mk-hero__copy > :nth-child(n + 4) {
    animation-delay: 0.12s;
  }
  .mk-video {
    animation-delay: 0.16s;
  }
}

@media print {
  .mk-header,
  .mk-menu,
  .mk-video,
  .mk-wa,
  .mk-pilot {
    display: none;
  }
}