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

   הפלטה: פליז עתיק על נייר שמנת. נוסתה פלטה שנגזרה מצבעי הלוגו
   (שזיף ומג'נטה) ונדחתה — היא יצאה כהה ולא מזמינה. הפליז נשאר.

   טיפוגרפיה: Frank Ruhl Libre לכותרות — הסריף העברי הקלאסי (1908),
   פניו של העיתון הישראלי. Heebo לגוף. שתיהן מוגשות מהאתר.
   כלל: Frank Ruhl מ-18px ומעלה בלבד. מתחת לזה הוא נסתם ו-Heebo
   קריא יותר. (Cormorant Garamond, ששימש קודם, כלל אינו מכיל אותיות
   עבריות והעברית נפלה ממנו לפונט ברירת מחדל.)
   ══════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-400-he.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-400-lat.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-500-he.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-500-lat.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-700-he.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl';src:url('fonts/FrankRuhlLibre-700-lat.woff2') format('woff2');font-weight:700;font-display:swap}

@font-face{font-family:'Heebo';src:url('fonts/Heebo-400-he.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Heebo';src:url('fonts/Heebo-400-lat.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/Heebo-500-he.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Heebo';src:url('fonts/Heebo-500-lat.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Heebo';src:url('fonts/Heebo-700-he.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Heebo';src:url('fonts/Heebo-700-lat.woff2') format('woff2');font-weight:700;font-display:swap}

/* ── טוקנים ───────────────────────────────────────────────────────
   כל הצבעים נבדקו מול הרקע שעליו הם יושבים בפועל. הטקסט הקטן
   משתמש ב---accent (6.5:1) ולא ב---accent-bright (4.3:1), שמותר
   רק לסימנים דקים שאינם טקסט.                                     */
:root{
  color-scheme:light dark;

  --desk:#100E0A;          /* השולחן שמסביב למסמך */
  --paper:#FCFAF6;         /* גיליון הנייר */
  --paper-sunk:#F5F1E8;    /* שקע עדין בתוך הנייר */
  --white:#FFFFFF;         /* משטח מורם: רשת הטופס, נייר ההסכם */
  --ink:#1A1712;
  --ink-2:#3A342A;
  --ink-muted:#6B6355;
  --placeholder:#B8AF9E;
  --rule:#E4DDCE;
  --rule-soft:#EFE9DD;

  /* פליז עתיק, לא זהב בוהק. הנייטרלים מוטים לחום־זית ולא לאפור נקי,
     כדי שהפליז יישב עליהם כחלק מאותו עולם ולא כמו כתם. */
  --accent:#9C7A33;
  --accent-deep:#7A5E24;
  --accent-wash:#F3EBD9;
  --accent-bright:#9C7A33;
  --teal:#9C7A33;          /* אותו פליז — אין צבע שני בפלטה הזו */
  --btn:#1A1712; --btn-hover:#7A5E24; --btn-text:#FCFAF6;
  --success:#4A7C59;
  --red:#A4472F;

  /* סולם מרווחים של 4px. קודם היו 34 ערכים שונים בלי יחס ביניהם. */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px;

  --shell:820px;
  --step:clamp(15.5px,.95rem + .2vw,17px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --read:0;                /* התקדמות הקריאה בהסכם, נכתב מ-JS */
  --fwd:-1;                /* כיוון "קדימה" — הדף RTL */

  /* שמות ישנים, נשמרים כדי ששום דבר לא יישבר בשקט */
  --gold:var(--accent); --gold-pale:var(--accent-wash); --gold-light:#C4A75E;
  --brass:var(--accent); --brass-deep:var(--accent-deep); --brass-pale:var(--accent-wash);
  --cream:var(--paper-sunk); --cream-border:var(--rule); --cream-dark:#E8E0D0;
}

/* מצב כהה: הגיליון עצמו הופך לדף כהה, לא רק המסגרת. סולם ההגבהה
   נפתח (paper < white) כדי שהכרטיסים לא ייבלעו בגיליון, והמג'נטה
   מוארת כדי לשמור ניגודיות מול נייר כהה — היפוך נאיבי היה מכבה אותה. */
@media (prefers-color-scheme:dark){
  :root{
    --desk:#050403;
    --paper:#17140F;
    --paper-sunk:#1F1B14;
    --white:#1C1812;
    --ink:#F2EDE3;
    --ink-2:#D3CBBB;
    --ink-muted:#9A9180;
    --placeholder:#6E6759;
    --rule:#332C22;
    --rule-soft:#272119;

    --accent:#CBA85F;
    --accent-deep:#E0C182;
    --accent-wash:#2A2317;
    --accent-bright:#CBA85F;
    --teal:#CBA85F;
    --btn:#F2EDE3; --btn-hover:#E0C182; --btn-text:#17140F;
    --success:#7FB08D;
    --red:#D98268;
    --cream-dark:#3A3226;
  }
}

*{box-sizing:border-box;margin:0;padding:0}

/* overflow-x:clip ולא hidden. hidden מחשב overflow-y ל-auto והופך את
   html ואת body למכלי גלילה — וזה שובר בשקט כל position:sticky בדף.
   סרגל השלבים היה מוגדר sticky מההתחלה ומעולם לא נדבק בפועל. clip
   חותך את הגלישה האופקית בלי ליצור מכל גלילה. */
html{
  scroll-behavior:smooth;
  overflow-x:clip;
  background:var(--desk);
}
/* animation-iteration-count חייב להתאפס יחד עם ה-duration. בלעדיו
   הטבעת המסתובבת רצה ~100,000 סיבובים בשנייה במקום להיעצר. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .loading-ring{border-color:var(--accent-bright);border-top-color:transparent;opacity:.75}
}

body{
  overflow-x:clip;
  background:var(--desk);
  color:var(--ink);
  font-family:'Heebo',system-ui,sans-serif;
  font-size:var(--step);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:900px){ body{padding:34px var(--sp-6)} }

/* ── הגיליון ────────────────────────────────────────────────────── */
.sheet{
  max-width:var(--shell);
  margin-inline:auto;
  background:var(--paper);
  min-height:100vh;
  position:relative;
}
@media (min-width:900px){
  .sheet{
    min-height:auto;
    box-shadow:0 1px 0 rgba(255,255,255,.05), 0 24px 70px -20px rgba(0,0,0,.7);
  }
}
/* צל שחור על רקע כמעט־שחור לא מפריד כלום. במצב כהה הגיליון מקבל
   קצה מואר במקום צל. */
@media (prefers-color-scheme:dark) and (min-width:900px){
  .sheet{box-shadow:0 0 0 1px rgba(203,168,95,.10), 0 30px 80px -30px rgba(0,0,0,.9)}
}

/* ── ראש המסמך ─────────────────────────────────────────────────── */
.page-header{
  padding:var(--sp-9) var(--sp-6) var(--sp-7);
  text-align:center;
  border-bottom:1px solid var(--rule);
  position:relative;
}
@media (min-width:700px){ .page-header{padding:var(--sp-10) var(--sp-9) var(--sp-8)} }

/* קו הפליז בראש הגיליון — החותם של המסמך */
.page-header::before{
  content:'';
  position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent) 78%,transparent);
}

/* הלוגו הוא קווים שחורים על רקע שקוף. קודם הוא ישב על שבב לבן טהור
   שהיה הדבר הבוהק ביותר בדף הכהה ונראה כמו תקלה. עכשיו יש נכס שני,
   logo-dark.png, שבו רק הקווים הנייטרליים נצבעו מחדש — צבעי המותג
   לא נגעו. filter:invert() לא בא בחשבון: הוא מסובב את המג'נטה לירוק. */
.logo-slot{
  display:block;
  width:fit-content;
  max-width:172px;
  margin:0 auto var(--sp-5);
}
.logo-slot img{max-width:100%;height:auto;display:block}
.logo-slot .logo-fallback{
  width:56px;height:56px;
  border:1px dashed var(--rule);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Frank Ruhl',serif;
  font-size:26px;color:var(--accent);
}

.page-header h1{
  font-family:'Frank Ruhl',serif;
  font-weight:400;
  font-size:clamp(27px,6.2vw,40px);
  line-height:1.15;
  letter-spacing:0;
  text-wrap:balance;
  color:var(--ink);
  margin-bottom:var(--sp-3);
}
.page-header .sub{
  font-size:13px;
  color:var(--ink-muted);
}

/* ── סרגל השלבים ───────────────────────────────────────────────── */
.progress-wrap{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding-inline:var(--sp-5);
  display:flex;justify-content:center;
}
/* מד קריאה: נמתח מימין לשמאל לפי המיקום בתוך ההסכם. שלב 2 הוא המסך
   הארוך ביותר, וזה מה שאומר לקורא שיש לזה סוף. */
.progress-wrap::after{
  content:'';position:absolute;inset-inline-start:0;bottom:-1px;height:2px;
  width:calc(var(--read) * 100%);
  background:var(--accent-bright);
  transition:width .1s linear;
}
.progress-inner{
  display:flex;align-items:flex-start;
  width:100%;max-width:460px;
  padding:var(--sp-4) 0 var(--sp-3);
}
.prog-step{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
/* inset-inline-start ולא left — הדף RTL, וקו קבוע לשמאל נמתח לשלב
   הבא במקום לקודם ומשאיר קו תלוי אחרי השלב האחרון. */
.prog-step::after{
  content:'';position:absolute;top:13px;
  inset-inline-start:-50%;
  width:100%;height:1px;
  background:var(--rule);
  z-index:0;
  transition:background-color .45s cubic-bezier(.4,0,.2,1) .08s;
}
.prog-step:first-child::after{display:none}
.prog-step.done::after{background:var(--accent)}

.prog-num{
  position:relative;z-index:1;
  width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;
  background:var(--paper);
  border:1px solid var(--rule);
  color:var(--ink-muted);
  transition:background .25s,border-color .25s,color .25s;
}
/* טקסט לבן על מג'נטה בהירה במצב כהה הוא הגליף הכי פחות קריא בדף.
   --desk עובד טוב יותר בשני המצבים. */
.prog-step.active .prog-num{
  background:var(--accent);border-color:var(--accent);color:var(--desk);
}
.prog-step.done .prog-num{
  background:transparent;border-color:var(--accent);color:var(--accent);
  animation:tick-in .32s cubic-bezier(.34,1.4,.64,1);
}
@keyframes tick-in{from{transform:scale(.82)}to{transform:none}}
.prog-label{
  font-size:12px;
  color:var(--ink-muted);
  white-space:nowrap;
}
.prog-step.active .prog-label{color:var(--ink);font-weight:500}

/* ── גוף ───────────────────────────────────────────────────────── */
.content{padding:var(--sp-8) var(--sp-6) var(--sp-10)}
@media (min-width:700px){ .content{padding:var(--sp-9) var(--sp-9) var(--sp-11)} }

/* שלבים. הפרש היה display:none ישיר — החלפה מיידית בלי שום מעבר. */
.step{display:none}
.step.is-active{display:block;animation:step-in .34s var(--ease) both}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.section-eyebrow{
  font-size:12px;
  color:var(--accent);
  font-weight:500;
  margin-bottom:var(--sp-3);
  display:flex;align-items:center;gap:var(--sp-2);
}
.section-eyebrow::before{
  content:'';width:14px;height:1px;background:var(--accent-bright);flex:none;
}
.section-title{
  font-family:'Frank Ruhl',serif;
  font-weight:400;
  font-size:clamp(22px,4.6vw,28px);
  line-height:1.3;
  letter-spacing:0;
  text-wrap:balance;
  margin-bottom:var(--sp-2);
}
.section-title:focus{outline:none}
.section-subtitle{
  color:var(--ink-muted);
  font-size:14px;
  max-width:62ch;
  margin-bottom:var(--sp-7);
}

/* ── אריחי התנאים ──────────────────────────────────────────────────
   המספרים המסחריים מופיעים במסך הראשון, לפני שמבקשים שדה אחד.
   קודם 5% ו-80 ₪ הופיעו לראשונה בסעיפים 3-4 — כלומר רק אחרי
   שהספק כבר שילם את מחיר מילוי הטופס.                              */
.terms-tiles{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:var(--sp-6);
}
@media (min-width:560px){ .terms-tiles{grid-template-columns:repeat(3,1fr)} }
.tile{background:var(--white);padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.tile-num{
  font-family:'Frank Ruhl',serif;
  font-size:30px;font-weight:400;line-height:1.1;
  color:var(--accent-deep);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--sp-1);
}
.tile-cap{font-size:12.5px;color:var(--ink-muted);line-height:1.55}

/* "מה קורה עכשיו" — שלושת השלבים נאמרים מראש, כולל בקשת חשבון הבנק.
   בקשה לפרטי בנק שמתגלה רק במסך האחרון היא בדיוק צורת ההונאה שהספק
   מחפש. כשהיא נאמרת מראש היא הופכת מהפתעה להבטחה שקוימה. */
.next-up{
  border:1px solid var(--rule);
  border-radius:3px;
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  background:var(--paper-sunk);
  margin-bottom:var(--sp-7);
}
.next-up-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:var(--sp-3)}
.next-up ol{list-style:none;counter-reset:nu;display:flex;flex-direction:column;gap:var(--sp-2)}
.next-up li{
  counter-increment:nu;
  display:flex;gap:var(--sp-3);align-items:flex-start;
  font-size:13.5px;color:var(--ink-2);line-height:1.6;
}
.next-up li::before{
  content:counter(nu);
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent-wash);color:var(--accent);
  font-size:11px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.reassure{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:1px solid var(--rule);
  font-size:13px;line-height:1.65;color:var(--ink-muted);
}
.reassure-icon{color:var(--teal);flex:none;font-size:14px;line-height:1.5}

/* ── טופס ──────────────────────────────────────────────────────── */
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  background:var(--white);
}
@media (min-width:620px){ .form-grid{grid-template-columns:1fr 1fr} }

/* התא עצמו הוא ה-label. כך כל השורה (62px) היא שטח לחיצה, ואין צורך
   בזיווג for/id. קודם לא היה שום קשר בין תווית לשדה. */
.form-cell{
  padding:14px var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-1);
  border-bottom:1px solid var(--rule-soft);
  transition:background .18s;
  position:relative;
  cursor:text;
}
.form-cell:has(select){cursor:pointer}
@media (min-width:620px){
  .form-cell{border-inline-start:1px solid var(--rule-soft)}
  .form-cell:nth-child(2n+1){border-inline-start:none}
  .form-cell:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:619px){ .form-cell:last-child{border-bottom:none} }
.form-cell.full{grid-column:1/-1}

/* טבעת המיקוד עברה מהשדה אל התא. על שדה חסר גבול היא ציירה מלבן
   מרחף שנחתך בקירות התא. הטבעת פנימית כי ל---form-grid יש
   overflow:hidden שהיה חותך טבעת חיצונית. */
.form-cell:focus-within{
  background:var(--paper-sunk);
  outline:2px solid var(--accent);
  outline-offset:-2px;
  z-index:1;
}
.form-cell input:focus-visible,.form-cell select:focus-visible{outline:none}

/* סימון שדה מלא. קודם שדה ריק ושדה מלא נראו זהים לחלוטין. */
.form-cell::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .22s var(--ease);
}
.form-cell:has(input:not(:placeholder-shown))::before,
.form-cell:has(select:valid)::before{transform:scaleY(1)}
.form-cell:has(input:not(:placeholder-shown)) .form-cell-label{color:var(--ink-2)}

.form-cell-label{
  font-size:12px;
  color:var(--ink-muted);
  font-weight:500;
}
.form-cell:focus-within .form-cell-label{color:var(--accent)}

/* 16px ולא 15px: מתחת ל-16px ספארי ב-iOS מקרב את התצוגה בכל מיקוד
   על שדה, והפריסה קופצת בכל הקלדה. */
.form-cell input,.form-cell select{
  border:none;background:transparent;outline:none;
  font-family:inherit;font-size:16px;
  color:var(--ink);
  width:100%;
  padding-block:6px;
  min-height:32px;
}
.form-cell input::placeholder{color:var(--placeholder);opacity:1}
.form-cell select:invalid{color:var(--placeholder)}
.form-cell select{
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),
                   linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:left 5px center, left 10px center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-inline-end:22px;
}
/* תוכן לטיני בתוך דף עברי. text-align:right כאן הוא דרישה פיזית
   אמיתית — זו קצה ההתחלה ב-RTL. לא להחליף ל-end. */
