/* ═══════════════════════════════════════════════════════════════
   אתר המכירה — שפת העיצוב

   אותה פלטה של מסך הניהול (חול, טורקיז, דבש), כדי שהמעבר מהאתר
   למערכת לא ירגיש כמו מעבר לחברה אחרת. הטוקנים משוכפלים כאן
   במכוון: האתר נטען למי שאינו לקוח, ואין סיבה שיישא איתו את
   שבע-מאות השורות של פריסת מסך הניהול.

   ארבע החלטות:
   1. קריאות לפני צפיפות. הקהל אינו בהכרח צעיר, והאתר נקרא בטלפון
      ישן לא פחות מאשר במסך גדול.
   2. תנועה רק בכניסה למסך, ורק פעם אחת. טקסט שממשיך לזוז הוא
      טקסט שקשה לקרוא, ומי שביקש פחות תנועה מקבל אפס.
   3. ההוכחה לפני ההבטחה. המקטעים החזקים בעמוד הם אלה שמראים
      חישוב אמיתי, ולכן הם מקבלים את המשקל הוויזואלי הגדול.
   4. כל מסך מוביל לפעולה אחת: להשאיר פנייה, או להיכנס למערכת.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ground:    #F5F2ED;
  --ground-2:  #EDE8E0;
  --surface:   #FFFFFF;
  --surface-2: #EFEBE4;
  --surface-3: #E5E0D7;

  --ink:   #17211F;
  --ink-2: #55635F;
  --ink-3: #85918D;

  --line:        #E4DED4;
  --line-strong: #D2CABC;

  --accent:      #0E7C74;
  --accent-deep: #0A5C56;
  --accent-soft: #DCEFEC;
  --accent-tint: #F0F8F7;

  --honey:      #B8791F;
  --honey-soft: #FAF0DC;

  --good:      #2F7A54;
  --good-soft: #E0F0E6;
  --warn:      #9A6510;
  --warn-soft: #FBEEDA;
  --bad:       #AC3B31;
  --bad-soft:  #FBE5E2;

  /* ── קנה מידה אחד ─────────────────────────────────────────
     מרווח, פינה וגודל טקסט נבחרו עד כה לכל רכיב בנפרד: 15, 16,
     24, 26, 32, 44, 54, 84. התוצאה נראית "כמעט מיושר" בכל מסך,
     וזה בדיוק מה שגורם לעמוד להיראות לא מסודר. מכאן והלאה כל
     מרווח הוא ערך מהסולם הזה, ואין מספר חופשי בקוד.

     הסולם מכפילי-4 עם קפיצות מתרחבות: קרוב לעין הוא צפוף, ורחוק
     ממנה הוא נדיב. כך העין תופסת קבוצות במקום שורות. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* אורך שורה. מעבר לזה העין מאבדת את תחילת השורה הבאה, וזה
     מורגש במיוחד בעברית שאין בה אותיות גדולות לעגן בהן. */
  --measure: 64ch;

  --shadow-sm: 0 1px 2px rgba(40, 32, 20, .05);
  --shadow:    0 1px 3px rgba(40, 32, 20, .05), 0 6px 16px -8px rgba(40, 32, 20, .12);
  --shadow-lg: 0 2px 6px rgba(40, 32, 20, .06), 0 18px 40px -18px rgba(40, 32, 20, .25);
  --shadow-xl: 0 4px 10px rgba(40, 32, 20, .07), 0 34px 70px -30px rgba(40, 32, 20, .34);

  /* סימני הרשימות, באותו קו של שאר הסמלים במוצר. */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.9'/%3E%3C/svg%3E");
  --dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

  --ease: cubic-bezier(.2, .7, .3, 1);
  /* גובה הסרגל העליון — נקרא גם בגלילה לעוגן, כדי שכותרת מקטע
     לא תיחתך מתחתיו. ערך אחד, ולא שלוש הנחות. */
  --topbar: 64px;
  --wrap: 1160px;

  --serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --sans: Assistant, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:    #12100D;
    --ground-2:  #171410;
    --surface:   #1B1916;
    --surface-2: #232019;
    --surface-3: #2D2921;

    --ink:   #EFEAE1;
    --ink-2: #B4ACA0;
    --ink-3: #857D72;

    --line:        #2E2A23;
    --line-strong: #40392F;

    --accent:      #4ECEC0;
    --accent-deep: #7FE0D5;
    --accent-soft: #12312E;
    --accent-tint: #17211F;

    --honey:      #E0A951;
    --honey-soft: #2A2116;

    --good:      #6BC08E;
    --good-soft: #16291E;
    --warn:      #DFAA57;
    --warn-soft: #2A2116;
    --bad:       #E08279;
    --bad-soft:  #2C1815;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 3px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -18px rgba(0, 0, 0, .8);
    --shadow-xl: 0 4px 10px rgba(0, 0, 0, .55), 0 34px 70px -30px rgba(0, 0, 0, .9);
  }
}

* { box-sizing: border-box; }

/* `display` מנצח את תכונת hidden, ובלי זה שדה שהוסתר בקוד נשאר
   על המסך. חוק אחד כאן במקום שכל רכיב ייזכר לבד. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* הסרגל העליון דביק, ובלי זה כל קפיצה לעוגן מסתירה את כותרת המקטע. */
section[id], div[id].anchor { scroll-margin-top: calc(var(--topbar) + var(--sp-5)); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.012em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 780px; }
.mid { max-width: 940px; }

/* ── כניסה למסך ─────────────────────────────────────────────────
   פעם אחת בלבד, וברירת המחדל היא מצב גלוי: אם הסקריפט לא נטען,
   התוכן נשאר על המסך במקום להיעלם לתמיד. */
.rise { opacity: 0; transform: translateY(14px); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise.in { opacity: 1; transform: none; transition: none; }
}

/* ── סרגל עליון ─────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar); }

/* פס התקדמות קריאה — מראה כמה נשאר, בלי לתפוס שטח */
.progress {
  position: absolute; bottom: -1px; inset-inline-start: 0;
  height: 2px; width: 0; background: var(--accent);
  transition: width .1s linear;
}

