/* ═══════════════════════════════════════════════════════════════════════
   שכבת הרכיבים של עמודי המכירה.
   ═══════════════════════════════════════════════════════════════════════

   ⚠️⚠️ זו **הרחבה של HEADQUARTERS**, ⛔ לא מערכת מקבילה.
      כל רכיב כאן נושא את אותו שם ואת אותה התנהגות כמו במערכת החיה:
      `.panel` · `.inset` · `.rail-*` · `.badge` · `.eyebrow` · `.btn`
      `.chip` · `.stat` · `.sub` · `.lead` · `.mono` · `.num`.
      מי שמכיר את HQ מזהה את העמוד הזה מיד — וזו בדיוק הכוונה.

   ⛔ אין כאן ולו ערך צבע, רדיוס או הצללה אחד. הכול מ-`tokens.css`.

   שלוש תוספות שאין ב-HQ, וכל אחת מנומקת במקומה:
     1 · אור-רקע רך      — משטח שיווקי **נצפה**; דשבורד **מופעל**.
     2 · שלוש מסות כניסה — מ-designEngine. HQ נותן `enter` אחיד לכל ילד.
     3 · חצייה בין רצועות — עמוד ארוך צריך המשכיות; דשבורד לא.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️⚠️ **אין כאן @import.** `@import` בתוך CSS יוצר שרשרת טורית:
 * הדפדפן חייב לסיים את הקובץ הזה כדי לגלות שיש עוד קובץ, ורק אז
 * להתחיל אותו. נמדד: atelier נגמר ב-643ms, tokens ב-860ms — 217ms
 * של המתנה חוסמת-ציור. ⇒ שני `<link>` מקבילים ב-HTML. */

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--border) transparent; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: var(--t-body)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--accent-dim); color: var(--accent-hi); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
button { font: inherit; cursor: pointer; color: inherit; }

/* ═══ 1 · האור ══════════════════════════════════════════════════════════
   ⚠️ התוספת היחידה מעבר ל-HQ בשכבת הרקע, ומנומקת: HQ הוא כלי שנפתח
   בבוקר ויושבים בו שעות — אור נע שם היה מטרד. עמוד מכירה **נצפה** פעם
   אחת, והאור הוא מה שנותן לחומר עומק.

   ⛔ ולכן הוא מרוסן עד הקצה: הגוון הוא `--accent-dim` של HQ עצמו,
   פרוש על גובה החלון, ⚠️ נע עם **הגלילה בלבד** — ⛔ לא עם העכבר.
   ─────────────────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 58% at 76% -8%, var(--accent-dim), transparent 62%),
    radial-gradient(90% 46% at 12% 104%, rgba(157,139,236,.05), transparent 66%);
  background-repeat: no-repeat;
  background-position: 0 var(--lightY), 0 calc(var(--lightY) * -.4);
  opacity: calc(.55 + var(--beam) * .45);
  transition: opacity var(--dur-scene) var(--ease-scene);
}
nav, main, footer { position: relative; z-index: 1; }

/* ═══ 2 · טיפוגרפיה ═════════════════════════════════════════════════════
   ⚠️⚠️ **הסריף הוא החתימה.** `--disp` הוא Frank Ruhl Libre — סריף עברי,
   ובכל HQ הוא שמור בדיוק לשלושה תפקידים: הכותרת, משפט-המצב, והמספר.
   ⛔ הוא אינו לטקסט רץ ⛔ ואינו לקישוט. אותו כלל בדיוק כאן.
   ─────────────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; }

/* ⚠️ ב-HQ `.hero` הוא משפט המצב — «הדבר החשוב ביותר במוצר, ולכן הכי
 *    גדול בו», במשקל 500 ⛔ ולא 700. אותו רכיב, בקנה-מידה של כותרת. */
.hero-line {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.18;
  letter-spacing: .002em;
  max-width: var(--measure-head);
  text-wrap: balance;
  color: var(--text);
}
.hero-line strong { font-weight: 700; color: var(--accent-hi); }
.hero-line .quiet { color: var(--sec); }

h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(23px, 2.9vw, 32px);
     line-height: 1.25; letter-spacing: .005em; text-wrap: balance; max-width: var(--measure-head); }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }

p { margin: 0; max-width: var(--measure-body); text-wrap: pretty; }
.lead { color: var(--sec); font-size: var(--t-lede); line-height: 1.62; }
.sub  { color: var(--muted); font-size: var(--t-small); line-height: 1.6; }