.form-cell input[type=email],
.form-cell input[type=tel],
.form-cell input.num{direction:ltr;text-align:right}
.form-cell input.num{font-variant-numeric:tabular-nums}

/* שדה שגוי */
.form-cell.is-invalid{background:color-mix(in srgb,var(--red) 6%,transparent)}
.form-cell.is-invalid .form-cell-label{color:var(--red)}
.form-cell.is-invalid::before{background:var(--red);transform:scaleY(1)}
.field-err{
  font-size:11.5px;color:var(--red);line-height:1.4;
}

/* באנר שגיאה. נשאר בעץ ה-DOM תמיד כדי ש-role="alert" יוכל לדווח
   עליו; קודם display:none מנע מקוראי מסך לשמוע אותו בכלל. */
.error-banner{
  display:block;overflow:hidden;
  max-height:0;opacity:0;margin-top:0;padding:0 var(--sp-4);
  border-inline-start:2px solid transparent;
  background:color-mix(in srgb,var(--red) 8%,var(--paper));
  color:var(--red);
  font-size:13px;border-radius:2px;
  transition:max-height .3s var(--ease),opacity .2s ease,
             margin-top .3s var(--ease),padding .3s var(--ease);
}
.error-banner.show{
  max-height:10em;opacity:1;
  margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);
  border-inline-start-color:var(--red);
}

