@charset "UTF-8";
/* ==========================================================================
   בנימיני 18 - דף נחיתה
   כל הערכים נגזרו ישירות מקבצי העיצוב (PDF וקטורי), לא באומדן:
   דסקטופ 1920x1153, מובייל 360x853.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. אסימוני עיצוב
   -------------------------------------------------------------------------- */
:root {
	/* צבעים - נדגמו מהוקטור של קובץ העיצוב */
	--ink: #5b3a30;   /* חום כהה: כותרות, לוגו, כפתור ראשי */
	--olive: #685140; /* חום-זית: כותרת הטופס, מסגרת, קווי הפרדה */
	--taupe: #7d6a66; /* טאופ: טקסט משני, תג, עיטור הרקע */
	--cream: #f5f4f0; /* רקע רצועת העיטור */
	--paper: #ffffff; /* רקע ראשי */

	/* מיקוד: קו דק בצבע המותג + הילה רכה. הכחול הדיפולטיבי של הדפדפן הוסר -
	   הוא זר לפלטה וגס. הניגודיות מול לבן/קרם עומדת בדרישת WCAG 2.4.11. */
	--focus: #4a2e26;
	--focus-halo: rgba(91, 58, 48, 0.16);

	/* שגיאה */
	--danger: #a8342a;
	--danger-ink: #8f2b22;

	--font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* גופן התצוגה: בעיצוב המקורי Almoni Neue (גופן מסחרי, אין לנו רישיון).
	   כרגע נופל חזרה ל-Heebo. אם יירכש רישיון - זו השורה היחידה שמשתנה. */
	--font-display: "Heebo", system-ui, sans-serif;

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. איפוס ובסיס
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* רשת ביטחון: גלישה אופקית ב-RTL מזיזה את נקודת ההתחלה של כל הדף */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.35;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* כותרות: איזון שורות + איסור מילה בודדת בשורה אחרונה */
h1, h2, .b18-presale__title, .b18-usp__title, .b18-formtitle, .b18-modal__title {
	text-wrap: balance;
}

/* טקסט לקוראי מסך בלבד */
.b18-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* מיקוד נראה בכל רכיב אינטראקטיבי - קו דק בצבע המותג עם הילה מטושטשת (לא מלבן) */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 1.5px solid var(--focus);
	outline-offset: 3px;
	border-radius: 2px;
	box-shadow: 0 2px 10px -3px var(--focus-halo);
}
/* על משטח כהה טבעת חומה נבלעת - שם הטבעת נכנסת פנימה בקרם */
.b18-submit:focus-visible,
.b18-modal__cta:focus-visible {
	outline: 1.5px solid var(--cream);
	outline-offset: -5px;
	box-shadow: 0 0 0 3px var(--focus-halo);
}

/* דילוג לתוכן */
.b18-skip {
	position: absolute;
	inset-inline-start: 1rem;
	inset-block-start: -100%;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: inset-block-start 0.18s var(--ease);
}
.b18-skip:focus { inset-block-start: 0; }

/* --------------------------------------------------------------------------
   3. פריסה כללית - מובייל תחילה (הסדר לפי קובץ המובייל)
   -------------------------------------------------------------------------- */
.b18-page {
	position: relative;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: clip;
}

/* עיטור הרקע (הספרה 8 מהלוגו) - מוסתר במובייל, כמו בעיצוב.
   בדסקטופ הוא הופך לרקע קבוע (position: fixed) - ראה סעיף 11. */
.b18-decor { display: none; }

/* --- רצועת הלוגו העליונה --- */
.b18-brand {
	background: var(--cream);
	/* גובה 190.1/3 = 63.4px מתוך 360 רוחב => 17.6vw */
	min-height: clamp(56px, 17.6vw, 76px);
	display: grid;
	place-items: center;
	padding: clamp(0.4rem, 1.6vw, 0.7rem) 1rem;
}
.b18-brand__link { display: block; width: 100%; line-height: 0; }
/* רוחב הלוגו במובייל: (768-312)/3 = 152px מתוך 360 => 42.2vw */
/* margin-inline: auto - הלוגו הוא display:block ברוחב קבוע בתוך קישור שתופס את
   כל הרוחב. בלי המרכוז הזה הוא נצמד לתחילת השורה, כלומר לימין ב-RTL. */
.b18-brand__logo { width: clamp(140px, 42.2vw, 190px); height: auto; margin-inline: auto; }

.b18-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding-inline: 0;
	padding-block: clamp(0.7rem, 4vw, 1.4rem) clamp(0.75rem, 3vw, 1.2rem);
}
/* רוחבי הבלוקים נלקחו אחד לאחד מקובץ המובייל (מתוך 360px).
   כל רוחב מוגדר על הרכיב עצמו למטה, כדי שלא ידרס בהמשך הקובץ. */
.b18-main:focus { outline: none; }

/* --- כותרת ראשית --- */
.b18-headline {
	font-family: var(--font-display);
	font-weight: 700;
	/* בעיצוב Almoni 27.2px ברוחב 302.3. Heebo רחב יותר, ולכן 22.8px לשורה אחת. */
	font-size: clamp(17px, 6.34vw, 27px);
	line-height: 1.12;
	text-wrap: nowrap;
	color: var(--ink);
	text-align: center;
	width: 84.0%;              /* 302.3 מתוך 360 */
	margin-inline: auto;
	/* המסגרת מתחילה ב-141.07 בקובץ המובייל */
	margin-block-end: clamp(18px, 10.4vw, 46px);
}