.logo {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--serif); font-weight: 800; font-size: 20px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  letter-spacing: -.01em;
}
.logo .mark {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
.logo .mark svg { width: 22px; height: 22px; display: block; }
@media (prefers-color-scheme: dark) { .logo .mark { color: #08201E; } }

/* איקון קטן בתוך שורת טקסט — ברצועת האמון ובכפתורים. */
.ti {
  width: 17px; height: 17px; display: inline-block;
  vertical-align: -3px; color: var(--accent);
}
.btn .ti { color: currentColor; margin-inline-end: 2px; }

.topnav { display: flex; gap: 2px; margin-inline-start: auto; }
.topnav a {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15.5px;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.topnav a:hover { background: var(--surface-2); color: var(--ink); }
.topnav a.on { color: var(--accent-deep); background: var(--accent-tint); }
.topnav a.only-mobile { display: none; }

/*
 * שני כפתורים באותה בולטות שקולים לאפס כפתורים. "פתיחת חשבון" הוא
 * הפעולה שאנחנו רוצים, ולכן הוא היחיד המלא; "כניסה למערכת" הוא
 * לחוזרים, והוא קישור שקט לצידו.
 */
.top .btn { margin-inline-start: var(--sp-2); flex: none; }
.top .btn.join-top {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.top .btn.join-top:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.top .btn.primary {
  background: transparent; border-color: transparent; color: var(--ink-2);
  box-shadow: none; padding-inline: var(--sp-3);
}
.top .btn.primary:hover {
  background: var(--surface-2); color: var(--ink); transform: none; box-shadow: none;
}


.burger {
  display: none; margin-inline-start: auto; flex: none;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); width: 46px; height: 42px; font-size: 18px;
  color: var(--ink); cursor: pointer;
}

/* ── כפתורים ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease),
              background .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { box-shadow: var(--shadow); transform: translateY(-1px); color: var(--ink); }
.btn:active { transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn.big { padding: 15px 30px; font-size: 18px; }
/* גם הקטן נשאר יעד לאצבע. 44px הוא הרוחב של קצה אצבע, ולא העדפה:
   כפתור נמוך מזה נלחץ פעמיים או מפספס, וזה קורה דווקא בטלפון —
   שם רוב הלקוחות פותחים את האתר. */
.btn.sm { padding: 8px 15px; font-size: 15px; min-height: 44px; }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }

@media (prefers-color-scheme: dark) {
  .btn.primary, .btn.primary:hover { color: #08201E; }
}

/* ── מקטעים ─────────────────────────────────────────────────── */

section { padding: var(--sp-9) 0; position: relative; }
section.tint { background: var(--surface-2); }
section.deep { background: var(--ground-2); }
section.tight { padding: var(--sp-7) 0; }
section.line-top { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-block; margin-bottom: var(--sp-4);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-deep); background: var(--accent-soft);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
}
.eyebrow.honey { color: var(--honey); background: var(--honey-soft); }

/*
 * סולם הכותרות.
 *
 * ההבדל בין כותרת לגוף היה קטן מדי, והעמוד נקרא כמסמך ולא כמסך.
 * כאן הקפיצה גדולה יותר, המרווח בין האותיות מתהדק ככל שהכותרת
 * גדלה (אותיות גדולות צריכות פחות אוויר ביניהן), והשורה נשארת
 * באורך שהעין מסוגלת לעקוב אחריו.
 */
.h2 {
  font-size: clamp(30px, 4vw, 46px); margin-bottom: var(--sp-4);
  letter-spacing: -.022em; line-height: 1.14;
}
.h3 { font-size: clamp(22px, 2.4vw, 29px); letter-spacing: -.015em; }
.lead { font-size: 19px; color: var(--ink-2); max-width: var(--measure); }
.sechead { margin-bottom: var(--sp-7); max-width: 72ch; }
.sechead.center { text-align: center; margin-inline: auto; }
.sechead.center .lead { margin-inline: auto; }

/* ── פתיח ───────────────────────────────────────────────────── */

.hero { padding: var(--sp-8) 0 var(--sp-9); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset-inline-end: -220px; top: -260px;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  opacity: .75; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset-inline-start: -180px; bottom: -320px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, var(--honey-soft), transparent 70%);
  opacity: .6; pointer-events: none;
}
.hero .wrap {
  position: relative; display: grid; gap: var(--sp-7);
  grid-template-columns: 1.02fr .98fr; align-items: center;
}
.hero h1 {
  font-size: clamp(36px, 5.6vw, 60px); letter-spacing: -.028em; line-height: 1.08;
  margin-bottom: var(--sp-5);
}
.hero h1 em { font-style: normal; color: var(--accent-deep); }
.hero .lead { font-size: 20px; margin-bottom: var(--sp-6); max-width: 52ch; }
/*
 * שני הכפתורים זה לצד זה, וכל אחד ברוחב הכיתוב שלו.
 *
 * קודם הם נמתחו לרוחב מלא ונשברו לשתי שורות, ואז הם נראו כמו שני
 * שדות בטופס ולא כמו קריאה לפעולה. כפתור ראשי צריך להיראות כמו
 * כפתור — מוגדר, ולא כמו פס. בטלפון הם נשברים לשורות ומתמלאים,
 * ושם זה נכון: שם אצבע רוצה יעד רחב.
 */
.hero .cta {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6);
}

/*
 * שורת ההוכחות מתחת לכפתורים.
 *
 * היו כאן שלושה שבבים בשורה אחת, והם נשברו לשתי שורות משוננות שנראו
 * כמו תאונה ולא כמו רשימה. שלוש שורות עם סמל מיושר קוראים מהר יותר,
 * ונראים אותו דבר בכל רוחב מסך.
 */
.trust {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-3);
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.trust li {
  display: grid; grid-template-columns: 20px 1fr;
  align-items: start; gap: var(--sp-3);
}
.trust .ti { width: 20px; height: 20px; margin-top: 1px; color: var(--brand); }
.trust b { color: var(--ink); font-weight: 700; }

/* מילה שאסור שתישאר לבדה בתחילת שורה — קו מפריד, שם עיר, מספר. */
.nowrap { white-space: nowrap; }

/* ההבטחה המסחרית יושבת מתחת לכפתור ולא בתוכו: כפתור נקרא בהצצה
   אחת, ומשפט בתוכו הופך אותו לשלט. */
.ctanote {
  font-size: 14.5px; color: var(--ink-3);
  margin: calc(var(--sp-4) * -1) 0 var(--sp-5);
}

/* ── כרטיס "היום אצלכם" — נתונים אמיתיים מהמנוע ────────────── */

.today {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  overflow: hidden; font-size: 15px;
}
.today .head {
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(160deg, var(--accent-tint), transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.today .head .hd { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.today .head .sub { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
/* בורר העיר הוא הפקד שנוגעים בו ראשון בכל הדף. 34 פיקסלים של גובה
   הם יעד צר גם לעכבר, ולכן הוא מקבל גובה של פקד ממשי. */
.today select {
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 9px 14px; max-width: 46%; min-height: 44px;
  cursor: pointer;
}
.today select:hover { border-color: var(--accent); }
.today .body { padding: 8px 22px 18px; }
.today .z {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.today .z:last-child { border-bottom: 0; }
.today .z .n { flex: 1; }
.today .z .n small { color: var(--ink-3); font-size: 12.5px; margin-inline-start: 6px; }
/* הספירה לאחור לזמן הבא. היא בשורה נפרדת מתחת לשם ולא לידו, כדי
   שהמספר שרץ לא יזיז את השם בכל שנייה. */
.today .z .n .cd {
  display: block; margin-top: 3px;
  font-size: 13.5px; font-weight: 600; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.today .z .t {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px;
  letter-spacing: -.01em;
}
.today .z.next { background: var(--accent-tint); margin-inline: -22px; padding-inline: 22px; }
.today .z.next .t { color: var(--accent-deep); }
.today .foot {
  padding: 13px 22px; border-top: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3); font-size: 13px;
}
.today .foot b { color: var(--ink-2); }

.skel {
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%; border-radius: 6px; height: 13px;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ── רצועת מספרים ───────────────────────────────────────────── */

.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.metric { background: var(--surface); padding: 24px 20px; text-align: center; }
.metric b {
  display: block; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 34px);
  color: var(--accent-deep); line-height: 1.1;
}
.metric span { display: block; color: var(--ink-2); font-size: 14.5px; margin-top: 7px; }

/* ── רשתות וכרטיסים ─────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g23 { grid-template-columns: 1.35fr 1fr; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--sp-5); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease),
              border-color .2s var(--ease);
}
.card h3 { font-size: 20px; margin-bottom: var(--sp-2); letter-spacing: -.01em; }
.card p { color: var(--ink-2); font-size: 16px; max-width: var(--measure); }
/* פריט אחרון בכרטיס אינו נושא מרווח תחתון — אחרת הכרטיס נראה
   כאילו נגמר לפני שהוא נגמר. */
.card > :last-child { margin-bottom: 0; }
.card.lift:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
/*
 * מסגרת האיקון.
 *
 * בתוכה יושב SVG בקו אחד ולא אימוג'י: אימוג'י נראה שונה בכל
 * מערכת הפעלה, נשבר בהדפסה, ובמוצר שנמכר לבתי כנסת ולרבנים הוא
 * גם פשוט נראה זול.
 */
.card .ic {
  width: 44px; height: 44px; border-radius: var(--r-sm); margin-bottom: var(--sp-4);
  display: grid; place-items: center;
  background: var(--accent-tint); border: 1px solid var(--accent-soft);
  color: var(--accent-deep);
}
.ic .i { width: 24px; height: 24px; display: block; }
.card.wide .ic { width: 52px; height: 52px; border-radius: var(--r); }
.card.wide .ic .i { width: 27px; height: 27px; }
.card .ic.honey {
  background: var(--honey-soft); color: var(--honey);
  border-color: color-mix(in srgb, var(--honey) 22%, transparent);
}
.card.wide { padding: var(--sp-6); }
.card.wide h3 { font-size: 25px; }
.card.accent { border-color: var(--accent-soft); background: var(--accent-tint); }
.card.flat { box-shadow: none; }

/* ── שלבים ──────────────────────────────────────────────────── */

.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 32px; }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -15px; inset-inline-start: 24px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) { .steps .card::before { color: #08201E; } }

/* ── רשימות ─────────────────────────────────────────────────── */

/*
 * רשימת הסימונים.
 *
 * הסימן היה תו טקסט (✓), והוא נראה שונה בכל מערכת הפעלה ולא דומה
 * לאף איקון אחר במוצר — אחרי שכל הסמלים עברו לקו אחיד, הוא נשאר
 * הדבר היחיד שנראה כמו הקלדה. כאן הוא מסכה של אותו קו בדיוק,
 * ולכן הוא מקבל את צבע ההקשר ומתיישר לגובה השורה.
 */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
/*
 * הפריט הוא בלוק, והסימן מרחף עליו — ולא פריט flex לצידו.
 *
 * ב-flex כל אלמנט בתוך השורה הופך לפריט בפני עצמו, ולכן
 * "<b>שם</b> — הסבר" נחתך לשני גושים שנשברים כל אחד לחוד ומרווח
 * ביניהם. התוצאה נראתה כמו טקסט מיושר לשני הצדדים בטעות. שורה
 * אחת רציפה עם ריפוד לסימן נשברת כמו טקסט רגיל, וזה מה שהיא.
 */
.ticks li {
  position: relative;
  padding-inline-start: calc(19px + var(--sp-3));
  color: var(--ink-2); font-size: 16px; line-height: 1.55;
}
.ticks li::before {
  content: ''; position: absolute;
  inset-inline-start: 0; top: 4px;
  width: 19px; height: 19px;
  background: var(--accent);
  -webkit-mask: var(--tick) center / contain no-repeat;
          mask: var(--tick) center / contain no-repeat;
}
.ticks.two { grid-template-columns: 1fr 1fr; }
.ticks.dash li::before {
  background: var(--ink-3);
  -webkit-mask: var(--dash) center / contain no-repeat;
          mask: var(--dash) center / contain no-repeat;
}

/*
 * שורת המידע שאינו שעה — ראש חודש, צום, עומר, תחנון, ברכת הלבנה.
 *
 * ‏auto-fit ולא auto-fill: ביום רגיל יש כאן כרטיס אחד, ובעמודה
 * ברוחב רבע מסך הוא נראה כמו שריד של שורה שנמחקה. auto-fit מותח
 * אותו לרוחב מלא, וביום עמוס מחלק את השורה שווה בשווה.
 */
.dayinfo {
  display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.dayinfo-card { padding: var(--sp-4) var(--sp-5); }
.dayinfo-card .k { color: var(--ink-3); font-size: 13px; }
.dayinfo-card .v { font-weight: 700; font-size: 16.5px; margin-top: 3px; }
.dayinfo-card.honey {
  background: var(--honey-soft);
  border-color: color-mix(in srgb, var(--honey) 25%, transparent);
}

.quotes { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.quotes li {
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 15.5px; color: var(--ink-2);
  border-inline-start: 3px solid var(--accent-soft);
}

/* ── מדגים ──────────────────────────────────────────────────── */

.demo {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.demo .bar {
  padding: 20px 26px; border-bottom: 1px solid var(--line);
  background: linear-gradient(160deg, var(--accent-tint), transparent);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.demo .bar h3 { margin: 0; font-size: 20px; }
.demo .bar .spacer { flex: 1; }
.demo .pane { padding: 26px; }

.picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.picker .field { min-width: 150px; flex: 1; }

/* הקווים מצוירים בצל של כל תא ולא ברקע הרשת: שורה אחרונה שאינה
   מלאה הייתה משאירה ריבוע אפור תלוי באוויר. */
.zgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.zgrid .zcell {
  background: var(--surface); padding: 14px 16px;
  box-shadow: 0 0 0 1px var(--line);
}
.zgrid .zcell .l { color: var(--ink-2); font-size: 14.5px; }
.zgrid .zcell .l small { color: var(--ink-3); font-size: 12.5px; }
.zgrid .zcell .v {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 21px;
  font-family: var(--serif); margin-top: 3px;
}
.zgrid .zcell.hot { background: var(--accent-tint); }
.zgrid .zcell.hot .v { color: var(--accent-deep); }

.fires { display: grid; gap: 9px; margin-top: 6px; }
.fire {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 16px;
}
.fire .d { color: var(--ink-2); font-size: 15px; flex: 1; }
.fire .t {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px;
  font-family: var(--serif);
}
.fire .delta { font-size: 13px; color: var(--honey); font-weight: 600; min-width: 8ch; text-align: start; }

/* ── טבלת השוואה ────────────────────────────────────────────── */

.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: start; }
.compare thead th { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.compare thead th:last-child { color: var(--accent-deep); }
.compare td:first-child { color: var(--ink-2); }
.compare td:last-child { font-weight: 600; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .no { color: var(--ink-3); }
.compare .yes { color: var(--accent-deep); }

/* ── ציר זמן ────────────────────────────────────────────────── */

.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before {
  content: ''; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line-strong);
}
.timeline .ev { position: relative; padding: 0 0 22px; }
.timeline .ev::before {
  content: ''; position: absolute; inset-inline-start: -25px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--ground);
}
.timeline .ev .t {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px;
  color: var(--accent-deep);
}
.timeline .ev .n { font-size: 16px; margin-top: 2px; }
.timeline .ev .n small { display: block; color: var(--ink-3); font-size: 13.5px; }

/* ── מחירים ─────────────────────────────────────────────────── */

.plans { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); align-items: start; }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm);
  position: relative;
}
/* המסלול המומלץ נבדל בקו ובכותרת, ולא בגודל: כרטיס גדול יותר היה
   שובר את יישור השורות בין שני המסלולים, וזה מה שמקשה להשוות. */
.plan.best { border-color: var(--accent); box-shadow: var(--shadow); }
/*
 * התווית יושבת *בתוך* הכרטיס, בפינת ההתחלה.
 *
 * קודם היא ריחפה חצי מחוץ לפינה, ובעמוד שכולו מלבנים מיושרים דבר
 * אחד שחורג נקרא כתקלת רינדור ולא כהדגשה. והמקום שלה שמור בשני
 * הכרטיסים גם כשהיא אינה שם — אחרת המחירים יושבים בשני גבהים
 * שונים, ובדיוק בעמוד שכל תכליתו להשוות ביניהם.
 */
.plan { padding-top: calc(var(--sp-6) + 30px); }
.plan .tagbest {
  position: absolute; top: var(--sp-6); inset-inline-start: var(--sp-6);
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
}
@media (prefers-color-scheme: dark) { .plan .tagbest { color: #08201E; } }
.plan h3 { font-size: 25px; margin-bottom: var(--sp-1); }
.plan .who { color: var(--ink-3); font-size: 15px; margin-bottom: var(--sp-5); }
.plan .price { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.plan .price b { font-size: 48px; font-family: var(--serif); line-height: 1; letter-spacing: -.02em; }
.plan .price span { color: var(--ink-2); font-size: 16px; }
.plan .first { color: var(--honey); font-weight: 700; font-size: 15px; margin-bottom: var(--sp-5); }
/*
 * טבלת המכסות.
 *
 * תווית מצד אחד ומספר מצד שני, עם עשרים סנטימטר ריקים באמצע —
 * העין צריכה לקפוץ, ובהשוואה בין שני מסלולים היא קופצת פעמיים
 * בכל שורה. קו מפריד דק בין השורות מחזיק את הזוג יחד, והמספרים
 * מיושרים בספרות בעלות רוחב אחיד.
 */
.plan .quota {
  list-style: none; padding: var(--sp-5) 0 0; margin: var(--sp-5) 0;
  border-top: 1px solid var(--line); display: grid;
}
.plan .quota li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  font-size: 15.5px; color: var(--ink-2);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.plan .quota li:last-child { border-bottom: 0; }
.plan .quota li b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.plan .btn { width: 100%; }

.pricenote {
  margin-top: 26px; padding: 20px 24px; border-radius: var(--r);
  background: var(--honey-soft); color: var(--ink-2); font-size: 16px;
  border: 1px solid color-mix(in srgb, var(--honey) 25%, transparent);
}

/* מחשבון עלות */
.calc { display: grid; gap: 18px; grid-template-columns: 1.2fr 1fr; align-items: start; }
.calc .out {
  background: var(--accent-tint); border: 1px solid var(--accent-soft);
  border-radius: var(--r); padding: 24px; text-align: center;
}
.calc .out .sum {
  font-family: var(--serif); font-size: 44px; color: var(--accent-deep); line-height: 1.05;
}
.calc .out .lbl { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.calc .out .rows { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--accent-soft); display: grid; gap: 7px; text-align: start; }
.calc .out .rows div { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-2); }
.calc .out .rows b { font-variant-numeric: tabular-nums; color: var(--ink); }
.range { width: 100%; accent-color: var(--accent); }

/* ── שאלות ──────────────────────────────────────────────────── */

.faq { display: grid; gap: 10px; }
details.q {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
details.q > summary {
  padding: 18px 22px; cursor: pointer; font-weight: 600; font-size: 17.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center;
}
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary::after { content: '+'; color: var(--accent); font-size: 22px; font-weight: 400; flex: none; }
details.q[open] > summary::after { content: '−'; }
details.q > summary:hover { background: var(--surface-2); }
details.q .a { padding: 0 22px 20px; color: var(--ink-2); font-size: 16.5px; }
details.q .a p { margin-bottom: .7em; }

/* ── טופס ───────────────────────────────────────────────────── */

.formcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow);
}
.frow { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { color: var(--ink-3); font-size: 13.5px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
/* שורת צ׳יפים — בחירה קצרה שאינה נפתחת לרשימה. */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── שדה בחירת קובץ ──
   הכפתור שהדפדפן מצייר ל-input[type=file] כתוב באנגלית, אינו נשמע
   לעיצוב, ונראה כמו חתיכה משנות התשעים באמצע דף עברי. הוא מוסתר
   לגמרי, והקופסה שמתחת היא מה שרואים ומה שנלחץ. */
/* הבורר נכתב עם שם התגית בכוונה: `.field input { width: 100% }` יושב
   קודם באותה עוצמה, ובמצב absolute הוא נמדד מול הדף כולו — 1280
   פיקסלים של גלישה אופקית שאיש אינו רואה ואי אפשר להסביר. */
input.hidden-file {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.filebox {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 11px 14px; cursor: pointer; text-align: start;
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.filebox:hover, .filebox:focus-visible {
  border-color: var(--accent); background: var(--accent-tint);
}
.filebox .fi { flex: none; color: var(--accent-deep); display: grid; place-items: center; }
.filebox .fi svg { width: 22px; height: 22px; }
.filebox .ft { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.filebox .ft b { font-size: 15px; font-weight: 600; }
.filebox .ft span { font-size: 13px; color: var(--ink-3); }

.filedone {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.filedone img {
  width: 52px; height: 52px; object-fit: contain; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 4px; background: var(--surface);
}

/* סמל בתוך כפתור — בגודל האות שלידו, ובצבע הטקסט. */
.bi { display: inline-grid; place-items: center; vertical-align: -3px; }
.bi svg { width: 1.15em; height: 1.15em; }

/* שדה שנפסל בבדיקה. האדום אינו קישוט: הוא הדבר היחיד שמחבר בין
   הכפתור שנלחץ בתחתית העמוד לבין השדה שגרם לכך. */
.field input.bad, .field select.bad, .field textarea.bad {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px var(--bad-soft);
}
.fielderr {
  color: var(--bad); font-size: 14px; margin-top: 6px; font-weight: 600;
}
.ok-mark {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 16px; background: var(--good-soft); color: var(--good);
}
.ok-mark svg { width: 30px; height: 30px; }

/* מלכודת הבוטים מוסתרת בלי לצאת מהמסך: הזזה ל--9999px ב-RTL
   מותחת את רוחב הדף ימינה ויוצרת גלילה אופקית בטלפון. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none;
}

/* טקסט מוכן מראש נשבר לשורות ואינו מותח את הדף לרוחב. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; margin: 0; }

.note { border-radius: var(--r-sm); padding: 13px 16px; font-size: 16px; margin-bottom: 16px; }
.note.ok  { background: var(--good-soft); color: var(--good); }
.note.err { background: var(--bad-soft);  color: var(--bad); }

.contactgrid { display: grid; gap: 24px; grid-template-columns: 1.45fr 1fr; align-items: start; }
.contact-side { display: grid; gap: 14px; align-content: start; }
.contact-side .card { padding: 22px; }
.contact-side .card h3 { font-size: 18px; }
.contact-side .card p { font-size: 15.5px; }

/* ── רצועת סיום ─────────────────────────────────────────────── */

.band {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff; border-radius: var(--r-lg); padding: 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.band h2 { color: #fff; font-size: clamp(25px, 3vw, 32px); margin-bottom: 6px; }
.band p { color: rgba(255, 255, 255, .88); font-size: 17px; max-width: 54ch; }
.band .btn { background: #fff; border-color: #fff; color: var(--accent-deep); }
.band .btn:hover { background: #fff; color: var(--accent-deep); }

/* ── תחתית ──────────────────────────────────────────────────── */

footer.site {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 56px 0 34px; font-size: 15.5px;
}
footer.site .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; }
footer.site h4 { font-size: 16px; margin-bottom: 13px; font-family: var(--sans); font-weight: 700; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--accent-deep); text-decoration: underline; }
footer.site .about { color: var(--ink-2); max-width: 44ch; }
footer.site .fine {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ── טבלאות תוכן ────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; font-size: 16px; }
.tbl th, .tbl td { text-align: start; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.tbl th { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.tbl tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }

.pill {
  font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
  display: inline-block;
}
.pill.ok { background: var(--good-soft); color: var(--good); }
.pill.honey { background: var(--honey-soft); color: var(--honey); }
.pill.acc { background: var(--accent-soft); color: var(--accent-deep); }

/* ── דיאגרמות ───────────────────────────────────────────────── */

.diagram { width: 100%; height: auto; display: block; }
.diagram .stroke { stroke: var(--line-strong); }
.diagram .fill-surface { fill: var(--surface); }
.diagram .fill-tint { fill: var(--accent-tint); }
.diagram .fill-accent { fill: var(--accent); }
.diagram .txt { fill: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; }
.diagram .txt-2 { fill: var(--ink-2); font-family: var(--sans); font-size: 12.5px; }
.diagram .txt-inv { fill: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .diagram .txt-inv { fill: #08201E; } }

/* ── רספונסיבי ──────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .g4, .metrics, .plans { grid-template-columns: repeat(2, 1fr); }
  .g23, .calc, .contactgrid { grid-template-columns: 1fr; }
  .zgrid { grid-template-columns: repeat(2, 1fr); }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  section { padding: 56px 0; }

  /*
   * הכותרת בטלפון היא לוגו וכפתור תפריט, ותו לא.
   *
   * לוגו, תפריט ושני כפתורים באותה שורה מגיעים ל-434 פיקסלים במסך
   * של 390 — הדף גולש הצידה וכל שורה בו נחתכת. לכן התפריט והכפתורים
   * יורדים לשורה משלהם בתוך הכותרת עצמה (ולא כשכבה צפה בגובה ניחוש),
   * ונפתחים יחד עם התפריט.
   */
  .top .wrap { flex-wrap: wrap; height: auto; min-height: 62px; gap: 10px; }
  .logo { font-size: 19px; }
  .logo .mark { width: 36px; height: 36px; font-size: 18px; }
  .burger { display: block; }

  .topnav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; gap: 2px;
    padding: 6px 0 12px; margin: 0;
    border-top: 1px solid var(--line);
  }
  .topnav.open { display: flex; }
  .topnav a { padding: 13px; font-size: 17px; }
  .burger { display: block; }
  .top .btn { margin-inline-start: 8px; padding: 10px 16px; font-size: 15px; }
  /* שני כפתורים בסרגל דוחקים את הכניסה מחוץ למסך בטלפון. פתיחת
     חשבון נשארת בתפריט, בפתיח ובתחתית — היא לא נעלמת, רק זזה. */
  .top .join-top { display: none; }
  .topnav a.only-mobile { display: block; font-weight: 700; color: var(--accent-deep); }

  /* קישורי התחתית הם יעד לאצבע, לא לעכבר: 18 פיקסלים של גובה שורה
     אינם יעד לחיצה. */
  footer.site ul { gap: 2px; }
  footer.site ul a { display: block; padding: 11px 0; }

  /* אותו כלל לפקדים. שדה בגובה 21 פיקסלים ורשימה נפתחת בגובה 34
     הם יעד לעכבר; אצבע מחטיאה אותם, וקהל שאינו צעיר מחטיא פעמיים.
     ‏44 פיקסלים הוא המינימום המקובל, וכאן הוא נאכף במקום אחד. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, button, .btn {
    min-height: 44px;
  }
  input[type="range"] { height: 44px; }

  /* קישורי ניווט קצרים המופרדים בנקודה — "דף הבית · היכולות · כניסה".
     הם ניווט ולא טקסט רץ, ולכן הם מקבלים שטח לחיצה. קישור בתוך
     פסקה נשאר בגובה שורה, כי שם הוא באמת חלק מהמשפט. */
  footer.foot nav a { display: inline-block; padding: 10px 6px; }
  .g2, .g3, .g4, .plans, .frow, .ticks.two, .zgrid, .metrics { grid-template-columns: 1fr; }
  /* כפתור עם כיתוב ארוך נשבר לשתי שורות במקום לגלוש מהמסך. */
  .btn { white-space: normal; max-width: 100%; }
  .btn.big { padding: 14px 22px; font-size: 17px; }
  .band { padding: 32px; }
  .card, .formcard, .plan, .demo .pane { padding: 22px; }
  .today select { max-width: 100%; }
  .today .head { flex-direction: column; align-items: stretch; }

  /* שני כפתורי הפתיח זה לצד זה יוצאים ברוחב שונה ובשורות שונות,
     וזה נראה כמו תקלה. בטלפון הם שתי שורות שוות ברוחב מלא —
     יעד ברור לאצבע, וסדר במקום ריצוף. */
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { width: 100%; justify-content: center; }
}


/* ── פתיחת חשבון ─────────────────────────────────────────────
   בורר החבילה הוא כפתורים ולא רשימה נפתחת: הבחירה כאן קובעת
   איזו מערכת הלקוח יקבל, והיא ראויה למקום על המסך.
   ─────────────────────────────────────────────────────────── */
#join-form .field { margin-bottom: 16px; }
.packpick { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.packbtn {
  display: flex; flex-direction: column; gap: 3px; text-align: start;
  background: var(--ground); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 13px 15px; cursor: pointer;
  font: inherit; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.packbtn b { font-size: 16.5px; }
.packbtn span { color: var(--ink-3); font-size: 13.5px; }
.packbtn.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* תיבת סימון בברירת המחדל של הדפדפן היא 13 פיקסלים. זה יעד לעכבר,
   לא לאצבע — ובטופס שפותח חשבון זו בדיוק הלחיצה שאסור להחטיא.
   שטח הלחיצה הוא כל השורה, ולא הריבוע. */
.checkline {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px;
  padding: 11px 0; min-height: 44px; cursor: pointer;
}
.checkline input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.paircode-site {
  font-size: 40px; font-weight: 800; letter-spacing: .28em; text-align: center;
  font-variant-numeric: tabular-nums; background: var(--ground);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 16px; margin: 8px 0;
}
/* ═══════════════════════════════════════════════════════════════
   הלוח החודשי, ומה שיוצא למדפסת

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

.sheet {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm);
}
.sheet .sheethead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.sheet .sheethead h2 { font-size: 27px; margin: 0; }
.sheet .sheethead .sub { color: var(--ink-2); font-size: 15px; margin-top: 3px; }
.sheet .sheethead .by { text-align: end; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.sheet .sheethead .by b { color: var(--ink-2); }

.luach { width: 100%; border-collapse: collapse; font-size: 14px; }
.luach th, .luach td {
  border: 1px solid var(--line-strong);
  padding: 5px 6px; text-align: center; white-space: nowrap;
}
.luach thead th {
  background: var(--surface-2); font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
.luach thead th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; }
.luach td.day { text-align: start; font-weight: 600; }
.luach td.day small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
/* היום שבו מתחלף החודש העברי — הגבול נראה לעין בלי צבע ובלי הסבר. */
.luach td.day.newmonth { border-top-width: 2px; border-top-color: var(--ink-2); }
.luach td.t { font-variant-numeric: tabular-nums; }
.luach tr.shabbat td { background: var(--accent-tint); font-weight: 600; }
.luach tr.yomtov td { background: var(--honey-soft); font-weight: 600; }
.luach td.note {
  text-align: start; font-size: 11.5px; color: var(--ink-2);
  white-space: normal; max-width: 150px;
}

.sheet .sheetfoot {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--ink-3); font-size: 12px;
}

/* החתימה: שתי שורות מיושרות לסוף, בגוונים יורדים. שורת הפער אינה
   מודגשת ואינה צבועה — לוח שנתלה בבית כנסת אינו מודעה, ומי שקורא בו
   את השעה לא צריך שמשהו יתחרה איתה על העין. */
.sheet .sheetsign { display: flex; flex-direction: column; gap: 2px; text-align: end; }
.sheet .sheetsign .gap { color: var(--ink-2); }

/* ── כותרת הדף: הסמל והשם שהמדפיס בחר ── */
.sheet .sheettitle { display: flex; align-items: center; gap: 14px; }
.sheet .sheetlogo {
  width: 58px; height: 58px; object-fit: contain; flex: none;
}

/* ── שלוש תבניות ──
   ההבדל הוא בקריאוּת ולא בקישוט: אווירי לבית כנסת שקוראים בו
   מרחוק, קלאסי לחודש שלם בדף אחד, מסורתי ללוח שנתלה במסגרת. */
.sheet[data-tpl="airy"] .luach { font-size: 16.5px; }
.sheet[data-tpl="airy"] .luach th,
.sheet[data-tpl="airy"] .luach td { padding: 9px 8px; }
.sheet[data-tpl="airy"] .luach td.day small { font-size: 13px; }
.sheet[data-tpl="airy"] .luach td.note { font-size: 13px; }
.sheet[data-tpl="airy"] .sheethead h2 { font-size: 32px; }

.sheet[data-tpl="formal"] {
  border: 3px double var(--ink); border-radius: 4px;
}
.sheet[data-tpl="formal"] .sheethead {
  justify-content: center; text-align: center; border-bottom-width: 3px;
}
.sheet[data-tpl="formal"] .sheettitle { flex-direction: column; gap: 8px; }
.sheet[data-tpl="formal"] .sheethead h2 {
  font-size: 31px; letter-spacing: .01em;
}
.sheet[data-tpl="formal"] .sheethead .by { text-align: center; width: 100%; }
.sheet[data-tpl="formal"] .luach th,
.sheet[data-tpl="formal"] .luach td { padding: 7px 6px; }
.sheet[data-tpl="formal"] .luach thead th { border-bottom-width: 2px; }

@media (max-width: 900px) {
  .sheet { padding: 16px; overflow-x: auto; }
  .luach { font-size: 12.5px; }
  .sheet[data-tpl="airy"] .luach { font-size: 14px; }
}

@media print {
  /* המדפסת מקבלת את הלוח בלבד. כל השאר הוא אתר, ולא דף על הקיר. */
  .noprint, .top, footer.site, section.tint, section.deep { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding: 0 !important; }
  .wrap { max-width: none; padding: 0; }
  .sheet { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  .luach { font-size: 9.5pt; }
  .luach th, .luach td { border-color: #999; padding: 3px 4px; }
  .luach thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .luach tr.shabbat td, .luach tr.yomtov td {
    background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .sheet .sheethead { border-bottom-color: #000; }
  .sheet .sheetlogo { width: 52px; height: 52px; }
  .sheet[data-tpl="airy"] .luach { font-size: 12pt; }
  .sheet[data-tpl="airy"] .luach th, .sheet[data-tpl="airy"] .luach td { padding: 6px 5px; }
  .sheet[data-tpl="formal"] { border: 2.5pt double #000; padding: 8mm; }
  .sheet[data-tpl="formal"] .luach th, .sheet[data-tpl="formal"] .luach td { padding: 4px 5px; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* צ'יפ בחירה — לבחירת עמודות הלוח */
.chipbtn {
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 14px; min-height: 44px;
  display: inline-flex; align-items: center;
  transition: all .15s var(--ease);
}
.chipbtn:hover { border-color: var(--accent); }
.chipbtn.on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
  font-weight: 600;
}
/* ── שבב המיקום המדויק בלוח הזמנים ──────────────────────────── */

/* כשמחשבים לפי כתובת ולא לפי עיר, זה חייב להיראות על המסך —
   אחרת אדם קורא זמנים של נקודה אחרת ואינו יודע. */
.loc-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 6px 6px 14px; border-radius: 100px;
  background: var(--accent-tint); border: 1px solid var(--accent-soft);
  font-size: 14px; color: var(--ink-2);
}
.loc-chip b { color: var(--ink); }

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

.bot {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px;
  z-index: 60; display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px; font-family: var(--sans, inherit);
}

.bot-launch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-weight: 600; font-size: 16px;
  box-shadow: var(--shadow-lg);
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.bot-launch:hover { background: var(--accent-deep); transform: translateY(-1px); }
.bot-launch .ico { display: block; line-height: 0; }
.bot.open .bot-launch .txt { display: none; }

.bot-panel {
  width: min(380px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
}
@media (prefers-reduced-motion: no-preference) {
  .bot-panel { animation: bot-in .18s var(--ease) both; }
}
@keyframes bot-in { from { opacity: 0; transform: translateY(8px); } }

.bot-head {
  position: relative; padding: 16px 18px; background: var(--accent-tint);
  border-bottom: 1px solid var(--line);
}
.bot-title { font-weight: 700; font-size: 17px; color: var(--ink); }
.bot-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.bot-x {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: none; background: transparent; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.bot-x svg { width: 18px; height: 18px; display: block; }
.bot-x:hover { background: var(--surface-2); color: var(--ink); }

/*
 * תיבת השיחה היא בלוק גולל, ולא מכולת flex.
 *
 * ‏flex בעמודה נראה כאן טבעי ומתנהג רע: הבועות הן פריטי flex, הן
 * מתכווצות במקום שהתיבה תגלול, וגובה הגלילה מדווח שגוי — התוצאה היא
 * הודעות נמעכות שגולשות מעל שורת הכתיבה, וכפתור "שליחה" שאי אפשר
 * ללחוץ עליו. פריסת בלוק גוללת נכון תמיד, והיישור לצדדים מושג
 * בשוליים אוטומטיים.
 *
 * ‏min-height:0 נשאר הכרחי: בלעדיו התיבה עצמה, כפריט flex בחלונית,
 * מסרבת להתכווץ מתחת לגובה תוכנה.
 */
.bot-log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 16px;
}
.bot-log > * + * { margin-top: 10px; }

.bot-msg {
  max-width: 88%; width: fit-content;
  padding: 11px 14px; border-radius: var(--r);
  font-size: 15.5px; line-height: 1.55;
}
/* השמות כאן מקבלים תחילית משלהם.
   ‏"bot" בלבד היה מתנגש ב-.bot של החלונית הצפה עצמה, וכל בועת הודעה
   הייתה מקבלת position:fixed ומרחפת מעל הדף. */
.bot-msg.is-bot { margin-inline-end: auto; background: var(--surface-2); color: var(--ink); }
.bot-msg.is-me { margin-inline-start: auto; background: var(--accent); color: #fff; }
.bot-msg.is-pending { color: var(--ink-3); }

.bot-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bot-chip {
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--accent-deep); font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; text-align: start;
}
.bot-chip:hover { background: var(--accent-tint); border-color: var(--accent); }

.bot-form {
  flex: 0 0 auto;
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.bot-form input[type="text"] {
  flex: 1; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 11px 13px; min-width: 0;
}
.bot-form input[type="text"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.bot-send {
  padding: 11px 17px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-weight: 600; font-size: 15.5px; white-space: nowrap;
}
.bot-send:hover { background: var(--accent-deep); }
.bot-send[disabled] { opacity: .55; cursor: default; }

/* בטלפון חלונית קטנה בפינה אינה קריאה, ולכן היא תופסת את המסך. */
/*
 * מסך צר במיוחד. הכותרת היא השורה היחידה שאינה יכולה להישבר, ולכן
 * היא זו שמתהדקת: פחות ריפוד, פחות מרווח, ולוגו שמותר לו להתכווץ.
 * בלי זה כפתור "כניסה למערכת" חורג בשלושה פיקסלים — וגם שלושה
 * פיקסלים מייצרים גלילה אופקית בכל הדף.
 */
@media (max-width: 560px) {
  .top .wrap { padding-inline: 14px; gap: 10px; }
  .top .logo { min-width: 0; overflow: hidden; white-space: nowrap; }

  .bot { inset-inline: 10px; inset-block-end: 10px; align-items: stretch; }
  .bot-panel { width: auto; max-height: calc(100vh - 110px); }
  .bot-launch { align-self: flex-end; }
}

@media print { .bot { display: none; } }

/* ─────────── יעדי מגע: 44px, כפי שנדרש ───────────
   נמדד בדפדפן ב-390: הלוגו בכותרת עמד על 36px, קישורי טקסט בגוף
   העמוד על 16–19px. אצבע אינה עכבר, וקישור בגובה 18px הוא קישור
   שמפספסים. הריפוד מוסיף שטח מגע בלי להזיז את הפריסה, כי השטח
   הנוסף נבלע במרווח שכבר קיים סביב הקישורים.                     */
@media (hover: none), (max-width: 720px) {
  .logo { min-height: 44px; }

  /* קישורי טקסט בתוך פסקאות ובתחתית העמוד */
  /* כל קישור טקסט בגוף העמוד, לא רק בתוך main: שלושה קישורים
     נשארו קטנים כי הם יושבים בכרטיסים מחוץ ל-main. הכלל לפי הצורה
     ולא לפי המיקום — קישור בתוך פסקה או פריט רשימה. */
  p > a:not(.btn):not(.logo),
  li > a:not(.btn):not(.logo),
  .foot a,
  .lead a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    /* השורה גבוהה יותר מהטקסט, ולכן היישור האנכי מתוקן חזרה
       כדי שהקישור לא ידחוף את שורות הפסקה זו מזו. */
    margin-block: -13px;
    vertical-align: baseline;
  }
}

/* שם החבילה בכרטיס הוא קישור לדף שלה — ויעד מגע מלא בטלפון. */
.card h3 a { display: inline-flex; align-items: center; min-block-size: 44px;
             color: inherit; text-decoration-color: var(--accent); }