.form-note{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  margin-top:var(--sp-5);
  font-size:13px;color:var(--ink-muted);
}
.form-note-icon{color:var(--teal);flex:none;line-height:1.6}

/* ── ההסכם ─────────────────────────────────────────────────────── */
/* תקציר התנאים. לא מחייב, ואומר זאת במפורש — הנוסח המחייב הוא המלא
   שמתחת. כל שורה מפנה לסעיף שממנו היא נגזרה, כדי שהתקציר ייקרא
   כמפה ולא כמכירה. */
.contract-summary{
  border:1px solid var(--rule);
  border-inline-start:2px solid var(--accent);
  border-radius:3px;
  background:var(--accent-wash);
  padding:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.contract-summary h3{
  font-size:13px;font-weight:500;color:var(--ink);
  margin-bottom:var(--sp-3);
}
.contract-summary ul{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3)}
.contract-summary li{
  font-size:13.5px;line-height:1.65;color:var(--ink-2);
  display:flex;gap:var(--sp-3);align-items:flex-start;
}
.contract-summary li::before{
  content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent-bright);margin-top:9px;
}
.summary-ref{
  color:var(--accent);font-size:12px;white-space:nowrap;
  text-decoration:none;border-bottom:1px solid transparent;
}
.summary-ref:hover,.summary-ref:focus-visible{border-bottom-color:var(--accent)}
.summary-note{
  margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--rule);
  font-size:12px;color:var(--ink-muted);line-height:1.6;
}

