/* ==========================================================================
   Defender — מערכת העיצוב
   כל טוקן מוגדר פעם אחת ב-:root. אין ערכים קשיחים בגוף הקובץ.
   ========================================================================== */

:root {
	/* --- צבע: לכל אחד תפקיד אחד --- */
	--c-ink-900: #0D2340;   /* ההר, בסיס העמוד */
	--c-ink-800: #123055;   /* הצפת הסקשנים העיקרית */
	--c-ink-700: #17406E;   /* פסי הפוליסות, משטחים מורמים */
	--c-blue-600: #2E63A5;  /* כחול מותג רווי — טקסט וכפתורים על רקע בהיר */
	--c-blue-400: #4673B7;  /* כחול הלוגו */
	--c-blue-200: #B4C7E1;  /* טקסט משני על אינק */
	--c-paper: #F1F5FA;     /* הנשימה הבהירה, קרה */
	--c-sand: #F4EFE7;      /* הנשימה הבהירה, חמה — המשטח השני */
	--c-white: #FFFFFF;

	/* --- שלושת האקסנטים. לכל אחד משמעות, לא רק גוון. ---
	   ענבר = פעולה, כסף שחוזר, אור.
	   טיל  = צמיחה, חיסכון והשקעות, "מכוסה".
	   קליי = פער, כיסוי חסר, סיכון.
	   לכל אחד זוג: גרסה על אינק וגרסה על נייר. אף אחת לא עוברת גבול —
	   ענבר על נייר הוא 1.9:1 והוא זה שלימד אותנו את הכלל. */
	--c-amber: #F2A63C;      /* על אינק  · 6.52:1 על ink-800 */
	--c-amber-deep: #8A5A10; /* על נייר  · 5.40:1 על paper · 5.17:1 על sand */
	--c-teal: #35B3A8;       /* על אינק  · 5.17:1 על ink-800 */
	--c-teal-deep: #0E6A67;  /* על נייר  · 5.85:1 על paper · 5.60:1 על sand */
	--c-clay: #EC8873;       /* על אינק  · 5.28:1 על ink-800 */
	--c-clay-deep: #A8422F;  /* על נייר  · 5.50:1 על paper · 5.26:1 על sand */

	/* האקסנט הפעיל. כל סקשן — או כל רצועה בתוך סקשן — דורס אותו, והרכיבים
	   שבתוכו קוראים אותו בלי לדעת באיזה צבע מדובר. */
	--accent-live: var(--c-amber);

	--c-hair-light: rgba(255, 255, 255, 0.12);
	--c-hair-dark: rgba(13, 35, 64, 0.14);

	/* גריין. מוגדר פעם אחת ונצרך גם בהירו וגם בכל צילום בעמוד —
	   זה מה שגורם לתמונות להיקרא כחלק מהעמוד ולא כהדבקה מספריית סטוק. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

	/* --- טיפוגרפיה --- */
	--f-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	--fs-micro: 0.8125rem;
	--fs-small: 0.9375rem;
	--fs-body: 1.0625rem;
	--fs-lead: clamp(1.0625rem, 0.95rem + 0.75vw, 1.35rem);
	--fs-title: clamp(1.5rem, 1.15rem + 2vw, 2.3rem);
	/* Google Sans רץ גדול. התצוגה יורדת ל-3.5rem ולא 4.6, והחדות באה מגודל
	   מול קונטרסט ולא מעובי — המשקל נשאר 500. */
	--fs-display: clamp(1.95rem, 1.15rem + 3.4vw, 3.5rem);
	--fs-figure: clamp(2.4rem, 1.2rem + 6vw, 5rem);

	/* --- מרווח --- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1.25rem;
	--s-5: 2rem;
	--s-6: 3.25rem;
	--s-7: 5.25rem;
	--s-8: 8.5rem;

	--shell: 1360px;
	--gutter: clamp(1.25rem, 0.6rem + 3vw, 3.25rem);
	/* המרחק מקצה המסך אל קו ה-shell. זה מה שמאפשר לצילום ברצועות ה-Hubs
	   לזלוג עד הקצה בזמן שהטקסט נשאר מיושר לשאר העמוד. */
	--edge: max(0px, calc((100vw - var(--shell)) / 2));

	/* --- רדיוס: קצוות מוגדרים. אין גלולות. --- */
	--r-0: 0;
	--r-1: 2px;
	--r-2: 4px;

	/* --- מושן --- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 240ms;

	/* --- ההר --- */
	--bar-h: clamp(2px, 0.22vw, 3px);       /* פסי הצללית */
	--bar-h-lg: clamp(14px, 1.15vw, 16px);  /* השורות הנקובות בשם */
	--bar-gap: clamp(1.5px, 0.16vw, 2px);
	--header-h: 64px;
}

@media (min-width: 900px) {
	:root { --header-h: 76px; }
}

/* --------------------------------------------------------------------------
   בסיס
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* ההדר צף. בלי זה כל קפיצה לעוגן — ובראשם ה-CTA שמוביל ל-#lead —
   נוחתת עם ראש הסקשן מתחת להדר. */
:target,
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--s-4)); }

body {
	margin: 0;
	background: var(--c-ink-900);
	color: var(--c-white);
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--c-amber); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

:focus-visible {
	outline: 2px solid var(--c-amber);
	outline-offset: 3px;
}

::selection { background: var(--c-amber); color: var(--c-ink-900); }

/* מספרים, טווחים ונוסחאות. בלי זה "40-70" ו-"P-0.5%" מתהפכים ב-RTL. */
.num {
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--s-4);
	inset-block-start: -100px;
	z-index: 100;
	padding: var(--s-3) var(--s-4);
	background: var(--c-amber);
	color: var(--c-ink-900);
	font-weight: 500;
	transition: inset-block-start var(--dur) var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   פריסה
   -------------------------------------------------------------------------- */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { position: relative; }

/* הריתמוס האנכי משתנה בכוונה בין סקשנים. פדינג זהה קורא כתבנית. */
.section--offer { padding-block: var(--s-7) var(--s-6); }
.section--dupe { padding-block: var(--s-6) var(--s-7); }

@media (min-width: 900px) {
	.section--offer { padding-block: var(--s-8) var(--s-7); }
	.section--dupe { padding-block: var(--s-7) var(--s-8); }
}

.on-paper { background: var(--c-paper); color: var(--c-ink-900); }
.on-ink-800 { background: var(--c-ink-800); }

/* כותרת קטנה מעל h2. בלי tracking — בעברית זה נראה חובבני. */
.kicker {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-block-end: var(--s-4);
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--c-amber);
}
.kicker::before {
	content: "";
	inline-size: 26px;
	block-size: 2px;
	background: var(--c-amber);
	flex: none;
}
.on-paper .kicker { color: var(--c-blue-400); }
.on-paper .kicker::before { background: var(--c-blue-400); }

.lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--c-blue-200);
	max-inline-size: 46ch;
}
.on-paper .lead { color: #3C5678; }

.micro {
	font-size: var(--fs-micro);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.45);
}
.on-paper .micro { color: rgba(13, 35, 64, 0.5); }

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

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 1.05rem 1.9rem;
	border: 1px solid transparent;
	border-radius: var(--r-1);
	font-family: inherit;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* מסגרת פנימית שנפתחת אל הקצה בריחוף — הפרט שהופך כפתור לאובייקט. */
.btn::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid currentColor;
	border-radius: 1px;
	opacity: 0.26;
	pointer-events: none;
	transition: inset 300ms var(--ease), opacity 300ms var(--ease);
}
.btn:hover::before { inset: 0; opacity: 0.5; }

.btn--primary {
	background: var(--c-amber);
	color: var(--c-ink-900);
}
.btn--primary:hover { background: #FFBE5C; }

/* מילוי ענבר שנשטף מימין לשמאל — כיוון הקריאה. */
.btn--ghost {
	background-image: linear-gradient(var(--c-amber), var(--c-amber));
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 0% 100%;
	border-color: var(--c-blue-400);
	color: var(--c-white);
	transition: background-size 420ms var(--ease), color 260ms var(--ease),
		border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--ghost:hover {
	background-size: 100% 100%;
	border-color: var(--c-amber);
	color: var(--c-ink-900);
}

/* גם על sand. בלי זה הכפתור יורש `color: var(--c-white)` מברירת המחדל
   ונעלם על משטח בהיר — לבן על נייר חם. */
.on-paper .btn--ghost,
.on-sand .btn--ghost { border-color: var(--c-blue-400); color: var(--c-ink-900); }
.on-paper .btn--ghost:hover,
.on-sand .btn--ghost:hover { background: rgba(70, 115, 183, 0.1); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* במובייל שני ה-CTA ברוחב מלא — שתי רוחביות שונות זו ליד זו קוראות כתקלה. */
@media (max-width: 599px) {
	.btn-row .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   Header — edge bar
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	background: rgba(13, 35, 64, 0.92);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--c-hair-light);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-block-size: var(--header-h);
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo img,
.site-header__logo svg { block-size: clamp(23px, 4.4vw, 31px); inline-size: auto; }

.site-nav { display: none; }

.site-nav ul {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* קו ענבר שנשטף מימין לשמאל בריחוף — כיוון הקריאה. */
.site-nav a {
	position: relative;
	display: inline-block;
	padding-block: 0.35rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--fs-small);
	font-weight: 400;
	transition: color var(--dur) var(--ease);
}
.site-nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 2px;
	background: var(--c-amber);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 320ms var(--ease);
}
.site-nav a:hover { color: var(--c-white); text-decoration: none; }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.site-header__cta { display: none; }

/* תפריט מובייל — details נייטיבי, אפס JS */
.menu-toggle { position: relative; }
.menu-toggle > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--c-hair-light);
	border-radius: var(--r-1);
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--c-white);
	cursor: pointer;
	list-style: none;
}
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle[open] > summary { border-color: var(--c-blue-400); }