/* --- מסגרת תנאי ה-PRESALE --- */
.b18-presale {
	position: relative;
	/* המסגרת היא נכס וקטורי שחולץ מקובץ העיצוב (פינות עם חריצים קעורים) */
	background: url("../svg/frame.svg") no-repeat center / 100% 100%;
	padding: 0;
	text-align: center;
	margin-inline: auto;
	width: 70.2%;              /* 252.8 מתוך 360 */
	height: 12.36vw;           /* 44.5 מתוך 360 */
	max-height: 60px;
	/* הגלריה מתחילה ב-200.13, כלומר 14.6 אחרי המסגרת */
	margin-block-end: clamp(6px, 4.04vw, 18px);
}
.b18-presale__title {
	font-family: var(--font-display);
	font-weight: 700;
	position: absolute;
	inset-inline: 0;
	top: 0;
	transform: translateY(-52%);
	/* בעיצוב Almoni 23.6px ברוחב 221.8. Heebo -> 18.8px לשורה אחת. */
	font-size: clamp(14px, 5.21vw, 23px);
	line-height: 1.15;
	color: var(--ink);
	margin: 0;
	text-wrap: nowrap;
}
.b18-presale__tag {
	background: var(--taupe);
	color: var(--cream);
	font-family: var(--font-display);
	font-weight: 700;
	position: absolute;
	/* התג בעיצוב: x 69.14..290.86 , y 153.80..176.16 בתוך מסגרת 141.07..185.57 */
	top: 28.6%;
	height: 50.2%;
	inset-inline: 6.15%;       /* 221.72 מתוך 252.8 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* בעיצוב Almoni 19.9px. Heebo -> 16px */
	font-size: clamp(12px, 4.46vw, 20px);
	line-height: 1;
	padding: 0;
	margin: 0;
	text-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   4. גלריית ההדמיות
   -------------------------------------------------------------------------- */
.b18-gallery {
	/* קווי ההפרדה של נקודות המכר מתחילים ב-509.91, כלומר 27.1 אחרי הגלריה */
	margin-block-end: clamp(12px, 7.53vw, 34px);
}

/*
 * יחס הפריים של הגלריה - זהה בדסקטופ ובמובייל, ולא משתנה עם יחס החלון.
 *
 * הערך נגזר מהתמונה הצרה ביותר (facade-rear, 996x1500): הבניין תופס בה
 * 79% מגובה הקובץ, ולכן פריים רחב מ-0.84 מוכרח לחתוך לו את הגג או את קומת
 * הקרקע. 0.82 משאיר מרווח נשימה קטן מעבר לזה, וקרוב מאוד ליחס המסגרת בעיצוב
 * המקורי (843.8x996.5 = 0.847). קודם היחס היה נגזר מהחלון (0.871 ב-16:10,
 * 0.934 ב-16:9, ויותר מזה במסך אולטרה-רחב) - ושם החיתוך היה בלתי נמנע.
 */
:root { --gallery-ratio: 0.82; }

.b18-gallery__frame {
	position: relative;
	/*
	 * במובייל התמונה נפרסת מקצה לקצה. בעיצוב המקורי היא ישבה ברוחב 66.5vw
	 * עם שוליים לבנים משני הצדדים, וזה קרא כתמונה קטנה שמרחפת בחלל ריק.
	 */
	aspect-ratio: var(--gallery-ratio);
	/* תקרת גובה לטאבלט (יחס לגובה היה בולע שם מסך שלם). הרוחב נגזר ממנה
	   כדי שהיחס יישאר קבוע - קודם רק הגובה נחתך והיחס התעוות. */
	width: min(100%, calc(var(--gallery-ratio) * min(68vh, 560px)));
	max-width: none;
	margin-inline: auto;
	overflow: hidden;
	background: var(--cream);
}

.b18-gallery__track { position: absolute; inset: 0; margin: 0; }

.b18-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s var(--ease);
	pointer-events: none;
}
.b18-slide.is-active { opacity: 1; pointer-events: auto; }
/*
 * ה-<picture> חייב להימתח על כל השקופית. בלעדיו הוא בלוק בגובה אוטומטי,
 * ה-height:100% של התמונה מתפרש כ-auto, והתמונה מוצגת ביחס הטבעי שלה
 * וגולשת מהפריים - כלומר object-fit ו-object-position לא משפיעים בכלל
 * והתחתית פשוט נחתכת. זה היה מקור החיתוך שהלקוח ראה.
 */