.contract-paper{
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--white);
  overflow:hidden;
}
.contract-paper-header{
  padding:var(--sp-6) var(--sp-6) var(--sp-5);
  text-align:center;
  background:var(--paper-sunk);
  position:relative;
  border-bottom:none;
}
/* ניקוב במקום קו. כרטיס ההסכם הוא באמת מסמך תלוש, וניקוב הוא
   איקונוגרפיה פונקציונלית ולא קישוט. רק על הכרטיס הזה. */
.contract-paper-header::after{
  content:'';position:absolute;inset-inline:0;bottom:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 3px,transparent 3px 7px);
}
/* ה-CSS התייחס ל-h3 בזמן שה-HTML כותב h2, ולכן כותרת ההסכם נפלה
   לברירת המחדל של הדפדפן — Heebo מודגש במקום הסריף. */
.contract-paper-header h2{
  font-family:'Frank Ruhl',serif;
  font-weight:400;font-size:21px;
  line-height:1.3;
  margin-bottom:var(--sp-1);
}
.contract-date-val{
  font-size:12px;color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
}
.date{font-size:12px;color:var(--ink-muted)}
.contract-body{padding:var(--sp-6) var(--sp-6) var(--sp-7)}
@media (min-width:700px){ .contract-body{padding:var(--sp-7) var(--sp-7) var(--sp-8)} }