.eyebrow {
  /* ⚠️⚠️ היה .12em. זו מוסכמת **לטינית** (ראשי-תיבות קטנים), וב-
     עברית היא מפרקת את צורת המילה — האותיות ממילא נפרדות והעין
     קוראת מתאר. נמדד 1.68px על גופן 14px. מעל ~.05em זה נשבר.
     ⚠️ התיקון כאן ⛔ ולא ב-pages.css: qr.html ⛔ אינו טוען אותו. */
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase;
  display: block; margin-bottom: var(--s2);
}
.mono { font-family: var(--mono); font-size: .85em; direction: ltr; unicode-bidi: embed; }
.num  { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.rng  { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ═══ 3 · פריסה ═════════════════════════════════════════════════════════ */

.wrap { width: 100%; max-width: var(--measure-page); margin-inline: auto; padding-inline: var(--s5); }
@media (max-width: 720px) { .wrap { padding-inline: var(--s4); } }

/* ⚠️⚠️ נמדד: **32% מגובה העמוד היה ריקנות אנכית** — 3,809px מתוך
   11,870. הריפוד היה 116px קבוע למעלה ולמטה בכל אחד מ-11 פרקים.
   ⇒ clamp שמצטמצם במסכים קטנים ונשאר נדיב בגדולים, ⛔ לא קבוע. */
.band { position: relative; padding-block: clamp(48px, 6.2vh, 84px); }
/* ⚠️⚠️ הניווט הדביק **כיסה את כותרת הסקשן** בקפיצה מעוגן (`#plans`):
 *    הכותרת נחתה מתחתיו והמבקר נחת על פסקה בלי לדעת לאן הגיע.
 *    נתפס בצילום, ⛔ לא בבדיקה. */
[id] { scroll-margin-top: calc(var(--s7) + var(--s3)); }
.band--tint { background: var(--bg2); }
/* ⚠️ ב-HQ `.herowrap` מפריד בקו. אותה מוסכמה בין רצועות. */
.band + .band { border-top: 1px solid var(--border); }

.band__head { margin-bottom: var(--gap-lg); }
.band__head p { margin-top: var(--s3); }

/* ⚠️ החצייה — התוספת השלישית שאין ב-HQ. `--overlap` מהמנוע:
 *    «עמוד שהסקשנים שלו רק נוגעים זה בזה הוא הסימן הברור ביותר שהורכב». */
.cross { margin-top: calc(var(--overlap) * -1 - var(--s6)); }

/* ═══ 4 · משטחים · הניב של HQ ═══════════════════════════════════════════ */

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5);
}
.panel.hi { box-shadow: var(--shadow); }
.panel.focused { outline: 2px solid var(--accent); outline-offset: 3px; }
.inset { background: var(--inset); border: 1px solid var(--border);
         border-radius: var(--r); padding: var(--s3); }

/* ⚠️ הפס בקצה — הרכיב שהכי מזהה את המערכת שלנו. ב-HQ נכתב במפורש:
 *    «לכל מצב צבע **וגם** צורה — ⛔ לא צבע בלבד». */
.rail { border-inline-start: 3px solid var(--border); }
.rail-accent { border-inline-start-color: var(--accent); }
.rail-ok     { border-inline-start-color: var(--ok); }
.rail-crit   { border-inline-start-color: var(--crit); }
.rail-warn   { border-inline-start-color: var(--warn); }
.rail-muted  { border-inline-start-color: var(--faint); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent; line-height: 1.7;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                 background: currentColor; flex: none; }
.b-ok   { color: var(--ok);   background: var(--ok-bg); }
.b-crit { color: var(--crit); background: var(--crit-bg); }
.b-warn { color: var(--warn); background: var(--warn-bg); }
.b-info { color: var(--sec);  background: rgba(167,162,148,.1); }

.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .n { font-family: var(--disp); font-size: 32px; font-weight: 700;
           font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .l { font-size: 13px; color: var(--sec); }
.stat .d { font-size: 12px; color: var(--muted); }

.row  { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.grid { display: grid; gap: var(--s4); }

/* ═══ 5 · פעולות ════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--accent); color: var(--on-accent); border: 0;
  border-radius: var(--r-sm); padding: 13px var(--s5);
  font-weight: 600; font-size: 15px; min-height: 48px; text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover  { background: var(--accent-hi); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
.btn.ghost  { background: transparent; color: var(--sec);
              border: 1px solid var(--border); font-weight: 500; }
.btn.ghost:hover { color: var(--text); border-color: var(--border-hi); background: var(--panel-hi); }
.btn.quiet  { background: transparent; color: var(--muted); border: 0; font-weight: 500; }
.btn.quiet:hover { color: var(--text); }
.btn.wide   { width: 100%; }
/* ⚠️ 46px ⛔ ולא 44: עם `box-sizing: border-box` ומסגרת 1px, min-height
 * של 44 נמדד 43.x ב-getBoundingClientRect. ⛔ רצפת מגע אינה מקום לעיגול. */
.btn.sm     { min-height: 46px; padding: 9px var(--s4); font-size: 14px; }

.chip {
  background: transparent; border: 1px solid var(--border); color: var(--sec);
  border-radius: var(--r-pill); padding: 0 var(--s4); min-height: 44px;
  display: inline-flex; align-items: center; font-size: 14px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-hi);
                             background: var(--accent-dim); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm);
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: var(--s2); z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--accent); color: var(--on-accent);
  padding: 0 var(--s4); border-radius: var(--r-sm); font-weight: 600;
}
.skip:focus { inset-inline-start: var(--s4); }