.menu-toggle__panel {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + var(--s-3));
	min-inline-size: 62vw;
	padding: var(--s-4);
	background: var(--c-ink-800);
	border: 1px solid var(--c-hair-light);
	border-radius: var(--r-2);
}
.menu-toggle__panel ul {
	display: grid;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu-toggle__panel a { color: var(--c-white); font-size: var(--fs-body); }

@media (min-width: 900px) {
	.site-nav { display: block; }
	.site-header__cta { display: inline-flex; }
	.menu-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   הירו — asymmetric negative-space overlay
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	background: var(--c-ink-900);
	padding-block-start: var(--s-6);
}

/* הילה עדינה מאחורי הפסגה — החריג היחיד לאיסור על גרדיאנטים */
.hero::before {
	content: "";
	position: absolute;
	inset-block-start: 14%;
	inset-inline: 0;
	inline-size: min(700px, 88vw);
	margin-inline: auto;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(242, 166, 60, 0.16) 0%, rgba(242, 166, 60, 0) 60%);
	pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; }

/* לא ch — היחידה נגזרת מגודל הגוף ולא מגודל הכותרת, וזה חונק אותה ל-340px. */
.hero__text { max-inline-size: 46rem; }

.hero h1 {
	font-size: var(--fs-display);
	line-height: 1.05;
	margin-block-end: var(--s-4);
}
.hero h1 .l1 { display: block; color: var(--c-blue-200); }
.hero h1 .l2 { display: block; color: var(--c-white); }

.hero .lead { margin-block-end: var(--s-5); max-inline-size: 34rem; }

.hero__disclosure {
	margin-block-start: var(--s-5);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--c-hair-light);
	max-inline-size: 48ch;
}

/* ההר יושב בזרימה מתחת לטקסט — לא absolute. בלי חפיפה בשום רזולוציה,
   וסדר הקריאה זהה במובייל ובדסקטופ. */
.hero__mountain {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--shell);
	margin-block-start: var(--s-6);
	margin-inline: auto;
	padding-inline: var(--gutter);
	/* השורות העליונות נמסות לרקע במקום לחתוך אותו בקו. */
	mask-image: linear-gradient(to bottom, transparent 0%, #000 9%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%);
}

@media (min-width: 900px) {
	.hero {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-block-size: min(100svh, 940px);
		padding-block-start: 0;
	}
	.hero__inner {
		inline-size: 100%;
		padding-block: clamp(2.5rem, 7vh, 5rem) 0;
	}
	.hero__mountain { margin-block-start: var(--s-5); }
}

/* --- ההר עצמו --- */

.mountain {
	display: flex;
	flex-direction: column;
	gap: var(--bar-gap);
	inline-size: 100%;
}

.mountain__row {
	position: relative;
	block-size: var(--bar-h);
	inline-size: 100%;
}

.mountain__seg {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--s);
	inline-size: var(--w);
	display: flex;
	align-items: center;
	overflow: hidden;
	/* הבסיס שוקע לצל, הפסגה תופסת אור. */
	background: var(--c-ink-800);
	background: color-mix(in oklab, var(--c-blue-400) calc(var(--t) * 58%), var(--c-ink-800));
	animation: bar-rise 240ms var(--ease) both;
	animation-delay: calc(var(--t) * 460ms);
}

/* שבעת השורות הנקובות בשם — הן שנותנות לרכס מקצב ומונעות קריאה כמדרגות. */
.mountain__row.is-named { block-size: var(--bar-h-lg); }
.mountain__row.is-named .mountain__seg {
	padding-inline-start: clamp(0.5rem, 1.4vw, 1.1rem);
	background: color-mix(in oklab, var(--c-blue-400) calc(var(--t) * 32%), var(--c-ink-700));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mountain__row.is-peak { block-size: clamp(3px, 0.32vw, 4px); }
.mountain__row.is-peak .mountain__seg {
	background: var(--c-amber);
	opacity: var(--o, 1);
	box-shadow: 0 0 40px 6px rgba(242, 166, 60, 0.42);
}

/* השורות שמיד מתחת לכיפה מקבלות נגיעת ענבר — האור דועך במקום להיחתך. */
.mountain__row.is-summit .mountain__seg {
	background: color-mix(in oklab, var(--c-amber) calc((var(--t) - 0.86) * 320%), #3A69A8);
}

.mountain__label {
	font-size: clamp(0.625rem, 0.85vw, 0.75rem);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.64);
}

@keyframes bar-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   הירו סרט — הצילום נראה רק דרך המגן
   פוסטר קודם, הווידאו עולה בזמנו ורק בדסקטופ. תקציב 2 השניות נשמר.
   -------------------------------------------------------------------------- */

.hero--film {
	position: relative;
	overflow: hidden;
	background: var(--c-ink-900);
	padding-block: var(--s-6) var(--s-7);
}

/* ההילה יושבת מאחורי המגן ולא במרכז המסך — ככה היא נקראת כאור
   שנשפך מהצילום ולא כמו כתם. */
.hero--film::before {
	inset-block-start: 18%;
	inset-inline: auto;
	inset-inline-end: 4%;
	margin-inline: 0;
	inline-size: min(620px, 74vw);
}

/* המגן יושב בתוך הגריד של העמוד ולא absolute מחוצה לו — ככה הוא מיושר
   לאותו קו כמו הטקסט, והצורה נשארת שלמה בכל רזולוציה. */
.hero__film {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: 440px;
	margin: var(--s-6) auto 0;
	aspect-ratio: 372 / 432;
}

/* הצללית עצמה. כל מה שבתוכה נחתך לצורת המגן. */
.film__stage {
	position: absolute;
	inset: 0;
	background: var(--c-ink-800);
	-webkit-mask-image: url("../img/shield-mask.svg");
	mask-image: url("../img/shield-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.film__poster,
.film__video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/* הפוסטר יושב מתחת, הווידאו עולה עליו בהצלבה כשהוא מתחיל לנגן. */
.film__video {
	opacity: 0;
	transition: opacity 900ms var(--ease);
}
.film__video.is-playing { opacity: 1; }

/* שכבת אינק שמבטיחה שהקונטרסט לא תלוי בפריים שהגיע. */
.film__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(13, 35, 64, 0.34) 0%, rgba(13, 35, 64, 0.1) 45%, rgba(8, 23, 41, 0.72) 100%);
}

/* אור ענבר על קצה המגן — מה שמגדיר את הצורה בחדות.
   pathLength="1" מנרמל את האורך, ולכן ההנפשה עובדת בלי לדעת את המידה. */
.film__rim {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	color: var(--c-amber);
	opacity: 0.68;
	pointer-events: none;
	overflow: visible;
}
.film__rim .rim-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: rim-draw 1500ms var(--ease) 260ms both;
}
@keyframes rim-draw { to { stroke-dashoffset: 0; } }

/* ניצוץ שנוסע סביב קו המגן. מקטע קצר על אותו נתיב, לולאה איטית. */
.film__rim .rim-spark {
	stroke: var(--c-amber-lit, #FFD08A);
	stroke-width: 7;
	stroke-dasharray: 0.05 0.95;
	stroke-dashoffset: 1;
	filter: drop-shadow(0 0 7px rgba(242, 166, 60, 0.9));
	opacity: 0;
}

.hero--film .hero__inner { position: relative; z-index: 2; }
.hero--film .hero__text { max-inline-size: 46rem; }

.hero--film h1 {
	font-size: var(--fs-display);
	line-height: 1.05;
	margin-block-end: var(--s-4);
	color: var(--c-white);
}
.hero--film h1 em { font-style: normal; color: var(--c-amber); }
.hero--film .lead { margin-block-end: var(--s-5); max-inline-size: 34rem; }
.hero--film .hero__disclosure {
	margin-block-start: var(--s-5);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--c-hair-light);
	max-inline-size: 48ch;
}