.b18-slide picture { display: block; position: absolute; inset: 0; }
.b18-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* חצי ניווט */
.b18-gallery__controls {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
	padding-inline: clamp(0.5rem, 3vw, 1rem);
}
.b18-gnav {
	pointer-events: auto;
	display: grid;
	place-items: center;
	inline-size: clamp(30px, 8.5vw, 40px);
	block-size: clamp(30px, 8.5vw, 40px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.b18-gnav svg { inline-size: 60%; block-size: 60%; }
.b18-gnav:hover { background: #fff; }
.b18-gnav:active { transform: scale(0.94); }
/* בעברית: "הבא" נמצא בצד שמאל, "הקודם" בצד ימין - החצים כבר מסובבים בהתאם */

/* סרגל תחתון: עצירה + נקודות */
.b18-gallery__bar {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	background: linear-gradient(to top, rgba(43, 28, 23, 0.55), rgba(43, 28, 23, 0));
}
.b18-gplay {
	display: grid;
	place-items: center;
	inline-size: 22px;
	block-size: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.b18-gplay svg { inline-size: 100%; block-size: 100%; }
.b18-gplay__play { display: none; }
.b18-gplay[aria-pressed="true"] .b18-gplay__pause { display: none; }
.b18-gplay[aria-pressed="true"] .b18-gplay__play { display: block; }

.b18-dots { display: flex; gap: 0.42rem; align-items: center; }
.b18-dot {
	display: block;
	inline-size: 8px;
	block-size: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.b18-dot.is-active { background: #fff; transform: scale(1.35); }
/* שטח מגע 44px גם כשהנקודה קטנה (WCAG 2.5.8) */
.b18-dots li { display: grid; place-items: center; inline-size: 22px; block-size: 26px; }

/* --------------------------------------------------------------------------
   5. שלוש נקודות המכר
   -------------------------------------------------------------------------- */
/*
 * כל המידות כאן נמדדו מחדש מהווקטור של קובץ המובייל (1080x2558.18 = 360x852.7 כפול 3):
 *   יהלום שמאלי  x 126.88..155.84  יהלום ימני x 924.12..953.09  (=> 42.29..317.70 ב-CSS px)
 *   קווי הפרדה   x 415.75 ו-654.91 , y 1530.27..1698.26 , עובי 1.216 (=> 0.405px)
 * שיעורי העמודות יוצאים זהים לקובץ הדסקטופ, ולכן אותו grid משרת את שניהם.
 */
.b18-usps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;                    /* בעיצוב היהלום צמוד לרצועה, בלי מרווח */
	width: 76.5%;              /* 275.4 מתוך 360 */
	margin-inline: auto;
	margin-block-start: 0;
	/* כותרת הטופס מתחילה ב-589, כלומר 23.1 אחרי קווי ההפרדה */
	margin-block-end: clamp(10px, 6.42vw, 30px);
}
/* היהלום: 28.96/3 = 9.65px מתוך 360 => 2.681vw */
.b18-usps__gem { inline-size: clamp(8px, 2.681vw, 13px); block-size: auto; flex: none; }

.b18-usps__list {
	display: grid;
	/* יחסי העמודות מהווקטור (RTL: הראשונה היא הימנית) */
	grid-template-columns: 35.04% 31.13% 33.83%;
	flex: 1 1 auto;
	max-width: 30rem;
	/* גובה קווי ההפרדה בעיצוב המובייל: 167.99/3 = 56px => 15.56vw */
	min-height: clamp(44px, 15.56vw, 70px);
}
.b18-usp {
	text-align: center;
	padding-inline: clamp(0.25rem, 1.6vw, 0.8rem);
}
/*
 * קווי ההפרדה האנכיים.
 * היה כאן .b18-usp + .b18-usp, כלומר גבול על הפריט השני והשלישי. ב-RTL
 * border-inline-end הוא הקצה השמאלי, ולכן הקו של הפריט השלישי נחת בקצה השמאלי
 * של הרצועה - צמוד ליהלום - ובין שני הפריטים הימניים לא היה קו כלל.
 * הנכון הוא הקצה השמאלי של שני הפריטים הראשונים.
 */
.b18-usp:not(:last-child) { border-inline-end: max(0.75px, 0.1125vw) solid var(--olive); }

.b18-usp__title {
	font-weight: 500;
	/* 51.33/3 = 17.1px => 4.75vw */
	font-size: clamp(13px, 4.75vw, 21px);
	line-height: 0.95;
	color: var(--ink);
}
.b18-usp__sub {
	font-weight: 300;
	/* 29.96/3 = 10px => 2.78vw */
	font-size: clamp(9px, 2.78vw, 13px);
	line-height: 1.18;
	color: var(--taupe);
	margin-block-start: 0.28em;
}

/* --------------------------------------------------------------------------
   6. טופס
   -------------------------------------------------------------------------- */
.b18-formwrap {
	margin-block-start: auto;
	width: 85.8%;              /* 308.8 מתוך 360 - הרוחב של כותרת הטופס */
	margin-inline: auto;
}
form.b18-form {
	width: 87.7%;              /* 270.8 מתוך 308.8 - רוחב השדות והכפתור */
	margin-inline: auto;
}

.b18-formtitle {
	font-weight: 500;
	/* 63.75/3 = 21.25px => 5.9vw */
	font-size: clamp(16px, 5.9vw, 26px);
	line-height: 1.16;
	color: var(--olive);
	text-align: center;
	text-wrap: nowrap;
	margin-block-end: clamp(0.5rem, 2.4vw, 0.95rem);
}

.b18-form { position: relative; }
.b18-form__fields { display: block; }

/*
 * שדה עם floating label - הפטרן הקנוני של ריזולב (.ff-field ב-E-Drone),
 * מותאם כאן לשדה בסגנון "קו תחתון" בלי תיבה.
 * במנוחה התווית יושבת על הקו במקום שבו יתחיל הטקסט. בפוקוס או כשיש תוכן היא
 * מתכווצת ועולה מעל הקו, והשדה נשאר ריק עם סמן שמחכה להקלדה.
 * הפעלה: placeholder=" " מוזרק ב-inc/form.php, ובנוסף .is-filled מ-main.js
 * (rule נפרד - דפדפן שלא מכיר :has() זורק את כל ה-group).
 */
.b18-field {
	--fld-label: clamp(15px, 5.81vw, 24px);  /* 62.75/3 = 20.9px מהעיצוב */
	--fld-gap: clamp(1.15rem, 5.4vw, 1.7rem);
	position: relative;
	margin: 0 0 var(--fld-gap);
	/* מקום לתווית הצפה מעל הקו */
	padding-block-start: calc(var(--fld-label) * 1.2);
}
.b18-field label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.2em;
	font-weight: 300;
	font-size: var(--fld-label);
	line-height: 1;
	color: var(--taupe);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	transform-origin: center bottom;
	transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
/* מצב צף */
.b18-field.is-filled label {
	transform: translateY(calc(var(--fld-label) * -1.3)) scale(0.6);
	color: var(--olive);
}
.b18-field:has(input:focus) label,
.b18-field:has(input:not(:placeholder-shown)) label {
	transform: translateY(calc(var(--fld-label) * -1.3)) scale(0.6);
	color: var(--olive);
}
.b18-field input {
	display: block;
	width: 100%;
	padding: 0.05em 0.2em 0.15em;
	font: inherit;
	font-size: clamp(15px, 5vw, 22px);
	color: var(--ink);
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--ink);
	border-radius: 0;
	text-align: center;
	appearance: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/*
 * מיקוד בשדה: הקו התחתון מתעבה לשניים בצבע המותג, מתחתיו הילה מטושטשת רכה,
 * והתווית הצפה מתכהה. בלי טבעת מלבנית כחולה ובלי מסגרת סביב השדה.
 */
.b18-field input:focus,
.b18-field input:focus-visible {
	/* השקוף נשאר בכוונה - מצב ניגודיות כפויה (forced-colors) מצייר עליו טבעת */
	outline: 1.5px solid transparent;
	outline-offset: 2px;
	border-block-end-color: var(--focus);
	box-shadow: 0 1px 0 0 var(--focus), 0 5px 14px -7px var(--focus-halo);
}
.b18-field:has(input:focus) label { color: var(--ink); font-weight: 400; }
/* מספר טלפון תמיד משמאל לימין */
.b18-field input[type="tel"] { direction: ltr; text-align: center; }

/* כפתור השליחה */
.b18-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	width: 100%;
	/* גובה במובייל בעיצוב: 43.82px */
	height: clamp(40px, 12.17vw, 54px);
	min-height: 0;
	padding: 0 0.4em;
	/* בעיצוב המובייל הכיתוב יושב על שורה אחת ברוחב 232.6 */
	white-space: nowrap;
	background: var(--ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	/* 57.98/3 = 19.3px => 5.37vw */
	font-size: clamp(15px, 5.37vw, 22px);
	line-height: 1.1;
	transition: background 0.2s var(--ease);
}
.b18-submit:hover { background: #4a2e26; }
.b18-submit:active { transform: translateY(1px); }
.b18-submit__l1 { font-weight: 400; }
.b18-submit__l2 { font-weight: 700; }
.b18-submit__chev { font-weight: 700; line-height: 1; }
.b18-submit[disabled] { opacity: 0.65; cursor: progress; }

/*
 * האזור שמתחת לטופס - שלוש רמות מידע נפרדות, לא גוש אחד:
 *   1. תיבת ההסכמה לדיוור (אינטראקטיבית, הכי בולטת)
 *   2. הודעת הפרטיות (הסבר)
 *   3. הטקסט המשפטי וקישורי החובה (בתחתית הדף)
 * הכל מיושר להתחלה, כלומר לימין ב-RTL. קודם זה היה ממורכז והשורות נראו
 * כמו ערימה מרחפת בלי ציר משותף.
 */
.b18-consent, .b18-notice {
	font-weight: 300;
	line-height: 1.5;
	text-align: start;
}
.b18-consent {
	margin-block-start: clamp(0.9rem, 4vw, 1.35rem);
	font-size: clamp(11px, 3.3vw, 13px);
	color: var(--ink);
}
.b18-notice {
	margin-block-start: clamp(0.7rem, 3.2vw, 1rem);
	font-size: clamp(10px, 3vw, 12px);
	color: var(--taupe);
}
.b18-consent .wpcf7-list-item { margin: 0; }
.b18-consent label { display: inline-flex; align-items: flex-start; gap: 0.5em; cursor: pointer; text-align: start; }
.b18-consent input[type="checkbox"] {
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
	margin-block-start: 0.15em;
	accent-color: var(--ink);
}
.b18-notice a { color: var(--ink); text-underline-offset: 2px; }

/* כפתור השליחה במובייל יושב אחרי שורת ההסכמה - צריך אוויר משלו */
.b18-form__aside { margin-block-start: clamp(0.9rem, 4vw, 1.35rem); }

/* שדה הפיתיון - מוסתר מבני אדם, נגיש לבוטים */
.b18-hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. הודעות של Contact Form 7
   -------------------------------------------------------------------------- */
/*
 * הודעת הסיכום של הטופס מוצגת כטוסט צף ולא בזרימת הדף.
 * בזרימה היא נדחפה אל תוך הטקסט המשפטי שמתחת לטופס וכיסתה אותו.
 */
.wpcf7 form .wpcf7-response-output {
	position: fixed;
	left: 50%;
	bottom: clamp(1rem, 4vw, 2.25rem);
	transform: translateX(-50%);
	z-index: 60;
	inline-size: max-content;
	max-inline-size: min(92vw, 30rem);
	margin: 0;
	padding: 0.75em 1.15em;
	background: var(--cream);
	border: 1px solid var(--taupe);
	border-radius: 4px;
	box-shadow: 0 14px 34px -14px rgba(43, 28, 23, 0.5);
	font-size: clamp(12px, 3.2vw, 14px);
	line-height: 1.4;
	text-align: center;
	color: var(--ink);
	animation: b18-toast 0.28s var(--ease) both;
}
@keyframes b18-toast {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
/* בשני המצבים האלה הליד נשמר ומודל התודה מוצג, ולכן אין צורך בהודעת טקסט */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { display: none; }
/* גם בשגיאת ולידציה אין צורך בסיכום צף: כל שדה כבר מציג את ההודעה שלו מתחתיו,
   וקורא מסך מקבל את הסיכום מ-.screen-reader-response של CF7. */
.wpcf7 form.invalid .wpcf7-response-output { display: none; }
.wpcf7 form.spam .wpcf7-response-output { border-color: var(--danger); color: var(--danger-ink); }

/*
 * הודעת שגיאה לשדה - רכיב משלנו (.b18-err), לא ההודעה של CF7.
 * ההודעה של CF7 נשתלת בזרימה הרגילה בתוך שדה בגובה קבוע, ולכן גלשה על שורת
 * ההסכמה ועל הטקסט המשפטי שמתחת. כאן היא ממוקמת מוחלטת מתחת לקו של השדה,
 * בשטח שנשמר לה מראש, ולא נוגעת באף אלמנט אחר.
 * הטקסט עצמו נלקח מההודעה של CF7 (main.js) - אותו נוסח, אותה לוגיקת שרת.
 * הקישור לקורא מסך נשאר של CF7 (aria-describedby + screen-reader-response).
 */
.wpcf7-not-valid-tip { display: none !important; }

.b18-err {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	margin-block-start: 0.35em;
	color: var(--danger-ink);
	font-size: clamp(10px, 2.9vw, 12px);
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.b18-field.is-error .b18-err { opacity: 1; transform: none; }
/* שמירת מקום לשורת השגיאה כדי שהשדה הבא לא יזוז מתחתיה */
.b18-field.is-error { margin-block-end: calc(var(--fld-gap) + 1.15rem); }

.b18-field input.wpcf7-not-valid { border-block-end-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger); }
.b18-field input.wpcf7-not-valid:focus { border-block-end-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger), 0 6px 12px -9px rgba(168, 52, 42, 0.8); }
.wpcf7-spinner { margin-inline: 0.5em; }

/* --------------------------------------------------------------------------
   8. תחתית הדף
   -------------------------------------------------------------------------- */
.b18-footer {
	/* השוליים התחתונים מבטיחים שכפתור הנגישות הצף לא יכסה אלמנט פעיל */
	padding: clamp(1.1rem, 5vw, 1.7rem) clamp(0.75rem, 3.5vw, 1.5rem) clamp(3.5rem, 14vw, 4.5rem);
	text-align: start;
	background: var(--paper);
}
.b18-legal {
	font-weight: 300;
	/* בעיצוב זה 5px במובייל - הועלה למינימום קריא לפי ת"י 5568 */
	font-size: clamp(10px, 1.1vw, 14px);
	line-height: 1.5;
	color: var(--taupe);
	width: 93.3%;              /* 336 מתוך 360 */
	max-width: 118ch;
	margin-inline: auto;
	text-align: start;
}
.b18-footer__links {
	margin-block-start: clamp(0.75rem, 3.4vw, 1.05rem);
	font-size: clamp(10px, 2.8vw, 13px);
	color: var(--taupe);
	display: flex;
	gap: 0.5em;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 93.3%;
	margin-inline: auto;
}
.b18-footer__links a { text-underline-offset: 2px; }
.b18-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   9. כרטיס התודה

   הכרטיס נולד כמודל על דף הנחיתה. ב-25.8.2026 הוא הפך לעמוד עצמאי
   (/thank-you/) כדי שתהיה כתובת אמיתית להגדרת המרה בפלטפורמות הפרסום.
   הסלקטורים נשארו .b18-modal__* בכוונה: אותו כרטיס, אותו עיצוב, מקור אחד.
   -------------------------------------------------------------------------- */
.b18-thanks {
	inline-size: min(92vw, 616px);
	margin-inline: auto;
}
.b18-modal {
	inline-size: min(92vw, 616px);
	max-block-size: 90dvh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	color: var(--ink);
}
.b18-modal::backdrop {
	background: rgba(38, 25, 21, 0.62);
	backdrop-filter: blur(2px);
}
.b18-modal__card {
	position: relative;
	outline: none;
	background: var(--cream);
	/* יחס הכרטיס בעיצוב: 615.3 x 388.9 */
	padding: clamp(1.5rem, 6vw, 2.6rem) clamp(1.2rem, 5vw, 2.4rem) clamp(1.4rem, 5vw, 2.3rem);
	text-align: center;
}
.b18-modal__close {
	position: absolute;
	inset-block-start: clamp(0.6rem, 2.6vw, 1.05rem);
	inset-inline-start: clamp(0.6rem, 2.6vw, 1.05rem);
	inline-size: clamp(30px, 9vw, 40px);
	block-size: clamp(30px, 9vw, 40px);
	display: grid;
	place-items: center;
	padding: 0.28em;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	border-radius: 2px;
}
.b18-modal__close svg { inline-size: 100%; block-size: 100%; }

.b18-modal__title { margin-block-end: 0.5em; }
.b18-modal__title-1, .b18-modal__title-2 {
	display: block;
	font-weight: 500;
	/* 61.95/3 = 20.65px => 5.74vw */
	font-size: clamp(19px, 5.74vw, 30px);
	line-height: 1.18;
	color: var(--ink);
}
.b18-modal__body {
	font-weight: 400;
	/* 43.29/3 = 14.4px => 4.01vw */
	font-size: clamp(13px, 4.01vw, 21px);
	line-height: 1.32;
	color: var(--ink);
	margin-block-end: clamp(0.9rem, 3.6vw, 1.35rem);
}
.b18-modal__cta {
	display: inline-block;
	background: var(--taupe);
	color: #fff;
	text-decoration: none;
	padding: clamp(0.4rem, 1.8vw, 0.6rem) clamp(1.1rem, 5vw, 2rem);
	font-weight: 700;
	/* 37.64/3 = 12.55px => 3.49vw */
	font-size: clamp(12px, 3.49vw, 18px);
	line-height: 1.28;
	transition: background 0.2s var(--ease);
}
.b18-modal__cta:hover { background: #6c5a56; }
.b18-modal__cta-1, .b18-modal__cta-2 { display: block; }

/* --- עמוד התודה --- */
.b18-thanks__main {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	padding-block: clamp(1.8rem, 8vw, 4rem);
	padding-inline: 1.25rem;
}
.b18-thanks__main:focus { outline: none; }

/*
 * בתוך מודל היה רקע כהה שהפריד את הכרטיס מהדף. כאן הכרטיס יושב על נייר לבן,
 * וההפרש בין הקרם ללבן לבדו דק מדי. קו שיער בגוון המסגרות של העיצוב מחזיר
 * לו את הגבול, בלי צל ובלי פינות מעוגלות שזרים לשפה הזאת.
 */
.b18-thanks__card {
	border: 1px solid rgba(104, 81, 64, 0.18);
	animation: b18-thanks-in 0.42s var(--ease) both;
}
@keyframes b18-thanks-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.b18-thanks__back {
	margin-block-start: clamp(1.2rem, 4vw, 1.9rem);
	text-align: center;
	font-size: clamp(14px, 3.6vw, 16px);
	color: var(--taupe);
}
.b18-thanks__back a { color: var(--taupe); text-underline-offset: 3px; }

/*
 * (הוסר 25.8.2026) מצב .b18-leaving - עמעום העמוד היוצא לפני הניווט לעמוד
 * התודה. הניווט היום מיידי ובלי טיימר, ולכן אין מצב ביניים לצבוע.
 */

/* --------------------------------------------------------------------------
   10. עמודי תוכן (משפטי / נגישות)
   -------------------------------------------------------------------------- */
.b18-doc { min-height: 100dvh; display: flex; flex-direction: column; }
.b18-doc__head {
	background: var(--cream);
	padding: clamp(0.6rem, 2vw, 1rem);
	display: grid;
	place-items: center;
}
.b18-doc__brand img { width: clamp(150px, 30vw, 240px); height: auto; }
.b18-doc__main {
	flex: 1 1 auto;
	width: min(100% - 2.5rem, 74ch);
	margin-inline: auto;
	padding-block: clamp(1.6rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}
.b18-doc__main:focus { outline: none; }
.b18-doc__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(26px, 5.5vw, 40px);
	line-height: 1.18;
	color: var(--ink);
	margin-block-end: 1rem;
}
.b18-doc__content { font-size: clamp(15px, 2.2vw, 17px); line-height: 1.75; color: #3f3229; }
.b18-doc__content h2 {
	font-weight: 500;
	font-size: clamp(18px, 3vw, 23px);
	color: var(--ink);
	margin-block: 1.8em 0.5em;
	line-height: 1.3;
}
.b18-doc__content p { margin-block-end: 0.9em; }
.b18-doc__content ul { list-style: disc; padding-inline-start: 1.4em; margin-block-end: 1em; }
.b18-doc__content li { margin-block-end: 0.4em; }
.b18-doc__content a { color: var(--ink); text-underline-offset: 2px; }
.b18-legal-lead { font-size: 1.08em; color: var(--ink); }
.b18-legal-updated { margin-block-start: 2em; font-size: 0.9em; color: var(--taupe); }
.b18-legal-table { width: 100%; border-collapse: collapse; margin-block-end: 1.2em; font-size: 0.92em; }
.b18-legal-table caption { text-align: start; padding-block-end: 0.5em; color: var(--taupe); }
.b18-legal-table th, .b18-legal-table td { border: 1px solid #e0d9d2; padding: 0.5em 0.7em; text-align: start; vertical-align: top; }
.b18-legal-table th { background: var(--cream); font-weight: 500; }
.b18-todo { background: #fff2c4; padding: 0 0.3em; }
.b18-doc__back { margin-block-start: 2.5rem; }
/* --------------------------------------------------------------------------
   11. דסקטופ - הקומפוזיציה של קובץ העיצוב (מ-1024px)

   הדף בעיצוב הוא מסך יחיד בגודל 1920x1152.82.
   כאן הוא נבנה כ"במה" (stage) ביחס גובה-רוחב קבוע שמתכווצת עם החלון,
   וכל אלמנט ממוקם באחוזים שנגזרו ישירות מהקואורדינטות של הווקטור.
   יחידות הטיפוגרפיה הן cqw = אחוז מרוחב הבמה, כך שהכל מתכווץ פרופורציונלית.

   הערה מבנית: .b18-main נמתח על כל הבמה (inset:0) בלי padding, כדי שכל
   ילדיו ימוקמו מול הבמה עצמה ולא מול תיבה פנימית. כך נשמר <main> כלנדמארק
   נגישות, ובכל זאת הגלריה והתוכן יושבים בקואורדינטות המקוריות.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

	/* רוחב הבמה - הבסיס לכל החישובים בדסקטופ */
	:root {
		--stage-w: min(100vw, calc(100dvh * 1.66562));
		/* שוליי הגלריה מקצה החלון. 81.086/1920 מהעיצוב - ראה ההערה אצל .b18-gallery */
		--gallery-inset: calc(0.042232 * var(--stage-w));
	}

	/*
	 * רצועת הקרם נצבעת על ה-body, לא כאלמנט שגולש מהבמה.
	 * אלמנט גולש יוצר overflow אופקי, וב-RTL זה מזיז את כל הדף - באג שכבר נתפס כאן.
	 */
	body {
		background: linear-gradient(
			to right,
			var(--cream) 0 calc(50vw - 0.09024 * var(--stage-w)),
			var(--paper) calc(50vw - 0.09024 * var(--stage-w)) 100%
		);
		background-attachment: fixed;
	}

	.b18-page {
		position: relative;
		display: block;
		inline-size: var(--stage-w);
		aspect-ratio: 1920 / 1152.82;
		margin-inline: auto;
		min-height: 0;
		overflow: visible;
		container-type: size;
		container-name: stage;
	}

	/*
	 * עיטור הרקע: הספרה 8 של הלוגו, על רצועת הקרם.
	 *
	 * position: fixed בכוונה. קודם הוא היה absolute בתוך הבמה, ולכן נגמר בדיוק
	 * בגובה הבמה - מה שיצר קו חיתוך אופקי חד באמצע המסך בכל חלון שגבוה מהבמה,
	 * ועוד קו אנכי חד בקצה הבמה בכל חלון רחב יותר. עכשיו הוא מעוגן לחלון עצמו,
	 * נפרס על מלוא הגובה, וכל קצה שלו נגמר על גבול המסך - כלומר bleed טבעי.
	 * התוכן (.b18-page, z-index גבוה יותר) גולל מעליו.
	 *
	 * הרוחב זהה בדיוק לרצועת הקרם שנצבעת על ה-body למעלה, כדי שהשניים לא ייפרדו.
	 */
	.b18-decor {
		display: block;
		position: fixed;
		inset-block: 0;
		left: 0;
		width: calc(50vw - 0.09024 * var(--stage-w));
		overflow: hidden;
		z-index: 0;
		pointer-events: none;
	}
	.b18-decor img { width: 100%; height: 100%; object-fit: fill; }
	.b18-page { z-index: 1; }

	/* main נמתח על הבמה כדי לשמש מסגרת מיקום לילדיו */
	.b18-main {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		z-index: 3;
		pointer-events: none;
	}
	.b18-main > * { pointer-events: auto; }

	/* --- לוגו: x 1197.9..1686.4 , y 65.1 --- */
	.b18-brand {
		position: absolute;
		left: 62.391%;
		top: 5.647%;
		width: 25.444%;
		min-height: 0;
		padding: 0;
		background: none;
		display: block;
		z-index: 4;
	}
	.b18-brand__link { width: 100%; }
	.b18-brand__logo { width: 100%; max-width: none; height: auto; }

	/*
	 * --- גלריה ---
	 * נמדד מהווקטור (clip של התמונה בקובץ העיצוב, מתוך 1920x1152.82):
	 * x 81.086..924.853 , y 87.386..1083.838.
	 *
	 * התמונה מוגדלת מעבר לעיצוב (למעלה, לימין ולמטה) לבקשת גיא, כדי שלא תיראה
	 * כתמונה קטנה בתוך שוליים ריקים. **הקצה השמאלי הוא היוצא מן הכלל:** בעיצוב
	 * יש שם שוליים קטנים אך אמיתיים, ולא bleed לקצה. הם מוחזרים כאן בדיוק
	 * בערכם מהעיצוב - 81.086/1920 = 4.2232% מרוחב הבמה.
	 *
	 * המרווח נמדד מול **החלון** ולא מול הבמה: כשהחלון רחב מהבמה, מדידה מול הבמה
	 * הוסיפה לו את כל רצועת הלטרבוקס (~60px ב-1920x1080) ויצרה את השוליים
	 * המיותרים שגיא ביקש להסיר. כך המרווח נשאר יחיד, קבוע ופרופורציונלי לבמה:
	 * 60.8px ב-1440 , 76.0px ב-1920x1080.
	 *
	 * השוליים העליון והתחתון נשמרו בכוונה - שם נראה עיטור הרקע.
	 */
	/*
	 * הגובה מגיע מהבמה (88.5%, כפי שנקבע בסבב 2), הקצה השמאלי מהעיצוב
	 * (סבב 3), והרוחב נגזר מהם דרך --gallery-ratio. קודם הרוחב היה נעול
	 * ל-50.5% מהבמה + רצועת הלטרבוקס, ולכן יחס הפריים השתנה עם יחס החלון
	 * (0.871 ב-16:10, 0.934 ב-16:9) ובכל מסך רחב הבניין נחתך. עכשיו היחס
	 * קבוע והקצה הימני הוא זה שזז - הוא נעצר על 44.1% מהבמה, כלומר קרוב
	 * לעיצוב (48.2%) ועם יותר אוויר עד הכותרת (54.3%).
	 */
	.b18-gallery {
		position: absolute;
		left: calc((var(--stage-w) - 100vw) / 2 + var(--gallery-inset));
		top: 4.5%;
		height: 88.5%;
		aspect-ratio: var(--gallery-ratio);
		width: auto;
		margin: 0;
		z-index: 2;
	}
	.b18-gallery__frame {
		width: 100%;
		height: 100%;
		max-width: none;
		/* איפוס התקרה שנקבעה בכללי המובייל - בדסקטופ הגובה מגיע מהבמה */
		max-block-size: none;
		aspect-ratio: auto;
		margin: 0;
		inset-inline-start: auto;
	}
	.b18-gnav { inline-size: 2.4cqw; block-size: 2.4cqw; }
	.b18-gallery__bar { gap: 0.7cqw; padding: 0.9cqw 1cqw; }
	.b18-gplay { inline-size: 1.25cqw; block-size: 1.25cqw; }
	.b18-dots { gap: 0.55cqw; }
	.b18-dot { inline-size: 0.52cqw; block-size: 0.52cqw; }
	.b18-dots li { inline-size: 1.35cqw; block-size: 1.6cqw; }

	/* --- כותרת ראשית: x 1042.8..1801.2 , y 251.1 --- */
	.b18-headline {
		position: absolute;
		left: 54.313%;
		/* 251.1 בקובץ העיצוב + 24px התאמה כדי שקו הדיו יישב על 283 כמו במקור
		   (הגופן שלנו קטן יותר ולכן יש פחות מרווח עליון בתוך תיבת השורה) */
		top: 23.864%;
		width: 39.500%;
		/* בעיצוב: Almoni Bold 68.26px ברוחב 758.4px.
		   Heebo רחב ב-19%, ולכן הגודל מותאם כדי לשמור על אותה שורה ואותו רוחב. */
		font-size: 2.983cqw;
		line-height: 1.12;
		margin: 0;
		text-align: center;
		text-wrap: nowrap;
	}

	/* --- שלוש נקודות המכר: x 1114.8..1728.7 , y 402.9..547.3 --- */
	.b18-usps {
		position: absolute;
		left: 58.063%;
		/* 418.42 - הקצה העליון של קווי ההפרדה בקובץ העיצוב */
		top: 36.297%;
		width: 31.974%;
		margin: 0;
		gap: 0;
		align-items: flex-start;
	}
	.b18-usps__gem {
		inline-size: 1.1208cqw;
		block-size: auto;
		/* היהלום ב-470.4 בתוך בלוק שמתחיל ב-418.42 */
		margin-block-start: 4.509cqh;
	}
	/* גובה קווי ההפרדה בעיצוב: y 418.50..543.34 = 124.84 */
	.b18-usps__list { max-width: none; width: 100%; margin: 0; min-height: 10.83cqh; }
	.b18-usp { padding-inline: 0.55cqw; }
	/* מרווח השורות בעיצוב: כותרת 34.6 על גופן 38.14, משנה 26.2 על 22.27 */
	.b18-usp__title { font-size: 1.9865cqw; line-height: 0.91; }
	.b18-usp__sub { font-size: 1.1599cqw; line-height: 1.18; margin-block-start: 0.30em; }
	/* עובי הקו בווקטור: 0.904 מתוך 1920 => 0.0471cqw */
	.b18-usp:not(:last-child) { border-inline-end: max(0.75px, 0.0471cqw) solid var(--olive); }

	/* --- מסגרת PRESALE: x 1091.1..1752.5 , y 629.4..745.8 --- */
	.b18-presale {
		position: absolute;
		left: 56.826%;
		top: 54.598%;
		width: 34.452%;
		height: 10.098%;
		max-height: none;   /* איפוס התקרה שנקבעה בכללי המובייל */
		margin: 0;
		padding: 0;
		display: block;
	}
	/* בעיצוב: Almoni Bold 61.72px ברוחב 580.3px */
	.b18-presale__title {
		position: absolute;
		inset-inline: 0;
		/* חובה לאפס: כללי המובייל מזיזים את הכותרת ב-translateY, וזה נשאר בדסקטופ */
		transform: none;
		/* קו הדיו של הכותרת ב-609, כלומר מעל הקצה העליון של המסגרת (629.4) */
		top: -2.030cqh;
		font-size: 2.557cqw;
		line-height: 1.05;
		margin: 0;
		text-wrap: nowrap;
	}
	.b18-presale__tag {
		position: absolute;
		/* מלבן התג בעיצוב: x 1131.66..1711.93 , y 662.82..721.33 */
		top: 2.899cqh;
		height: 5.076cqh;
		width: 87.72%;
		inset-inline-start: 6.14%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* בעיצוב: Almoni Bold 52.11px ברוחב 351.4px */
		font-size: 2.186cqw;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	/* --- טופס: x 1116.45..1716.35 , y 808.9..1029.3 --- */
	/* אזור הטופס: כותרת ב-808.9, שורת השדות ב-882.24, סוף ב-1029.3 */
	.b18-formwrap {
		position: absolute;
		left: 58.148%;
		/* בעיצוב 70.168%. הוזז מעט למעלה כדי לפנות אוויר לשלוש רמות המידע שמתחת
		   לטופס - ההסכמה, הודעת הפרטיות והטקסט המשפטי - בלי שאף שורה תיגע בשנייה. */
		top: 67.8%;
		/* 610.7 מתוך 1920 - הרוחב שהכותרת תופסת בעיצוב, שורה אחת */
		width: 31.807%;
		height: 19.145%;
		margin: 0;
	}
	.b18-form {
		position: absolute;
		inset-inline: 0;
		/* 882.24 - 808.9 = 73.34 מתוך 1152.82 */
		top: 6.362cqh;
	}
	.b18-formtitle {
		/* Heebo Medium 42.02px - זהה לעיצוב, הגופן כאן אינו מוחלף */
		font-size: 2.1885cqw;
		text-wrap: nowrap;
		padding-block-start: 0.694cqh;
		line-height: 1.14;
		text-align: center;
		margin: 0;
	}

	/* שורת הטופס: שדות מימין, כפתור משמאל */
	form.b18-form {
		display: grid;
		/* מתוך 599.9: שדות 379.78 (63.31%), רווח 27.02 (4.50%), כפתור 193.11 (32.19%) */
		grid-template-columns: 63.31% 4.50% 32.19%;
		grid-template-areas:
			"fields gap button"
			"consent consent consent"
			"notice notice notice";
		/* שורת הטופס עצמה: 599.9 מתוך 610.7, צמודה לקצה השמאלי כמו בעיצוב.
		   margin-inline-end חייב אפס מפורש, אחרת ה-auto משני הצדדים (מכללי המובייל) ממרכז. */
		width: 98.23%;
		margin-inline-start: auto;
		margin-inline-end: 0;
		align-items: stretch;
	}
	.b18-form__fields {
		grid-area: fields;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* בעיצוב 146.96 מתוך 1152.82. הורחב מעט לבקשת גיא - השדות היו צפופים,
		   והשטח שנפתח משמש גם כשטח השמור להודעת השגיאה של השדה הראשון. */
		height: 13.2cqh;
	}
	.b18-form__aside { grid-area: button; display: flex; margin-block-start: 0; }
	.b18-consent { grid-area: consent; }
	.b18-notice { grid-area: notice; }

	/* גובה שדה יחיד: תווית צפה + שדה, כך שהקו התחתון נוחת על הקואורדינטה מהעיצוב */
	.b18-field {
		--fld-label: 1.5276cqw;
		height: 5.171cqh;
		margin: 0;
		/* משלים בדיוק את גובה השדה: 5.171 - 2.626 = 2.545cqh */
		padding-block-start: 2.545cqh;
	}
	.b18-field.is-error { margin: 0; }
	.b18-field label {
		text-align: center;
		font-size: var(--fld-label);
		line-height: 1;
		margin-block-end: 0;
	}
	.b18-field input {
		text-align: center;
		font-size: 1.42cqw;
		line-height: 1;
		/* גובה מפורש: <input> מחשב את גובהו ממדדי הגופן ומתעלם מ-line-height,
		   וכאן צריך שהקו התחתון ינחת בדיוק על 942.5 ועל 1029.3 */
		height: 2.626cqh;
		padding-block: 0;
	}
	.b18-field input[type="tel"] { text-align: center; }
	.b18-err { font-size: 0.72cqw; margin-block-start: 0.25em; }

	.b18-submit {
		flex-direction: column;
		gap: 0.05em;
		width: 100%;
		height: 100%;
		min-height: 0;
		font-size: 1.3052cqw;
		line-height: 1.25;
		padding: 0.5em;
		height: 100%;
		white-space: normal;
	}
	/* בדסקטופ העיצוב מציג שתי שורות בלי חצים */
	.b18-submit__chev { display: none; }

	/*
	 * שתי השורות האלה נכנסות בין סוף הטופס לטקסט המשפטי.
	 * מיושרות להתחלה (ימין ב-RTL) על אותו ציר של השדות ושל הטקסט המשפטי,
	 * עם היררכיית גודל וצבע ברורה ביניהן.
	 */
	.b18-consent, .b18-notice { text-align: start; line-height: 1.4; white-space: nowrap; }
	.b18-consent {
		font-size: 0.80cqw;
		margin-block-start: 1.45cqw;
	}
	.b18-notice {
		font-size: 0.72cqw;
		margin-block-start: 0.70cqw;
	}
	.b18-consent label { justify-content: flex-start; }
	/* בדסקטופ אין צורך להזיז דבר כשמופיעה שגיאה: המרווח בין השדות ובין השדה
	   האחרון לשורת ההסכמה כבר גדול משורת ההודעה. */


	/*
	 * --- טקסט משפטי: בעיצוב x 822..1757.4 , y 1112.6 ---
	 * הקצה הימני הוזז מ-1757.4 ל-1716.35, כלומר לקצה הימני של שדות הטופס.
	 * כך שורת ההסכמה, הודעת הפרטיות, הטקסט המשפטי ושורת הקישורים יושבים כולם
	 * על ציר ימני אחד במקום להיות ארבעה גושים ממורכזים בלי יישור משותף.
	 */
	.b18-footer {
		position: absolute;
		left: 42.813%;
		top: 95.900%;
		width: 46.580%;
		padding: 0;
		background: none;
		text-align: start;
		z-index: 3;
	}
	.b18-legal {
		font-size: 0.7417cqw;
		line-height: 1.35;
		width: 100%;
		max-width: none;
		white-space: nowrap;
		text-align: start;
	}
	/* שורת קישורי החובה אינה בקובץ העיצוב - יושבת מתחת לטקסט המשפטי, על אותו ציר */
	.b18-footer__links {
		width: 100%;
		margin-block-start: 0.50cqw;
		font-size: 0.62cqw;
		line-height: 1.2;
		white-space: nowrap;
		justify-content: flex-start;
	}

	/* --- כרטיס התודה --- */
	.b18-modal, .b18-thanks { inline-size: min(70vw, 616px); }
	.b18-modal__title-1, .b18-modal__title-2 { font-size: clamp(24px, 2.404vw, 50px); }
	.b18-modal__body { font-size: clamp(16px, 1.68vw, 34px); }
	.b18-modal__cta { font-size: clamp(14px, 1.461vw, 30px); }

	/* עמודי התוכן לא משתמשים בבמה */
	.b18-doc { display: flex; }
	.b18-doc .b18-footer {
		position: static;
		width: auto;
		padding: 1.5rem;
		text-align: center;
	}
	.b18-doc .b18-legal { font-size: 12px; white-space: normal; }
	.b18-doc .b18-footer__links { font-size: 13px; white-space: normal; }
}

/* חלון נמוך מאוד - הבמה כבר לא מתכווצת, מותר לגלול */
@media (min-width: 1024px) and (max-height: 560px) {
	:root { --stage-w: 100vw; }
}


/* --------------------------------------------------------------------------
   12. העדפות משתמש
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.b18-slide { transition: none; }
}

@media print {
	.b18-gallery__controls,
	.b18-gallery__bar,
	.b18-skip,
	.b18-footer__links,
	.b18-modal { display: none !important; }
	.b18-page { min-height: 0; }
	.b18-thanks__card { animation: none; border: 1px solid #ccc; }
}