/* ═══ 6 · ניווט ═════════════════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s3) max(var(--s5), calc((100vw - var(--measure-page)) / 2 + var(--s5)));
  /* !! **`backdrop-filter` על סרגל דביק = טשטוש מחדש בכל פריים.**
     נמדד בגלילה על החי: חציון 33ms, p95 83ms, 19 משימות ארוכות -
     וכמעט בלי JS, כלומר העלות היא ציור ולא קוד.
     ! על רקע כהה, רקע אטום נראה זהה כמעט לגמרי ועולה אפס. */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--border); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s2);
              font-family: var(--disp); font-weight: 700; font-size: 17px; color: var(--text); }
.nav__brand:hover { color: var(--text); }
.nav__brand i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.nav__links { display: flex; align-items: center; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
/* ⚠️ `:not(.btn)` — בלעדיו `.nav__links a` (0,1,1) גובר על `.btn` (0,1,0)
 *    וצובע את הכפתור בצבע הקישור. נתפס פעם אחת רק דרך getComputedStyle. */
.nav__links a:not(.btn) { font-size: 14.5px; color: var(--muted); transition: color .15s ease; }
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__links .btn { min-height: 40px; padding-inline: var(--s4); font-size: 14px; }
@media (max-width: 900px) { .nav__links li:not(:last-child) { display: none; } }

/* ═══ 7 · תנועה ═════════════════════════════════════════════════════════
   ⚠️⚠️ שתי הגנות, ⛔ לא אחת:
     א. `html.js` — כל הסתרה מותנית בסימון שה-JS מוסיף. אם ה-JS ⛔ לא רץ,
        כלל ההסתרה **לא קיים**. ⛔ לא «מתבטל»: לא קיים.
     ב. `no-preference` — כמו ב-HQ, האנימציה עטופה בהעדפה החיובית.
        מי שביקש פחות תנועה ⛔ אינו מקבל אותה כלל.

   ⚠️ שלוש מסות ⛔ ולא אחת. HQ נותן `enter` אחיד לכל ילד — נכון לדשבורד,
      שבו כל הכרטיסים שווים. בעמוד סיפור כותרת, פסקה ומשטח ⛔ אינם
      אותו עצם: «כניסה אחידה לכולם היא הסימן שדף הורכב ולא עוצב».
   ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .js .rv-lead, .js .rv-support, .js .rv-surface { opacity: 0; }
  .js .rv-lead    { transform: var(--rv-lead);
                    transition: opacity var(--dur-lead) var(--ease), transform var(--dur-lead) var(--ease); }
  .js .rv-support { transform: var(--rv-support);
                    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .js .rv-surface { transform: var(--rv-surface);
                    transition: opacity var(--dur-surface) var(--ease), transform var(--dur-surface) var(--ease); }
  .js .is-in { opacity: 1; transform: none; }

  /* ⚠️ הסיום מאט. «שינוי קצב הוא איך שמסמנים סוף בכל מדיום». */
  .js .band--close .rv-lead,
  .js .band--close .rv-support,
  .js .band--close .rv-surface { transition-duration: var(--dur-resolve); }
}

hr.rule { border: 0; height: 1px; background: var(--border); margin: var(--gap-lg) 0; }

/* ═══ 8 · תצוגה מקדימה ══════════════════════════════════════════════════ */
.preview-flag {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90;
  display: flex; justify-content: center; gap: var(--s3);
  padding: 7px var(--s4);
  background: var(--crit-bg); color: var(--crit);
  border-top: 1px solid var(--crit);
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  backdrop-filter: blur(8px);
}