.parties-grid{
  display:grid;gap:var(--sp-4);
  grid-template-columns:1fr;
  margin-bottom:var(--sp-6);
}
@media (min-width:620px){ .parties-grid{grid-template-columns:1fr 1fr} }

.party-card{
  border:1px solid var(--rule-soft);
  background:var(--paper-sunk);
  border-radius:2px;
  padding:var(--sp-4);
  font-size:13px;
  line-height:1.85;
}
.party-card-label{
  font-size:11px;
  letter-spacing:.2em;
  /* text-indent דוחף שורה מיושרת־להתחלה מהקצה. הוא נכון רק לטקסט
     ממורכז. כאן margin שלילי מבטל את הרווח התלוי בסוף השורה. */
  margin-inline-end:-.2em;
  color:var(--accent);font-weight:500;
  margin-bottom:var(--sp-2);
}
.party-card p{color:var(--ink-2)}
.party-card-note{margin-top:var(--sp-2);font-size:12px;color:var(--ink-muted)}
.fv{color:var(--ink);font-weight:500}
.fv-ltr{direction:ltr;unicode-bidi:plaintext;font-size:12px}

.contract-divider{
  height:1px;background:var(--rule);
  margin:var(--sp-6) 0;
}
.contract-divider.is-section{margin:var(--sp-7) 0 var(--sp-6)}

/* כותרת קבוצת סעיפים. הסדר 1→20 נשמר בדיוק — הקבוצות רק מסמנות
   היכן מתחיל נושא חדש, כדי שהדף וה-PDF לא יוכלו להיפרד בנוסח. */
.clause-group{
  display:flex;align-items:center;gap:var(--sp-3);
  margin:var(--sp-7) 0 var(--sp-5);
  font-size:12px;font-weight:500;color:var(--accent);
}
.clause-group:first-child{margin-top:0}
.clause-group::after{
  content:'';flex:1;height:1px;background:var(--rule);
}
.clause-group-num{
  color:var(--ink-muted);font-weight:400;
  font-variant-numeric:tabular-nums;
}

.clause{margin-bottom:var(--sp-5);max-width:70ch;scroll-margin-top:110px}
/* Frank Ruhl bold ב-14.5px נסתם. Heebo קריא בהרבה בגודל הזה. */
.clause-title{
  font-family:'Heebo',sans-serif;
  font-weight:500;
  font-size:15px;
  color:var(--ink);
  margin-bottom:var(--sp-1);
  font-variant-numeric:tabular-nums;
}
.clause p{
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
}
/* סעיף שהגיעו אליו מהתקציר מהבהב פעם אחת */
.clause.is-target .clause-title{color:var(--accent)}
.clause.is-target{animation:clause-flash 1.6s ease}
@keyframes clause-flash{
  0%,60%{background:color-mix(in srgb,var(--accent-bright) 9%,transparent)}
  100%{background:transparent}
}

/* ── פרטי בנק ──────────────────────────────────────────────────── */
.bank-block{margin-bottom:var(--sp-7)}
.bank-block-head{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  margin-bottom:var(--sp-4);
}
/* העיגול הוא עדשת המצלמה של הלוגו, בטבעות. הוא יושב בדיוק על הבלוק
   שאומר "לכאן מגיע הכסף שלך". */
.bank-icon{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--accent-wash);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;line-height:1;
  box-shadow:
    inset 0 0 0 1px var(--accent),
    inset 0 0 0 5px var(--white),
    inset 0 0 0 6px color-mix(in srgb,var(--accent-bright) 45%,transparent);
}
.bank-title{
  font-family:'Frank Ruhl',serif;
  font-weight:400;font-size:19px;
  line-height:1.3;
  margin-bottom:var(--sp-1);
}
.bank-note{
  font-size:13px;line-height:1.7;
  color:var(--ink-muted);
  max-width:58ch;
}
/* מי הצד שמעבר. לא בתחתית הדף — כאן, ליד השדה שמייצר את החשש. */
.bank-trust{
  margin-top:var(--sp-4);
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--paper-sunk);
  padding:var(--sp-4);
  font-size:12.5px;line-height:1.7;color:var(--ink-2);
}
.bank-trust b{color:var(--ink);font-weight:500}
.bank-trust a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.bank-trust a:hover,.bank-trust a:focus-visible{border-bottom-color:var(--accent)}
.bank-trust-row{display:flex;gap:var(--sp-2);align-items:flex-start;margin-top:var(--sp-2)}
.bank-trust-row:first-child{margin-top:0}
.bank-trust-icon{color:var(--teal);flex:none;line-height:1.6}