/* שורת ההוכחה — שלוש עובדות מתוך התוכן של הלקוח עצמו.
   זה מה שממלא את ההירו במהות ולא רק בקישוט. */
.proof {
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: 0;
	display: grid;
	gap: var(--s-3);
	max-inline-size: 34rem;
}
.proof li {
	position: relative;
	padding-inline-start: var(--s-4);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--c-blue-200);
}
.proof li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.48em;
	inline-size: 9px;
	block-size: 9px;
	background: var(--c-amber);
}

@media (min-width: 900px) {
	.hero--film {
		display: flex;
		align-items: center;
		min-block-size: min(100svh, 940px);
		padding-block: var(--s-6);
	}

	/* שתי עמודות על אותו גריד: הטקסט בעמודה הראשונה (ימין ב-RTL),
	   המגן בשנייה. סדר ה-DOM זהה, ולכן במובייל זה פשוט נערם. */
	.hero--film .hero__inner {
		inline-size: 100%;
		display: grid;
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: center;
	}
	.hero--film .hero__text { max-inline-size: none; }

	/* גובה מפורש והרוחב נגזר ממנו. בלי זה הגריד מותח את הפריט לגובה
	   השורה וה-aspect-ratio מכווץ את הרוחב בחזרה. */
	/* 80vh ולא יותר — החוד התחתון הוא מה שמזהה את הצורה, והוא חייב
	   להישאר מעל קו הקיפול. */
	.hero__film {
		block-size: min(80vh, 800px);
		inline-size: auto;
		max-inline-size: 100%;
		margin: 0;
		align-self: center;
		justify-self: center;
	}
}

/* --------------------------------------------------------------------------
   תנועה — חשיפה מדורגת, פרלקסה על ציר הגלילה, נשימה, וגריין
   -------------------------------------------------------------------------- */

/* גריין דק. סטטי בכוונה — גריין מונפש שורף סוללה על כל פריים. */
.hero--film::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

@media (prefers-reduced-motion: no-preference) {

	/* החשיפה: כל שורה עולה בתורה. הכותרת ראשונה כדי לא לעכב את ה-LCP. */
	.hero--film .hero__text > * { animation: rise-in 640ms var(--ease) both; }
	.hero--film .kicker { animation-delay: 40ms; }
	.hero--film h1 { animation-delay: 90ms; }
	.hero--film .lead { animation-delay: 200ms; }
	.hero--film .proof { animation-delay: 290ms; }
	.hero--film .btn-row { animation-delay: 390ms; }
	.hero--film .hero__disclosure { animation-delay: 490ms; }

	/* הניצוץ מתחיל רק אחרי שהקו סיים להיצייר. */
	.film__rim .rim-spark { animation: spark 7s linear 1900ms infinite; }
	@keyframes spark {
		0% { stroke-dashoffset: 1; opacity: 0; }
		8% { opacity: 0.95; }
		78% { opacity: 0.95; }
		92%, 100% { stroke-dashoffset: 0; opacity: 0; }
	}

	@keyframes rise-in {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: none; }
	}

	.hero--film .film__stage { animation: stage-in 900ms var(--ease) 120ms both; }
	@keyframes stage-in {
		from { opacity: 0; transform: scale(1.04); }
		to { opacity: 1; transform: none; }
	}

	/* ההילה נושמת — איטי מאוד, אלמנט אחד, מורכב על ה-GPU. */
	.hero--film::before { animation: breathe 9s ease-in-out infinite alternate; }
	@keyframes breathe {
		from { opacity: 0.75; transform: scale(0.96); }
		to { opacity: 1; transform: scale(1.06); }
	}

	/* פרלקסה על ציר הגלילה — CSS נייטיבי, אפס JS, אפס מאזין scroll. */
	@supports (animation-timeline: view()) {
		.hero__film {
			animation: shield-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
		@keyframes shield-drift {
			from { transform: translateY(2.5%) scale(1.015); }
			to { transform: translateY(-6%) scale(0.985); }
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.film__video { display: none; }
	.film__rim .rim-line { stroke-dashoffset: 0; animation: none; }
	.film__rim .rim-spark { display: none; }
}

/* --------------------------------------------------------------------------
   הגרסה הבהירה — אותה צורה, היפוך מלא של חלוקת הצבע
   המגן הוא המסה הכהה היחידה בעמוד.
   -------------------------------------------------------------------------- */

.hero--light { background: var(--c-paper); }

.hero--light::before {
	background: radial-gradient(circle, rgba(46, 99, 165, 0.13) 0%, rgba(46, 99, 165, 0) 62%);
}
.hero--light::after { opacity: 0.045; mix-blend-mode: multiply; }

.hero--light .kicker { color: var(--c-blue-600); }
.hero--light h1 { color: var(--c-ink-900); }
/* ענבר על נייר הוא 1.9:1 ונופל בקונטרסט — ההדגשה עוברת לכחול המותג. */
.hero--light h1 em { color: var(--c-blue-600); }
.hero--light .lead { color: #3C5678; }
.hero--light .btn--ghost { border-color: rgba(13, 35, 64, 0.26); color: var(--c-ink-900); }
.hero--light .btn--ghost:hover { border-color: var(--c-ink-900); background: rgba(46, 99, 165, 0.09); }
.hero--light .hero__disclosure { border-block-start-color: var(--c-hair-dark); }
.hero--light .micro { color: rgba(13, 35, 64, 0.5); }
.hero--light .proof li { color: #3C5678; }

/* drop-shadow ולא box-shadow — הוא עוקב אחרי אלפא המסכה ולכן אחרי צורת המגן. */
.hero--light .hero__film { filter: drop-shadow(0 26px 54px rgba(13, 35, 64, 0.3)); }
.hero--light .film__stage::after {
	background: linear-gradient(200deg, rgba(13, 35, 64, 0.28) 0%, rgba(13, 35, 64, 0.06) 45%, rgba(8, 23, 41, 0.62) 100%);
}

/* --------------------------------------------------------------------------
   ההצעה — stepped sequence on a rule
   -------------------------------------------------------------------------- */

.steps {
	display: grid;
	gap: var(--s-5);
	position: relative;
}

/* מובייל: הקו אנכי בקצה ההתחלה */
.steps::before {
	content: "";
	position: absolute;
	inset-block: 0.55rem 2rem;
	inset-inline-start: 5px;
	inline-size: 1px;
	background: var(--c-hair-dark);
}

.step { position: relative; padding-inline-start: var(--s-5); }

.step::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5rem;
	inline-size: 11px;
	block-size: 11px;
	background: var(--c-ink-900);
	border-radius: var(--r-0);
}
.step:first-child::before { background: var(--c-amber); }

.step__n {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 700;
	color: var(--c-blue-400);
	margin-block-end: var(--s-1);
}
.step h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin-block-end: var(--s-2);
}
.step p { color: #3C5678; font-size: var(--fs-body); line-height: 1.65; }

.offer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid var(--c-hair-dark);
}
.offer__foot .micro { max-inline-size: 64ch; }
.offer__foot .btn { flex: none; }

@media (min-width: 820px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s-5);
		padding-block-start: var(--s-5);
	}
	/* דסקטופ: הקו הופך אופקי, הצעדים תלויים ממנו */
	.steps::before {
		inset: 0 0 auto 0;
		inline-size: auto;
		block-size: 1px;
	}
	.step { padding-inline-start: 0; padding-block-start: var(--s-4); }
	.step::before { inset-block-start: -5px; inset-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   הכפילות — specimen + margin note
   -------------------------------------------------------------------------- */

.dupe__grid { display: grid; gap: var(--s-6); }

.specimen {
	border-block-start: 1px solid var(--c-hair-light);
}

.policy-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-4);
	border-block-end: 1px solid var(--c-hair-light);
	font-size: clamp(1.05rem, 0.9rem + 1vw, 1.45rem);
	font-weight: 500;
}

.policy-row__name { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.policy-row__sub {
	font-size: var(--fs-micro);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.45);
}
.policy-row__price { color: var(--c-blue-200); white-space: nowrap; }

.policy-row.is-dupe { color: rgba(255, 255, 255, 0.55); }
/* הקו חוצה רק את מה שמיותר — לא את "לחודש".
   קליי ולא ענבר: המחיקה היא הפער, לא הכסף. הענבר שמור לשורת החיסכון
   שמתחתיה, ולכן המפרט הזה מראה שני צבעים שעושים שתי עבודות שונות. */
.policy-row.is-dupe .strike {
	text-decoration: line-through;
	text-decoration-color: var(--c-clay);
	text-decoration-thickness: 2px;
	text-underline-offset: 0;
}