/* ============================================================
   כרטיסי החבילות המשולבות  —  נוסף 2.9.2026
   ============================================================
   מרום: "תסדר את החבילות שיהיו יפות לעין ולא כמו שהן עכשיו,
   כולל שיטות הגדלת מכירה."

   שלושת המנגנונים כאן נשענים על מספרים אמיתיים מהמחירון:
     .price__was    — עיגון. המחיר בנפרד, מחוק, ליד מחיר החבילה.
     .bundle__save  — החיסכון כסכום ש**נשאר אצלך**, לא כ"הנחה".
     .bundle__when  — מתי זה מתאים. סינון מגדיל סגירה.

   אין כאן ספירה לאחור ואין "נשארו מקומות". מרום מוכר פנים אל
   פנים, ולחץ מזויף נזכר לרעה בפגישה הבאה.
   ============================================================ */
/* ============================================================
   כרטיס החבילה - שוכתב 3.9.2026
   ============================================================
   !! **הבעיה לא הייתה במספרים אלא בקריאוּת.** `.bundle__save`
   היה באנר ברוחב מלא שחצה את הכרטיס, הרשימה אמרה «חשבון אחד»
   בלי לומר מה מקבלים, והמחיר האמיתי ישב במחיקה קטנה.
   ⇒ מה שמוכר חבילה הוא **החשבון**, ולכן הוא הפך לפנקס גלוי:
     כל רכיב, הסכום בנפרד, הסכום בחבילה, וההפרש. אין מה להסביר.
   ============================================================ */
.bundle {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s5); min-inline-size: 0;
}
.bundle--best { background: var(--panel-hi); border-color: var(--accent); }
.bundle__ribbon {
  position: absolute; inset-block-start: -1px; inset-inline-start: -1px;
  background: var(--accent); color: #1c1206; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; padding: 5px 14px;
  border-start-start-radius: var(--r-lg); border-end-end-radius: var(--r);
}
.bundle--best .bundle__head { margin-block-start: 14px; }
.bundle__head h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; }
.bundle__parts { font-size: 13px; color: var(--accent-hi); margin-block-start: 3px; }
.bundle__when { font-size: 13px; color: var(--muted); margin-block-start: 6px; line-height: 1.5; }

/* ---- הפנקס ---- */
.bl {
  margin-block: var(--s4); padding: var(--s4);
  background: var(--inset); border: 1px solid var(--border);
  border-radius: var(--r);
}
.bl__k { font-size: 11px; letter-spacing: .06em; color: var(--faint); margin-block-end: 8px; }
.bl__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-block: 5px; font-size: 13.5px; color: var(--sec); }
.bl__row b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.bl__row--sum { margin-block-start: 6px; padding-block-start: 9px; border-block-start: 1px solid var(--border-hi); }
.bl__row--sum b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.bl__row--win span { color: var(--text); font-weight: 600; }
.bl__row--win b { color: var(--accent-hi); font-size: 21px; font-weight: 700; }
.bl__save { margin-block-start: 8px; font-size: 12.5px; color: var(--ok); line-height: 1.5; }
.bl__save b { font-family: var(--mono); font-weight: 700; }

.bundle__setup { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-block-end: var(--s4); }
.bundle__setup b { font-family: var(--mono); color: var(--text); }
.bundle__setup s { color: var(--faint); text-decoration-thickness: 1px; }

.bundle__has { list-style: none; padding: 0; margin: 0 0 var(--s5); display: grid; gap: 7px; flex: 1; }
.bundle__has li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start;
  font-size: 13.5px; color: var(--sec); line-height: 1.5; }
/* ! גודל מפורש. בלי זה ה-svg נרנדר בגודל מלא - נמדד 343x343 ב-2.9. */
.bundle__has svg { inline-size: 16px; block-size: 16px; margin-block-start: 2px; color: var(--accent); }

.bundle__cta { inline-size: 100%; justify-content: center; text-align: center; }

/* ! **נמדד, לא הונח (2.9.2026).** ב-qr.html יש כלל משלו ל-
   `.plan__has svg` ולכן שם האייקונים תקינים; ב-landing.html
   ⛔ אין - ושישה צ'קמארקים בכרטיסי החבילות נרנדרו בגודל מלא.
   הכלל ממוקד ל-`.bundle` כדי שלא ידרוס עמוד שכבר מסדר את זה. */
.bundle .plan__has { list-style: none; margin: 0; padding: 0;
                     display: grid; gap: 8px; }
.bundle .plan__has li { display: flex; align-items: flex-start; gap: 8px;
                        font-size: .88em; line-height: 1.45; }
.bundle .plan__has svg { flex: none; inline-size: 14px; block-size: 14px;
                         margin-block-start: 3px;
                         color: var(--accent, #d4920a); }