/* ── כפתורים ───────────────────────────────────────────────────── */
.btn-row{
  display:flex;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-7);
  align-items:center;
}
.btn-row.is-centered{justify-content:center}
.btn-primary,.btn-secondary{
  font-family:inherit;font-size:14px;
  border-radius:2px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px var(--sp-6);
  min-height:48px;
  transition:background .2s,color .2s,border-color .2s,transform .12s,opacity .2s;
  border:1px solid transparent;
}
.btn-primary{
  background:var(--btn);color:var(--btn-text);
  font-weight:500;
  border-color:var(--btn);
}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-secondary{
  background:transparent;color:var(--ink-2);
  border-color:var(--rule);
}
.btn-secondary:hover{border-color:var(--ink-muted);color:var(--ink)}
.btn-primary:active,.btn-secondary:active{transform:translateY(1px)}
.btn-primary[disabled],.btn-secondary[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* מצב עבודה על הכפתור עצמו. קודם רק כיסוי מסך מלא עלה, והכפתור
   שהמשתמש בדיוק לחץ עליו נשאר נראה סרק. */
.btn-primary.is-busy{position:relative;color:transparent;pointer-events:none}
.btn-primary.is-busy .arrow{opacity:0}
.btn-primary.is-busy::after{
  content:'';position:absolute;
  inset-block-start:calc(50% - 8px);inset-inline-start:calc(50% - 8px);
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--btn-text) 35%,transparent);
  border-top-color:var(--btn-text);
  animation:spin .7s linear infinite;
}

.btn-primary:focus-visible,.btn-secondary:focus-visible,
.sig-modal-close:focus-visible,.sig-modal-clear:focus-visible,
.sig-modal-confirm:focus-visible,.sig-preview-box:focus-visible,
.summary-ref:focus-visible,.link-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* --fwd קיים כדי שהחץ לא יתהפך בשקט אם הדף אי פעם יוגש LTR */
.arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(calc(var(--fwd) * 3px))}

/* במסך צר הכפתורים נפרסים לרוחב מלא, והפעולה הראשית עולה למעלה כדי
   שתהיה הדבר הראשון שרואים בסוף הטופס. */
@media (max-width:619px){
  .btn-row{flex-direction:column;align-items:stretch;gap:var(--sp-2)}
  .btn-row .btn-primary{order:-1}
  .btn-row .btn-primary,.btn-row .btn-secondary{width:100%}
}

/* שלב 2 הוא המסך הארוך ביותר, ובמובייל כפתור האישור היה מגיע רק
   בתחתית המוחלטת. */
@media (max-width:619px){
  .btn-row.is-sticky{
    position:sticky;bottom:0;z-index:40;
    margin-inline:calc(var(--sp-6) * -1);
    padding:var(--sp-3) var(--sp-6);
    background:var(--paper);
    border-top:1px solid var(--rule);
  }
}

.link-btn{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;
  color:var(--accent);
  padding:var(--sp-2) 0;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
}
.link-btn:hover{color:var(--accent-deep)}

/* ── אזור החתימה ───────────────────────────────────────────────── */
/* קו לחתום עליו, לא מסגרת מקווקוות. חותמים על קו. */
.sig-preview-box{
  border:1px solid var(--rule);
  border-radius:3px;
  background:var(--white);
  min-height:160px;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  position:relative;
  transition:border-color .2s,background .2s;
  overflow:hidden;
  font:inherit;color:inherit;text-align:center;
}
.sig-preview-box::after{
  content:'';position:absolute;
  inset-inline:16%;bottom:var(--sp-7);height:1px;
  background:var(--ink-muted);opacity:.5;
}
/* ה-✗ שלפני הקו — המוסכמה המזוהה ביותר עם חתימה על נייר, והיא גם
   פונקציונלית: היא מסמנת היכן הקו מתחיל בכיוון הנכון ל-RTL. */
.sig-preview-box::before{
  content:'✗';
  position:absolute;inset-inline-start:16%;bottom:36px;
  color:var(--accent);font-size:13px;line-height:1;z-index:1;
}
.sig-preview-box:hover{border-color:var(--accent);background:var(--paper-sunk)}
.sig-preview-box.signed::after,.sig-preview-box.signed::before{display:none}
/* החתימה נשלחת ל-PDF שמודפס על נייר לבן, ולכן הדיו חייב להישאר כהה.
   מכאן שמשטח החתימה חייב להישאר בהיר בשני המצבים. קודם במצב כהה
   הדיו (#1C1814) צויר על רקע #1C1812 — חותמים ולא רואים כלום. */