.tag-dupe {
	flex: none;
	padding: 0.2rem 0.5rem;
	background: var(--c-clay);
	color: var(--c-ink-900);
	border-radius: var(--r-1);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.dupe__saving {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	padding-block: var(--s-4);
	font-size: var(--fs-micro);
	color: var(--c-blue-200);
}
/* ענבר במפורש ולא --accent-live: הסקשן כולו קליי, וזו השורה היחידה בו
   שמדברת על כסף שחוזר. החריגה היא העניין. */
.dupe__saving b { font-size: 1.15rem; font-weight: 700; color: var(--c-amber); }

.note {
	border-inline-start: 2px solid var(--accent-live);
	padding-inline-start: var(--s-4);
}
.note p { color: var(--c-blue-200); font-size: var(--fs-body); line-height: 1.65; }
.note .micro { margin-block-start: var(--s-3); }

@media (min-width: 900px) {
	.dupe__grid {
		grid-template-columns: minmax(0, 1.62fr) minmax(0, 0.9fr);
		gap: var(--s-6);
		align-items: start;
	}
	/* ההערה יורדת מהציר — אסימטריה מכוונת */
	.dupe__note { padding-block-start: var(--s-7); }
	.policy-row { padding-block: var(--s-5); }
}

/* --------------------------------------------------------------------------
   פעולות צפות — וואטסאפ + חיוג
   -------------------------------------------------------------------------- */

.floating {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 50;
	display: flex;
	gap: 1px;
	padding-block-end: env(safe-area-inset-bottom, 0);
	background: var(--c-hair-light);
	border-block-start: 1px solid var(--c-hair-light);
}

.floating .btn {
	flex: 1;
	border-radius: var(--r-0);
	padding-block: 1.05rem;
	font-size: var(--fs-body);
}
.floating .btn--ghost {
	background: var(--c-ink-900);
	border-color: transparent;
}

body { padding-block-end: 4.6rem; }

/* בדסקטופ ה-CTA יושב בהדר באופן קבוע, ובר צף הוא תבנית מובייל.
   כאן הוא גם דרך על המגן, ולכן הוא נעלם. */
@media (min-width: 900px) {
	body { padding-block-end: 0; }
	.floating { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: var(--c-ink-900);
	border-block-start: 1px solid var(--c-hair-light);
	padding-block: var(--s-6);
}

.site-footer__disclosure {
	max-inline-size: 72ch;
	margin-block-end: var(--s-5);
}
.site-footer__disclosure p + p { margin-block-start: var(--s-3); }

.site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--c-hair-light);
}

/* --------------------------------------------------------------------------
   העדפות נגישות
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
	/* ההר פשוט מרונדר שלם. הרעיון לא תלוי בתנועה. */
	.mountain__seg { opacity: 1; transform: none; }
	.mountain__row.is-peak .mountain__seg { opacity: var(--o, 1); }
}

@media (forced-colors: active) {
	.mountain__seg { background: CanvasText; }
	.btn { border: 1px solid ButtonText; }
}

/* ==========================================================================
   החצי השני של דף הבית
   ========================================================================== */

/* --------------------------------------------------------------------------
   הקשר האקסנט

   כל סקשן מכריז על האקסנט שלו פעם אחת, והרכיבים שבתוכו קוראים
   `--accent-live` בלי לדעת באיזה צבע מדובר ובלי לדעת על איזה משטח הם
   יושבים. זה מה שמונע את הגלישה שבה כל רכיב מקודד לעצמו את הצבע וחצי
   מהם נשארים מאחור כשהכיוון משתנה.
   -------------------------------------------------------------------------- */

/* ההצהרה חייבת לשבת על אותו אלמנט שנושא את `acc-*`, ולא על אב משותף.
   הצבה של `--accent-live: var(--accent)` על `.section` נפתרת *שם* לערך
   מוחלט ויורדת כערך מוחשב — ואז שינוי של `--accent` ברצועה פנימית כבר לא
   משפיע עליה. זה בדיוק מה שהותיר את שלוש רצועות ה-Hubs בענבר. */
/* `--accent-ink` הוא גרסת המשטח הכהה והוא **לא נדרס לעולם**, כדי שפאנל
   כהה שיושב בתוך סקשן בהיר יוכל לחזור אליו. */
.acc-amber { --accent-ink: var(--c-amber); --accent-live: var(--c-amber); }
.acc-teal  { --accent-ink: var(--c-teal);  --accent-live: var(--c-teal); }
.acc-clay  { --accent-ink: var(--c-clay);  --accent-live: var(--c-clay); }

/* אותו אקסנט על משטח בהיר — הגרסה העמוקה, זו שעוברת קונטרסט. */
.acc-amber.on-paper, .acc-amber.on-sand { --accent-live: var(--c-amber-deep); }
.acc-teal.on-paper,  .acc-teal.on-sand  { --accent-live: var(--c-teal-deep); }
.acc-clay.on-paper,  .acc-clay.on-sand  { --accent-live: var(--c-clay-deep); }

/* הקיקר עובר לאקסנט החי. הישן היה נעול על blue-400, שהוא 4.36:1 על נייר
   ונופל ב-AA בגודל 13px — בדיוק הסוג של כשל שלא רואים בעין. */
.kicker { color: var(--accent-live); }
.kicker::before { background: currentColor; }
.on-paper .kicker,
.on-sand .kicker { color: var(--accent-live); }
.on-paper .kicker::before,
.on-sand .kicker::before { background: currentColor; }

.on-sand {
	background: var(--c-sand);
	color: var(--c-ink-900);
}
.on-sand .lead { color: #3C5678; }
.on-sand .micro { color: rgba(13, 35, 64, 0.55); }

.section--states { padding-block: var(--s-7); }
.section--figure { padding-block: var(--s-7); }
.section--who { padding-block: var(--s-7); }
.section--faq { padding-block: var(--s-7); }

@media (min-width: 900px) {
	.section--states { padding-block: var(--s-8) var(--s-8); }
	.section--figure { padding-block: var(--s-8); }
	.section--who { padding-block: var(--s-8) var(--s-7); }
	.section--faq { padding-block: var(--s-7) var(--s-8); }
}

/* --------------------------------------------------------------------------
   ראש סקשן — קו שיער עם קטע צבוע

   הקו רץ לרוחב המכל וקטע קצר בקצה ההתחלה נצבע באקסנט של הסקשן. זה נותן
   לכל סקשן חתימת צבע בלי להציף אותו, וזה החוט שמחזיק את שלושת ה-Hubs
   ואת שאר העמוד כמערכת אחת.
   -------------------------------------------------------------------------- */

.sec-head {
	position: relative;
	padding-block-start: var(--s-4);
	border-block-start: 1px solid var(--c-hair-light);
	margin-block-end: var(--s-6);
}
.on-paper .sec-head,
.on-sand .sec-head { border-block-start-color: var(--c-hair-dark); }

.sec-head::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	inline-size: 84px;
	block-size: 3px;
	background: var(--accent-live);
}

.sec-head h2 {
	font-size: var(--fs-title);
	max-inline-size: 20em;
	margin-block-end: var(--s-4);
}
.sec-head .lead { max-inline-size: 42rem; }

/* גרסה רחבה: הכותרת בצד ההתחלה, הליד בצד השני — שובר את הציר */
@media (min-width: 980px) {
	.sec-head--split {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--s-6);
		align-items: end;
	}
	.sec-head--split h2 { margin-block-end: 0; }
}

/* --------------------------------------------------------------------------
   צילום — הפרימיטיב

   כל תמונה בעמוד עוברת מכאן, ולכן כולן חולקות את אותה שכבת אינק ואת אותו
   גריין. זה ההבדל בין סט מבוים לבין תמונות שהודבקו לעמוד.
   -------------------------------------------------------------------------- */

.ph {
	position: relative;
	overflow: hidden;
	background: var(--c-ink-800);
	isolation: isolate;
}

.ph > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	/* הרוויה נשארת. הייתה כאן `saturate(0.88)` שהחלישה כל צילום בעמוד —
	   והבריף של הלקוח הוא מפורשות **"יותר צבע"**. הפלטה נכפית עכשיו
	   בעיבוד (imagelab.grade) ולא בהחלשה כאן. */
	transition: transform 900ms var(--ease);
}

/* שכבת האינק — לקונטרסט של טקסט שמונח על הצילום בלבד.
   הייתה כבדה יותר כשהיא ניסתה גם *לתקן* פריימים שנפלו מהפלטה. זו לא
   עבודה של CSS: שכבת נייבי ב-24% על צילום אפור נותנת צילום אפור מעומעם.
   התיקון עבר ל-imagelab, וכאן נשאר רק מה שנחוץ לקריאוּת. */
.ph::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(13, 35, 64, 0.14) 0%, rgba(13, 35, 64, 0) 46%, rgba(8, 23, 41, 0.5) 100%);
}

.ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0.055;
	mix-blend-mode: overlay;
	background-image: var(--grain);
	background-size: 140px 140px;
}

/* --------------------------------------------------------------------------
   מה מביא אתכם לכאן — מוזאיקת מצבי חיים

   שכבת הניווט שחסרה. עם 11 עמודי מאמר זו תשתית, לא נחמדות: זו הדרך שבה
   מישהו שהגיע לדף הבית מוצא את העמוד שנוגע בו.

   העמודה האמצעית יורדת. רשת ישרה של שישה כרטיסים היא בדיוק התשובה
   התבניתית, וההסטה היא כל ההבדל בין "רשת" לבין "מוזאיקה".
   -------------------------------------------------------------------------- */

.states__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-5);
}

@media (min-width: 660px) {
	.states__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
}

@media (min-width: 1040px) {
	.states__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
	.states__grid > :nth-child(3n + 2) { margin-block-start: var(--s-6); }
}

.state {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}
.state:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   שפת הדימויים — פאנל הדיאגרמה

   פאנל אינק עמוק על משטח החול. הניגוד הזה הוא חצי מהעניין: הדיאגרמה
   נקראת כאובייקט מונח על הדף, לא כרקע.

   קונטרסט מול הפאנל (‎#0D2340‎), דרישת 3:1 לאובייקט גרפי נושא מידע:
   blue-400 ‎3.3:1‎ ✓ · הקו המקווקו ‎5.26:1‎ ✓ · ענבר ‎7.73:1‎ ✓
   -------------------------------------------------------------------------- */

.fig {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-ink-900);
	margin-block-end: var(--s-4);
	/* פאנל אינק בתוך סקשן על חול. האקסנט חייב לחזור לגרסת האינק —
	   teal-deep על ink-900 הוא ‎2.4:1‎ והמספור היה כמעט בלתי קריא. */
	--accent-live: var(--accent-ink);
}

.fig__svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.fig__svg .base {
	stroke: var(--c-blue-400);
	stroke-width: 1;
	opacity: 0.4;
}

.fig__svg .b { fill: var(--c-blue-400); }
.fig__svg .d { fill: var(--c-ink-700); }

.fig__svg .o {
	fill: none;
	stroke: #6E97D0;
	stroke-width: 2;
	stroke-dasharray: 7 6;
	opacity: 0.75;
}

/* הענבר הוא הנקודה של הדימוי, ולכן הוא היחיד שמקבל זוהר —
   אותו היגיון בדיוק כמו קו הפסגה בהר הביטוח. */
.fig__svg .a {
	fill: var(--c-amber);
	filter: drop-shadow(0 0 12px rgba(242, 166, 60, 0.45));
}
/* השקיפות באלפא של ה-fill ולא ב-`opacity`.
   `fig-rise` מסיים ב-`opacity: 1` עם fill-mode both, ואנימציה גוברת על
   הצהרה רגילה — `opacity: .16` כאן היה נדרס, והפער בסקשן הפרישה נצבע
   ענבר מלא במקום לרמוז על מה שחסר. */
.fig__svg .a-ghost { fill: rgba(242, 166, 60, 0.18); }

.fig__svg .ln {
	fill: none;
	stroke: var(--c-blue-400);
	stroke-width: 3;
	stroke-linejoin: round;
}
.fig__svg .ln-a,
.fig__svg .arrow-a,
.fig__svg .tick-a {
	fill: none;
	stroke: var(--c-amber);
	stroke-width: 6;
	stroke-linecap: square;
	stroke-linejoin: miter;
	filter: drop-shadow(0 0 12px rgba(242, 166, 60, 0.45));
}
.fig__svg .tick-a { stroke-width: 4; }
.fig__svg .arrow-a { stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* --- בנייה בגלילה ---
   ברירת המחדל היא מצויר במלואו. ההנפשה נוספת רק כשיש תמיכה ורק אם
   המשתמש לא ביקש פחות תנועה — דימוי שנעלם בגלל תכונה לא נתמכת הוא
   בדיוק סוג התקלה ששולחת סקשן שלם לאוויר ריק. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.fig__svg rect {
			transform-box: fill-box;
			transform-origin: 50% 100%;
			animation: fig-rise linear both;
			animation-timeline: view();
			/* כל פס מתחיל מעט אחרי קודמו — אותה השתלשלות כמו הרכס. */
			animation-range: entry calc(14% + var(--i, 0) * 3.5%) entry calc(46% + var(--i, 0) * 3.5%);
		}
		@keyframes fig-rise {
			from { transform: scaleY(0); opacity: 0; }
			to { transform: none; opacity: 1; }
		}
	}
}

/* בריחוף הענבר נדחף מעט לכיוון הקריאה — הפס החורג חורג עוד קצת. */
.state:hover .fig__svg .a,
.state:focus-visible .fig__svg .a {
	transition: transform 420ms var(--ease);
	transform: translateX(-6px);
}

/* המספר יושב על הצילום בפינת ההתחלה — מקשר את מצבי החיים לשפת המספור
   של שלושת הצעדים, ומונע מהכרטיסים להיקרא כאוסף שרירותי. */
.state__n {
	position: absolute;
	z-index: 3;
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: var(--s-2) var(--s-3);
	background: var(--c-ink-900);
	color: var(--accent-live);
	font-size: var(--fs-micro);
	font-weight: 700;
	line-height: 1;
}

.state h3 {
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	font-size: 1.22rem;
	font-weight: 500;
	margin-block-end: var(--s-2);
}

/* החץ נוסע לכיוון הקריאה — שמאלה ב-RTL. */
.state h3::after {
	content: "←";
	color: var(--accent-live);
	font-size: 0.95em;
	transition: transform 320ms var(--ease);
}
.state:hover h3::after { transform: translateX(-0.35em); }

.state p {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: #3C5678;
	max-inline-size: 30rem;
}

/* קו האקסנט שנמשך מימין לשמאל — אותה תנועה כמו בניווט העליון. */
.state .ph::after { /* נשמר לגריין */ }
.state__rule {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: var(--accent-live);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 420ms var(--ease);
}
.state:hover .state__rule,
.state:focus-visible .state__rule { transform: scaleX(1); }

.state:hover .ph > img,
.state:focus-visible .ph > img { transform: scale(1.045); filter: saturate(1); }

.states__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid var(--c-hair-dark);
}

/* --------------------------------------------------------------------------
   החשבון — single hero figure

   המספר הוא הסקשן. הכל כאן מגיע מהקופי של הלקוח עצמו ("הוזלה של 40-70 ש״ח
   בחודש … לאורך 25 שנה"), ולכן ההסתייגות היא חלק מהמבנה ולא הערת שוליים.
   -------------------------------------------------------------------------- */

.figure { position: relative; overflow: hidden; }

.figure__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.figure__bg > img { filter: saturate(0.7); }
/* מספיק כהה כדי שהמספר בן 5rem יישאר קריא, מספיק פתוח כדי שהבטון ייראה.
   בערכים הקודמים (0.9/0.82/0.95) הטקסטורה נבלעה לגמרי והסקשן היה סתם כחול. */
.figure__bg::before {
	background: linear-gradient(180deg, rgba(13, 35, 64, 0.84) 0%, rgba(13, 35, 64, 0.7) 45%, rgba(13, 35, 64, 0.92) 100%);
}

.figure > .shell { position: relative; z-index: 1; }

.equation {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-4);
	margin-block: var(--s-6);
}

@media (min-width: 760px) {
	.equation {
		grid-template-columns: repeat(3, minmax(0, auto));
		justify-content: start;
		align-items: baseline;
		gap: clamp(1.5rem, 4vw, 4rem);
	}
}

.operand { position: relative; }

/* הכפל יושב בין האיברים ולא בתוכם. במובייל הוא מיותר — האיברים מוערמים. */
@media (min-width: 760px) {
	.operand + .operand::before {
		content: "×";
		position: absolute;
		inset-inline-end: calc(-1 * clamp(1.5rem, 4vw, 4rem) / 2);
		inset-block-start: 0.42em;
		transform: translateX(50%);
		color: var(--c-blue-400);
		font-size: clamp(1.1rem, 0.6rem + 1.2vw, 1.8rem);
		font-weight: 400;
		line-height: 1;
	}
}

.operand > b {
	display: block;
	font-size: var(--fs-figure);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--c-white);
}
.operand > span {
	display: block;
	margin-block-start: var(--s-2);
	font-size: var(--fs-micro);
	color: var(--c-blue-200);
}

.figure__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-3) var(--s-4);
	padding-block-start: var(--s-5);
	border-block-start: 1px solid var(--c-hair-light);
}
.figure__result > b {
	font-size: var(--fs-figure);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--accent-live);
}
.figure__result > span {
	font-size: var(--fs-lead);
	color: var(--c-blue-200);
	max-inline-size: 24rem;
}