.sig-preview-box.signed{background:#FCFAF6}
.sig-preview-box canvas{max-width:100%;max-height:132px;display:block;object-fit:contain}
.sig-preview-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  color:var(--ink-muted);font-size:13px;
  position:relative;z-index:1;
  padding-bottom:var(--sp-6);
}
.sig-hint-icon{font-size:23px;color:var(--accent);line-height:1}
.sig-error{
  display:block;overflow:hidden;
  max-height:0;opacity:0;margin-top:0;
  color:var(--red);font-size:13px;
  transition:max-height .3s var(--ease),opacity .2s ease,margin-top .3s var(--ease);
}
.sig-error.show{max-height:6em;opacity:1;margin-top:var(--sp-3)}

/* ── מודל החתימה ───────────────────────────────────────────────── */
/* הגלילה ננעלת ב-JS עם position:fixed על ה-body ושמירת scrollY.
   בלי זה הדף זז בזמן החתימה ואי אפשר לחתום. לא לשנות. */
.sig-modal-overlay{
  position:fixed;inset:0;
  background:rgba(10,5,9,.74);
  backdrop-filter:blur(3px);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);
  visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.sig-modal-overlay.open{visibility:visible;opacity:1;transition:opacity .22s ease}
.sig-modal{
  background:var(--paper);
  border-radius:4px;
  width:100%;max-width:560px;
  max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity .2s ease,transform .3s var(--ease);
}
.sig-modal-overlay.open .sig-modal{opacity:1;transform:none}
.sig-modal-header{
  padding:var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
  flex:none;
}
.sig-modal-title{
  font-family:'Frank Ruhl',serif;
  font-size:19px;font-weight:400;
}
.sig-modal-sub{font-size:12px;color:var(--ink-muted);margin-top:2px}
.sig-modal-close{
  background:transparent;border:none;cursor:pointer;
  font-size:17px;color:var(--ink-muted);
  border-radius:2px;line-height:1;
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  margin:-10px -12px 0 0;
  transition:color .2s,transform .12s;
}
.sig-modal-close:hover{color:var(--ink)}
.sig-modal-close:active{transform:translateY(1px)}

/* משטח החתימה נשאר נייר בהיר תמיד — ראה ההערה על .sig-preview-box.signed */
.sig-modal-canvas-wrap{
  margin:var(--sp-5) var(--sp-6);
  border:1px solid var(--rule);
  border-radius:3px;
  background:#FCFAF6;
  position:relative;
  touch-action:none;
  flex:0 0 auto;
}
.sig-modal-canvas-wrap::after{
  content:'';position:absolute;
  inset-inline:8%;bottom:26%;height:1px;
  background:#E4DDCE;
  pointer-events:none;
}
.sig-modal-canvas-wrap::before{
  content:'✗';
  position:absolute;inset-inline-start:8%;bottom:calc(26% + 4px);
  color:var(--accent-bright);font-size:13px;line-height:1;
  pointer-events:none;z-index:2;
}
#sig-canvas{
  display:block;width:100%;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  cursor:crosshair;
  position:relative;z-index:1;
}
/* ההנחיה מרוכזת בתוך המשטח. קודם היא ישבה בזרימה מתחת לקו החתימה. */
.sig-hint{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);
  padding-bottom:34px;
  font-size:12px;color:#6B6355;
  pointer-events:none;
  opacity:1;transition:opacity .25s ease;
  z-index:3;
}
.sig-hint .sig-hint-icon{color:var(--accent-bright)}
.sig-hint.hidden{opacity:0;visibility:hidden}
/* שתי פעולות בשני קצוות של דיאלוג 560px נקראות כשתי פעולות לא
   קשורות. מקובצות לימין, הראשית בקצה־הסוף כמו בכל שאר הדף. */
.sig-modal-actions{
  display:flex;gap:var(--sp-3);justify-content:flex-end;
  padding:var(--sp-4) var(--sp-6) var(--sp-5);
  flex:none;
}
.sig-modal-clear{
  background:transparent;border:1px solid var(--rule);
  color:var(--ink-muted);
  padding:12px var(--sp-5);border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:14px;
  min-height:44px;
  transition:color .2s,border-color .2s,transform .12s;
}
.sig-modal-clear:hover{color:var(--ink);border-color:var(--ink-muted)}
.sig-modal-clear:active,.sig-modal-confirm:active{transform:translateY(1px)}
.sig-modal-confirm{
  background:var(--btn);color:var(--btn-text);
  border:none;padding:12px var(--sp-6);border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;
  min-height:44px;
  transition:background .2s,opacity .2s,transform .12s;
}
.sig-modal-confirm:hover{background:var(--btn-hover)}
.sig-modal-confirm:disabled{opacity:.4;cursor:not-allowed}