.figure__note {
	margin-block-start: var(--s-5);
	max-inline-size: 62ch;
}

/* --------------------------------------------------------------------------
   שלושת ה-Hubs — רצועות רוחב מלא

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

.bands { background: var(--c-ink-900); }

.band {
	position: relative;
	border-block-start: 1px solid var(--c-hair-light);
}
.band:last-child { border-block-end: 1px solid var(--c-hair-light); }

.band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.band__media { position: relative; }
/* הרוחב נקבע מהמכל והגובה נגזר ממנו — לא הפוך.
   `min-block-size` יחד עם `aspect-ratio` הופך את הגובה למקור האמת, והרוחב
   מחושב ממנו החוצה: 15rem × 16/9 = 427px על מסך של 390. זו הייתה גלישה
   אופקית אמיתית בכל מסך מתחת ל-427px. */
.band__media .ph { inline-size: 100%; aspect-ratio: 16 / 9; }

.band__text {
	padding-block: var(--s-6);
	padding-inline: var(--gutter);
}

@media (min-width: 900px) {
	.band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: stretch;
		min-block-size: 27rem;
	}
	/* מכאן ומעלה הרצועה היא שתי עמודות בגובה אחיד, והצילום ממלא את שלו. */
	.band__media .ph { aspect-ratio: auto; block-size: 100%; min-block-size: 27rem; }

	/* ברירת המחדל: הטקסט בעמודה הראשונה — הימנית ב-RTL, צד הקריאה —
	   והצילום זולג אל הקצה השני. סדר ה-DOM נשאר מדיה→טקסט כדי שבמובייל
	   הצילום יבוא ראשון, ולכן המיקום נקבע במפורש ב-grid-column. */
	.band__media { grid-column: 2; grid-row: 1; }
	.band__text {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--s-7);
		/* הצד החיצוני מיושר לקו ה-shell; הצד הפנימי הוא מרווח נשימה מהצילום. */
		padding-inline-start: calc(var(--edge) + var(--gutter));
		padding-inline-end: clamp(1.5rem, 4vw, 4.5rem);
	}

	/* הרצועה המתחלפת: הצילום עובר לצד הקריאה והטקסט לצד השני,
	   וההצמדה לקו ה-shell מתהפכת יחד איתם. */
	.band--flip .band__media { grid-column: 1; }
	.band--flip .band__text {
		grid-column: 2;
		padding-inline-start: clamp(1.5rem, 4vw, 4.5rem);
		padding-inline-end: calc(var(--edge) + var(--gutter));
	}
}

.band__n {
	font-size: var(--fs-micro);
	font-weight: 700;
	color: var(--accent-live);
	margin-block-end: var(--s-3);
	display: block;
}

.band h3 {
	font-size: var(--fs-title);
	margin-block-end: var(--s-3);
}
.band p { color: var(--c-blue-200); max-inline-size: 34rem; }

/* רשימת העמודים שמתחת ל-Hub. קווי שיער ולא כרטיסים — זו רשימה, לא רשת. */
.band__links {
	list-style: none;
	margin: var(--s-5) 0 0;
	padding: 0;
	max-inline-size: 34rem;
}
.band__links li { border-block-start: 1px solid var(--c-hair-light); }
.band__links li:last-child { border-block-end: 1px solid var(--c-hair-light); }

.band__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: 0.72rem;
	color: var(--c-white);
	font-size: var(--fs-small);
	transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.band__links a::after {
	content: "←";
	color: var(--accent-live);
	opacity: 0;
	transform: translateX(0.4em);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.band__links a:hover,
.band__links a:focus-visible {
	color: var(--accent-live);
	text-decoration: none;
	padding-inline-start: var(--s-2);
}
.band__links a:hover::after,
.band__links a:focus-visible::after { opacity: 1; transform: none; }

/* אותה סחיפה בגלילה כמו בהירו — שפת תנועה אחת לכל העמוד. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.band__media .ph > img {
			animation: band-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
		@keyframes band-drift {
			from { transform: scale(1.08) translateY(2%); }
			to { transform: scale(1.08) translateY(-2%); }
		}
	}
}

/* --------------------------------------------------------------------------
   מי עומד מאחור — portrait/text split + לוחית רישיון
   -------------------------------------------------------------------------- */

.who__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
}

@media (min-width: 900px) {
	.who__grid {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}
	/* הפורטרט יורד מהציר — אותה אסימטריה מכוונת כמו בהערת השוליים
	   של סקשן הכפילות. */
	.who__media { margin-block-start: var(--s-5); }
}

.who__media .ph { aspect-ratio: 4 / 5; }

.who h2 { font-size: var(--fs-title); margin-block-end: var(--s-4); }
.who p + p { margin-block-start: var(--s-4); }
.who__body p { color: #3C5678; line-height: 1.7; max-inline-size: 40rem; }

/* לוחית ההסמכה. קווי שיער, ספרות טבלאיות, קצוות חדים — נקראת כמסמך
   ולא ככרטיס "הצוות שלנו". זה סיגנל האמון האמיתי באתר של סוכנות מפוקחת. */
.plate {
	margin-block-start: var(--s-5);
	border: 1px solid var(--c-hair-dark);
	background: var(--c-white);
}

.plate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-2) var(--s-4);
	padding: var(--s-3) var(--s-4);
	border-block-end: 1px solid var(--c-hair-dark);
}
.plate__row:last-child { border-block-end: 0; }

.plate__row > dt {
	font-size: var(--fs-micro);
	color: rgba(13, 35, 64, 0.6);
	margin: 0;
}
.plate__row > dd {
	margin: 0;
	font-size: var(--fs-body);
	font-weight: 500;
	color: var(--c-ink-900);
}

/* שורת ההוכחה של הסוכנות. שלושה מספרים, בלי אייקונים. */
.signals {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0 0;
	padding: 0;
}
.signals li { border-block-start: 2px solid var(--accent-live); padding-block-start: var(--s-3); }
.signals b {
	display: block;
	font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-ink-900);
}
/* ילד ישיר. `.signals span` היה תופס גם את ה-.num שבתוך ה-b. */
.signals li > span {
	display: block;
	margin-block-start: var(--s-2);
	font-size: var(--fs-micro);
	color: rgba(13, 35, 64, 0.6);
}

/* --------------------------------------------------------------------------
   שאלות נפוצות + טופס

   ה-details/summary הם דרישה ולא בחירת סגנון: הסכמה ב-functions.php
   נשאבת מהם ישירות מתוך תוכן העמוד.
   -------------------------------------------------------------------------- */

.faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
}

@media (min-width: 980px) {
	.faq__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}
}

.qa { border-block-start: 1px solid var(--c-hair-light); }
.qa:last-of-type { border-block-end: 1px solid var(--c-hair-light); }

.qa > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-4);
	font-size: clamp(1.02rem, 0.94rem + 0.34vw, 1.18rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-white);
	cursor: pointer;
	list-style: none;
}
.qa > summary::-webkit-details-marker { display: none; }

/* פלוס שהופך למינוס. שני פסים, אחד מסתובב — בלי אייקון וקטורי. */
.qa > summary::after {
	content: "";
	flex: none;
	inline-size: 13px;
	block-size: 13px;
	margin-block-start: 0.35em;
	background:
		linear-gradient(var(--accent-live), var(--accent-live)) center / 100% 2px no-repeat,
		linear-gradient(var(--accent-live), var(--accent-live)) center / 2px 100% no-repeat;
	transition: transform 300ms var(--ease);
}
.qa[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }

.qa > div {
	padding-block-end: var(--s-4);
	max-inline-size: 56ch;
}
.qa > div p { color: var(--c-blue-200); line-height: 1.7; }
.qa > div p + p { margin-block-start: var(--s-3); }

/* --- הטופס: שדות בקו תחתון, בלי קופסאות --- */

.lead-form { border-block-start: 2px solid var(--accent-live); padding-block-start: var(--s-5); }
.lead-form h3 { font-size: 1.35rem; margin-block-end: var(--s-2); }
.lead-form > p { color: var(--c-blue-200); font-size: var(--fs-small); margin-block-end: var(--s-5); }

.field { position: relative; margin-block-end: var(--s-5); }

.field > label {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--c-blue-200);
	margin-block-end: var(--s-2);
}

.field > input,
.field > select {
	inline-size: 100%;
	padding: 0.7rem 0;
	border: 0;
	border-block-end: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-0);
	background: transparent;
	color: var(--c-white);
	font-family: inherit;
	font-size: var(--fs-body);
	transition: border-color var(--dur) var(--ease);
}
.field > select { color: var(--c-white); }
.field > select option { background: var(--c-ink-800); color: var(--c-white); }
.field > input:focus,
.field > select:focus {
	outline: none;
	border-block-end-color: var(--accent-live);
}
.field > input::placeholder { color: rgba(255, 255, 255, 0.34); }

.consent {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin-block-end: var(--s-5);
}
.consent > input {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: 0.22em;
	accent-color: var(--c-amber);
}
.consent > label {
	font-size: var(--fs-micro);
	line-height: 1.55;
	color: var(--c-blue-200);
}

.lead-form .btn { inline-size: 100%; }
.lead-form__note { margin-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   פוטר — dense matrix
   -------------------------------------------------------------------------- */

.site-footer__matrix {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-5);
	padding-block-end: var(--s-6);
	margin-block-end: var(--s-5);
	border-block-end: 1px solid var(--c-hair-light);
}

@media (min-width: 700px) {
	.site-footer__matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
}
@media (min-width: 1040px) {
	.site-footer__matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fcol h3 {
	font-size: var(--fs-micro);
	font-weight: 700;
	color: var(--c-white);
	margin-block-end: var(--s-3);
	padding-block-end: var(--s-3);
	border-block-end: 1px solid var(--c-hair-light);
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fcol a {
	color: var(--c-blue-200);
	font-size: var(--fs-small);
	transition: color var(--dur) var(--ease);
}
.fcol a:hover { color: var(--c-white); text-decoration: none; }
.fcol p { color: var(--c-blue-200); font-size: var(--fs-small); }
.fcol p + p { margin-block-start: var(--s-2); }

/* --------------------------------------------------------------------------
   חשיפה בגלילה — אלמנט אחד, CSS נייטיבי, אפס מאזיני scroll
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.reveal {
			animation: reveal-in 620ms var(--ease) both;
			animation-timeline: view();
			animation-range: entry 8% entry 46%;
		}
		@keyframes reveal-in {
			from { opacity: 0; transform: translateY(22px); }
			to { opacity: 1; transform: none; }
		}
	}
}

/* ==========================================================================
   מסילות צפות + תפריט נגישות

   הבלוק הזה יושב ב-defender.css ולא ב-v2.css **בכוונה.** v2.css נטען רק
   בתבנית page-v2, ותפריט נגישות שעובד רק בחלק מהעמודים אינו עומד בת״י
   5568. לכן הוא מוצהר עם ערכים עצמאיים ולא עם טוקנים של V2.

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

/* בתחתית ולא באמצע. מסילה שממורכזת אנכית נמצאת תמיד בדיוק בגובה העין
   ולכן היא חוצה את התוכן לכל אורך הגלילה; בתחתית היא במקום שבו העין
   כבר מצפה למצוא כלים, והיא חוסמת רק את הפינה. */
.rail {
	position: fixed;
	z-index: 60;
	bottom: clamp(16px, 2vw, 26px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* ⚠️ **מאפיינים פיזיים בכוונה, לא לוגיים.**
   האתר כפוי ל-RTL, ולכן `inset-inline-end` נפתר ל**שמאל** המסך —
   שתי המסילות נחתו הפוך. `right`/`left` אינם דו־משמעיים כאן, והאתר
   אינו דו־לשוני. */
.rail--contact { right: clamp(10px, 1.4vw, 18px); }
.rail--a11y    { left:  clamp(10px, 1.4vw, 18px); }

.rail__btn {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 52px;
	block-size: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	color: #2F5794;
	cursor: pointer;
	/* אותה מתכונת של `.b--fill` בעמוד: צל צבעוני + הבהקה פנימית עליונה.
	   זה מה שגורם לכפתור להיקרא כחלק מהמערכת ולא כתוסף שהודבק. */
	box-shadow:
		0 10px 26px -10px rgba(29, 55, 99, 0.42),
		0 2px 6px rgba(29, 55, 99, 0.12),
		inset 0 0 0 1px rgba(29, 55, 99, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition: transform 260ms cubic-bezier(.22,.61,.36,1),
		box-shadow 260ms cubic-bezier(.22,.61,.36,1),
		background-color 260ms cubic-bezier(.22,.61,.36,1),
		color 260ms cubic-bezier(.22,.61,.36,1);
}
.rail__btn > svg { inline-size: 23px; block-size: 23px; }
.rail__btn:hover,
.rail__btn:focus-visible {
	transform: translateY(-3px) scale(1.04);
	background: #2F5794;
	color: #FFFFFF;
	text-decoration: none;
	box-shadow:
		0 16px 34px -10px rgba(29, 55, 99, 0.5),
		0 3px 8px rgba(29, 55, 99, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- וואטסאפ ---
   היה עיגול ירוק שטוח עם גבול — כלומר בדיוק כפתור התוסף הגנרי. עכשיו
   הוא בנוי כמו ה-CTA הראשי של העמוד: גרדיאנט בשלוש עצירות, צל בצבע
   עצמו, והבהקה פנימית שנותנת את הנפח. */
.rail__btn--wa {
	background-image: linear-gradient(158deg, #55E28C 0%, #25D366 46%, #12A356 100%);
	color: #FFFFFF;
	box-shadow:
		0 12px 28px -10px rgba(18, 163, 86, 0.65),
		0 2px 6px rgba(18, 163, 86, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.rail__btn--wa:hover,
.rail__btn--wa:focus-visible {
	background-image: linear-gradient(158deg, #76EDA5 0%, #35E077 46%, #16BC63 100%);
	color: #FFFFFF;
	box-shadow:
		0 18px 38px -10px rgba(18, 163, 86, 0.75),
		0 3px 8px rgba(18, 163, 86, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* טבעת שמתפשטת החוצה. אחת, איטית, ובלי לגעת בפריסה — היא `::before`
   ממוקם מוחלט, כך שאינה מזיזה דבר בזמן שהיא רצה. */
@media (prefers-reduced-motion: no-preference) {
	.rail__btn--wa::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 2px solid rgba(37, 211, 102, 0.55);
		animation: wa-ring 2800ms cubic-bezier(.22,.61,.36,1) infinite;
		pointer-events: none;
	}
	@keyframes wa-ring {
		0%   { transform: scale(1);    opacity: 0.7; }
		70%  { transform: scale(1.45); opacity: 0; }
		100% { transform: scale(1.45); opacity: 0; }
	}
	/* בריחוף הטבעת נעצרת — היא קוראת לתשומת לב, ומי שכבר כאן לא צריך אותה. */
	.rail__btn--wa:hover::before { animation-play-state: paused; opacity: 0; }
}

/* --- הטולטיפ ---
   נפתח פנימה ולא החוצה: מימין שמאלה, ומשמאל ימינה. אחרת הוא יוצא מהמסך.
   `pointer-events: none` כדי שלא יחסום את הכפתור שמתחתיו. */
.rail__tip {
	position: absolute;
	inset-block-start: 50%;
	z-index: 1;
	white-space: nowrap;
	padding: 0.42rem 0.72rem;
	border-radius: 6px;
	background: #12203A;
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(.22,.61,.36,1), transform 200ms cubic-bezier(.22,.61,.36,1);
}
/* גם כאן פיזי ולא לוגי — הטולטיפ חייב להיפתח **פנימה**, אל מרכז העמוד.
   מסילת יצירת הקשר בימין ולכן הטולטיפ נפתח שמאלה; מסילת הנגישות בשמאל
   והטולטיפ נפתח ימינה. עם מאפיינים לוגיים ב-RTL שניהם נפתחו החוצה
   מהמסך. */
.rail--contact .rail__tip { right: calc(100% + 12px); transform: translateY(-50%) translateX(8px); }
.rail--a11y    .rail__tip { left:  calc(100% + 12px); transform: translateY(-50%) translateX(-8px); }

.rail__btn:hover .rail__tip,
.rail__btn:focus-visible .rail__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

.rail__tip::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
}
.rail--contact .rail__tip::after { left: 100%; border-left-color: #12203A; }
.rail--a11y    .rail__tip::after { right: 100%; border-right-color: #12203A; }

/* במובייל הן מתפרסות אופקית ומכבדות את שולי המסך של המכשיר. */
@media (max-width: 767px) {
	.rail {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		flex-direction: row;
	}
	.rail__btn { inline-size: 46px; block-size: 46px; }
	.rail__tip { display: none; }
}

/* --------------------------------------------------------------------------
   פאנל הנגישות
   -------------------------------------------------------------------------- */

.a11y-panel {
	position: fixed;
	z-index: 61;
	/* נפתח **כלפי מעלה** מהכפתור שבפינה השמאלית התחתונה. הערך הוא
	   מרווח המסילה + גובה הכפתור + נשימה. פיזי ולא לוגי — הכפתור בשמאל. */
	bottom: calc(clamp(16px, 2vw, 26px) + 52px + 12px);
	left: clamp(10px, 1.4vw, 18px);
	inline-size: min(21rem, calc(100vw - 24px));
	max-block-size: min(34rem, calc(100vh - 140px));
	overflow-y: auto;
	padding: 1.15rem;
	border: 1px solid #D9E2F0;
	border-radius: 14px;
	background: #FFFFFF;
	color: #12203A;
	box-shadow: 0 4px 12px rgba(29, 55, 99, 0.12), 0 28px 60px rgba(29, 55, 99, 0.22);
}
.a11y-panel[hidden] { display: none; }

@media (max-width: 767px) {
	.a11y-panel {
		/* מרווח המסילה במובייל (12px) + גובה הכפתור (46) + נשימה. */
		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
		inset-inline: 12px;
		inline-size: auto;
	}
}

.a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-end: 1rem;
}
.a11y-panel__head h2 { margin: 0; font-size: 1.05rem; font-weight: 500; color: #12203A; }

.a11y-close {
	flex: none;
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 1px solid #D9E2F0;
	border-radius: 6px;
	background: #FFFFFF;
	color: #44536E;
	font-size: 0.875rem;
	line-height: 1;
	cursor: pointer;
}
.a11y-close:hover { border-color: #2F5794; color: #2F5794; }

.a11y-scale {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block-end: 0.9rem;
	margin-block-end: 0.9rem;
	border-block-end: 1px solid #D9E2F0;
	font-size: 0.875rem;
	color: #44536E;
}
.a11y-scale__ctl { display: flex; align-items: center; gap: 0.4rem; }
.a11y-scale__ctl button {
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 1px solid #D9E2F0;
	border-radius: 6px;
	background: #FFFFFF;
	color: #2F5794;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}
.a11y-scale__ctl button:hover { border-color: #2F5794; background: #E8EFF9; }
.a11y-scale__val { min-inline-size: 3.2rem; text-align: center; font-size: 0.875rem; font-weight: 700; color: #12203A; }

.a11y-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }

.a11y-opt {
	padding: 0.6rem 0.5rem;
	border: 1px solid #D9E2F0;
	border-radius: 8px;
	background: #FFFFFF;
	color: #44536E;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
	transition: border-color 200ms, background-color 200ms, color 200ms;
}
.a11y-opt:hover { border-color: #2F5794; color: #2F5794; }
/* המצב הפעיל נקרא גם בלי צבע — הגבול מתעבה והמשקל עולה. */
.a11y-opt[aria-pressed="true"] {
	border-color: #2F5794;
	border-width: 2px;
	background: #E8EFF9;
	color: #1D3763;
	font-weight: 700;
}

.a11y-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block-start: 1rem;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid #D9E2F0;
	font-size: 0.8125rem;
}
.a11y-reset {
	padding: 0.42rem 0.8rem;
	border: 1px solid #D9E2F0;
	border-radius: 999px;
	background: #FFFFFF;
	color: #44536E;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}
.a11y-reset:hover { border-color: #C93C24; color: #C93C24; }
.a11y-panel__foot a { color: #2F5794; }

/* --------------------------------------------------------------------------
   מצבי הנגישות — מוחלים כמחלקות על <html>
   -------------------------------------------------------------------------- */

/* ניגודיות גבוהה. נעשה בהצהרות צבע ולא ב-`filter` על השורש — פילטר על
   השורש היה הופך גם את הפאנל עצמו, כלומר את הכלי שבו משתמשים כרגע. */
.a11y-contrast body,
.a11y-contrast .sec,
.a11y-contrast .section { background: #FFFFFF !important; color: #000000 !important; }
.a11y-contrast h1, .a11y-contrast h2, .a11y-contrast h3,
.a11y-contrast h4, .a11y-contrast p,  .a11y-contrast li,
.a11y-contrast dt, .a11y-contrast dd, .a11y-contrast span,
.a11y-contrast summary, .a11y-contrast label { color: #000000 !important; }
.a11y-contrast a { color: #0000CC !important; text-decoration: underline !important; }
.a11y-contrast .hero--cinema,
.a11y-contrast .foot,
.a11y-contrast .figure-panel,
.a11y-contrast .band { background: #000000 !important; }
.a11y-contrast .hero--cinema *,
.a11y-contrast .foot *,
.a11y-contrast .figure-panel *,
.a11y-contrast .band * { color: #FFFFFF !important; }
.a11y-contrast .hero--cinema a,
.a11y-contrast .foot a,
.a11y-contrast .band a { color: #FFFF66 !important; }
.a11y-contrast .cinema__media,
.a11y-contrast .ph > img { opacity: 0.28; }

.a11y-grayscale body { filter: grayscale(1); }

.a11y-links a {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 2px !important;
	font-weight: 700 !important;
}

/* גופן קריא. `!important` נדרש — `--f` מוצהר ברמת ה-body של כל גרסה. */
.a11y-readable body,
.a11y-readable h1, .a11y-readable h2, .a11y-readable h3, .a11y-readable h4,
.a11y-readable p,  .a11y-readable a,  .a11y-readable li, .a11y-readable button,
.a11y-readable input, .a11y-readable select, .a11y-readable label, .a11y-readable summary {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	letter-spacing: 0 !important;
}

/* עצירת אנימציות — כולל אנימציות ציר־גלילה, שהן רוב התנועה באתר. */
.a11y-no-motion *,
.a11y-no-motion *::before,
.a11y-no-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}
.a11y-no-motion video { display: none !important; }

.a11y-big-cursor,
.a11y-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 8 38 16.5 30 22 43 28 40 22.5 27.5 34 27.5Z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* בהדפסה אין מסילות. */
@media print {
	.rail, .a11y-panel { display: none !important; }
}


/* ==========================================================================
   מנוע הכניסות (ג'וני 6.8) — שכבת הבסיס

   motion.js מתייג יעדים ב-data-rv ומרים .rv-in כשהסקשן נכנס למסך.
   ארבעה טיפוסים, אותו ease של המערכת, השתלשלות דרך ‎--rvd (inline).
   אחרי הכניסה האטריביוט מוסר — אפס השפעה על hover וטרנזישנים קיימים.

   שערי בטיחות, לפי הסדר:
   1. הסתרה רק תחת html.rv — הקלאס מוזרם מ-<head> רק כשאין
      prefers-reduced-motion. בלי JS אין קלאס ואין הסתרה.
   2. מתג עצירת התנועה (data-motion="off") ותנועה-כבויה בפאנל הנגישות
      (a11y-no-motion) → הכל גלוי מיד, כולל אלמנטים שכבר תויגו.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html.rv [data-rv] {
		transition:
			opacity 620ms var(--ease),
			transform 620ms var(--ease),
			clip-path 760ms var(--ease);
		transition-delay: var(--rvd, 0ms);
	}
	html.rv [data-rv]:not(.rv-in) { opacity: 0; }
	html.rv [data-rv="lift"]:not(.rv-in) { transform: translateY(26px); }
	html.rv [data-rv="soft"]:not(.rv-in) { transform: translateY(14px); }
	html.rv [data-rv="card"]:not(.rv-in) { transform: translateY(34px) scale(0.985); }

	/* וילון המדיה: clip-path בלבד, בלי fade — הצילום "נמזג" מקצה
	   ההתחלה (ימין ב-RTL). בפריסה הפוכה הווילון מתהפך עם הכיוון. */
	html.rv [data-rv="media"]:not(.rv-in) { opacity: 1; clip-path: inset(0 0 0 100%); }
	html.rv [data-rv="media-flip"]:not(.rv-in) { opacity: 1; clip-path: inset(0 100% 0 0); }
	html.rv [data-rv^="media"].rv-in { clip-path: inset(0 0 0 0); }

	/* הצילום שבתוך הווילון מתיישב מ-1.07 לגודל מלא — עומק בלי רעש. */
	html.rv [data-rv^="media"] > img,
	html.rv [data-rv^="media"] .ph > img {
		transition: transform 1150ms var(--ease);
		transition-delay: var(--rvd, 0ms);
	}
	html.rv [data-rv^="media"]:not(.rv-in) > img,
	html.rv [data-rv^="media"]:not(.rv-in) .ph > img { transform: scale(1.07); }
	html.rv [data-rv^="media"].rv-in > img,
	html.rv [data-rv^="media"].rv-in .ph > img { transform: scale(1); }

	html.rv [data-rv].rv-in { opacity: 1; }
	html.rv [data-rv="lift"].rv-in,
	html.rv [data-rv="soft"].rv-in,
	html.rv [data-rv="card"].rv-in { transform: none; }
}

/* מתג העצירה של האתר + מתג הפאנל — גוברים על כל מצב של המנוע. */
html[data-motion="off"] [data-rv],
html[data-motion="off"] [data-rv] img,
html.rv .a11y-no-motion [data-rv],
html.rv .a11y-no-motion [data-rv] img,
.a11y-no-motion [data-rv],
.a11y-no-motion [data-rv] img {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	transition: none !important;
}