/* ── מסך סיום ──────────────────────────────────────────────────── */
.end-screen{
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--sp-10) var(--sp-6) var(--sp-11);
  min-height:52vh;
}
.end-screen.show{display:flex;animation:step-in .4s var(--ease) both}
.success-ring{
  width:70px;height:70px;border-radius:50%;
  border:1px solid var(--success);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-6);
  animation:ring-in .55s cubic-bezier(.2,.8,.3,1);
}
@keyframes ring-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.end-screen h2{
  font-family:'Frank Ruhl',serif;
  font-weight:400;font-size:clamp(25px,5.5vw,33px);
  margin-bottom:var(--sp-3);
}
.end-screen .end-sub{color:var(--ink-muted);font-size:15px;max-width:46ch}
/* תגית לתגליין הייתה רפלקס של דף נחיתה. סריף נקי אומר את זה טוב יותר. */
.end-tag{
  margin-top:var(--sp-5);
  font-family:'Frank Ruhl',serif;
  font-size:19px;color:var(--ink-muted);
}
.end-actions{
  margin-top:var(--sp-7);
  display:flex;flex-direction:column;gap:var(--sp-3);
  align-items:center;width:100%;max-width:340px;
}
.end-actions .btn-primary,.end-actions .btn-secondary{width:100%}
.end-next{
  margin-top:var(--sp-7);padding-top:var(--sp-5);
  border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-muted);line-height:1.7;
  max-width:44ch;
}

/* ── טעינה ─────────────────────────────────────────────────────── */
.loading-overlay{
  position:fixed;inset:0;
  background:color-mix(in srgb,var(--desk) 84%,transparent);
  backdrop-filter:blur(4px);
  z-index:2000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sp-5);
  visibility:hidden;opacity:0;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.loading-overlay.show{visibility:visible;opacity:1;transition:opacity .18s ease}
.loading-ring{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
  border-top-color:var(--gold-light);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:#EDE6D9;font-size:13.5px}

/* ── תחתית ─────────────────────────────────────────────────────── */
.footer{
  text-align:center;
  padding:var(--sp-6) var(--sp-6) var(--sp-7);
  border-top:1px solid var(--rule);
  font-size:12px;
  color:var(--ink-muted);
}
.footer b{color:var(--accent);font-weight:500}
.footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.footer a:hover{color:var(--ink)}
/* המילים הלטיניות הן היחידות שמרוויחות מריווח אותיות. בעברית הריווח
   רק פירק את המילים — הוא הוסר מכל מקום אחר בדף. */
.footer .lockup{letter-spacing:.26em;text-indent:.26em;font-size:11px}

/* ── ראש מכווץ במובייל ───────────────────────────────────────────
   הכותרת המלאה חזרה זהה בכל שלושת השלבים ואכלה 47% מהמסך הראשון
   בטלפון. בדסקטופ היא נשארת — מסמך שומר על נייר המכתבים שלו, והחזרה
   שם נקראת כ"אותו מסמך". במובייל אין מקום לזה.                   */
@media (max-width:899px){
  body[data-step="2"] .page-header,
  body[data-step="3"] .page-header{
    padding:var(--sp-2) var(--sp-5);
    display:flex;align-items:center;gap:var(--sp-3);
    text-align:start;
    position:sticky;top:0;z-index:51;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  body[data-step="2"] .page-header .sub,
  body[data-step="3"] .page-header .sub{display:none}
  body[data-step="2"] .logo-slot,
  body[data-step="3"] .logo-slot{max-width:none;height:28px;width:auto;margin:0}
  body[data-step="2"] .logo-slot img,
  body[data-step="3"] .logo-slot img{height:28px;width:auto}
  body[data-step="2"] .page-header h1,
  body[data-step="3"] .page-header h1{
    font-family:'Heebo',sans-serif;font-size:14px;font-weight:500;
    margin:0;line-height:1;
  }
  body[data-step="2"] .progress-wrap,
  body[data-step="3"] .progress-wrap{top:44px}
}

/* ── טופס הלידים ──────────────────────────────────────────────────
   בניגוד לדף החתימה, זה הדף שהספק חוזר אליו שוב ושוב — לעיתים
   קרובות בעמידה מול לקוח. לכן מספר העוסק נזכר, והשדות הלא־חובה
   מקופלים.                                                         */
.req{color:var(--accent);font-weight:400}
.vendor-chip{
  display:none;
  align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  border:1px solid var(--rule);
  border-inline-start:2px solid var(--accent);
  border-radius:3px;
  background:var(--paper-sunk);
  padding:var(--sp-3) var(--sp-4);
  font-size:13px;color:var(--ink-2);
  margin-bottom:var(--sp-6);
}
.vendor-chip.show{display:flex}
.vendor-chip b{color:var(--ink);font-weight:500}
.vendor-chip .link-btn{margin-inline-start:auto;font-size:12.5px}

.optional-toggle{margin-top:var(--sp-4)}
.optional-fields{display:none}
.optional-fields.show{display:grid}

.form-cell input[type=date]{color:var(--ink)}